Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
51b6db1c
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,发现更多精彩内容 >>
提交
51b6db1c
编写于
10月 07, 2011
作者:
A
alteredq
浏览文件
操作
浏览文件
下载
差异文件
Merge remote-tracking branch 'remotes/mrdoob/dev' into dev
上级
8ab93926
319d4232
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
787 addition
and
21 deletion
+787
-21
examples/webgl_interactive_voxelpainter.html
examples/webgl_interactive_voxelpainter.html
+10
-20
examples/webgl_materials_cars_parallaxbarrier.html
examples/webgl_materials_cars_parallaxbarrier.html
+614
-0
examples/webgl_performance.html
examples/webgl_performance.html
+1
-1
src/extras/renderers/ParallaxBarrierWebGLRenderer.js
src/extras/renderers/ParallaxBarrierWebGLRenderer.js
+162
-0
未找到文件。
examples/webgl_interactive_voxelpainter.html
浏览文件 @
51b6db1c
...
...
@@ -22,7 +22,7 @@
<script
src=
"js/Detector.js"
></script>
<script
src=
"js/RequestAnimationFrame.js"
></script>
<script
src=
"js/Stats.js"
></script>
<link
href=
"js/gui/gui.css"
media=
"screen"
rel=
"stylesheet"
type=
"text/css"
/>
<script
src=
"js/gui/gui.min.js"
></script>
...
...
@@ -44,7 +44,7 @@
var
gui
,
voxelConfig
=
{
orthographicProjection
:
false
};
init
();
animate
();
...
...
@@ -58,12 +58,12 @@
info
.
style
.
top
=
'
10px
'
;
info
.
style
.
width
=
'
100%
'
;
info
.
style
.
textAlign
=
'
center
'
;
info
.
innerHTML
=
'
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - voxel painter - webgl<br
/
><strong>click</strong>: add voxel, <strong>control + click</strong>: remove voxel, <strong>shift + click</strong>: rotate, <a href="javascript:save();return false;">save .png</a>
'
;
info
.
innerHTML
=
'
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - voxel painter - webgl<br><strong>click</strong>: add voxel, <strong>control + click</strong>: remove voxel, <strong>shift + click</strong>: rotate, <a href="javascript:save();return false;">save .png</a>
'
;
container
.
appendChild
(
info
);
camera
=
new
THREE
.
CombinedCamera
(
window
.
innerWidth
,
window
.
innerHeight
,
45
,
1
,
10000
,
-
2000
,
10000
);
camera
.
position
.
y
=
800
;
cameraTarget
=
new
THREE
.
Vector3
(
0
,
0
,
0
);
scene
=
new
THREE
.
Scene
();
...
...
@@ -99,20 +99,10 @@
scene
.
add
(
ambientLight
);
var
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
);
directionalLight
.
position
.
x
=
Math
.
random
()
-
0.5
;
directionalLight
.
position
.
y
=
Math
.
random
()
-
0.5
;
directionalLight
.
position
.
z
=
Math
.
random
()
-
0.5
;
directionalLight
.
position
.
normalize
();
scene
.
add
(
directionalLight
);
var
directionalLight
=
new
THREE
.
DirectionalLight
(
0x808080
);
directionalLight
.
position
.
x
=
Math
.
random
()
-
0.5
;
directionalLight
.
position
.
y
=
Math
.
random
()
-
0.5
;
directionalLight
.
position
.
z
=
Math
.
random
()
-
0.5
;
directionalLight
.
position
.
normalize
();
directionalLight
.
position
.
set
(
1
,
0.75
,
0.5
).
normalize
();
scene
.
add
(
directionalLight
);
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
);
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
,
preserveDrawingBuffer
:
true
}
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
container
.
appendChild
(
renderer
.
domElement
);
...
...
@@ -126,11 +116,11 @@
document
.
addEventListener
(
'
mousedown
'
,
onDocumentMouseDown
,
false
);
document
.
addEventListener
(
'
keydown
'
,
onDocumentKeyDown
,
false
);
document
.
addEventListener
(
'
keyup
'
,
onDocumentKeyUp
,
false
);
// add GUI
gui
=
new
GUI
();
gui
.
add
(
voxelConfig
,
'
orthographicProjection
'
).
onChange
(
function
(){
if
(
voxelConfig
.
orthographicProjection
)
{
camera
.
toOrthographic
();
camera
.
position
.
x
=
1000
;
...
...
@@ -141,9 +131,9 @@
camera
.
toPerspective
();
camera
.
position
.
y
=
800
;
}
});
}
function
getRealIntersector
(
intersects
)
{
...
...
examples/webgl_materials_cars_parallaxbarrier.html
0 → 100644
浏览文件 @
51b6db1c
<!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://github.com/mrdoob/three.js"
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.js"
></script>
<script
src=
"../src/extras/renderers/ParallaxBarrierWebGLRenderer.js"
></script>
<script
src=
"js/Detector.js"
></script>
<script
src=
"js/RequestAnimationFrame.js"
></script>
<script
src=
"js/Stats.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
;
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
(
0x555555
);
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
.
ShaderUtils
.
lib
[
"
cube
"
];
shader
.
uniforms
[
"
tCube
"
].
texture
=
textureCube
;
var
material
=
new
THREE
.
ShaderMaterial
(
{
fragmentShader
:
shader
.
fragmentShader
,
vertexShader
:
shader
.
vertexShader
,
uniforms
:
shader
.
uniforms
}
),
mesh
=
new
THREE
.
Mesh
(
new
THREE
.
CubeGeometry
(
100000
,
100000
,
100000
),
material
);
mesh
.
flipSided
=
true
;
scene
.
add
(
mesh
);
//
renderer
=
new
THREE
.
ParallaxBarrierWebGLRenderer
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
setFaceCulling
(
0
);
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
(
{
model
:
CARS
[
"
veyron
"
].
url
,
callback
:
function
(
geometry
)
{
createScene
(
geometry
,
"
veyron
"
)
}
}
);
for
(
var
c
in
CARS
)
initCarButton
(
c
);
}
function
initCarButton
(
car
)
{
$
(
car
).
addEventListener
(
'
click
'
,
function
()
{
if
(
!
CARS
[
car
].
object
)
{
loader
.
statusDomElement
.
style
.
display
=
"
block
"
;
loader
.
load
(
{
model
:
CARS
[
car
].
url
,
callback
:
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
,
geometry
,
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
++
)
{
geometry
.
materials
[
material_indices
[
j
]
][
0
]
=
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
)
{
geometry
.
materials
[
i
][
0
]
=
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
,
geometry
,
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
=
-
new
Date
().
getTime
()
*
0.0002
;
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
);
renderer
.
render
(
scene
,
camera
);
if
(
STATS_ENABLED
)
stats
.
update
();
}
</script>
</body>
</html>
examples/webgl_performance.html
浏览文件 @
51b6db1c
...
...
@@ -77,7 +77,7 @@
}
}
);
renderer
=
new
THREE
.
WebGLRenderer
(
{
preserveDrawingBuffer
:
true
}
);
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
sortObjects
=
false
;
container
.
appendChild
(
renderer
.
domElement
);
...
...
src/extras/renderers/ParallaxBarrierWebGLRenderer.js
0 → 100644
浏览文件 @
51b6db1c
/**
* @author mrdoob / http://mrdoob.com/
* @author marklundin / http://mark-lundin.com/
*/
if
(
THREE
.
WebGLRenderer
)
{
THREE
.
ParallaxBarrierWebGLRenderer
=
function
(
parameters
)
{
THREE
.
WebGLRenderer
.
call
(
this
,
parameters
);
var
_this
=
this
,
_setSize
=
this
.
setSize
,
_render
=
this
.
render
;
var
_cameraL
=
new
THREE
.
PerspectiveCamera
(),
_cameraR
=
new
THREE
.
PerspectiveCamera
();
var
eyeRight
=
new
THREE
.
Matrix4
(),
eyeLeft
=
new
THREE
.
Matrix4
(),
focalLength
=
125
,
aspect
,
near
,
fov
;
_cameraL
.
matrixAutoUpdate
=
_cameraR
.
matrixAutoUpdate
=
false
;
var
_params
=
{
minFilter
:
THREE
.
LinearFilter
,
magFilter
:
THREE
.
NearestFilter
,
format
:
THREE
.
RGBAFormat
};
var
_renderTargetL
=
new
THREE
.
WebGLRenderTarget
(
512
,
512
,
_params
),
_renderTargetR
=
new
THREE
.
WebGLRenderTarget
(
512
,
512
,
_params
);
var
_camera
=
new
THREE
.
PerspectiveCamera
(
53
,
1
,
1
,
10000
);
_camera
.
position
.
z
=
2
;
_material
=
new
THREE
.
ShaderMaterial
(
{
uniforms
:
{
"
mapLeft
"
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
_renderTargetL
},
"
mapRight
"
:
{
type
:
"
t
"
,
value
:
1
,
texture
:
_renderTargetR
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform sampler2D mapLeft;
"
,
"
uniform sampler2D mapRight;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vec2 uv = vUv;
"
,
"
if ( ( mod(gl_FragCoord.x, 2.0) ) > 1.00 ) {
"
,
"
gl_FragColor = texture2D( mapLeft, uv );
"
,
"
} else {
"
,
"
gl_FragColor = texture2D( mapRight, uv );
"
,
"
}
"
,
"
}
"
].
join
(
"
\n
"
)
}
);
var
_scene
=
new
THREE
.
Scene
();
_scene
.
add
(
new
THREE
.
Mesh
(
new
THREE
.
PlaneGeometry
(
2
,
2
),
_material
)
);
this
.
setSize
=
function
(
width
,
height
)
{
_setSize
.
call
(
_this
,
width
,
height
);
_renderTargetL
.
width
=
width
;
_renderTargetL
.
height
=
height
;
_renderTargetR
.
width
=
width
;
_renderTargetR
.
height
=
height
;
};
/*
* Renderer now uses an asymmetric perspective projection (http://paulbourke.net/miscellaneous/stereographics/stereorender/).
* Each camera is offset by the eye seperation and its projection matrix is also skewed asymetrically back to converge on the same
* projection plane. Added a focal length parameter to, this is where the parallax is equal to 0.
*/
this
.
render
=
function
(
scene
,
camera
,
renderTarget
,
forceClear
)
{
camera
.
update
(
null
,
true
);
var
hasCameraChanged
=
aspect
!==
camera
.
aspect
||
near
!==
camera
.
near
||
fov
!==
camera
.
fov
;
if
(
hasCameraChanged
)
{
aspect
=
camera
.
aspect
;
near
=
camera
.
near
;
fov
=
camera
.
fov
;
var
projectionMatrix
=
camera
.
projectionMatrix
.
clone
(),
eyeSep
=
focalLength
/
30
*
0.5
,
eyeSepOnProjection
=
eyeSep
*
near
/
focalLength
,
ymax
=
near
*
Math
.
tan
(
fov
*
Math
.
PI
/
360
),
xmin
,
xmax
;
//translate xOffset
eyeRight
.
n14
=
eyeSep
;
eyeLeft
.
n14
=
-
eyeSep
;
//For left eye
xmin
=
-
ymax
*
aspect
+
eyeSepOnProjection
;
xmax
=
ymax
*
aspect
+
eyeSepOnProjection
;
projectionMatrix
.
n11
=
2
*
near
/
(
xmax
-
xmin
);
projectionMatrix
.
n13
=
(
xmax
+
xmin
)
/
(
xmax
-
xmin
);
_cameraL
.
projectionMatrix
=
projectionMatrix
.
clone
();
//for right eye
xmin
=
-
ymax
*
aspect
-
eyeSepOnProjection
;
xmax
=
ymax
*
aspect
-
eyeSepOnProjection
;
projectionMatrix
.
n11
=
2
*
near
/
(
xmax
-
xmin
);
projectionMatrix
.
n13
=
(
xmax
+
xmin
)
/
(
xmax
-
xmin
);
_cameraR
.
projectionMatrix
=
projectionMatrix
.
clone
();
}
_cameraL
.
matrix
=
camera
.
matrixWorld
.
clone
().
multiplySelf
(
eyeLeft
);
_cameraL
.
update
(
null
,
true
);
_cameraL
.
position
.
copy
(
camera
.
position
);
_cameraL
.
near
=
near
;
_cameraL
.
far
=
camera
.
far
;
_render
.
call
(
_this
,
scene
,
_cameraL
,
_renderTargetL
,
true
);
_cameraR
.
matrix
=
camera
.
matrixWorld
.
clone
().
multiplySelf
(
eyeRight
);
_cameraR
.
update
(
null
,
true
);
_cameraR
.
position
.
copy
(
camera
.
position
);
_cameraR
.
near
=
near
;
_cameraR
.
far
=
camera
.
far
;
_render
.
call
(
_this
,
scene
,
_cameraR
,
_renderTargetR
,
true
);
_render
.
call
(
_this
,
_scene
,
_camera
);
};
};
};
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录