Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
121171b9
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,发现更多精彩内容 >>
提交
121171b9
编写于
11月 06, 2013
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
WebGL Effects examples clean up.
上级
e1bf2be9
变更
7
显示空白变更内容
内联
并排
Showing
7 changed file
with
12 addition
and
1002 deletion
+12
-1002
examples/index.html
examples/index.html
+4
-5
examples/webgl_effects_anaglyph.html
examples/webgl_effects_anaglyph.html
+2
-2
examples/webgl_effects_crosseyed.html
examples/webgl_effects_crosseyed.html
+2
-2
examples/webgl_effects_oculusrift.html
examples/webgl_effects_oculusrift.html
+2
-2
examples/webgl_effects_parallaxbarrier.html
examples/webgl_effects_parallaxbarrier.html
+2
-2
examples/webgl_materials_cars_anaglyph.html
examples/webgl_materials_cars_anaglyph.html
+0
-638
examples/webgl_materials_cars_camaro_crosseyed.html
examples/webgl_materials_cars_camaro_crosseyed.html
+0
-351
未找到文件。
examples/index.html
浏览文件 @
121171b9
...
...
@@ -115,6 +115,10 @@
"
webgl_custom_attributes_particles
"
,
"
webgl_custom_attributes_particles2
"
,
"
webgl_custom_attributes_particles3
"
,
"
webgl_effects_anaglyph
"
,
"
webgl_effects_crosseyed
"
,
"
webgl_effects_oculusrift
"
,
"
webgl_effects_parallaxbarrier
"
,
"
webgl_geometries
"
,
"
webgl_geometries2
"
,
"
webgl_geometry_colors
"
,
...
...
@@ -181,15 +185,10 @@
"
webgl_materials_bumpmap
"
,
"
webgl_materials_bumpmap_skin
"
,
"
webgl_materials_cars
"
,
"
webgl_materials_cars_anaglyph
"
,
"
webgl_materials_cars_camaro
"
,
"
webgl_materials_cars_camaro_crosseyed
"
,
"
webgl_materials_cars_parallaxbarrier
"
,
"
webgl_materials_cubemap
"
,
"
webgl_materials_cubemap_balls_reflection
"
,
"
webgl_materials_cubemap_balls_reflection_anaglyph
"
,
"
webgl_materials_cubemap_balls_refraction
"
,
"
webgl_materials_cubemap_balls_refraction_crosseyed
"
,
"
webgl_materials_cubemap_dynamic
"
,
"
webgl_materials_cubemap_dynamic2
"
,
"
webgl_materials_cubemap_escher
"
,
...
...
examples/webgl_
materials_cubemap_balls_reflection
_anaglyph.html
→
examples/webgl_
effects
_anaglyph.html
浏览文件 @
121171b9
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl -
materials - cube reflection [balls]
</title>
<title>
three.js webgl -
effects - anaglyph
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
...
...
@@ -33,7 +33,7 @@
</head>
<body>
<div
id=
"info"
><a
href=
"http://threejs.org"
target=
"_blank"
>
three.js
</a>
-
webgl cube reflection demo
. skybox by
<a
href=
"http://ict.debevec.org/~debevec/"
target=
"_blank"
>
Paul Debevec
</a></div>
<div
id=
"info"
><a
href=
"http://threejs.org"
target=
"_blank"
>
three.js
</a>
-
effects - anaglyph
. skybox by
<a
href=
"http://ict.debevec.org/~debevec/"
target=
"_blank"
>
Paul Debevec
</a></div>
<script
src=
"../build/three.min.js"
></script>
...
...
examples/webgl_
materials_cubemap_balls_refraction
_crosseyed.html
→
examples/webgl_
effects
_crosseyed.html
浏览文件 @
121171b9
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl -
materials - cube refraction [balls]
</title>
<title>
three.js webgl -
effects - crosseyed
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
...
...
@@ -34,7 +34,7 @@
<body>
<div
id=
"info"
>
<a
href=
"http://threejs.org"
target=
"_blank"
>
three.js
</a>
-
webgl cube refraction demo
. skybox by
<a
href=
"http://www.zfight.com/"
target=
"_blank"
>
Jochum Skoglund
</a>
<a
href=
"http://threejs.org"
target=
"_blank"
>
three.js
</a>
-
effects - crosseyed
. skybox by
<a
href=
"http://www.zfight.com/"
target=
"_blank"
>
Jochum Skoglund
</a>
- O, P : change eye separation
</div>
...
...
examples/webgl_
geometry_minecraft
_oculusrift.html
→
examples/webgl_
effects
_oculusrift.html
浏览文件 @
121171b9
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl -
geometry - minecraft - Oculus R
ift
</title>
<title>
three.js webgl -
effects - oculus r
ift
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
...
...
@@ -39,7 +39,7 @@
<body>
<div
id=
"container"
><br
/><br
/><br
/><br
/><br
/>
Generating world...
</div>
<div
id=
"info"
><a
href=
"http://threejs.org"
target=
"_blank"
>
three.js
</a>
-
<a
href=
"http://www.minecraft.net/"
target=
"_blank"
>
minecraft
</a>
demo for
oculus rift. featuring
<a
href=
"http://painterlypack.net/"
target=
"_blank"
>
painterly pack
</a><br
/>
(left click: forward, right click: backward, h: hide text)
</div>
<div
id=
"info"
><a
href=
"http://threejs.org"
target=
"_blank"
>
three.js
</a>
-
effects -
oculus rift. featuring
<a
href=
"http://painterlypack.net/"
target=
"_blank"
>
painterly pack
</a><br
/>
(left click: forward, right click: backward, h: hide text)
</div>
<script
src=
"../build/three.min.js"
></script>
...
...
examples/webgl_
materials_car
s_parallaxbarrier.html
→
examples/webgl_
effect
s_parallaxbarrier.html
浏览文件 @
121171b9
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl -
materials - cube reflection [cars]
</title>
<title>
three.js webgl -
effects - parallax barrier
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
...
...
@@ -36,7 +36,7 @@
<body>
<div
id=
"d"
>
<div
id=
"info"
>
<a
href=
"http://threejs.org"
target=
"_blank"
>
three.js
</a>
webgl
demo :
<a
href=
"http://threejs.org"
target=
"_blank"
>
three.js
</a>
webgl
- effects - parallax barrier.
texture by
<a
href=
"http://www.humus.name/index.php?page=Textures"
target=
"_blank"
>
Humus
</a>
:
<span
id=
"car_info"
>
<span
id=
"car_name"
>
Bugatti Veyron model
</span>
...
...
examples/webgl_materials_cars_anaglyph.html
已删除
100644 → 0
浏览文件 @
e1bf2be9
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl - materials - cube reflection [cars]
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
body
{
background
:
#000
;
color
:
#fff
;
padding
:
0
;
margin
:
0
;
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
}
#car_info
{
text-align
:
center
;
}
#car_name
{
font-size
:
1em
}
#car_author
{
font-size
:
1em
}
#oldie
{
background
:
rgb
(
50
,
0
,
0
)
!important
;
color
:
#fff
!important
;
margin-top
:
7em
!important
}
</style>
</head>
<body>
<div
id=
"d"
>
<div
id=
"info"
>
<a
href=
"http://threejs.org"
target=
"_blank"
>
three.js
</a>
webgl demo :
texture by
<a
href=
"http://www.humus.name/index.php?page=Textures"
target=
"_blank"
>
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"
>
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>
<script
src=
"../build/three.min.js"
></script>
<script
src=
"js/effects/AnaglyphEffect.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">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">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">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">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
camera
,
scene
,
renderer
,
effect
;
var
m
,
mi
;
var
directionalLight
,
pointLight
;
var
mouseX
=
0
,
mouseY
=
0
;
var
windowHalfX
=
window
.
innerWidth
/
2
;
var
windowHalfY
=
window
.
innerHeight
/
2
;
var
loader
=
new
THREE
.
BinaryLoader
(
true
);
document
.
body
.
appendChild
(
loader
.
statusDomElement
);
init
();
animate
();
function
init
()
{
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
camera
=
new
THREE
.
PerspectiveCamera
(
70
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
100000
);
scene
=
new
THREE
.
Scene
();
// LIGHTS
var
ambient
=
new
THREE
.
AmbientLight
(
0x050505
);
scene
.
add
(
ambient
);
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
,
2
);
directionalLight
.
position
.
set
(
2
,
1.2
,
10
).
normalize
();
scene
.
add
(
directionalLight
);
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1
);
directionalLight
.
position
.
set
(
-
2
,
1.2
,
-
10
).
normalize
();
scene
.
add
(
directionalLight
);
pointLight
=
new
THREE
.
PointLight
(
0xffaa00
,
2
);
pointLight
.
position
.
set
(
2000
,
1200
,
10000
);
scene
.
add
(
pointLight
);
// Skybox
var
shader
=
THREE
.
ShaderLib
[
"
cube
"
];
shader
.
uniforms
[
"
tCube
"
].
value
=
textureCube
;
var
material
=
new
THREE
.
ShaderMaterial
(
{
fragmentShader
:
shader
.
fragmentShader
,
vertexShader
:
shader
.
vertexShader
,
uniforms
:
shader
.
uniforms
,
side
:
THREE
.
BackSide
}
),
mesh
=
new
THREE
.
Mesh
(
new
THREE
.
CubeGeometry
(
100000
,
100000
,
100000
),
material
);
scene
.
add
(
mesh
);
//
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
.
setFaceCulling
(
THREE
.
CullFaceNone
);
var
width
=
window
.
innerWidth
||
2
;
var
height
=
window
.
innerHeight
||
2
;
effect
=
new
THREE
.
AnaglyphEffect
(
renderer
);
effect
.
setSize
(
width
,
height
);
container
.
appendChild
(
renderer
.
domElement
);
if
(
STATS_ENABLED
)
{
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
stats
.
domElement
.
style
.
top
=
'
0px
'
;
stats
.
domElement
.
style
.
zIndex
=
100
;
container
.
appendChild
(
stats
.
domElement
);
}
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
var
r
=
"
textures/cube/Bridge2/
"
;
var
urls
=
[
r
+
"
posx.jpg
"
,
r
+
"
negx.jpg
"
,
r
+
"
posy.jpg
"
,
r
+
"
negy.jpg
"
,
r
+
"
posz.jpg
"
,
r
+
"
negz.jpg
"
];
var
textureCube
=
THREE
.
ImageUtils
.
loadTextureCube
(
urls
);
// 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
.
Multiply
}
),
"
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
);
}
function
onWindowResize
()
{
windowHalfX
=
window
.
innerWidth
/
2
;
windowHalfY
=
window
.
innerHeight
/
2
;
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
effect
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
}
function
initCarButton
(
car
)
{
$
(
car
).
addEventListener
(
'
click
'
,
function
()
{
if
(
!
CARS
[
car
].
object
)
{
loader
.
statusDomElement
.
style
.
display
=
"
block
"
;
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
,
faceMaterial
,
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
++
)
{
faceMaterial
.
materials
[
material_indices
[
j
]
]
=
materials
[
this
.
counter
][
1
];
}
},
false
);
}
}
function
createScene
(
geometry
,
car
)
{
loader
.
statusDomElement
.
innerHTML
=
"
Creating model ...
"
;
var
m
=
new
THREE
.
MeshFaceMaterial
(),
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
.
materials
[
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
);
loader
.
statusDomElement
.
style
.
display
=
"
none
"
;
loader
.
statusDomElement
.
innerHTML
=
"
Loading model ...
"
;
}
function
onDocumentMouseMove
(
event
)
{
mouseY
=
(
event
.
clientY
-
window
.
innerHeight
);
}
//
function
animate
()
{
requestAnimationFrame
(
animate
);
render
();
}
function
render
()
{
var
timer
=
-
0.0002
*
Date
.
now
();
camera
.
position
.
x
=
1000
*
Math
.
cos
(
timer
);
camera
.
position
.
y
+=
(
-
mouseY
-
camera
.
position
.
y
)
*
.
05
;
camera
.
position
.
z
=
1000
*
Math
.
sin
(
timer
);
camera
.
lookAt
(
scene
.
position
);
effect
.
render
(
scene
,
camera
);
if
(
STATS_ENABLED
)
stats
.
update
();
}
</script>
</body>
</html>
examples/webgl_materials_cars_camaro_crosseyed.html
已删除
100644 → 0
浏览文件 @
e1bf2be9
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl - materials - cube reflection [camaro]
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
body
{
background
:
#000
;
color
:
#fff
;
padding
:
0
;
margin
:
0
;
overflow
:
hidden
;
font-family
:
georgia
;
text-align
:
center
;
}
h1
{
}
a
{
color
:
skyblue
}
canvas
{
pointer-events
:
none
;
z-index
:
10
;
position
:
relative
;
}
#d
{
text-align
:
center
;
margin
:
1em
0
-2.5em
0
;
z-index
:
0
;
position
:
relative
;
display
:
block
}
#buttons
{
margin
:
0.5em
0
0
0
}
button
{
font-family
:
georgia
;
border
:
0
;
background
:
#222
;
color
:
#fff
;
padding
:
0.2em
0.5em
;
cursor
:
pointer
;
border-radius
:
3px
}
button
:hover
{
background
:
#333
}
</style>
</head>
<body>
<div
id=
"d"
>
<div
id=
"info"
>
<a
href=
"http://threejs.org"
target=
"_blank"
>
three.js
</a>
- webgl cube reflection demo. chevrolet camaro by
<a
href=
"http://www.turbosquid.com/3d-models/blender-camaro/411348"
target=
"_blank"
>
dskfnwn
</a>
- O, P : change eye separation
</div>
<div
id=
"buttons"
></div>
</div>
<script
src=
"../build/three.min.js"
></script>
<script
src=
"js/effects/CrosseyedEffect.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
SCREEN_WIDTH
=
window
.
innerWidth
;
var
SCREEN_HEIGHT
=
window
.
innerHeight
;
var
container
,
stats
;
var
camera
,
scene
,
renderer
,
effect
;
var
lightMesh
;
var
directionalLight
,
pointLight
;
var
mouseX
=
0
,
mouseY
=
0
;
var
windowHalfX
=
window
.
innerWidth
/
2
;
var
windowHalfY
=
window
.
innerHeight
/
2
;
init
();
animate
();
function
init
()
{
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
// CAMERA
camera
=
new
THREE
.
PerspectiveCamera
(
70
,
SCREEN_WIDTH
/
SCREEN_HEIGHT
,
1
,
100000
);
camera
.
position
.
z
=
1000
;
camera
.
target
=
new
THREE
.
Vector3
(
0
,
0
,
0
);
scene
=
new
THREE
.
Scene
();
// LIGHTS
var
ambient
=
new
THREE
.
AmbientLight
(
0x020202
);
scene
.
add
(
ambient
);
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
);
directionalLight
.
position
.
set
(
1
,
1
,
0.5
).
normalize
();
scene
.
add
(
directionalLight
);
pointLight
=
new
THREE
.
PointLight
(
0xffaa00
);
pointLight
.
position
.
set
(
0
,
0
,
0
);
scene
.
add
(
pointLight
);
sphere
=
new
THREE
.
SphereGeometry
(
100
,
16
,
8
,
1
);
lightMesh
=
new
THREE
.
Mesh
(
sphere
,
new
THREE
.
MeshBasicMaterial
(
{
color
:
0xffaa00
}
)
);
lightMesh
.
scale
.
x
=
lightMesh
.
scale
.
y
=
lightMesh
.
scale
.
z
=
0.05
;
lightMesh
.
position
=
pointLight
.
position
;
scene
.
add
(
lightMesh
);
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
);
renderer
.
setFaceCulling
(
THREE
.
CullFaceNone
);
container
.
appendChild
(
renderer
.
domElement
);
effect
=
new
THREE
.
CrosseyedEffect
(
renderer
);
effect
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
effect
.
separation
=
20
;
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
stats
.
domElement
.
style
.
top
=
'
0px
'
;
stats
.
domElement
.
style
.
zIndex
=
100
;
container
.
appendChild
(
stats
.
domElement
);
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
document
.
addEventListener
(
'
keydown
'
,
onKeyDown
,
false
);
var
r
=
"
textures/cube/SwedishRoyalCastle/
"
;
var
urls
=
[
r
+
"
px.jpg
"
,
r
+
"
nx.jpg
"
,
r
+
"
py.jpg
"
,
r
+
"
ny.jpg
"
,
r
+
"
pz.jpg
"
,
r
+
"
nz.jpg
"
];
var
textureCube
=
THREE
.
ImageUtils
.
loadTextureCube
(
urls
);
var
camaroMaterials
=
{
body
:
{
Orange
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xff6600
,
envMap
:
textureCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.3
}
),
Blue
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x226699
,
envMap
:
textureCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.3
}
),
Red
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x660000
,
envMap
:
textureCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.5
}
),
Black
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x000000
,
envMap
:
textureCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.5
}
),
White
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffffff
,
envMap
:
textureCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.5
}
),
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.5
}
),
Chrome
:
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xffffff
,
specular
:
0xffffff
,
envMap
:
textureCube
,
combine
:
THREE
.
MultiplyOperation
}
)
},
chrome
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffffff
,
envMap
:
textureCube
}
),
darkchrome
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x444444
,
envMap
:
textureCube
}
),
glass
:
new
THREE
.
MeshBasicMaterial
(
{
color
:
0x223344
,
envMap
:
textureCube
,
opacity
:
0.25
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.25
,
transparent
:
true
}
),
tire
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x050505
}
),
interior
:
new
THREE
.
MeshPhongMaterial
(
{
color
:
0x050505
,
shininess
:
20
}
),
black
:
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x000000
}
)
};
var
loader
=
new
THREE
.
BinaryLoader
();
loader
.
load
(
"
obj/camaro/CamaroNoUv_bin.js
"
,
function
(
geometry
)
{
createScene
(
geometry
,
camaroMaterials
)
}
);
//
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
function
onWindowResize
()
{
windowHalfX
=
window
.
innerWidth
/
2
;
windowHalfY
=
window
.
innerHeight
/
2
;
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
effect
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
}
function
createButtons
(
materials
,
faceMaterial
)
{
var
buttons
=
document
.
getElementById
(
"
buttons
"
);
for
(
var
key
in
materials
)
{
var
button
=
document
.
createElement
(
'
button
'
);
button
.
textContent
=
key
;
button
.
addEventListener
(
'
click
'
,
function
(
event
)
{
faceMaterial
.
materials
[
0
]
=
materials
[
this
.
textContent
];
},
false
);
buttons
.
appendChild
(
button
);
}
}
function
createScene
(
geometry
,
materials
)
{
var
s
=
75
,
m
=
new
THREE
.
MeshFaceMaterial
();
m
.
materials
[
0
]
=
materials
.
body
[
"
Orange
"
];
// car body
m
.
materials
[
1
]
=
materials
.
chrome
;
// wheels chrome
m
.
materials
[
2
]
=
materials
.
chrome
;
// grille chrome
m
.
materials
[
3
]
=
materials
.
darkchrome
;
// door lines
m
.
materials
[
4
]
=
materials
.
glass
;
// windshield
m
.
materials
[
5
]
=
materials
.
interior
;
// interior
m
.
materials
[
6
]
=
materials
.
tire
;
// tire
m
.
materials
[
7
]
=
materials
.
black
;
// tireling
m
.
materials
[
8
]
=
materials
.
black
;
// behind grille
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
m
);
mesh
.
rotation
.
y
=
1
;
mesh
.
scale
.
x
=
mesh
.
scale
.
y
=
mesh
.
scale
.
z
=
s
;
scene
.
add
(
mesh
);
createButtons
(
materials
.
body
,
m
);
}
function
onDocumentMouseMove
(
event
)
{
mouseX
=
(
event
.
clientX
-
windowHalfX
);
mouseY
=
(
event
.
clientY
-
windowHalfY
);
}
function
onKeyDown
(
event
)
{
switch
(
event
.
keyCode
)
{
/* O */
case
79
:
effect
.
separation
-=
0.5
;
break
;
/* P */
case
80
:
effect
.
separation
+=
0.5
;
break
;
}
console
.
log
(
effect
.
separation
);
};
//
function
animate
()
{
requestAnimationFrame
(
animate
);
render
();
stats
.
update
();
}
function
render
()
{
var
timer
=
-
0.0002
*
Date
.
now
();
camera
.
position
.
x
+=
(
mouseX
-
camera
.
position
.
x
)
*
.
05
;
camera
.
position
.
y
+=
(
-
mouseY
-
camera
.
position
.
y
)
*
.
05
;
camera
.
lookAt
(
camera
.
target
);
lightMesh
.
position
.
x
=
1500
*
Math
.
cos
(
timer
);
lightMesh
.
position
.
z
=
1500
*
Math
.
sin
(
timer
);
effect
.
render
(
scene
,
camera
);
}
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录