Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
25da1655
T
three.js
项目概览
车家大少爷
/
three.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
three.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
25da1655
编写于
6月 07, 2021
作者:
M
Michael Herzog
提交者:
GitHub
6月 07, 2021
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
DragControls: Fully migrate to pointer events. (#21958)
上级
18161943
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
95 addition
and
327 deletion
+95
-327
examples/js/controls/DragControls.js
examples/js/controls/DragControls.js
+49
-176
examples/jsm/controls/DragControls.js
examples/jsm/controls/DragControls.js
+46
-151
未找到文件。
examples/js/controls/DragControls.js
浏览文件 @
25da1655
...
...
@@ -4,7 +4,7 @@
const
_raycaster
=
new
THREE
.
Raycaster
();
const
_
mouse
=
new
THREE
.
Vector2
();
const
_
pointer
=
new
THREE
.
Vector2
();
const
_offset
=
new
THREE
.
Vector3
();
...
...
@@ -35,16 +35,6 @@
_domElement
.
addEventListener
(
'
pointerleave
'
,
onPointerCancel
);
_domElement
.
addEventListener
(
'
touchmove
'
,
onTouchMove
,
{
passive
:
false
}
);
_domElement
.
addEventListener
(
'
touchstart
'
,
onTouchStart
,
{
passive
:
false
}
);
_domElement
.
addEventListener
(
'
touchend
'
,
onTouchEnd
);
}
function
deactivate
()
{
...
...
@@ -57,12 +47,6 @@
_domElement
.
removeEventListener
(
'
pointerleave
'
,
onPointerCancel
);
_domElement
.
removeEventListener
(
'
touchmove
'
,
onTouchMove
);
_domElement
.
removeEventListener
(
'
touchstart
'
,
onTouchStart
);
_domElement
.
removeEventListener
(
'
touchend
'
,
onTouchEnd
);
_domElement
.
style
.
cursor
=
''
;
}
...
...
@@ -81,26 +65,9 @@
function
onPointerMove
(
event
)
{
switch
(
event
.
pointerType
)
{
case
'
mouse
'
:
case
'
pen
'
:
onMouseMove
(
event
);
break
;
// TODO touch
}
}
function
onMouseMove
(
event
)
{
const
rect
=
_domElement
.
getBoundingClientRect
();
_mouse
.
x
=
(
event
.
clientX
-
rect
.
left
)
/
rect
.
width
*
2
-
1
;
_mouse
.
y
=
-
(
(
event
.
clientY
-
rect
.
top
)
/
rect
.
height
)
*
2
+
1
;
updatePointer
(
event
);
_raycaster
.
setFromCamera
(
_
mouse
,
_camera
);
_raycaster
.
setFromCamera
(
_
pointer
,
_camera
);
if
(
_selected
&&
scope
.
enabled
)
{
...
...
@@ -116,78 +83,71 @@
}
);
return
;
}
}
// hover support
_intersections
.
length
=
0
;
_raycaster
.
setFromCamera
(
_mouse
,
_camera
);
if
(
event
.
pointerType
===
'
mouse
'
||
event
.
pointerType
===
'
pen
'
)
{
_raycaster
.
intersectObjects
(
_objects
,
true
,
_intersections
)
;
_intersections
.
length
=
0
;
if
(
_intersections
.
length
>
0
)
{
_raycaster
.
setFromCamera
(
_pointer
,
_camera
);
const
object
=
_intersections
[
0
].
object
;
_raycaster
.
intersectObjects
(
_objects
,
true
,
_intersections
)
;
_plane
.
setFromNormalAndCoplanarPoint
(
_camera
.
getWorldDirection
(
_plane
.
normal
),
_worldPosition
.
setFromMatrixPosition
(
object
.
matrixWorld
)
);
if
(
_intersections
.
length
>
0
)
{
if
(
_hovered
!==
object
&&
_hovered
!==
null
)
{
const
object
=
_intersections
[
0
].
object
;
scope
.
dispatchEvent
(
{
type
:
'
hoveroff
'
,
object
:
_hovered
}
);
_domElement
.
style
.
cursor
=
'
auto
'
;
_hovered
=
null
;
_plane
.
setFromNormalAndCoplanarPoint
(
_camera
.
getWorldDirection
(
_plane
.
normal
),
_worldPosition
.
setFromMatrixPosition
(
object
.
matrixWorld
)
);
}
if
(
_hovered
!==
object
&&
_hovered
!==
null
)
{
if
(
_hovered
!==
object
)
{
scope
.
dispatchEvent
(
{
type
:
'
hoveroff
'
,
object
:
_hovered
}
);
_domElement
.
style
.
cursor
=
'
auto
'
;
_hovered
=
null
;
scope
.
dispatchEvent
(
{
type
:
'
hoveron
'
,
object
:
object
}
);
_domElement
.
style
.
cursor
=
'
pointer
'
;
_hovered
=
object
;
}
}
}
else
{
if
(
_hovered
!==
null
)
{
if
(
_hovered
!==
object
)
{
scope
.
dispatchEvent
(
{
type
:
'
hoveroff
'
,
object
:
_hovered
}
);
_domElement
.
style
.
cursor
=
'
auto
'
;
_hovered
=
null
;
scope
.
dispatchEvent
(
{
type
:
'
hoveron
'
,
object
:
object
}
);
_domElement
.
style
.
cursor
=
'
pointer
'
;
_hovered
=
object
;
}
}
}
}
else
{
}
if
(
_hovered
!==
null
)
{
function
onPointerDown
(
event
)
{
scope
.
dispatchEvent
(
{
type
:
'
hoveroff
'
,
object
:
_hovered
}
);
_domElement
.
style
.
cursor
=
'
auto
'
;
_hovered
=
null
;
switch
(
event
.
pointerType
)
{
}
case
'
mouse
'
:
case
'
pen
'
:
onMouseDown
();
break
;
// TODO touch
}
}
}
function
on
Mouse
Down
()
{
function
on
Pointer
Down
()
{
_domElement
.
style
.
touchAction
=
'
none
'
;
updatePointer
(
event
);
_intersections
.
length
=
0
;
_raycaster
.
setFromCamera
(
_
mouse
,
_camera
);
_raycaster
.
setFromCamera
(
_
pointer
,
_camera
);
_raycaster
.
intersectObjects
(
_objects
,
true
,
_intersections
);
...
...
@@ -195,6 +155,8 @@
_selected
=
scope
.
transformGroup
===
true
?
_objects
[
0
]
:
_intersections
[
0
].
object
;
_plane
.
setFromNormalAndCoplanarPoint
(
_camera
.
getWorldDirection
(
_plane
.
normal
),
_worldPosition
.
setFromMatrixPosition
(
_selected
.
matrixWorld
)
);
if
(
_raycaster
.
ray
.
intersectPlane
(
_plane
,
_intersection
)
)
{
_inverseMatrix
.
copy
(
_selected
.
parent
.
matrixWorld
).
invert
();
...
...
@@ -213,21 +175,7 @@
}
function
onPointerCancel
(
event
)
{
switch
(
event
.
pointerType
)
{
case
'
mouse
'
:
case
'
pen
'
:
onMouseCancel
();
break
;
// TODO touch
}
}
function
onMouseCancel
()
{
function
onPointerCancel
()
{
if
(
_selected
)
{
...
...
@@ -240,93 +188,18 @@
}
_domElement
.
style
.
cursor
=
_hovered
?
'
pointer
'
:
'
auto
'
;
_domElement
.
style
.
touchAction
=
''
;
}
function
onTouchMove
(
event
)
{
function
updatePointer
(
event
)
{
event
.
preventDefault
();
event
=
event
.
changedTouches
[
0
];
const
e
=
event
.
changedTouches
?
event
.
changedTouches
[
0
]
:
event
;
const
rect
=
_domElement
.
getBoundingClientRect
();
_mouse
.
x
=
(
event
.
clientX
-
rect
.
left
)
/
rect
.
width
*
2
-
1
;
_mouse
.
y
=
-
(
(
event
.
clientY
-
rect
.
top
)
/
rect
.
height
)
*
2
+
1
;
_raycaster
.
setFromCamera
(
_mouse
,
_camera
);
if
(
_selected
&&
scope
.
enabled
)
{
if
(
_raycaster
.
ray
.
intersectPlane
(
_plane
,
_intersection
)
)
{
_selected
.
position
.
copy
(
_intersection
.
sub
(
_offset
).
applyMatrix4
(
_inverseMatrix
)
);
}
scope
.
dispatchEvent
(
{
type
:
'
drag
'
,
object
:
_selected
}
);
return
;
}
}
function
onTouchStart
(
event
)
{
event
.
preventDefault
();
event
=
event
.
changedTouches
[
0
];
const
rect
=
_domElement
.
getBoundingClientRect
();
_mouse
.
x
=
(
event
.
clientX
-
rect
.
left
)
/
rect
.
width
*
2
-
1
;
_mouse
.
y
=
-
(
(
event
.
clientY
-
rect
.
top
)
/
rect
.
height
)
*
2
+
1
;
_intersections
.
length
=
0
;
_raycaster
.
setFromCamera
(
_mouse
,
_camera
);
_raycaster
.
intersectObjects
(
_objects
,
true
,
_intersections
);
if
(
_intersections
.
length
>
0
)
{
_selected
=
scope
.
transformGroup
===
true
?
_objects
[
0
]
:
_intersections
[
0
].
object
;
_plane
.
setFromNormalAndCoplanarPoint
(
_camera
.
getWorldDirection
(
_plane
.
normal
),
_worldPosition
.
setFromMatrixPosition
(
_selected
.
matrixWorld
)
);
if
(
_raycaster
.
ray
.
intersectPlane
(
_plane
,
_intersection
)
)
{
_inverseMatrix
.
copy
(
_selected
.
parent
.
matrixWorld
).
invert
();
_offset
.
copy
(
_intersection
).
sub
(
_worldPosition
.
setFromMatrixPosition
(
_selected
.
matrixWorld
)
);
}
_domElement
.
style
.
cursor
=
'
move
'
;
scope
.
dispatchEvent
(
{
type
:
'
dragstart
'
,
object
:
_selected
}
);
}
}
function
onTouchEnd
(
event
)
{
event
.
preventDefault
();
if
(
_selected
)
{
scope
.
dispatchEvent
(
{
type
:
'
dragend
'
,
object
:
_selected
}
);
_selected
=
null
;
}
_domElement
.
style
.
cursor
=
'
auto
'
;
_pointer
.
x
=
(
e
.
clientX
-
rect
.
left
)
/
rect
.
width
*
2
-
1
;
_pointer
.
y
=
-
(
e
.
clientY
-
rect
.
top
)
/
rect
.
height
*
2
+
1
;
}
...
...
examples/jsm/controls/DragControls.js
浏览文件 @
25da1655
...
...
@@ -10,7 +10,7 @@ import {
const
_plane
=
new
Plane
();
const
_raycaster
=
new
Raycaster
();
const
_
mouse
=
new
Vector2
();
const
_
pointer
=
new
Vector2
();
const
_offset
=
new
Vector3
();
const
_intersection
=
new
Vector3
();
const
_worldPosition
=
new
Vector3
();
...
...
@@ -36,9 +36,6 @@ class DragControls extends EventDispatcher {
_domElement
.
addEventListener
(
'
pointerdown
'
,
onPointerDown
);
_domElement
.
addEventListener
(
'
pointerup
'
,
onPointerCancel
);
_domElement
.
addEventListener
(
'
pointerleave
'
,
onPointerCancel
);
_domElement
.
addEventListener
(
'
touchmove
'
,
onTouchMove
,
{
passive
:
false
}
);
_domElement
.
addEventListener
(
'
touchstart
'
,
onTouchStart
,
{
passive
:
false
}
);
_domElement
.
addEventListener
(
'
touchend
'
,
onTouchEnd
);
}
...
...
@@ -48,9 +45,6 @@ class DragControls extends EventDispatcher {
_domElement
.
removeEventListener
(
'
pointerdown
'
,
onPointerDown
);
_domElement
.
removeEventListener
(
'
pointerup
'
,
onPointerCancel
);
_domElement
.
removeEventListener
(
'
pointerleave
'
,
onPointerCancel
);
_domElement
.
removeEventListener
(
'
touchmove
'
,
onTouchMove
);
_domElement
.
removeEventListener
(
'
touchstart
'
,
onTouchStart
);
_domElement
.
removeEventListener
(
'
touchend
'
,
onTouchEnd
);
_domElement
.
style
.
cursor
=
''
;
...
...
@@ -70,29 +64,13 @@ class DragControls extends EventDispatcher {
function
onPointerMove
(
event
)
{
switch
(
event
.
pointerType
)
{
if
(
scope
.
enabled
===
false
)
return
;
case
'
mouse
'
:
case
'
pen
'
:
onMouseMove
(
event
);
break
;
updatePointer
(
event
);
// TODO touch
_raycaster
.
setFromCamera
(
_pointer
,
_camera
);
}
}
function
onMouseMove
(
event
)
{
const
rect
=
_domElement
.
getBoundingClientRect
();
_mouse
.
x
=
(
(
event
.
clientX
-
rect
.
left
)
/
rect
.
width
)
*
2
-
1
;
_mouse
.
y
=
-
(
(
event
.
clientY
-
rect
.
top
)
/
rect
.
height
)
*
2
+
1
;
_raycaster
.
setFromCamera
(
_mouse
,
_camera
);
if
(
_selected
&&
scope
.
enabled
)
{
if
(
_selected
)
{
if
(
_raycaster
.
ray
.
intersectPlane
(
_plane
,
_intersection
)
)
{
...
...
@@ -106,76 +84,75 @@ class DragControls extends EventDispatcher {
}
_intersections
.
length
=
0
;
// hover support
_raycaster
.
setFromCamera
(
_mouse
,
_camera
);
_raycaster
.
intersectObjects
(
_objects
,
true
,
_intersections
);
if
(
event
.
pointerType
===
'
mouse
'
||
event
.
pointerType
===
'
pen
'
)
{
if
(
_intersections
.
length
>
0
)
{
_intersections
.
length
=
0
;
const
object
=
_intersections
[
0
].
object
;
_raycaster
.
setFromCamera
(
_pointer
,
_camera
);
_raycaster
.
intersectObjects
(
_objects
,
true
,
_intersections
);
_plane
.
setFromNormalAndCoplanarPoint
(
_camera
.
getWorldDirection
(
_plane
.
normal
),
_worldPosition
.
setFromMatrixPosition
(
object
.
matrixWorld
)
);
if
(
_intersections
.
length
>
0
)
{
if
(
_hovered
!==
object
&&
_hovered
!==
null
)
{
const
object
=
_intersections
[
0
].
object
;
scope
.
dispatchEvent
(
{
type
:
'
hoveroff
'
,
object
:
_hovered
}
);
_plane
.
setFromNormalAndCoplanarPoint
(
_camera
.
getWorldDirection
(
_plane
.
normal
),
_worldPosition
.
setFromMatrixPosition
(
object
.
matrixWorld
)
);
_domElement
.
style
.
cursor
=
'
auto
'
;
_hovered
=
null
;
if
(
_hovered
!==
object
&&
_hovered
!==
null
)
{
}
scope
.
dispatchEvent
(
{
type
:
'
hoveroff
'
,
object
:
_hovered
}
);
if
(
_hovered
!==
object
)
{
_domElement
.
style
.
cursor
=
'
auto
'
;
_hovered
=
null
;
scope
.
dispatchEvent
(
{
type
:
'
hoveron
'
,
object
:
object
}
);
}
_domElement
.
style
.
cursor
=
'
pointer
'
;
_hovered
=
object
;
if
(
_hovered
!==
object
)
{
}
scope
.
dispatchEvent
(
{
type
:
'
hoveron
'
,
object
:
object
}
);
}
else
{
_domElement
.
style
.
cursor
=
'
pointer
'
;
_hovered
=
object
;
if
(
_hovered
!==
null
)
{
}
scope
.
dispatchEvent
(
{
type
:
'
hoveroff
'
,
object
:
_hovered
}
);
}
else
{
_domElement
.
style
.
cursor
=
'
auto
'
;
_hovered
=
null
;
if
(
_hovered
!==
null
)
{
}
scope
.
dispatchEvent
(
{
type
:
'
hoveroff
'
,
object
:
_hovered
}
);
}
_domElement
.
style
.
cursor
=
'
auto
'
;
_hovered
=
null
;
}
}
function
onPointerDown
(
event
)
{
}
switch
(
event
.
pointerType
)
{
}
case
'
mouse
'
:
case
'
pen
'
:
onMouseDown
();
break
;
}
// TODO touch
function
onPointerDown
()
{
}
if
(
scope
.
enabled
===
false
)
return
;
}
_domElement
.
style
.
touchAction
=
'
none
'
;
function
onMouseDown
()
{
updatePointer
(
event
);
_intersections
.
length
=
0
;
_raycaster
.
setFromCamera
(
_
mouse
,
_camera
);
_raycaster
.
setFromCamera
(
_
pointer
,
_camera
);
_raycaster
.
intersectObjects
(
_objects
,
true
,
_intersections
);
if
(
_intersections
.
length
>
0
)
{
_selected
=
(
scope
.
transformGroup
===
true
)
?
_objects
[
0
]
:
_intersections
[
0
].
object
;
_plane
.
setFromNormalAndCoplanarPoint
(
_camera
.
getWorldDirection
(
_plane
.
normal
),
_worldPosition
.
setFromMatrixPosition
(
_selected
.
matrixWorld
)
);
if
(
_raycaster
.
ray
.
intersectPlane
(
_plane
,
_intersection
)
)
{
_inverseMatrix
.
copy
(
_selected
.
parent
.
matrixWorld
).
invert
();
...
...
@@ -192,22 +169,9 @@ class DragControls extends EventDispatcher {
}
function
onPointerCancel
(
event
)
{
switch
(
event
.
pointerType
)
{
function
onPointerCancel
()
{
case
'
mouse
'
:
case
'
pen
'
:
onMouseCancel
();
break
;
// TODO touch
}
}
function
onMouseCancel
()
{
if
(
scope
.
enabled
===
false
)
return
;
if
(
_selected
)
{
...
...
@@ -218,87 +182,18 @@ class DragControls extends EventDispatcher {
}
_domElement
.
style
.
cursor
=
_hovered
?
'
pointer
'
:
'
auto
'
;
_domElement
.
style
.
touchAction
=
''
;
}
function
onTouchMove
(
event
)
{
function
updatePointer
(
event
)
{
event
.
preventDefault
();
event
=
event
.
changedTouches
[
0
];
const
e
=
event
.
changedTouches
?
event
.
changedTouches
[
0
]
:
event
;
const
rect
=
_domElement
.
getBoundingClientRect
();
_mouse
.
x
=
(
(
event
.
clientX
-
rect
.
left
)
/
rect
.
width
)
*
2
-
1
;
_mouse
.
y
=
-
(
(
event
.
clientY
-
rect
.
top
)
/
rect
.
height
)
*
2
+
1
;
_raycaster
.
setFromCamera
(
_mouse
,
_camera
);
if
(
_selected
&&
scope
.
enabled
)
{
if
(
_raycaster
.
ray
.
intersectPlane
(
_plane
,
_intersection
)
)
{
_selected
.
position
.
copy
(
_intersection
.
sub
(
_offset
).
applyMatrix4
(
_inverseMatrix
)
);
}
scope
.
dispatchEvent
(
{
type
:
'
drag
'
,
object
:
_selected
}
);
return
;
}
}
function
onTouchStart
(
event
)
{
event
.
preventDefault
();
event
=
event
.
changedTouches
[
0
];
const
rect
=
_domElement
.
getBoundingClientRect
();
_mouse
.
x
=
(
(
event
.
clientX
-
rect
.
left
)
/
rect
.
width
)
*
2
-
1
;
_mouse
.
y
=
-
(
(
event
.
clientY
-
rect
.
top
)
/
rect
.
height
)
*
2
+
1
;
_intersections
.
length
=
0
;
_raycaster
.
setFromCamera
(
_mouse
,
_camera
);
_raycaster
.
intersectObjects
(
_objects
,
true
,
_intersections
);
if
(
_intersections
.
length
>
0
)
{
_selected
=
(
scope
.
transformGroup
===
true
)
?
_objects
[
0
]
:
_intersections
[
0
].
object
;
_plane
.
setFromNormalAndCoplanarPoint
(
_camera
.
getWorldDirection
(
_plane
.
normal
),
_worldPosition
.
setFromMatrixPosition
(
_selected
.
matrixWorld
)
);
if
(
_raycaster
.
ray
.
intersectPlane
(
_plane
,
_intersection
)
)
{
_inverseMatrix
.
copy
(
_selected
.
parent
.
matrixWorld
).
invert
();
_offset
.
copy
(
_intersection
).
sub
(
_worldPosition
.
setFromMatrixPosition
(
_selected
.
matrixWorld
)
);
}
_domElement
.
style
.
cursor
=
'
move
'
;
scope
.
dispatchEvent
(
{
type
:
'
dragstart
'
,
object
:
_selected
}
);
}
}
function
onTouchEnd
(
event
)
{
event
.
preventDefault
();
if
(
_selected
)
{
scope
.
dispatchEvent
(
{
type
:
'
dragend
'
,
object
:
_selected
}
);
_selected
=
null
;
}
_domElement
.
style
.
cursor
=
'
auto
'
;
_pointer
.
x
=
(
e
.
clientX
-
rect
.
left
)
/
rect
.
width
*
2
-
1
;
_pointer
.
y
=
-
(
e
.
clientY
-
rect
.
top
)
/
rect
.
height
*
2
+
1
;
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录