Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
1e9605b7
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,发现更多精彩内容 >>
提交
1e9605b7
编写于
4月 25, 2019
作者:
F
Fernando Serrano
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Introduce supportsMultiview on Material. Fix shadows with multiview enabled
上级
5c1e9abd
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
296 addition
and
6 deletion
+296
-6
examples/webvr_dragging_multiview.html
examples/webvr_dragging_multiview.html
+287
-0
src/materials/Material.js
src/materials/Material.js
+1
-0
src/renderers/WebGLRenderer.js
src/renderers/WebGLRenderer.js
+2
-2
src/renderers/webgl/WebGLProgram.js
src/renderers/webgl/WebGLProgram.js
+4
-4
src/renderers/webgl/WebGLShadowMap.js
src/renderers/webgl/WebGLShadowMap.js
+2
-0
未找到文件。
examples/webvr_dragging_multiview.html
0 → 100644
浏览文件 @
1e9605b7
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webvr - dragging
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0, user-scalable=no"
>
<style>
body
{
font-family
:
Monospace
;
background-color
:
#101010
;
color
:
#fff
;
margin
:
0px
;
overflow
:
hidden
;
}
a
{
color
:
#f00
;
}
</style>
</head>
<body>
<script
src=
"../build/three.js"
></script>
<script
src=
"js/vr/WebVR.js"
></script>
<script>
var
container
;
var
camera
,
scene
,
renderer
;
var
controller1
,
controller2
;
var
raycaster
,
intersected
=
[];
var
tempMatrix
=
new
THREE
.
Matrix4
();
var
group
;
init
();
animate
();
function
init
()
{
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
var
info
=
document
.
createElement
(
'
div
'
);
info
.
style
.
position
=
'
absolute
'
;
info
.
style
.
top
=
'
10px
'
;
info
.
style
.
width
=
'
100%
'
;
info
.
style
.
textAlign
=
'
center
'
;
info
.
innerHTML
=
'
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - dragging
'
;
container
.
appendChild
(
info
);
scene
=
new
THREE
.
Scene
();
scene
.
background
=
new
THREE
.
Color
(
0x808080
);
camera
=
new
THREE
.
PerspectiveCamera
(
70
,
window
.
innerWidth
/
window
.
innerHeight
,
0.1
,
10
);
var
geometry
=
new
THREE
.
PlaneBufferGeometry
(
4
,
4
);
var
material
=
new
THREE
.
MeshStandardMaterial
(
{
color
:
0xeeeeee
,
roughness
:
1.0
,
metalness
:
0.0
}
);
var
floor
=
new
THREE
.
Mesh
(
geometry
,
material
);
floor
.
rotation
.
x
=
-
Math
.
PI
/
2
;
floor
.
receiveShadow
=
true
;
scene
.
add
(
floor
);
scene
.
add
(
new
THREE
.
HemisphereLight
(
0x808080
,
0x606060
)
);
var
light
=
new
THREE
.
DirectionalLight
(
0xffffff
);
light
.
position
.
set
(
0
,
6
,
0
);
light
.
castShadow
=
true
;
light
.
shadow
.
camera
.
top
=
2
;
light
.
shadow
.
camera
.
bottom
=
-
2
;
light
.
shadow
.
camera
.
right
=
2
;
light
.
shadow
.
camera
.
left
=
-
2
;
light
.
shadow
.
mapSize
.
set
(
4096
,
4096
);
scene
.
add
(
light
);
group
=
new
THREE
.
Group
();
scene
.
add
(
group
);
var
geometries
=
[
new
THREE
.
BoxBufferGeometry
(
0.2
,
0.2
,
0.2
),
new
THREE
.
ConeBufferGeometry
(
0.2
,
0.2
,
64
),
new
THREE
.
CylinderBufferGeometry
(
0.2
,
0.2
,
0.2
,
64
),
new
THREE
.
IcosahedronBufferGeometry
(
0.2
,
3
),
new
THREE
.
TorusBufferGeometry
(
0.2
,
0.04
,
64
,
32
)
];
for
(
var
i
=
0
;
i
<
200
;
i
++
)
{
var
geometry
=
geometries
[
Math
.
floor
(
Math
.
random
()
*
geometries
.
length
)
];
var
material
=
new
THREE
.
MeshStandardMaterial
(
{
color
:
Math
.
random
()
*
0xffffff
,
roughness
:
0.7
,
metalness
:
0.0
}
);
var
object
=
new
THREE
.
Mesh
(
geometry
,
material
);
object
.
position
.
x
=
Math
.
random
()
*
4
-
2
;
object
.
position
.
y
=
Math
.
random
()
*
2
;
object
.
position
.
z
=
Math
.
random
()
*
4
-
2
;
object
.
rotation
.
x
=
Math
.
random
()
*
2
*
Math
.
PI
;
object
.
rotation
.
y
=
Math
.
random
()
*
2
*
Math
.
PI
;
object
.
rotation
.
z
=
Math
.
random
()
*
2
*
Math
.
PI
;
object
.
scale
.
setScalar
(
Math
.
random
()
+
0.5
);
object
.
castShadow
=
true
;
object
.
receiveShadow
=
true
;
group
.
add
(
object
);
}
//
var
canvas
=
document
.
createElement
(
'
canvas
'
);
var
context
=
canvas
.
getContext
(
'
webgl2
'
,
{
antialias
:
false
}
);
renderer
=
new
THREE
.
WebGLRenderer
(
{
canvas
:
canvas
,
context
:
context
,
multiview
:
true
}
);
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
gammaInput
=
true
;
renderer
.
gammaOutput
=
true
;
renderer
.
shadowMap
.
enabled
=
true
;
renderer
.
vr
.
enabled
=
true
;
container
.
appendChild
(
renderer
.
domElement
);
document
.
body
.
appendChild
(
WEBVR
.
createButton
(
renderer
)
);
// controllers
controller1
=
renderer
.
vr
.
getController
(
0
);
controller1
.
addEventListener
(
'
selectstart
'
,
onSelectStart
);
controller1
.
addEventListener
(
'
selectend
'
,
onSelectEnd
);
scene
.
add
(
controller1
);
controller2
=
renderer
.
vr
.
getController
(
1
);
controller2
.
addEventListener
(
'
selectstart
'
,
onSelectStart
);
controller2
.
addEventListener
(
'
selectend
'
,
onSelectEnd
);
scene
.
add
(
controller2
);
//
var
geometry
=
new
THREE
.
BufferGeometry
().
setFromPoints
(
[
new
THREE
.
Vector3
(
0
,
0
,
0
),
new
THREE
.
Vector3
(
0
,
0
,
-
1
)
]
);
var
line
=
new
THREE
.
Line
(
geometry
);
line
.
name
=
'
line
'
;
line
.
scale
.
z
=
5
;
controller1
.
add
(
line
.
clone
()
);
controller2
.
add
(
line
.
clone
()
);
raycaster
=
new
THREE
.
Raycaster
();
//
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
function
onWindowResize
()
{
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
}
function
onSelectStart
(
event
)
{
var
controller
=
event
.
target
;
var
intersections
=
getIntersections
(
controller
);
if
(
intersections
.
length
>
0
)
{
var
intersection
=
intersections
[
0
];
tempMatrix
.
getInverse
(
controller
.
matrixWorld
);
var
object
=
intersection
.
object
;
object
.
matrix
.
premultiply
(
tempMatrix
);
object
.
matrix
.
decompose
(
object
.
position
,
object
.
quaternion
,
object
.
scale
);
object
.
material
.
emissive
.
b
=
1
;
controller
.
add
(
object
);
controller
.
userData
.
selected
=
object
;
}
}
function
onSelectEnd
(
event
)
{
var
controller
=
event
.
target
;
if
(
controller
.
userData
.
selected
!==
undefined
)
{
var
object
=
controller
.
userData
.
selected
;
object
.
matrix
.
premultiply
(
controller
.
matrixWorld
);
object
.
matrix
.
decompose
(
object
.
position
,
object
.
quaternion
,
object
.
scale
);
object
.
material
.
emissive
.
b
=
0
;
group
.
add
(
object
);
controller
.
userData
.
selected
=
undefined
;
}
}
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
(
group
.
children
);
}
function
intersectObjects
(
controller
)
{
// Do not highlight when already selected
if
(
controller
.
userData
.
selected
!==
undefined
)
return
;
var
line
=
controller
.
getObjectByName
(
'
line
'
);
var
intersections
=
getIntersections
(
controller
);
if
(
intersections
.
length
>
0
)
{
var
intersection
=
intersections
[
0
];
var
object
=
intersection
.
object
;
object
.
material
.
emissive
.
r
=
1
;
intersected
.
push
(
object
);
line
.
scale
.
z
=
intersection
.
distance
;
}
else
{
line
.
scale
.
z
=
5
;
}
}
function
cleanIntersected
()
{
while
(
intersected
.
length
)
{
var
object
=
intersected
.
pop
();
object
.
material
.
emissive
.
r
=
0
;
}
}
//
function
animate
()
{
renderer
.
setAnimationLoop
(
render
);
}
function
render
()
{
cleanIntersected
();
intersectObjects
(
controller1
);
intersectObjects
(
controller2
);
renderer
.
render
(
scene
,
camera
);
}
</script>
</body>
</html>
src/materials/Material.js
浏览文件 @
1e9605b7
...
...
@@ -71,6 +71,7 @@ function Material() {
this
.
visible
=
true
;
this
.
toneMapped
=
true
;
this
.
supportsMultiview
=
true
;
this
.
userData
=
{};
...
...
src/renderers/WebGLRenderer.js
浏览文件 @
1e9605b7
...
...
@@ -1733,7 +1733,7 @@ function WebGLRenderer( parameters ) {
if
(
refreshProgram
||
_currentCamera
!==
camera
)
{
if
(
multiview
.
isEnabled
()
)
{
if
(
m
aterial
.
supportsMultiview
&&
m
ultiview
.
isEnabled
()
)
{
if
(
camera
.
isArrayCamera
)
{
...
...
@@ -1798,7 +1798,7 @@ function WebGLRenderer( parameters ) {
material
.
isShaderMaterial
||
material
.
skinning
)
{
if
(
multiview
.
isEnabled
()
)
{
if
(
m
aterial
.
supportsMultiview
&&
m
ultiview
.
isEnabled
()
)
{
if
(
camera
.
isArrayCamera
)
{
...
...
src/renderers/webgl/WebGLProgram.js
浏览文件 @
1e9605b7
...
...
@@ -430,7 +430,7 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
'
uniform mat4 modelMatrix;
'
,
'
uniform vec3 cameraPosition;
'
,
renderer
.
multiview
.
isEnabled
()
?
[
material
.
supportsMultiview
&&
renderer
.
multiview
.
isEnabled
()
?
[
'
uniform mat4 modelViewMatrix;
'
,
'
uniform mat3 normalMatrix;
'
,
'
uniform mat4 viewMatrices[2];
'
,
...
...
@@ -566,7 +566,7 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
'
uniform vec3 cameraPosition;
'
,
renderer
.
multiview
.
isEnabled
()
?
[
material
.
supportsMultiview
&&
renderer
.
multiview
.
isEnabled
()
?
[
'
uniform mat4 viewMatrices[2];
'
,
'
#define viewMatrix viewMatrices[VIEW_ID]
'
...
...
@@ -627,7 +627,7 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
prefixVertex
=
[
'
#version 300 es
\n
'
,
renderer
.
multiview
.
isEnabled
()
?
[
material
.
supportsMultiview
&&
renderer
.
multiview
.
isEnabled
()
?
[
'
#extension GL_OVR_multiview2 : require
'
,
'
layout(num_views = 2) in;
'
,
...
...
@@ -642,7 +642,7 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
prefixFragment
=
[
'
#version 300 es
\n
'
,
renderer
.
multiview
.
isEnabled
()
?
[
material
.
supportsMultiview
&&
renderer
.
multiview
.
isEnabled
()
?
[
'
#extension GL_OVR_multiview2 : require
'
,
'
#define VIEW_ID gl_ViewID_OVR
'
...
...
src/renderers/webgl/WebGLShadowMap.js
浏览文件 @
1e9605b7
...
...
@@ -81,6 +81,8 @@ function WebGLShadowMap( _renderer, _objects, maxTextureSize ) {
var
depthMaterial
=
new
MeshDepthMaterial
(
{
supportsMultiview
:
false
,
depthPacking
:
RGBADepthPacking
,
morphTargets
:
useMorphing
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录