Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
77c2e001
T
three.js
项目概览
Ablesons
/
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,体验更适合开发者的 AI 搜索 >>
提交
77c2e001
编写于
2月 24, 2021
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Editor: Implemented clicking HTML from inside VR
上级
068f7c15
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
107 addition
and
0 deletion
+107
-0
editor/js/Viewport.VR.js
editor/js/Viewport.VR.js
+57
-0
editor/js/libs/three.html.js
editor/js/libs/three.html.js
+50
-0
未找到文件。
editor/js/Viewport.VR.js
浏览文件 @
77c2e001
...
@@ -15,6 +15,8 @@ class VR {
...
@@ -15,6 +15,8 @@ class VR {
let
camera
=
null
;
let
camera
=
null
;
let
renderer
=
null
;
let
renderer
=
null
;
const
intersectables
=
[];
this
.
currentSession
=
null
;
this
.
currentSession
=
null
;
const
onSessionStarted
=
async
(
session
)
=>
{
const
onSessionStarted
=
async
(
session
)
=>
{
...
@@ -29,6 +31,24 @@ class VR {
...
@@ -29,6 +31,24 @@ class VR {
mesh
.
rotation
.
y
=
-
0.5
;
mesh
.
rotation
.
y
=
-
0.5
;
group
.
add
(
mesh
);
group
.
add
(
mesh
);
intersectables
.
push
(
mesh
);
// controllers
const
controller1
=
renderer
.
xr
.
getController
(
0
);
controller1
.
addEventListener
(
'
select
'
,
onSelect
);
group
.
add
(
controller1
);
const
controller2
=
renderer
.
xr
.
getController
(
1
);
controller2
.
addEventListener
(
'
selectstart
'
,
onSelect
);
group
.
add
(
controller2
);
const
geometry
=
new
THREE
.
BufferGeometry
();
geometry
.
setFromPoints
(
[
new
THREE
.
Vector3
(
0
,
0
,
0
),
new
THREE
.
Vector3
(
0
,
0
,
-
5
)
]
);
controller1
.
add
(
new
THREE
.
Line
(
geometry
)
);
controller2
.
add
(
new
THREE
.
Line
(
geometry
)
);
//
//
const
controllerModelFactory
=
new
XRControllerModelFactory
();
const
controllerModelFactory
=
new
XRControllerModelFactory
();
...
@@ -69,6 +89,43 @@ class VR {
...
@@ -69,6 +89,43 @@ class VR {
};
};
//
function
onSelect
(
event
)
{
const
controller
=
event
.
target
;
const
intersections
=
getIntersections
(
controller
);
if
(
intersections
.
length
>
0
)
{
const
intersection
=
intersections
[
0
];
const
object
=
intersection
.
object
;
const
uv
=
intersection
.
uv
;
object
.
material
.
map
.
click
(
uv
.
x
,
1
-
uv
.
y
);
}
}
const
raycaster
=
new
THREE
.
Raycaster
();
const
tempMatrix
=
new
THREE
.
Matrix4
();
function
getIntersections
(
controller
)
{
tempMatrix
.
identity
().
extractRotation
(
controller
.
matrixWorld
);
raycaster
.
ray
.
origin
.
setFromMatrixPosition
(
controller
.
matrixWorld
);
raycaster
.
ray
.
direction
.
set
(
0
,
0
,
-
1
).
applyMatrix4
(
tempMatrix
);
return
raycaster
.
intersectObjects
(
intersectables
);
}
// signals
signals
.
toggleVR
.
add
(
()
=>
{
signals
.
toggleVR
.
add
(
()
=>
{
if
(
this
.
currentSession
===
null
)
{
if
(
this
.
currentSession
===
null
)
{
...
...
editor/js/libs/three.html.js
浏览文件 @
77c2e001
...
@@ -33,6 +33,14 @@ class HTMLTexture extends CanvasTexture {
...
@@ -33,6 +33,14 @@ class HTMLTexture extends CanvasTexture {
}
}
click
(
x
,
y
)
{
htmlclick
(
this
.
dom
,
x
,
y
);
this
.
update
();
}
update
()
{
update
()
{
this
.
image
=
html2canvas
(
this
.
dom
);
this
.
image
=
html2canvas
(
this
.
dom
);
...
@@ -234,4 +242,46 @@ function html2canvas( element ) {
...
@@ -234,4 +242,46 @@ function html2canvas( element ) {
}
}
function
htmlclick
(
element
,
x
,
y
)
{
/*
const mouseEventInit = {
clientX: ( x * element.offsetWidth ) + element.offsetLeft,
clientY: ( y * element.offsetHeight ) + element.offsetTop,
view: element.ownerDocument.defaultView
};
element.dispatchEvent( new MouseEvent( 'click', mouseEventInit ) );
*/
const
rect
=
element
.
getBoundingClientRect
();
x
=
x
*
rect
.
width
+
rect
.
left
;
y
=
y
*
rect
.
height
+
rect
.
top
;
function
traverse
(
element
)
{
if
(
element
.
nodeType
!==
3
)
{
const
rect
=
element
.
getBoundingClientRect
();
if
(
x
>
rect
.
left
&&
x
<
rect
.
right
&&
y
>
rect
.
top
&&
y
<
rect
.
bottom
)
{
element
.
click
();
}
for
(
var
i
=
0
;
i
<
element
.
childNodes
.
length
;
i
++
)
{
traverse
(
element
.
childNodes
[
i
]
);
}
}
}
traverse
(
element
);
}
export
{
HTMLMesh
,
HTMLTexture
};
export
{
HTMLMesh
,
HTMLTexture
};
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录