Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
72cc99af
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 搜索 >>
提交
72cc99af
编写于
4月 23, 2021
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Updated examples/js files
上级
a666e660
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
391 addition
and
2 deletion
+391
-2
examples/js/interactive/HTMLMesh.js
examples/js/interactive/HTMLMesh.js
+291
-0
examples/js/interactive/InteractiveGroup.js
examples/js/interactive/InteractiveGroup.js
+100
-0
examples/js/physics/AmmoPhysics.js
examples/js/physics/AmmoPhysics.js
+0
-2
未找到文件。
examples/js/interactive/HTMLMesh.js
0 → 100644
浏览文件 @
72cc99af
(
function
()
{
class
HTMLMesh
extends
THREE
.
Mesh
{
constructor
(
dom
)
{
const
texture
=
new
HTMLTexture
(
dom
);
const
geometry
=
new
THREE
.
PlaneGeometry
(
texture
.
image
.
width
*
0.001
,
texture
.
image
.
height
*
0.001
);
const
material
=
new
THREE
.
MeshBasicMaterial
(
{
map
:
texture
,
toneMapped
:
false
}
);
super
(
geometry
,
material
);
function
onEvent
(
event
)
{
material
.
map
.
dispatchEvent
(
event
);
}
this
.
addEventListener
(
'
mousedown
'
,
onEvent
);
this
.
addEventListener
(
'
mousemove
'
,
onEvent
);
this
.
addEventListener
(
'
mouseup
'
,
onEvent
);
this
.
addEventListener
(
'
click
'
,
onEvent
);
}
}
class
HTMLTexture
extends
THREE
.
CanvasTexture
{
constructor
(
dom
)
{
super
(
html2canvas
(
dom
)
);
this
.
dom
=
dom
;
this
.
anisotropy
=
16
;
this
.
encoding
=
THREE
.
sRGBEncoding
;
this
.
minFilter
=
THREE
.
LinearFilter
;
this
.
magFilter
=
THREE
.
LinearFilter
;
}
dispatchEvent
(
event
)
{
htmlevent
(
this
.
dom
,
event
.
type
,
event
.
data
.
x
,
event
.
data
.
y
);
this
.
update
();
}
update
()
{
this
.
image
=
html2canvas
(
this
.
dom
);
this
.
needsUpdate
=
true
;
}
}
//
function
html2canvas
(
element
)
{
var
range
=
document
.
createRange
();
function
Clipper
(
context
)
{
var
clips
=
[];
var
isClipping
=
false
;
function
doClip
()
{
if
(
isClipping
)
{
isClipping
=
false
;
context
.
restore
();
}
if
(
clips
.
length
===
0
)
return
;
var
minX
=
-
Infinity
,
minY
=
-
Infinity
;
var
maxX
=
Infinity
,
maxY
=
Infinity
;
for
(
var
i
=
0
;
i
<
clips
.
length
;
i
++
)
{
var
clip
=
clips
[
i
];
minX
=
Math
.
max
(
minX
,
clip
.
x
);
minY
=
Math
.
max
(
minY
,
clip
.
y
);
maxX
=
Math
.
min
(
maxX
,
clip
.
x
+
clip
.
width
);
maxY
=
Math
.
min
(
maxY
,
clip
.
y
+
clip
.
height
);
}
context
.
save
();
context
.
beginPath
();
context
.
rect
(
minX
,
minY
,
maxX
-
minX
,
maxY
-
minY
);
context
.
clip
();
isClipping
=
true
;
}
return
{
add
:
function
(
clip
)
{
clips
.
push
(
clip
);
doClip
();
},
remove
:
function
()
{
clips
.
pop
();
doClip
();
}
};
}
function
drawText
(
style
,
x
,
y
,
string
)
{
if
(
string
!==
''
)
{
if
(
style
.
textTransform
===
'
uppercase
'
)
{
string
=
string
.
toUpperCase
();
}
context
.
font
=
style
.
fontSize
+
'
'
+
style
.
fontFamily
;
context
.
textBaseline
=
'
top
'
;
context
.
fillStyle
=
style
.
color
;
context
.
fillText
(
string
,
x
,
y
);
}
}
function
drawBorder
(
style
,
which
,
x
,
y
,
width
,
height
)
{
var
borderWidth
=
style
[
which
+
'
Width
'
];
var
borderStyle
=
style
[
which
+
'
Style
'
];
var
borderColor
=
style
[
which
+
'
Color
'
];
if
(
borderWidth
!==
'
0px
'
&&
borderStyle
!==
'
none
'
&&
borderColor
!==
'
transparent
'
&&
borderColor
!==
'
rgba(0, 0, 0, 0)
'
)
{
context
.
strokeStyle
=
borderColor
;
context
.
beginPath
();
context
.
moveTo
(
x
,
y
);
context
.
lineTo
(
x
+
width
,
y
+
height
);
context
.
stroke
();
}
}
function
drawElement
(
element
,
style
)
{
var
x
=
0
,
y
=
0
,
width
=
0
,
height
=
0
;
if
(
element
.
nodeType
===
3
)
{
// text
range
.
selectNode
(
element
);
var
rect
=
range
.
getBoundingClientRect
();
x
=
rect
.
left
-
offset
.
left
-
0.5
;
y
=
rect
.
top
-
offset
.
top
-
0.5
;
width
=
rect
.
width
;
height
=
rect
.
height
;
drawText
(
style
,
x
,
y
,
element
.
nodeValue
.
trim
()
);
}
else
{
if
(
element
.
style
.
display
===
'
none
'
)
return
;
var
rect
=
element
.
getBoundingClientRect
();
x
=
rect
.
left
-
offset
.
left
-
0.5
;
y
=
rect
.
top
-
offset
.
top
-
0.5
;
width
=
rect
.
width
;
height
=
rect
.
height
;
style
=
window
.
getComputedStyle
(
element
);
var
backgroundColor
=
style
.
backgroundColor
;
if
(
backgroundColor
!==
'
transparent
'
&&
backgroundColor
!==
'
rgba(0, 0, 0, 0)
'
)
{
context
.
fillStyle
=
backgroundColor
;
context
.
fillRect
(
x
,
y
,
width
,
height
);
}
drawBorder
(
style
,
'
borderTop
'
,
x
,
y
,
width
,
0
);
drawBorder
(
style
,
'
borderLeft
'
,
x
,
y
,
0
,
height
);
drawBorder
(
style
,
'
borderBottom
'
,
x
,
y
+
height
,
width
,
0
);
drawBorder
(
style
,
'
borderRight
'
,
x
+
width
,
y
,
0
,
height
);
if
(
element
.
type
===
'
color
'
||
element
.
type
===
'
text
'
)
{
clipper
.
add
(
{
x
:
x
,
y
:
y
,
width
:
width
,
height
:
height
}
);
drawText
(
style
,
x
+
parseInt
(
style
.
paddingLeft
),
y
+
parseInt
(
style
.
paddingTop
),
element
.
value
);
clipper
.
remove
();
}
}
/*
// debug
context.strokeStyle = '#' + Math.random().toString( 16 ).slice( - 3 );
context.strokeRect( x - 0.5, y - 0.5, width + 1, height + 1 );
*/
var
isClipping
=
style
.
overflow
===
'
auto
'
||
style
.
overflow
===
'
hidden
'
;
if
(
isClipping
)
clipper
.
add
(
{
x
:
x
,
y
:
y
,
width
:
width
,
height
:
height
}
);
for
(
var
i
=
0
;
i
<
element
.
childNodes
.
length
;
i
++
)
{
drawElement
(
element
.
childNodes
[
i
],
style
);
}
if
(
isClipping
)
clipper
.
remove
();
}
var
offset
=
element
.
getBoundingClientRect
();
var
canvas
=
document
.
createElement
(
'
canvas
'
);
canvas
.
width
=
offset
.
width
;
canvas
.
height
=
offset
.
height
;
var
context
=
canvas
.
getContext
(
'
2d
'
/*, { alpha: false }*/
);
var
clipper
=
new
Clipper
(
context
);
// console.time( 'drawElement' );
drawElement
(
element
);
// console.timeEnd( 'drawElement' );
return
canvas
;
}
function
htmlevent
(
element
,
event
,
x
,
y
)
{
const
mouseEventInit
=
{
clientX
:
x
*
element
.
offsetWidth
+
element
.
offsetLeft
,
clientY
:
y
*
element
.
offsetHeight
+
element
.
offsetTop
,
view
:
element
.
ownerDocument
.
defaultView
};
window
.
dispatchEvent
(
new
MouseEvent
(
event
,
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
.
dispatchEvent
(
new
MouseEvent
(
event
,
mouseEventInit
)
);
}
for
(
var
i
=
0
;
i
<
element
.
childNodes
.
length
;
i
++
)
{
traverse
(
element
.
childNodes
[
i
]
);
}
}
}
traverse
(
element
);
}
THREE
.
HTMLMesh
=
HTMLMesh
;
}
)();
examples/js/interactive/InteractiveGroup.js
0 → 100644
浏览文件 @
72cc99af
(
function
()
{
const
_pointer
=
new
THREE
.
Vector2
();
const
_event
=
{
type
:
''
,
data
:
_pointer
};
class
InteractiveGroup
extends
THREE
.
Group
{
constructor
(
renderer
,
camera
)
{
super
();
const
scope
=
this
;
const
raycaster
=
new
THREE
.
Raycaster
();
const
tempMatrix
=
new
THREE
.
Matrix4
();
// Pointer Events
const
element
=
renderer
.
domElement
;
function
onPointerEvent
(
event
)
{
event
.
stopPropagation
();
_pointer
.
x
=
event
.
clientX
/
element
.
clientWidth
*
2
-
1
;
_pointer
.
y
=
-
(
event
.
clientY
/
element
.
clientHeight
)
*
2
+
1
;
raycaster
.
setFromCamera
(
_pointer
,
camera
);
const
intersects
=
raycaster
.
intersectObjects
(
scope
.
children
);
if
(
intersects
.
length
>
0
)
{
const
intersection
=
intersects
[
0
];
const
object
=
intersection
.
object
;
const
uv
=
intersection
.
uv
;
_event
.
type
=
event
.
type
;
_event
.
data
.
set
(
uv
.
x
,
1
-
uv
.
y
);
object
.
dispatchEvent
(
_event
);
}
}
element
.
addEventListener
(
'
pointerdown
'
,
onPointerEvent
);
element
.
addEventListener
(
'
pointerup
'
,
onPointerEvent
);
element
.
addEventListener
(
'
pointermove
'
,
onPointerEvent
);
element
.
addEventListener
(
'
mousedown
'
,
onPointerEvent
);
element
.
addEventListener
(
'
mouseup
'
,
onPointerEvent
);
element
.
addEventListener
(
'
mousemove
'
,
onPointerEvent
);
element
.
addEventListener
(
'
click
'
,
onPointerEvent
);
// WebXR Controller Events
// TODO: Dispatch pointerevents too
const
events
=
{
'
move
'
:
'
mousemove
'
,
'
select
'
:
'
click
'
,
'
selectstart
'
:
'
mousedown
'
,
'
selectend
'
:
'
mouseup
'
};
function
onXRControllerEvent
(
event
)
{
const
controller
=
event
.
target
;
tempMatrix
.
identity
().
extractRotation
(
controller
.
matrixWorld
);
raycaster
.
ray
.
origin
.
setFromMatrixPosition
(
controller
.
matrixWorld
);
raycaster
.
ray
.
direction
.
set
(
0
,
0
,
-
1
).
applyMatrix4
(
tempMatrix
);
const
intersections
=
raycaster
.
intersectObjects
(
scope
.
children
);
if
(
intersections
.
length
>
0
)
{
const
intersection
=
intersections
[
0
];
const
object
=
intersection
.
object
;
const
uv
=
intersection
.
uv
;
_event
.
type
=
events
[
event
.
type
];
_event
.
data
.
set
(
uv
.
x
,
1
-
uv
.
y
);
object
.
dispatchEvent
(
_event
);
}
}
const
controller1
=
renderer
.
xr
.
getController
(
0
);
controller1
.
addEventListener
(
'
move
'
,
onXRControllerEvent
);
controller1
.
addEventListener
(
'
select
'
,
onXRControllerEvent
);
controller1
.
addEventListener
(
'
selectstart
'
,
onXRControllerEvent
);
controller1
.
addEventListener
(
'
selectend
'
,
onXRControllerEvent
);
const
controller2
=
renderer
.
xr
.
getController
(
1
);
controller2
.
addEventListener
(
'
move
'
,
onXRControllerEvent
);
controller2
.
addEventListener
(
'
select
'
,
onXRControllerEvent
);
controller2
.
addEventListener
(
'
selectstart
'
,
onXRControllerEvent
);
controller2
.
addEventListener
(
'
selectend
'
,
onXRControllerEvent
);
}
}
THREE
.
InteractiveGroup
=
InteractiveGroup
;
}
)();
examples/js/physics/AmmoPhysics.js
浏览文件 @
72cc99af
...
...
@@ -116,8 +116,6 @@
if
(
mass
>
0
)
{
mesh
.
instanceMatrix
.
setUsage
(
35048
);
// THREE.DynamicDrawUsage = 35048
meshes
.
push
(
mesh
);
meshMap
.
set
(
mesh
,
bodies
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录