Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
8835fa8b
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,发现更多精彩内容 >>
未验证
提交
8835fa8b
编写于
8月 25, 2018
作者:
M
Mr.doob
提交者:
GitHub
8月 25, 2018
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #13084 from looeee/refactor_parallax_example
Simplify and refactor parallax barrier example
上级
6d16c9a8
12935e49
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
62 addition
and
489 deletion
+62
-489
examples/webgl_effects_parallaxbarrier.html
examples/webgl_effects_parallaxbarrier.html
+62
-489
未找到文件。
examples/webgl_effects_parallaxbarrier.html
浏览文件 @
8835fa8b
...
...
@@ -6,152 +6,61 @@
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
body
{
background
:
#000
;
color
:
#fff
;
background
:
#777
;
padding
:
0
;
margin
:
0
;
font-weight
:
bold
;
overflow
:
hidden
;
font-family
:
georgia
;
text-align
:
center
;
}
h1
{
}
a
{
color
:
skyblue
;
text-decoration
:
none
}
canvas
{
pointer-events
:
none
;
z-index
:
10
;
position
:
relative
;
}
#d
{
position
:
absolute
;
width
:
100%
;
text-align
:
center
;
margin
:
1em
0
-4.5em
0
;
z-index
:
1000
;
}
.bwrap
{
margin
:
0.5em
0
0
0
}
button
{
font-family
:
georgia
;
border
:
0
;
background
:
#000
;
color
:
#fff
;
padding
:
0.2em
0.5em
;
cursor
:
pointer
;
border-radius
:
3px
;
}
button
:hover
{
background
:
#333
}
#buttons_cars
button
{
color
:
#fa0
}
#info
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
color
:
#ffffff
;
padding
:
5px
;
font-family
:
Monospace
;
font-size
:
13px
;
text-align
:
center
;
z-index
:
1000
;
}
#car_info
{
text-align
:
center
;
}
#car_name
{
font-size
:
1em
}
#car_author
{
font-size
:
1em
}
a
{
color
:
#ffffff
;
}
#oldie
{
background
:
rgb
(
50
,
0
,
0
)
!important
;
color
:
#fff
!important
;
margin-top
:
7em
!important
}
#oldie
a
{
color
:
#da0
}
</style>
</head>
<body>
<div
id=
"d"
>
<div
id=
"info"
>
<a
href=
"http://threejs.org"
target=
"_blank"
rel=
"noopener"
>
three.js
</a>
webgl - effects - parallax barrier.
texture by
<a
href=
"http://www.humus.name/index.php?page=Textures"
target=
"_blank"
rel=
"noopener"
>
Humus
</a>
:
<span
id=
"car_info"
>
<span
id=
"car_name"
>
Bugatti Veyron model
</span>
by
<span
id=
"car_author"
><a
href=
"http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129"
target=
"_blank"
rel=
"noopener"
>
Troyano
</a></span>
</span>
</div>
<div
id=
"buttons_cars"
class=
"bwrap"
>
<button
id=
"veyron"
>
Bugatti Veyron
</button>
<button
id=
"gallardo"
>
Lamborghini Gallardo
</button>
<button
id=
"f50"
>
Ferrari F50
</button>
<button
id=
"camaro"
>
Chevrolet Camaro
</button>
</div>
<div
id=
"buttons_materials"
class=
"bwrap"
></div>
</div>
<div
id=
"info"
><a
href=
"http://threejs.org"
target=
"_blank"
rel=
"noopener"
>
three.js
</a>
- effects - parallax barrier. skybox by
<a
href=
"http://ict.debevec.org/~debevec/"
target=
"_blank"
rel=
"noopener"
>
Paul Debevec
</a></div>
<script
src=
"../build/three.js"
></script>
<script
src=
"js/effects/ParallaxBarrierEffect.js"
></script>
<script
src=
"js/loaders/BinaryLoader.js"
></script>
<script
src=
"js/Detector.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
<script>
if
(
!
Detector
.
webgl
)
Detector
.
addGetWebGLMessage
();
var
STATS_ENABLED
=
false
;
var
CARS
=
{
"
veyron
"
:
{
name
:
"
Bugatti Veyron
"
,
url
:
"
obj/veyron/VeyronNoUv_bin.js
"
,
author
:
'
<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank" rel="noopener">Troyano</a>
'
,
init_rotation
:
[
0
,
0
,
0
],
scale
:
5.5
,
init_material
:
4
,
body_materials
:
[
2
],
object
:
null
,
buttons
:
null
,
materials
:
null
},
"
gallardo
"
:
{
name
:
"
Lamborghini Gallardo
"
,
url
:
"
obj/gallardo/GallardoNoUv_bin.js
"
,
author
:
'
<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1711" target="_blank" rel="noopener">machman_3d</a>
'
,
init_rotation
:
[
0
,
0
,
0
],
scale
:
3.7
,
init_material
:
9
,
body_materials
:
[
3
],
object
:
null
,
buttons
:
null
,
materials
:
null
},
"
f50
"
:
{
name
:
"
Ferrari F50
"
,
url
:
"
obj/f50/F50NoUv_bin.js
"
,
author
:
'
<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1687" target="_blank" rel="noopener">daniel sathya</a>
'
,
init_rotation
:
[
0
,
0
,
0
],
scale
:
0.175
,
init_material
:
2
,
body_materials
:
[
3
,
6
,
7
,
8
,
9
,
10
,
23
,
24
],
object
:
null
,
buttons
:
null
,
materials
:
null
},
"
camaro
"
:
{
name
:
"
Chevrolet Camaro
"
,
url
:
"
obj/camaro/CamaroNoUv_bin.js
"
,
author
:
'
<a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank" rel="noopener">dskfnwn</a>
'
,
init_rotation
:
[
0.0
,
0.0
,
0.0
],
scale
:
75
,
init_material
:
0
,
body_materials
:
[
0
],
object
:
null
,
buttons
:
null
,
materials
:
null
}
};
var
container
,
stats
;
var
container
;
var
camera
,
scene
,
renderer
,
effect
;
var
m
,
mi
;
var
mesh
,
lightMesh
,
geometry
;
var
spheres
=
[];
var
directionalLight
,
pointLight
;
var
mouseX
=
0
,
mouseY
=
0
;
var
mouseX
=
0
;
var
mouseY
=
0
;
var
windowHalfX
=
window
.
innerWidth
/
2
;
var
windowHalfY
=
window
.
innerHeight
/
2
;
var
loader
=
new
THREE
.
BinaryLoader
(
);
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
init
();
animate
();
...
...
@@ -161,31 +70,41 @@
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
camera
=
new
THREE
.
PerspectiveCamera
(
70
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
100000
);
camera
=
new
THREE
.
PerspectiveCamera
(
60
,
window
.
innerWidth
/
window
.
innerHeight
,
0.01
,
100
);
camera
.
position
.
z
=
3
;
camera
.
focalLength
=
3
;
var
textureCube
=
new
THREE
.
CubeTextureLoader
()
.
setPath
(
'
textures/cube/Bridge2/
'
)
.
load
(
[
'
posx.jpg
'
,
'
negx.jpg
'
,
'
posy.jpg
'
,
'
negy.jpg
'
,
'
posz.jpg
'
,
'
negz.jpg
'
]
);
var
path
=
"
textures/cube/pisa/
"
;
var
format
=
'
.png
'
;
var
urls
=
[
path
+
'
px
'
+
format
,
path
+
'
nx
'
+
format
,
path
+
'
py
'
+
format
,
path
+
'
ny
'
+
format
,
path
+
'
pz
'
+
format
,
path
+
'
nz
'
+
format
];
var
textureCube
=
new
THREE
.
CubeTextureLoader
().
load
(
urls
);
scene
=
new
THREE
.
Scene
();
scene
.
background
=
textureCube
;
// LIGHTS
var
geometry
=
new
THREE
.
SphereBufferGeometry
(
0.1
,
32
,
16
);
var
material
=
new
THREE
.
MeshBasicMaterial
(
{
color
:
0xffffff
,
envMap
:
textureCube
}
);
for
(
var
i
=
0
;
i
<
500
;
i
++
)
{
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
var
ambient
=
new
THREE
.
AmbientLight
(
0x050505
);
scene
.
add
(
ambient
);
mesh
.
position
.
x
=
Math
.
random
()
*
10
-
5
;
mesh
.
position
.
y
=
Math
.
random
()
*
10
-
5
;
mesh
.
position
.
z
=
Math
.
random
()
*
10
-
5
;
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
,
2
);
directionalLight
.
position
.
set
(
2
,
1.2
,
10
).
normalize
();
scene
.
add
(
directionalLight
);
mesh
.
scale
.
x
=
mesh
.
scale
.
y
=
mesh
.
scale
.
z
=
Math
.
random
()
*
3
+
1
;
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1
);
directionalLight
.
position
.
set
(
-
2
,
1.2
,
-
10
).
normalize
();
scene
.
add
(
directionalLight
);
scene
.
add
(
mesh
);
pointLight
=
new
THREE
.
PointLight
(
0xffaa00
,
2
);
pointLight
.
position
.
set
(
2000
,
1200
,
10000
);
scene
.
add
(
pointLight
);
spheres
.
push
(
mesh
);
}
//
...
...
@@ -199,245 +118,6 @@
effect
=
new
THREE
.
ParallaxBarrierEffect
(
renderer
);
effect
.
setSize
(
width
,
height
);
if
(
STATS_ENABLED
)
{
stats
=
new
Stats
();
container
.
appendChild
(
stats
.
dom
);
}
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
// common materials
var
mlib
=
{
"
Orange
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xff6600
,
envMap
:
textureCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.3
}
),
"
Blue
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x001133
,
envMap
:
textureCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.3
}
),
"
Red
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x660000
,
envMap
:
textureCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.25
}
),
"
Black
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x000000
,
envMap
:
textureCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.15
}
),
"
White
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffffff
,
envMap
:
textureCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.25
}
),
"
Carmine
"
:
new
THREE
.
MeshPhongMaterial
(
{
color
:
0x770000
,
specular
:
0xffaaaa
,
envMap
:
textureCube
,
combine
:
THREE
.
MultiplyOperation
}
),
"
Gold
"
:
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xaa9944
,
specular
:
0xbbaa99
,
shininess
:
50
,
envMap
:
textureCube
,
combine
:
THREE
.
MultiplyOperation
}
),
"
Bronze
"
:
new
THREE
.
MeshPhongMaterial
(
{
color
:
0x150505
,
specular
:
0xee6600
,
shininess
:
10
,
envMap
:
textureCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.25
}
),
"
Chrome
"
:
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xffffff
,
specular
:
0xffffff
,
envMap
:
textureCube
,
combine
:
THREE
.
MultiplyOperation
}
),
"
Orange metal
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xff6600
,
envMap
:
textureCube
,
combine
:
THREE
.
MultiplyOperation
}
),
"
Blue metal
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x001133
,
envMap
:
textureCube
,
combine
:
THREE
.
MultiplyOperation
}
),
"
Red metal
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x770000
,
envMap
:
textureCube
,
combine
:
THREE
.
MultiplyOperation
}
),
"
Green metal
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x007711
,
envMap
:
textureCube
,
combine
:
THREE
.
MultiplyOperation
}
),
"
Black metal
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x222222
,
envMap
:
textureCube
,
combine
:
THREE
.
MultiplyOperation
}
),
"
Pure chrome
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffffff
,
envMap
:
textureCube
}
),
"
Dark chrome
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x444444
,
envMap
:
textureCube
}
),
"
Darker chrome
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x222222
,
envMap
:
textureCube
}
),
"
Black glass
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x101016
,
envMap
:
textureCube
,
opacity
:
0.975
,
transparent
:
true
}
),
"
Dark glass
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x101046
,
envMap
:
textureCube
,
opacity
:
0.25
,
transparent
:
true
}
),
"
Blue glass
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x668899
,
envMap
:
textureCube
,
opacity
:
0.75
,
transparent
:
true
}
),
"
Light glass
"
:
new
THREE
.
MeshBasicMaterial
(
{
color
:
0x223344
,
envMap
:
textureCube
,
opacity
:
0.25
,
transparent
:
true
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.25
}
),
"
Red glass
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xff0000
,
opacity
:
0.75
,
transparent
:
true
}
),
"
Yellow glass
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffffaa
,
opacity
:
0.75
,
transparent
:
true
}
),
"
Orange glass
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x995500
,
opacity
:
0.75
,
transparent
:
true
}
),
"
Orange glass 50
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffbb00
,
opacity
:
0.5
,
transparent
:
true
}
),
"
Red glass 50
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xff0000
,
opacity
:
0.5
,
transparent
:
true
}
),
"
Fullblack rough
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x000000
}
),
"
Black rough
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x050505
}
),
"
Darkgray rough
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x090909
}
),
"
Red rough
"
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x330500
}
),
"
Darkgray shiny
"
:
new
THREE
.
MeshPhongMaterial
(
{
color
:
0x000000
,
specular
:
0x050505
}
),
"
Gray shiny
"
:
new
THREE
.
MeshPhongMaterial
(
{
color
:
0x050505
,
shininess
:
20
}
)
};
// Gallardo materials
CARS
[
"
gallardo
"
].
materials
=
{
body
:
[
[
"
Orange
"
,
mlib
[
"
Orange
"
]
],
[
"
Blue
"
,
mlib
[
"
Blue
"
]
],
[
"
Red
"
,
mlib
[
"
Red
"
]
],
[
"
Black
"
,
mlib
[
"
Black
"
]
],
[
"
White
"
,
mlib
[
"
White
"
]
],
[
"
Orange metal
"
,
mlib
[
"
Orange metal
"
]
],
[
"
Blue metal
"
,
mlib
[
"
Blue metal
"
]
],
[
"
Green metal
"
,
mlib
[
"
Green metal
"
]
],
[
"
Black metal
"
,
mlib
[
"
Black metal
"
]
],
[
"
Carmine
"
,
mlib
[
"
Carmine
"
]
],
[
"
Gold
"
,
mlib
[
"
Gold
"
]
],
[
"
Bronze
"
,
mlib
[
"
Bronze
"
]
],
[
"
Chrome
"
,
mlib
[
"
Chrome
"
]
]
]
};
m
=
CARS
[
"
gallardo
"
].
materials
;
mi
=
CARS
[
"
gallardo
"
].
init_material
;
CARS
[
"
gallardo
"
].
mmap
=
{
0
:
mlib
[
"
Pure chrome
"
],
// wheels chrome
1
:
mlib
[
"
Black rough
"
],
// tire
2
:
mlib
[
"
Black glass
"
],
// windshield
3
:
m
.
body
[
mi
][
1
],
// body
4
:
mlib
[
"
Red glass
"
],
// back lights
5
:
mlib
[
"
Yellow glass
"
],
// front lights
6
:
mlib
[
"
Dark chrome
"
]
// windshield rim
};
// Veyron materials
CARS
[
"
veyron
"
].
materials
=
{
body
:
[
[
"
Orange metal
"
,
mlib
[
"
Orange metal
"
]
],
[
"
Blue metal
"
,
mlib
[
"
Blue metal
"
]
],
[
"
Red metal
"
,
mlib
[
"
Red metal
"
]
],
[
"
Green metal
"
,
mlib
[
"
Green metal
"
]
],
[
"
Black metal
"
,
mlib
[
"
Black metal
"
]
],
[
"
Gold
"
,
mlib
[
"
Gold
"
]
],
[
"
Bronze
"
,
mlib
[
"
Bronze
"
]
],
[
"
Chrome
"
,
mlib
[
"
Chrome
"
]
]
]
};
m
=
CARS
[
"
veyron
"
].
materials
;
mi
=
CARS
[
"
veyron
"
].
init_material
;
CARS
[
"
veyron
"
].
mmap
=
{
0
:
mlib
[
"
Black rough
"
],
// tires + inside
1
:
mlib
[
"
Pure chrome
"
],
// wheels + extras chrome
2
:
m
.
body
[
mi
][
1
],
// back / top / front torso
3
:
mlib
[
"
Dark glass
"
],
// glass
4
:
mlib
[
"
Pure chrome
"
],
// sides torso
5
:
mlib
[
"
Pure chrome
"
],
// engine
6
:
mlib
[
"
Red glass 50
"
],
// backlights
7
:
mlib
[
"
Orange glass 50
"
]
// backsignals
};
// F50 materials
CARS
[
"
f50
"
].
materials
=
{
body
:
[
[
"
Orange
"
,
mlib
[
"
Orange
"
]
],
[
"
Blue
"
,
mlib
[
"
Blue
"
]
],
[
"
Red
"
,
mlib
[
"
Red
"
]
],
[
"
Black
"
,
mlib
[
"
Black
"
]
],
[
"
White
"
,
mlib
[
"
White
"
]
],
[
"
Orange metal
"
,
mlib
[
"
Orange metal
"
]
],
[
"
Blue metal
"
,
mlib
[
"
Blue metal
"
]
],
[
"
Black metal
"
,
mlib
[
"
Black metal
"
]
],
[
"
Carmine
"
,
mlib
[
"
Carmine
"
]
],
[
"
Gold
"
,
mlib
[
"
Gold
"
]
],
[
"
Bronze
"
,
mlib
[
"
Bronze
"
]
],
[
"
Chrome
"
,
mlib
[
"
Chrome
"
]
]
]
};
m
=
CARS
[
"
f50
"
].
materials
;
mi
=
CARS
[
"
f50
"
].
init_material
;
CARS
[
"
f50
"
].
mmap
=
{
0
:
mlib
[
"
Dark chrome
"
],
// interior + rim
1
:
mlib
[
"
Pure chrome
"
],
// wheels + gears chrome
2
:
mlib
[
"
Blue glass
"
],
// glass
3
:
m
.
body
[
mi
][
1
],
// torso mid + front spoiler
4
:
mlib
[
"
Darkgray shiny
"
],
// interior + behind seats
5
:
mlib
[
"
Darkgray shiny
"
],
// tiny dots in interior
6
:
m
.
body
[
mi
][
1
],
// back torso
7
:
m
.
body
[
mi
][
1
],
// right mirror decal
8
:
m
.
body
[
mi
][
1
],
// front decal
9
:
m
.
body
[
mi
][
1
],
// front torso
10
:
m
.
body
[
mi
][
1
],
// left mirror decal
11
:
mlib
[
"
Pure chrome
"
],
// engine
12
:
mlib
[
"
Darkgray rough
"
],
// tires side
13
:
mlib
[
"
Darkgray rough
"
],
// tires bottom
14
:
mlib
[
"
Darkgray shiny
"
],
// bottom
15
:
mlib
[
"
Black rough
"
],
// ???
16
:
mlib
[
"
Orange glass
"
],
// front signals
17
:
mlib
[
"
Dark chrome
"
],
// wheels center
18
:
mlib
[
"
Red glass
"
],
// back lights
19
:
mlib
[
"
Black rough
"
],
// ???
20
:
mlib
[
"
Red rough
"
],
// seats
21
:
mlib
[
"
Black rough
"
],
// back plate
22
:
mlib
[
"
Black rough
"
],
// front light dots
23
:
m
.
body
[
mi
][
1
],
// back torso
24
:
m
.
body
[
mi
][
1
]
// back torso center
};
// Camero materials
CARS
[
"
camaro
"
].
materials
=
{
body
:
[
[
"
Orange
"
,
mlib
[
"
Orange
"
]
],
[
"
Blue
"
,
mlib
[
"
Blue
"
]
],
[
"
Red
"
,
mlib
[
"
Red
"
]
],
[
"
Black
"
,
mlib
[
"
Black
"
]
],
[
"
White
"
,
mlib
[
"
White
"
]
],
[
"
Orange metal
"
,
mlib
[
"
Orange metal
"
]
],
[
"
Blue metal
"
,
mlib
[
"
Blue metal
"
]
],
[
"
Red metal
"
,
mlib
[
"
Red metal
"
]
],
[
"
Green metal
"
,
mlib
[
"
Green metal
"
]
],
[
"
Black metal
"
,
mlib
[
"
Black metal
"
]
],
[
"
Gold
"
,
mlib
[
"
Gold
"
]
],
[
"
Bronze
"
,
mlib
[
"
Bronze
"
]
],
[
"
Chrome
"
,
mlib
[
"
Chrome
"
]
]
]
};
m
=
CARS
[
"
camaro
"
].
materials
;
mi
=
CARS
[
"
camaro
"
].
init_material
;
CARS
[
"
camaro
"
].
mmap
=
{
0
:
m
.
body
[
mi
][
1
],
// car body
1
:
mlib
[
"
Pure chrome
"
],
// wheels chrome
2
:
mlib
[
"
Pure chrome
"
],
// grille chrome
3
:
mlib
[
"
Dark chrome
"
],
// door lines
4
:
mlib
[
"
Light glass
"
],
// windshield
5
:
mlib
[
"
Gray shiny
"
],
// interior
6
:
mlib
[
"
Black rough
"
],
// tire
7
:
mlib
[
"
Fullblack rough
"
],
// tireling
8
:
mlib
[
"
Fullblack rough
"
]
// behind grille
};
loader
.
load
(
CARS
[
"
veyron
"
].
url
,
function
(
geometry
)
{
createScene
(
geometry
,
"
veyron
"
)
}
);
for
(
var
c
in
CARS
)
initCarButton
(
c
);
//
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
...
...
@@ -456,121 +136,10 @@
}
function
initCarButton
(
car
)
{
$
(
car
).
addEventListener
(
'
click
'
,
function
()
{
if
(
!
CARS
[
car
].
object
)
{
loader
.
load
(
CARS
[
car
].
url
,
function
(
geometry
)
{
createScene
(
geometry
,
car
)
}
);
}
else
{
switchCar
(
car
);
}
},
false
);
}
function
$
(
id
)
{
return
document
.
getElementById
(
id
)
}
function
button_name
(
car
,
index
)
{
return
"
m_
"
+
car
+
"
_
"
+
index
}
function
switchCar
(
car
)
{
for
(
var
c
in
CARS
)
{
if
(
c
!=
car
&&
CARS
[
c
].
object
)
{
CARS
[
c
].
object
.
visible
=
false
;
CARS
[
c
].
buttons
.
style
.
display
=
"
none
"
;
}
}
CARS
[
car
].
object
.
visible
=
true
;
CARS
[
car
].
buttons
.
style
.
display
=
"
block
"
;
$
(
"
car_name
"
).
innerHTML
=
CARS
[
car
].
name
+
"
model
"
;
$
(
"
car_author
"
).
innerHTML
=
CARS
[
car
].
author
;
}
function
createButtons
(
materials
,
car
)
{
var
buttons
,
i
,
src
=
""
;
for
(
i
=
0
;
i
<
materials
.
length
;
i
++
)
{
src
+=
'
<button id="
'
+
button_name
(
car
,
i
)
+
'
">
'
+
materials
[
i
][
0
]
+
'
</button>
'
;
}
buttons
=
document
.
createElement
(
"
div
"
);
buttons
.
innerHTML
=
src
;
$
(
"
buttons_materials
"
).
appendChild
(
buttons
);
return
buttons
;
}
function
attachButtonMaterials
(
materials
,
faceMaterials
,
material_indices
,
car
)
{
for
(
var
i
=
0
;
i
<
materials
.
length
;
i
++
)
{
$
(
button_name
(
car
,
i
)
).
counter
=
i
;
$
(
button_name
(
car
,
i
)
).
addEventListener
(
'
click
'
,
function
()
{
for
(
var
j
=
0
;
j
<
material_indices
.
length
;
j
++
)
{
faceMaterials
[
material_indices
[
j
]
]
=
materials
[
this
.
counter
][
1
];
}
},
false
);
}
}
function
createScene
(
geometry
,
car
)
{
geometry
.
sortFacesByMaterialIndex
();
var
m
=
[],
s
=
CARS
[
car
].
scale
*
1
,
r
=
CARS
[
car
].
init_rotation
,
materials
=
CARS
[
car
].
materials
,
mi
=
CARS
[
car
].
init_material
,
bm
=
CARS
[
car
].
body_materials
;
for
(
var
i
in
CARS
[
car
].
mmap
)
{
m
[
i
]
=
CARS
[
car
].
mmap
[
i
];
}
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
m
);
mesh
.
rotation
.
x
=
r
[
0
];
mesh
.
rotation
.
y
=
r
[
1
];
mesh
.
rotation
.
z
=
r
[
2
];
mesh
.
scale
.
x
=
mesh
.
scale
.
y
=
mesh
.
scale
.
z
=
s
;
scene
.
add
(
mesh
);
CARS
[
car
].
object
=
mesh
;
CARS
[
car
].
buttons
=
createButtons
(
materials
.
body
,
car
);
attachButtonMaterials
(
materials
.
body
,
m
,
bm
,
car
);
switchCar
(
car
);
}
function
onDocumentMouseMove
(
event
)
{
mouseY
=
(
event
.
clientY
-
window
.
innerHeight
);
mouseX
=
(
event
.
clientX
-
windowHalfX
)
/
100
;
mouseY
=
(
event
.
clientY
-
windowHalfY
)
/
100
;
}
...
...
@@ -586,21 +155,25 @@
function
render
()
{
var
timer
=
-
0.0002
*
Date
.
now
();
var
timer
=
0.0001
*
Date
.
now
();
camera
.
position
.
x
+=
(
mouseX
-
camera
.
position
.
x
)
*
.
05
;
camera
.
position
.
y
+=
(
-
mouseY
-
camera
.
position
.
y
)
*
.
05
;
camera
.
position
.
x
=
1000
*
Math
.
cos
(
timer
);
camera
.
position
.
z
=
1000
*
Math
.
sin
(
timer
);
camera
.
lookAt
(
scene
.
position
);
effect
.
render
(
scene
,
camera
);
for
(
var
i
=
0
,
il
=
spheres
.
length
;
i
<
il
;
i
++
)
{
if
(
STATS_ENABLED
)
stats
.
update
()
;
var
sphere
=
spheres
[
i
]
;
}
sphere
.
position
.
x
=
5
*
Math
.
cos
(
timer
+
i
);
sphere
.
position
.
y
=
5
*
Math
.
sin
(
timer
+
i
*
1.1
);
}
effect
.
render
(
scene
,
camera
);
}
</script>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录