Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
2e0d1a03
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 搜索 >>
提交
2e0d1a03
编写于
2月 27, 2019
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Examples: Improved webgl_materials_cars example.
上级
e8b921fe
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
47 addition
and
61 deletion
+47
-61
examples/webgl_materials_cars.html
examples/webgl_materials_cars.html
+47
-61
未找到文件。
examples/webgl_materials_cars.html
浏览文件 @
2e0d1a03
...
...
@@ -45,6 +45,9 @@
<script
src=
"js/loaders/DRACOLoader.js"
></script>
<script
src=
"js/loaders/GLTFLoader.js"
></script>
<script
src=
"js/pmrem/PMREMGenerator.js"
></script>
<script
src=
"js/pmrem/PMREMCubeUVPacker.js"
></script>
<script
src=
"js/Car.js"
></script>
<script
src=
"js/WebGL.js"
></script>
...
...
@@ -65,9 +68,7 @@
var
glassMatSelect
=
document
.
getElementById
(
'
glass-mat
'
);
var
followCamera
=
document
.
getElementById
(
'
camera-toggle
'
);
followCamera
.
addEventListener
(
'
change
'
,
onFollowCameraToggle
);
var
lightHolder
=
new
THREE
.
Group
();
var
clock
=
new
THREE
.
Clock
();
var
car
=
new
THREE
.
Car
();
car
.
turningRadius
=
75
;
...
...
@@ -81,7 +82,6 @@
var
damping
=
5.0
;
var
distance
=
5
;
var
cameraTarget
=
new
THREE
.
Vector3
();
var
origin
=
new
THREE
.
Vector3
();
function
init
()
{
...
...
@@ -89,15 +89,35 @@
camera
=
new
THREE
.
PerspectiveCamera
(
50
,
window
.
innerWidth
/
window
.
innerHeight
,
0.1
,
200
);
camera
.
position
.
set
(
3.25
,
2.0
,
-
5
);
camera
.
lookAt
(
0
,
0.5
,
0
);
scene
=
new
THREE
.
Scene
();
scene
.
fog
=
new
THREE
.
Fog
(
0xd7cbb1
,
1
,
80
);
envMap
=
new
THREE
.
CubeTextureLoader
()
.
setPath
(
'
textures/cube/skyboxsun25deg/
'
)
.
load
(
[
'
px.jpg
'
,
'
nx.jpg
'
,
'
py.jpg
'
,
'
ny.jpg
'
,
'
pz.jpg
'
,
'
nz.jpg
'
]
);
var
urls
=
[
'
px.jpg
'
,
'
nx.jpg
'
,
'
py.jpg
'
,
'
ny.jpg
'
,
'
pz.jpg
'
,
'
nz.jpg
'
];
var
loader
=
new
THREE
.
CubeTextureLoader
().
setPath
(
'
textures/cube/skyboxsun25deg/
'
);
loader
.
load
(
urls
,
function
(
texture
)
{
scene
.
background
=
texture
;
var
pmremGenerator
=
new
THREE
.
PMREMGenerator
(
texture
);
pmremGenerator
.
update
(
renderer
);
var
pmremCubeUVPacker
=
new
THREE
.
PMREMCubeUVPacker
(
pmremGenerator
.
cubeLods
);
pmremCubeUVPacker
.
update
(
renderer
);
envMap
=
pmremCubeUVPacker
.
CubeUVRenderTarget
.
texture
;
scene
.
background
=
envMap
;
pmremGenerator
.
dispose
();
pmremCubeUVPacker
.
dispose
();
//
initCar
();
initMaterials
();
initMaterialSelectionMenus
();
}
);
var
ground
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneBufferGeometry
(
2400
,
2400
),
...
...
@@ -114,28 +134,9 @@
grid
.
material
.
transparent
=
true
;
scene
.
add
(
grid
);
var
hemiLight
=
new
THREE
.
HemisphereLight
(
0x7c849b
,
0xd7cbb1
,
0.1
);
hemiLight
.
position
.
set
(
0
,
1
,
0
);
scene
.
add
(
hemiLight
);
var
shadowLight
=
new
THREE
.
DirectionalLight
(
0xffffee
,
0.1
);
shadowLight
.
position
.
set
(
-
1.5
,
1.25
,
-
1.5
);
shadowLight
.
castShadow
=
true
;
shadowLight
.
shadow
.
width
=
512
;
shadowLight
.
shadow
.
height
=
512
;
shadowLight
.
shadow
.
camera
.
top
=
2
;
shadowLight
.
shadow
.
camera
.
bottom
=
-
2
;
shadowLight
.
shadow
.
camera
.
left
=
-
2.5
;
shadowLight
.
shadow
.
camera
.
right
=
2.5
;
shadowLight
.
shadow
.
camera
.
far
=
5.75
;
shadowLight
.
shadow
.
bias
=
-
0.025
;
lightHolder
.
add
(
shadowLight
,
shadowLight
.
target
);
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
);
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
gammaOutput
=
true
;
renderer
.
s
hadowMap
.
enabled
=
true
;
renderer
.
s
etPixelRatio
(
window
.
devicePixelRatio
)
;
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
container
.
appendChild
(
renderer
.
domElement
);
...
...
@@ -143,10 +144,6 @@
stats
=
new
Stats
();
container
.
appendChild
(
stats
.
dom
);
initCar
();
initMaterials
();
initMaterialSelectionMenus
();
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
renderer
.
setAnimationLoop
(
function
()
{
...
...
@@ -170,17 +167,12 @@
carModel
=
gltf
.
scene
.
children
[
0
];
// add lightHolder to car so that the shadow will track the car as it moves
carModel
.
add
(
lightHolder
);
car
.
setModel
(
carModel
);
carModel
.
traverse
(
function
(
child
)
{
if
(
child
.
isMesh
)
{
child
.
castShadow
=
true
;
child
.
receiveShadow
=
true
;
child
.
material
.
envMap
=
envMap
;
}
...
...
@@ -236,9 +228,9 @@
glass
:
[
new
THREE
.
MeshStandardMaterial
(
{
color
:
0xffffff
,
envMap
:
envMap
,
metalness
:
0.9
,
roughness
:
0.1
,
opacity
:
0.15
,
transparent
:
true
,
premultipliedAlpha
:
true
,
name
:
'
clear
'
}
),
new
THREE
.
MeshStandardMaterial
(
{
color
:
0x000000
,
envMap
:
envMap
,
metalness
:
0.9
,
roughness
:
0.1
,
opacity
:
0.15
,
transparent
:
true
,
premultipliedAlpha
:
true
,
name
:
'
smoked
'
}
),
new
THREE
.
MeshStandardMaterial
(
{
color
:
0x001133
,
envMap
:
envMap
,
metalness
:
0.9
,
roughness
:
0.1
,
opacity
:
0.15
,
transparent
:
true
,
premultipliedAlpha
:
true
,
name
:
'
blue
'
}
),
new
THREE
.
MeshStandardMaterial
(
{
color
:
0xffffff
,
envMap
:
envMap
,
metalness
:
1
,
roughness
:
0
,
opacity
:
0.2
,
transparent
:
true
,
premultipliedAlpha
:
true
,
name
:
'
clear
'
}
),
new
THREE
.
MeshStandardMaterial
(
{
color
:
0x000000
,
envMap
:
envMap
,
metalness
:
1
,
roughness
:
0
,
opacity
:
0.2
,
transparent
:
true
,
premultipliedAlpha
:
true
,
name
:
'
smoked
'
}
),
new
THREE
.
MeshStandardMaterial
(
{
color
:
0x001133
,
envMap
:
envMap
,
metalness
:
1
,
roughness
:
0
,
opacity
:
0.2
,
transparent
:
true
,
premultipliedAlpha
:
true
,
name
:
'
blue
'
}
),
],
...
...
@@ -270,8 +262,8 @@
}
);
bodyMatSelect
.
selectedIndex
=
2
;
rimMatSelect
.
selectedIndex
=
4
;
bodyMatSelect
.
selectedIndex
=
3
;
rimMatSelect
.
selectedIndex
=
5
;
glassMatSelect
.
selectedIndex
=
0
;
bodyMatSelect
.
addEventListener
(
'
change
'
,
updateMaterials
);
...
...
@@ -302,12 +294,6 @@
}
function
onFollowCameraToggle
()
{
carModel
.
position
.
copy
(
origin
);
}
function
update
()
{
var
delta
=
clock
.
getDelta
();
...
...
@@ -316,10 +302,14 @@
car
.
update
(
delta
/
3
);
resetPosition
(
);
console
.
log
(
);
// keep the light (and shadow) pointing in the same direction as the car rotates
lightHolder
.
rotation
.
y
=
-
carModel
.
rotation
.
y
;
if
(
carModel
.
position
.
length
()
>
200
)
{
carModel
.
position
.
set
(
0
,
0
,
0
);
car
.
speed
=
0
;
}
if
(
followCamera
.
checked
)
{
...
...
@@ -329,6 +319,13 @@
camera
.
position
.
lerp
(
cameraTarget
,
delta
*
damping
);
}
else
{
carModel
.
getWorldPosition
(
cameraTarget
);
cameraTarget
.
y
+=
0.5
;
camera
.
position
.
set
(
3.25
,
2.0
,
-
5
);
}
camera
.
lookAt
(
carModel
.
position
);
...
...
@@ -339,17 +336,6 @@
}
function
resetPosition
()
{
if
(
carModel
.
position
.
distanceTo
(
origin
)
>
200
)
{
carModel
.
position
.
copy
(
origin
);
car
.
speed
=
0
;
}
}
init
();
</script>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录