Browse Source

fix as OrbitControls switched to using pointer events

Gregg Tavares 4 years ago
parent
commit
5b93664c06

+ 9 - 5
threejs/lessons/ja/threejs-offscreencanvas.md

@@ -616,16 +616,16 @@ OrbitControlsが必要とする機能をサポートする必要があります
 [OrbitControlsのソースコード](https://github.com/gfxfundamentals/threejsfundamentals/blob/master/threejs/resources/threejs/r125/examples/js/controls/OrbitControls.js)を掘り下げてみると、次のイベントを処理する必要があるように見えます。
 
 * contextmenu
-* mousedown
-* mousemove
-* mouseup
+* pointerdown
+* pointermove
+* pointerup
 * touchstart
 * touchmove
 * touchend
 * wheel
 * keydown
 
-マウスイベントには `ctrlKey`、 `metaKey`、 `shiftKey`、 `button`、 `clientX`、 `clientY`、 `pageX`、 `pageY` プロパティが必要です。
+マウスイベントには `ctrlKey`、 `metaKey`、 `shiftKey`、 `button`、 `pointerType`、 `clientX`、 `clientY`、 `pageX`、 `pageY` プロパティが必要です。
 
 キーダウンイベントには `ctrlKey`, `metaKey`, `shiftKey`, `keyCode` プロパティが必要です。
 
@@ -834,6 +834,9 @@ function startWorker(canvas) {
 +    mousedown: mouseEventHandler,
 +    mousemove: mouseEventHandler,
 +    mouseup: mouseEventHandler,
++    pointerdown: mouseEventHandler,
++    pointermove: mouseEventHandler,
++    pointerup: mouseEventHandler,
 +    touchstart: touchEventHandler,
 +    touchmove: touchEventHandler,
 +    touchend: touchEventHandler,
@@ -861,6 +864,7 @@ const mouseEventHandler = makeSendPropertiesHandler([
   'metaKey',
   'shiftKey',
   'button',
+  'pointerType',
   'clientX',
   'clientY',
   'pageX',
@@ -1094,7 +1098,7 @@ function render(time) {
 ```
 
 他にもいくつかのハックがあります。
-OrbitControlsは `mousemove` と `mouseup` イベントをマウスキャプチャ(マウスがウィンドウの外に出た時)を処理するための要素の `ownerDocument` です。
+OrbitControlsは `pointermove` と `pointerup` イベントをマウスキャプチャ(マウスがウィンドウの外に出た時)を処理するための要素の `ownerDocument` です。
 
 さらにコードはグローバルな `document` を参照していますが、Workerにはグローバルなdocumentはありません。
 

+ 9 - 5
threejs/lessons/kr/threejs-offscreencanvas.md

@@ -575,16 +575,16 @@ window.addEventListener('touchend', clearPickPosition);
 [`OrbitControls`의 소스 코드](https://github.com/gfxfundamentals/threejsfundamentals/blob/master/threejs/resources/threejs/r125/examples/js/controls/OrbitControls.js)를 분석해보니 아래의 이벤트만 지원하면 될 듯합니다.
 
 * contextmenu
-* mousedown
-* mousemove
-* mouseup
+* pointerdown
+* pointermove
+* pointerup
 * touchstart
 * touchmove
 * touchend
 * wheel
 * keydown
 
-마우스 이벤트 중 `OrbitControls`가 사용하는 속성은 `ctrlKey`, `metaKey`, `shiftKey`, `button`, `clientX`, `clientY`, `pageX`, `pageY`이고,
+마우스 이벤트 중 `OrbitControls`가 사용하는 속성은 `ctrlKey`, `metaKey`, `shiftKey`, `button`, `pointerType`, `clientX`, `clientY`, `pageX`, `pageY`이고,
 
 keydown 이벤트의 경우는 `ctrlKey`, `metaKey`, `shiftKey`, `keyCode` 속성,
 
@@ -785,6 +785,9 @@ function startWorker(canvas) {
 +    mousedown: mouseEventHandler,
 +    mousemove: mouseEventHandler,
 +    mouseup: mouseEventHandler,
++    pointerdown: mouseEventHandler,
++    pointermove: mouseEventHandler,
++    pointerup: mouseEventHandler,
 +    touchstart: touchEventHandler,
 +    touchmove: touchEventHandler,
 +    touchend: touchEventHandler,
@@ -809,6 +812,7 @@ const mouseEventHandler = makeSendPropertiesHandler([
   'metaKey',
   'shiftKey',
   'button',
+  'pointerType',
   'clientX',
   'clientY',
   'pageX',
@@ -1037,7 +1041,7 @@ function render(time) {
   ...
 ```
 
-`OrbitControls`는 마우스 이벤트를 감지하기 위해 해당 요소의 `ownerDocument`에 `mousemove`와 `mouseup` 리스너를 추가합니다(마우스가 창 밖으로 나갔을 경우를 위해).
+`OrbitControls`는 마우스 이벤트를 감지하기 위해 해당 요소의 `ownerDocument`에 `pointermove`와 `pointerup` 리스너를 추가합니다(마우스가 창 밖으로 나갔을 경우를 위해).
 
 또한 코드는 전역 `document` 객체를 참조하지만 워커에는 전역 `document` 객체가 없습니다.
 

+ 9 - 5
threejs/lessons/ru/threejs-offscreencanvas.md

@@ -622,9 +622,9 @@ window.addEventListener('touchend', clearPickPosition);
 
 
 * contextmenu
-* mousedown
-* mousemove
-* mouseup
+* pointerdown
+* pointermove
+* pointerup
 * touchstart
 * touchmove
 * touchend
@@ -632,7 +632,7 @@ window.addEventListener('touchend', clearPickPosition);
 * keydown
 
 Для событий мыши нам нужны свойства  `ctrlKey`, `metaKey`, `shiftKey`, 
-`button`, `clientX`, `clientY`, `pageX`, и `pageY`.
+`button`, `pointerType`, `clientX`, `clientY`, `pageX`, и `pageY`.
 
 Для событий нажатия клавиатуры нам нужны свойства  `ctrlKey`, `metaKey`, `shiftKey`, 
 и `keyCode`.
@@ -838,6 +838,9 @@ function startWorker(canvas) {
 +    mousedown: mouseEventHandler,
 +    mousemove: mouseEventHandler,
 +    mouseup: mouseEventHandler,
++    pointerdown: mouseEventHandler,
++    pointermove: mouseEventHandler,
++    pointerup: mouseEventHandler,
 +    touchstart: touchEventHandler,
 +    touchmove: touchEventHandler,
 +    touchend: touchEventHandler,
@@ -862,6 +865,7 @@ const mouseEventHandler = makeSendPropertiesHandler([
   'metaKey',
   'shiftKey',
   'button',
+  'pointerType',
   'clientX',
   'clientY',
   'pageX',
@@ -1095,7 +1099,7 @@ function render(time) {
 ```
 
 
-Еще несколько приемов. `OrbitControls` добавляют события `mousemove` и `mouseup` в `ownerDocument` элемента для обработки захвата мыши (когда мышь выходит за пределы окна).
+Еще несколько приемов. `OrbitControls` добавляют события `pointermove` и `pointerup` в `ownerDocument` элемента для обработки захвата мыши (когда мышь выходит за пределы окна).
 
 Далее код ссылается на глобальный `document`, но в воркере нет глобального документа.
 

+ 11 - 7
threejs/lessons/threejs-offscreencanvas.md

@@ -648,22 +648,22 @@ Digging through the [OrbitControls source code](https://github.com/gfxfundamenta
 it looks like we need to handle the following events.
 
 * contextmenu
-* mousedown
-* mousemove
-* mouseup
+* pointerdown
+* pointermove
+* pointerup
 * touchstart
 * touchmove
 * touchend
 * wheel
 * keydown
 
-For the mouse events we need the `ctrlKey`, `metaKey`, `shiftKey`, 
-`button`, `clientX`, `clientY`, `pageX`, and `pageY`, properties
+For the pointer events we need the `ctrlKey`, `metaKey`, `shiftKey`, 
+`button`, `pointerType`, `clientX`, `clientY`, `pageX`, and `pageY`, properties.
 
 For the keydown events we need the `ctrlKey`, `metaKey`, `shiftKey`, 
 and `keyCode` properties.
 
-For the wheel event we only need the `deltaY` property
+For the wheel event we only need the `deltaY` property.
 
 And for the touch events we only need `pageX` and `pageY` from
 the `touches` property.
@@ -882,6 +882,9 @@ function startWorker(canvas) {
 +    mousedown: mouseEventHandler,
 +    mousemove: mouseEventHandler,
 +    mouseup: mouseEventHandler,
++    pointerdown: mouseEventHandler,
++    pointermove: mouseEventHandler,
++    pointerup: mouseEventHandler,
 +    touchstart: touchEventHandler,
 +    touchmove: touchEventHandler,
 +    touchend: touchEventHandler,
@@ -908,6 +911,7 @@ const mouseEventHandler = makeSendPropertiesHandler([
   'metaKey',
   'shiftKey',
   'button',
+  'pointerType',
   'clientX',
   'clientY',
   'pageX',
@@ -1143,7 +1147,7 @@ function render(time) {
   ...
 ```
 
-A few more hacks. The OrbitControls add `mousemove` and `mouseup` events to the
+A few more hacks. The OrbitControls add `pointermove` and `pointerup` events to the
 `ownerDocument` of the element to handle mouse capture (when the mouse goes
 outside the window).
 

+ 4 - 0
threejs/threejs-offscreencanvas-w-orbitcontrols.html

@@ -31,6 +31,7 @@ const mouseEventHandler = makeSendPropertiesHandler([
   'metaKey',
   'shiftKey',
   'button',
+  'pointerType',
   'clientX',
   'clientY',
   'pageX',
@@ -149,6 +150,9 @@ function startWorker(canvas) {
     mousedown: mouseEventHandler,
     mousemove: mouseEventHandler,
     mouseup: mouseEventHandler,
+    pointerdown: mouseEventHandler,
+    pointermove: mouseEventHandler,
+    pointerup: mouseEventHandler,
     touchstart: touchEventHandler,
     touchmove: touchEventHandler,
     touchend: touchEventHandler,