Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
b99aed7c
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,发现更多精彩内容 >>
提交
b99aed7c
编写于
10月 19, 2014
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Added CSS3DStereoRenderer.
上级
2042a3e4
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
772 addition
and
0 deletion
+772
-0
examples/css3dstereo_periodictable.html
examples/css3dstereo_periodictable.html
+442
-0
examples/index.html
examples/index.html
+3
-0
examples/js/renderers/CSS3DStereoRenderer.js
examples/js/renderers/CSS3DStereoRenderer.js
+327
-0
未找到文件。
examples/css3dstereo_periodictable.html
0 → 100644
浏览文件 @
b99aed7c
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<title>
three.js css3d stereo - periodic table
</title>
<style>
html
,
body
{
height
:
100%
;
}
body
{
background-color
:
#000000
;
margin
:
0
;
font-family
:
Helvetica
,
sans-serif
;
;
overflow
:
hidden
;
}
a
{
color
:
#ffffff
;
}
.element
{
width
:
120px
;
height
:
160px
;
box-shadow
:
0px
0px
12px
rgba
(
0
,
255
,
255
,
0.5
);
border
:
1px
solid
rgba
(
127
,
255
,
255
,
0.25
);
text-align
:
center
;
cursor
:
default
;
}
.element
:hover
{
box-shadow
:
0px
0px
12px
rgba
(
0
,
255
,
255
,
0.75
);
border
:
1px
solid
rgba
(
127
,
255
,
255
,
0.75
);
}
.element
.number
{
position
:
absolute
;
top
:
20px
;
right
:
20px
;
font-size
:
12px
;
color
:
rgba
(
127
,
255
,
255
,
0.75
);
}
.element
.symbol
{
position
:
absolute
;
top
:
40px
;
left
:
0px
;
right
:
0px
;
font-size
:
60px
;
font-weight
:
bold
;
color
:
rgba
(
255
,
255
,
255
,
0.75
);
text-shadow
:
0
0
10px
rgba
(
0
,
255
,
255
,
0.95
);
}
.element
.details
{
position
:
absolute
;
bottom
:
15px
;
left
:
0px
;
right
:
0px
;
font-size
:
12px
;
color
:
rgba
(
127
,
255
,
255
,
0.75
);
}
</style>
</head>
<body>
<script
src=
"../build/three.min.js"
></script>
<script
src=
"js/libs/tween.min.js"
></script>
<script
src=
"js/controls/TrackballControls.js"
></script>
<script
src=
"js/renderers/CSS3DStereoRenderer.js"
></script>
<div
id=
"container"
></div>
<script>
var
table
=
[
"
H
"
,
"
Hydrogen
"
,
"
1.00794
"
,
1
,
1
,
"
He
"
,
"
Helium
"
,
"
4.002602
"
,
18
,
1
,
"
Li
"
,
"
Lithium
"
,
"
6.941
"
,
1
,
2
,
"
Be
"
,
"
Beryllium
"
,
"
9.012182
"
,
2
,
2
,
"
B
"
,
"
Boron
"
,
"
10.811
"
,
13
,
2
,
"
C
"
,
"
Carbon
"
,
"
12.0107
"
,
14
,
2
,
"
N
"
,
"
Nitrogen
"
,
"
14.0067
"
,
15
,
2
,
"
O
"
,
"
Oxygen
"
,
"
15.9994
"
,
16
,
2
,
"
F
"
,
"
Fluorine
"
,
"
18.9984032
"
,
17
,
2
,
"
Ne
"
,
"
Neon
"
,
"
20.1797
"
,
18
,
2
,
"
Na
"
,
"
Sodium
"
,
"
22.98976...
"
,
1
,
3
,
"
Mg
"
,
"
Magnesium
"
,
"
24.305
"
,
2
,
3
,
"
Al
"
,
"
Aluminium
"
,
"
26.9815386
"
,
13
,
3
,
"
Si
"
,
"
Silicon
"
,
"
28.0855
"
,
14
,
3
,
"
P
"
,
"
Phosphorus
"
,
"
30.973762
"
,
15
,
3
,
"
S
"
,
"
Sulfur
"
,
"
32.065
"
,
16
,
3
,
"
Cl
"
,
"
Chlorine
"
,
"
35.453
"
,
17
,
3
,
"
Ar
"
,
"
Argon
"
,
"
39.948
"
,
18
,
3
,
"
K
"
,
"
Potassium
"
,
"
39.948
"
,
1
,
4
,
"
Ca
"
,
"
Calcium
"
,
"
40.078
"
,
2
,
4
,
"
Sc
"
,
"
Scandium
"
,
"
44.955912
"
,
3
,
4
,
"
Ti
"
,
"
Titanium
"
,
"
47.867
"
,
4
,
4
,
"
V
"
,
"
Vanadium
"
,
"
50.9415
"
,
5
,
4
,
"
Cr
"
,
"
Chromium
"
,
"
51.9961
"
,
6
,
4
,
"
Mn
"
,
"
Manganese
"
,
"
54.938045
"
,
7
,
4
,
"
Fe
"
,
"
Iron
"
,
"
55.845
"
,
8
,
4
,
"
Co
"
,
"
Cobalt
"
,
"
58.933195
"
,
9
,
4
,
"
Ni
"
,
"
Nickel
"
,
"
58.6934
"
,
10
,
4
,
"
Cu
"
,
"
Copper
"
,
"
63.546
"
,
11
,
4
,
"
Zn
"
,
"
Zinc
"
,
"
65.38
"
,
12
,
4
,
"
Ga
"
,
"
Gallium
"
,
"
69.723
"
,
13
,
4
,
"
Ge
"
,
"
Germanium
"
,
"
72.63
"
,
14
,
4
,
"
As
"
,
"
Arsenic
"
,
"
74.9216
"
,
15
,
4
,
"
Se
"
,
"
Selenium
"
,
"
78.96
"
,
16
,
4
,
"
Br
"
,
"
Bromine
"
,
"
79.904
"
,
17
,
4
,
"
Kr
"
,
"
Krypton
"
,
"
83.798
"
,
18
,
4
,
"
Rb
"
,
"
Rubidium
"
,
"
85.4678
"
,
1
,
5
,
"
Sr
"
,
"
Strontium
"
,
"
87.62
"
,
2
,
5
,
"
Y
"
,
"
Yttrium
"
,
"
88.90585
"
,
3
,
5
,
"
Zr
"
,
"
Zirconium
"
,
"
91.224
"
,
4
,
5
,
"
Nb
"
,
"
Niobium
"
,
"
92.90628
"
,
5
,
5
,
"
Mo
"
,
"
Molybdenum
"
,
"
95.96
"
,
6
,
5
,
"
Tc
"
,
"
Technetium
"
,
"
(98)
"
,
7
,
5
,
"
Ru
"
,
"
Ruthenium
"
,
"
101.07
"
,
8
,
5
,
"
Rh
"
,
"
Rhodium
"
,
"
102.9055
"
,
9
,
5
,
"
Pd
"
,
"
Palladium
"
,
"
106.42
"
,
10
,
5
,
"
Ag
"
,
"
Silver
"
,
"
107.8682
"
,
11
,
5
,
"
Cd
"
,
"
Cadmium
"
,
"
112.411
"
,
12
,
5
,
"
In
"
,
"
Indium
"
,
"
114.818
"
,
13
,
5
,
"
Sn
"
,
"
Tin
"
,
"
118.71
"
,
14
,
5
,
"
Sb
"
,
"
Antimony
"
,
"
121.76
"
,
15
,
5
,
"
Te
"
,
"
Tellurium
"
,
"
127.6
"
,
16
,
5
,
"
I
"
,
"
Iodine
"
,
"
126.90447
"
,
17
,
5
,
"
Xe
"
,
"
Xenon
"
,
"
131.293
"
,
18
,
5
,
"
Cs
"
,
"
Caesium
"
,
"
132.9054
"
,
1
,
6
,
"
Ba
"
,
"
Barium
"
,
"
132.9054
"
,
2
,
6
,
"
La
"
,
"
Lanthanum
"
,
"
138.90547
"
,
4
,
9
,
"
Ce
"
,
"
Cerium
"
,
"
140.116
"
,
5
,
9
,
"
Pr
"
,
"
Praseodymium
"
,
"
140.90765
"
,
6
,
9
,
"
Nd
"
,
"
Neodymium
"
,
"
144.242
"
,
7
,
9
,
"
Pm
"
,
"
Promethium
"
,
"
(145)
"
,
8
,
9
,
"
Sm
"
,
"
Samarium
"
,
"
150.36
"
,
9
,
9
,
"
Eu
"
,
"
Europium
"
,
"
151.964
"
,
10
,
9
,
"
Gd
"
,
"
Gadolinium
"
,
"
157.25
"
,
11
,
9
,
"
Tb
"
,
"
Terbium
"
,
"
158.92535
"
,
12
,
9
,
"
Dy
"
,
"
Dysprosium
"
,
"
162.5
"
,
13
,
9
,
"
Ho
"
,
"
Holmium
"
,
"
164.93032
"
,
14
,
9
,
"
Er
"
,
"
Erbium
"
,
"
167.259
"
,
15
,
9
,
"
Tm
"
,
"
Thulium
"
,
"
168.93421
"
,
16
,
9
,
"
Yb
"
,
"
Ytterbium
"
,
"
173.054
"
,
17
,
9
,
"
Lu
"
,
"
Lutetium
"
,
"
174.9668
"
,
18
,
9
,
"
Hf
"
,
"
Hafnium
"
,
"
178.49
"
,
4
,
6
,
"
Ta
"
,
"
Tantalum
"
,
"
180.94788
"
,
5
,
6
,
"
W
"
,
"
Tungsten
"
,
"
183.84
"
,
6
,
6
,
"
Re
"
,
"
Rhenium
"
,
"
186.207
"
,
7
,
6
,
"
Os
"
,
"
Osmium
"
,
"
190.23
"
,
8
,
6
,
"
Ir
"
,
"
Iridium
"
,
"
192.217
"
,
9
,
6
,
"
Pt
"
,
"
Platinum
"
,
"
195.084
"
,
10
,
6
,
"
Au
"
,
"
Gold
"
,
"
196.966569
"
,
11
,
6
,
"
Hg
"
,
"
Mercury
"
,
"
200.59
"
,
12
,
6
,
"
Tl
"
,
"
Thallium
"
,
"
204.3833
"
,
13
,
6
,
"
Pb
"
,
"
Lead
"
,
"
207.2
"
,
14
,
6
,
"
Bi
"
,
"
Bismuth
"
,
"
208.9804
"
,
15
,
6
,
"
Po
"
,
"
Polonium
"
,
"
(209)
"
,
16
,
6
,
"
At
"
,
"
Astatine
"
,
"
(210)
"
,
17
,
6
,
"
Rn
"
,
"
Radon
"
,
"
(222)
"
,
18
,
6
,
"
Fr
"
,
"
Francium
"
,
"
(223)
"
,
1
,
7
,
"
Ra
"
,
"
Radium
"
,
"
(226)
"
,
2
,
7
,
"
Ac
"
,
"
Actinium
"
,
"
(227)
"
,
4
,
10
,
"
Th
"
,
"
Thorium
"
,
"
232.03806
"
,
5
,
10
,
"
Pa
"
,
"
Protactinium
"
,
"
231.0588
"
,
6
,
10
,
"
U
"
,
"
Uranium
"
,
"
238.02891
"
,
7
,
10
,
"
Np
"
,
"
Neptunium
"
,
"
(237)
"
,
8
,
10
,
"
Pu
"
,
"
Plutonium
"
,
"
(244)
"
,
9
,
10
,
"
Am
"
,
"
Americium
"
,
"
(243)
"
,
10
,
10
,
"
Cm
"
,
"
Curium
"
,
"
(247)
"
,
11
,
10
,
"
Bk
"
,
"
Berkelium
"
,
"
(247)
"
,
12
,
10
,
"
Cf
"
,
"
Californium
"
,
"
(251)
"
,
13
,
10
,
"
Es
"
,
"
Einstenium
"
,
"
(252)
"
,
14
,
10
,
"
Fm
"
,
"
Fermium
"
,
"
(257)
"
,
15
,
10
,
"
Md
"
,
"
Mendelevium
"
,
"
(258)
"
,
16
,
10
,
"
No
"
,
"
Nobelium
"
,
"
(259)
"
,
17
,
10
,
"
Lr
"
,
"
Lawrencium
"
,
"
(262)
"
,
18
,
10
,
"
Rf
"
,
"
Rutherfordium
"
,
"
(267)
"
,
4
,
7
,
"
Db
"
,
"
Dubnium
"
,
"
(268)
"
,
5
,
7
,
"
Sg
"
,
"
Seaborgium
"
,
"
(271)
"
,
6
,
7
,
"
Bh
"
,
"
Bohrium
"
,
"
(272)
"
,
7
,
7
,
"
Hs
"
,
"
Hassium
"
,
"
(270)
"
,
8
,
7
,
"
Mt
"
,
"
Meitnerium
"
,
"
(276)
"
,
9
,
7
,
"
Ds
"
,
"
Darmstadium
"
,
"
(281)
"
,
10
,
7
,
"
Rg
"
,
"
Roentgenium
"
,
"
(280)
"
,
11
,
7
,
"
Cn
"
,
"
Copernicium
"
,
"
(285)
"
,
12
,
7
,
"
Uut
"
,
"
Unutrium
"
,
"
(284)
"
,
13
,
7
,
"
Fl
"
,
"
Flerovium
"
,
"
(289)
"
,
14
,
7
,
"
Uup
"
,
"
Ununpentium
"
,
"
(288)
"
,
15
,
7
,
"
Lv
"
,
"
Livermorium
"
,
"
(293)
"
,
16
,
7
,
"
Uus
"
,
"
Ununseptium
"
,
"
(294)
"
,
17
,
7
,
"
Uuo
"
,
"
Ununoctium
"
,
"
(294)
"
,
18
,
7
];
var
camera
,
scene
,
renderer
;
var
controls
;
var
state
=
0
;
var
objects
=
[];
var
targets
=
{
table
:
[],
sphere
:
[],
helix
:
[],
grid
:
[]
};
init
();
animate
();
function
init
()
{
camera
=
new
THREE
.
PerspectiveCamera
(
40
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
10000
);
camera
.
position
.
z
=
3000
;
scene
=
new
THREE
.
Scene
();
// table
for
(
var
i
=
0
;
i
<
table
.
length
;
i
+=
5
)
{
var
element
=
document
.
createElement
(
'
div
'
);
element
.
className
=
'
element
'
;
element
.
style
.
backgroundColor
=
'
rgba(0,127,127,
'
+
(
Math
.
random
()
*
0.5
+
0.25
)
+
'
)
'
;
var
number
=
document
.
createElement
(
'
div
'
);
number
.
className
=
'
number
'
;
number
.
textContent
=
(
i
/
5
)
+
1
;
element
.
appendChild
(
number
);
var
symbol
=
document
.
createElement
(
'
div
'
);
symbol
.
className
=
'
symbol
'
;
symbol
.
textContent
=
table
[
i
];
element
.
appendChild
(
symbol
);
var
details
=
document
.
createElement
(
'
div
'
);
details
.
className
=
'
details
'
;
details
.
innerHTML
=
table
[
i
+
1
]
+
'
<br>
'
+
table
[
i
+
2
];
element
.
appendChild
(
details
);
var
object
=
new
THREE
.
CSS3DObject
(
element
);
object
.
position
.
x
=
Math
.
random
()
*
4000
-
2000
;
object
.
position
.
y
=
Math
.
random
()
*
4000
-
2000
;
object
.
position
.
z
=
Math
.
random
()
*
4000
-
2000
;
scene
.
add
(
object
);
objects
.
push
(
object
);
//
var
object
=
new
THREE
.
Object3D
();
object
.
position
.
x
=
(
table
[
i
+
3
]
*
140
)
-
1330
;
object
.
position
.
y
=
-
(
table
[
i
+
4
]
*
180
)
+
990
;
targets
.
table
.
push
(
object
);
}
// sphere
var
vector
=
new
THREE
.
Vector3
();
for
(
var
i
=
0
,
l
=
objects
.
length
;
i
<
l
;
i
++
)
{
var
phi
=
Math
.
acos
(
-
1
+
(
2
*
i
)
/
l
);
var
theta
=
Math
.
sqrt
(
l
*
Math
.
PI
)
*
phi
;
var
object
=
new
THREE
.
Object3D
();
object
.
position
.
x
=
800
*
Math
.
cos
(
theta
)
*
Math
.
sin
(
phi
);
object
.
position
.
y
=
800
*
Math
.
sin
(
theta
)
*
Math
.
sin
(
phi
);
object
.
position
.
z
=
800
*
Math
.
cos
(
phi
);
vector
.
copy
(
object
.
position
).
multiplyScalar
(
2
);
object
.
lookAt
(
vector
);
targets
.
sphere
.
push
(
object
);
}
// helix
var
vector
=
new
THREE
.
Vector3
();
for
(
var
i
=
0
,
l
=
objects
.
length
;
i
<
l
;
i
++
)
{
var
phi
=
i
*
0.175
+
Math
.
PI
;
var
object
=
new
THREE
.
Object3D
();
object
.
position
.
x
=
900
*
Math
.
sin
(
phi
);
object
.
position
.
y
=
-
(
i
*
8
)
+
450
;
object
.
position
.
z
=
900
*
Math
.
cos
(
phi
);
vector
.
x
=
object
.
position
.
x
*
2
;
vector
.
y
=
object
.
position
.
y
;
vector
.
z
=
object
.
position
.
z
*
2
;
object
.
lookAt
(
vector
);
targets
.
helix
.
push
(
object
);
}
// grid
for
(
var
i
=
0
;
i
<
objects
.
length
;
i
++
)
{
var
object
=
new
THREE
.
Object3D
();
object
.
position
.
x
=
(
(
i
%
5
)
*
400
)
-
800
;
object
.
position
.
y
=
(
-
(
Math
.
floor
(
i
/
5
)
%
5
)
*
400
)
+
800
;
object
.
position
.
z
=
(
Math
.
floor
(
i
/
25
)
)
*
1000
-
2000
;
targets
.
grid
.
push
(
object
);
}
//
renderer
=
new
THREE
.
CSS3DStereoRenderer
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
domElement
.
style
.
position
=
'
absolute
'
;
document
.
getElementById
(
'
container
'
).
appendChild
(
renderer
.
domElement
);
//
controls
=
new
THREE
.
TrackballControls
(
camera
,
renderer
.
domElement
);
controls
.
rotateSpeed
=
0.5
;
controls
.
minDistance
=
500
;
controls
.
maxDistance
=
6000
;
controls
.
addEventListener
(
'
change
'
,
render
);
transform
(
targets
.
table
,
5000
);
//
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
//
var
isFullscreen
=
false
;
window
.
addEventListener
(
'
touchend
'
,
function
()
{
if
(
isFullscreen
===
false
)
{
document
.
body
.
webkitRequestFullscreen
();
isFullscreen
=
true
;
}
else
{
document
.
webkitExitFullscreen
();
isFullscreen
=
false
;
}
}
);
function
transform
(
positions
,
duration
)
{
TWEEN
.
removeAll
();
for
(
var
i
=
0
;
i
<
objects
.
length
;
i
++
)
{
var
object
=
objects
[
i
];
var
target
=
positions
[
i
];
new
TWEEN
.
Tween
(
object
.
position
)
.
to
(
{
x
:
target
.
position
.
x
,
y
:
target
.
position
.
y
,
z
:
target
.
position
.
z
},
Math
.
random
()
*
duration
+
duration
)
.
easing
(
TWEEN
.
Easing
.
Exponential
.
InOut
)
.
start
();
new
TWEEN
.
Tween
(
object
.
rotation
)
.
to
(
{
x
:
target
.
rotation
.
x
,
y
:
target
.
rotation
.
y
,
z
:
target
.
rotation
.
z
},
Math
.
random
()
*
duration
+
duration
)
.
easing
(
TWEEN
.
Easing
.
Exponential
.
InOut
)
.
start
();
}
new
TWEEN
.
Tween
(
this
)
.
to
(
{},
duration
*
2
)
.
onUpdate
(
render
)
.
onComplete
(
function
()
{
switch
(
state
)
{
case
0
:
transform
(
targets
.
sphere
,
2000
);
break
;
case
1
:
transform
(
targets
.
helix
,
2000
);
break
;
case
2
:
transform
(
targets
.
grid
,
2000
);
break
;
case
3
:
transform
(
targets
.
table
,
2000
);
break
;
}
state
=
state
+
1
;
if
(
state
>
3
)
state
=
0
;
})
.
start
();
}
function
onWindowResize
()
{
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
render
();
}
function
animate
()
{
requestAnimationFrame
(
animate
);
TWEEN
.
update
();
controls
.
update
();
}
function
render
()
{
renderer
.
render
(
scene
,
camera
);
}
</script>
</body>
</html>
examples/index.html
浏览文件 @
b99aed7c
...
...
@@ -290,6 +290,9 @@
"
css3d_sprites
"
,
"
css3d_youtube
"
],
"
css3d stereo
"
:
[
"
css3dstereo_periodictable
"
,
],
"
misc
"
:
[
"
misc_animation_keys
"
,
"
misc_controls_deviceorientation
"
,
...
...
examples/js/renderers/CSS3DStereoRenderer.js
0 → 100644
浏览文件 @
b99aed7c
/**
* @author mrdoob / http://mrdoob.com/
*/
THREE
.
CSS3DObject
=
function
(
element
)
{
THREE
.
Object3D
.
call
(
this
);
this
.
elementL
=
element
.
cloneNode
(
true
);
this
.
elementL
.
style
.
position
=
'
absolute
'
;
this
.
elementR
=
element
.
cloneNode
(
true
);
this
.
elementR
.
style
.
position
=
'
absolute
'
;
this
.
addEventListener
(
'
removed
'
,
function
(
event
)
{
if
(
this
.
elementL
.
parentNode
!==
null
)
{
this
.
elementL
.
parentNode
.
removeChild
(
this
.
elementL
);
}
if
(
this
.
elementR
.
parentNode
!==
null
)
{
this
.
elementR
.
parentNode
.
removeChild
(
this
.
elementR
);
}
}
);
};
THREE
.
CSS3DObject
.
prototype
=
Object
.
create
(
THREE
.
Object3D
.
prototype
);
THREE
.
CSS3DSprite
=
function
(
element
)
{
THREE
.
CSS3DObject
.
call
(
this
,
element
);
};
THREE
.
CSS3DSprite
.
prototype
=
Object
.
create
(
THREE
.
CSS3DObject
.
prototype
);
//
THREE
.
CSS3DStereoRenderer
=
function
()
{
console
.
log
(
'
THREE.CSS3DRenderer
'
,
THREE
.
REVISION
);
var
_width
,
_height
;
var
_widthHalf
,
_heightHalf
;
var
matrix
=
new
THREE
.
Matrix4
();
var
_position
=
new
THREE
.
Vector3
();
var
_quaternion
=
new
THREE
.
Quaternion
();
var
_scale
=
new
THREE
.
Vector3
();
var
_cameraL
=
new
THREE
.
PerspectiveCamera
();
var
_cameraR
=
new
THREE
.
PerspectiveCamera
();
var
_target
=
new
THREE
.
Vector3
();
this
.
separation
=
6
;
this
.
targetDistance
=
500
;
//
var
domElement
=
document
.
createElement
(
'
div
'
);
this
.
domElement
=
domElement
;
//
var
domElementL
=
document
.
createElement
(
'
div
'
);
domElementL
.
style
.
display
=
'
inline-block
'
;
domElementL
.
style
.
overflow
=
'
hidden
'
;
domElementL
.
style
.
WebkitTransformStyle
=
'
preserve-3d
'
;
domElementL
.
style
.
MozTransformStyle
=
'
preserve-3d
'
;
domElementL
.
style
.
oTransformStyle
=
'
preserve-3d
'
;
domElementL
.
style
.
transformStyle
=
'
preserve-3d
'
;
domElement
.
appendChild
(
domElementL
);
var
cameraElementL
=
document
.
createElement
(
'
div
'
);
cameraElementL
.
style
.
WebkitTransformStyle
=
'
preserve-3d
'
;
cameraElementL
.
style
.
MozTransformStyle
=
'
preserve-3d
'
;
cameraElementL
.
style
.
oTransformStyle
=
'
preserve-3d
'
;
cameraElementL
.
style
.
transformStyle
=
'
preserve-3d
'
;
domElementL
.
appendChild
(
cameraElementL
);
//
var
domElementR
=
document
.
createElement
(
'
div
'
);
domElementR
.
style
.
display
=
'
inline-block
'
;
domElementR
.
style
.
overflow
=
'
hidden
'
;
domElementR
.
style
.
WebkitTransformStyle
=
'
preserve-3d
'
;
domElementR
.
style
.
MozTransformStyle
=
'
preserve-3d
'
;
domElementR
.
style
.
oTransformStyle
=
'
preserve-3d
'
;
domElementR
.
style
.
transformStyle
=
'
preserve-3d
'
;
domElement
.
appendChild
(
domElementR
);
var
cameraElementR
=
document
.
createElement
(
'
div
'
);
cameraElementR
.
style
.
WebkitTransformStyle
=
'
preserve-3d
'
;
cameraElementR
.
style
.
MozTransformStyle
=
'
preserve-3d
'
;
cameraElementR
.
style
.
oTransformStyle
=
'
preserve-3d
'
;
cameraElementR
.
style
.
transformStyle
=
'
preserve-3d
'
;
domElementR
.
appendChild
(
cameraElementR
);
this
.
setClearColor
=
function
()
{
};
this
.
setSize
=
function
(
width
,
height
)
{
domElement
.
style
.
width
=
width
+
'
px
'
;
domElement
.
style
.
height
=
height
+
'
px
'
;
_width
=
width
/
2
;
_height
=
height
;
_widthHalf
=
_width
/
2
;
_heightHalf
=
_height
/
2
;
domElementL
.
style
.
width
=
_width
+
'
px
'
;
domElementL
.
style
.
height
=
_height
+
'
px
'
;
cameraElementL
.
style
.
width
=
_width
+
'
px
'
;
cameraElementL
.
style
.
height
=
_height
+
'
px
'
;
domElementR
.
style
.
width
=
_width
+
'
px
'
;
domElementR
.
style
.
height
=
_height
+
'
px
'
;
cameraElementR
.
style
.
width
=
_width
+
'
px
'
;
cameraElementR
.
style
.
height
=
_height
+
'
px
'
;
};
var
epsilon
=
function
(
value
)
{
return
Math
.
abs
(
value
)
<
0.000001
?
0
:
value
;
};
var
getCameraCSSMatrix
=
function
(
matrix
)
{
var
elements
=
matrix
.
elements
;
return
'
matrix3d(
'
+
epsilon
(
elements
[
0
]
)
+
'
,
'
+
epsilon
(
-
elements
[
1
]
)
+
'
,
'
+
epsilon
(
elements
[
2
]
)
+
'
,
'
+
epsilon
(
elements
[
3
]
)
+
'
,
'
+
epsilon
(
elements
[
4
]
)
+
'
,
'
+
epsilon
(
-
elements
[
5
]
)
+
'
,
'
+
epsilon
(
elements
[
6
]
)
+
'
,
'
+
epsilon
(
elements
[
7
]
)
+
'
,
'
+
epsilon
(
elements
[
8
]
)
+
'
,
'
+
epsilon
(
-
elements
[
9
]
)
+
'
,
'
+
epsilon
(
elements
[
10
]
)
+
'
,
'
+
epsilon
(
elements
[
11
]
)
+
'
,
'
+
epsilon
(
elements
[
12
]
)
+
'
,
'
+
epsilon
(
-
elements
[
13
]
)
+
'
,
'
+
epsilon
(
elements
[
14
]
)
+
'
,
'
+
epsilon
(
elements
[
15
]
)
+
'
)
'
;
};
var
getObjectCSSMatrix
=
function
(
matrix
)
{
var
elements
=
matrix
.
elements
;
return
'
translate3d(-50%,-50%,0) matrix3d(
'
+
epsilon
(
elements
[
0
]
)
+
'
,
'
+
epsilon
(
elements
[
1
]
)
+
'
,
'
+
epsilon
(
elements
[
2
]
)
+
'
,
'
+
epsilon
(
elements
[
3
]
)
+
'
,
'
+
epsilon
(
-
elements
[
4
]
)
+
'
,
'
+
epsilon
(
-
elements
[
5
]
)
+
'
,
'
+
epsilon
(
-
elements
[
6
]
)
+
'
,
'
+
epsilon
(
-
elements
[
7
]
)
+
'
,
'
+
epsilon
(
elements
[
8
]
)
+
'
,
'
+
epsilon
(
elements
[
9
]
)
+
'
,
'
+
epsilon
(
elements
[
10
]
)
+
'
,
'
+
epsilon
(
elements
[
11
]
)
+
'
,
'
+
epsilon
(
elements
[
12
]
)
+
'
,
'
+
epsilon
(
elements
[
13
]
)
+
'
,
'
+
epsilon
(
elements
[
14
]
)
+
'
,
'
+
epsilon
(
elements
[
15
]
)
+
'
)
'
;
};
var
renderObject
=
function
(
object
,
camera
,
cameraElement
,
side
)
{
if
(
object
instanceof
THREE
.
CSS3DObject
)
{
var
style
;
if
(
object
instanceof
THREE
.
CSS3DSprite
)
{
// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
matrix
.
copy
(
camera
.
matrixWorldInverse
);
matrix
.
transpose
();
matrix
.
copyPosition
(
object
.
matrixWorld
);
matrix
.
scale
(
object
.
scale
);
matrix
.
elements
[
3
]
=
0
;
matrix
.
elements
[
7
]
=
0
;
matrix
.
elements
[
11
]
=
0
;
matrix
.
elements
[
15
]
=
1
;
style
=
getObjectCSSMatrix
(
matrix
);
}
else
{
style
=
getObjectCSSMatrix
(
object
.
matrixWorld
);
}
var
element
=
object
[
'
element
'
+
side
];
element
.
style
.
WebkitTransform
=
style
;
element
.
style
.
MozTransform
=
style
;
element
.
style
.
oTransform
=
style
;
element
.
style
.
transform
=
style
;
if
(
element
.
parentNode
!==
cameraElement
)
{
cameraElement
.
appendChild
(
element
);
}
}
for
(
var
i
=
0
,
l
=
object
.
children
.
length
;
i
<
l
;
i
++
)
{
renderObject
(
object
.
children
[
i
],
camera
,
cameraElement
,
side
);
}
};
this
.
render
=
function
(
scene
,
camera
)
{
scene
.
updateMatrixWorld
();
if
(
camera
.
parent
===
undefined
)
camera
.
updateMatrixWorld
();
camera
.
matrixWorld
.
decompose
(
_position
,
_quaternion
,
_scale
);
_target
.
set
(
0
,
0
,
-
this
.
targetDistance
);
_target
.
applyQuaternion
(
_quaternion
);
_target
.
add
(
_position
);
var
fov
=
0.5
/
Math
.
tan
(
THREE
.
Math
.
degToRad
(
camera
.
fov
*
0.5
)
)
*
_height
;
// Left
_cameraL
.
fov
=
camera
.
fov
;
_cameraL
.
aspect
=
0.5
*
camera
.
aspect
;
_cameraL
.
updateProjectionMatrix
();
_cameraL
.
near
=
camera
.
near
;
_cameraL
.
far
=
camera
.
far
;
_cameraL
.
position
.
copy
(
_position
);
_cameraL
.
translateX
(
-
this
.
separation
);
_cameraL
.
lookAt
(
_target
);
_cameraL
.
updateMatrixWorld
();
domElementL
.
style
.
WebkitPerspective
=
fov
+
"
px
"
;
domElementL
.
style
.
MozPerspective
=
fov
+
"
px
"
;
domElementL
.
style
.
oPerspective
=
fov
+
"
px
"
;
domElementL
.
style
.
perspective
=
fov
+
"
px
"
;
_cameraL
.
matrixWorldInverse
.
getInverse
(
_cameraL
.
matrixWorld
);
var
style
=
"
translate3d(0,0,
"
+
fov
+
"
px)
"
+
getCameraCSSMatrix
(
_cameraL
.
matrixWorldInverse
)
+
"
translate3d(
"
+
_widthHalf
+
"
px,
"
+
_heightHalf
+
"
px, 0)
"
;
cameraElementL
.
style
.
WebkitTransform
=
style
;
cameraElementL
.
style
.
MozTransform
=
style
;
cameraElementL
.
style
.
oTransform
=
style
;
cameraElementL
.
style
.
transform
=
style
;
renderObject
(
scene
,
_cameraL
,
cameraElementL
,
'
L
'
);
// Right
_cameraR
.
projectionMatrix
=
_cameraL
.
projectionMatrix
;
_cameraR
.
near
=
camera
.
near
;
_cameraR
.
far
=
camera
.
far
;
_cameraR
.
position
.
copy
(
_position
);
_cameraR
.
translateX
(
this
.
separation
);
_cameraR
.
lookAt
(
_target
);
_cameraR
.
updateMatrixWorld
();
domElementR
.
style
.
WebkitPerspective
=
fov
+
"
px
"
;
domElementR
.
style
.
MozPerspective
=
fov
+
"
px
"
;
domElementR
.
style
.
oPerspective
=
fov
+
"
px
"
;
domElementR
.
style
.
perspective
=
fov
+
"
px
"
;
_cameraR
.
matrixWorldInverse
.
getInverse
(
_cameraR
.
matrixWorld
);
var
style
=
"
translate3d(0,0,
"
+
fov
+
"
px)
"
+
getCameraCSSMatrix
(
_cameraR
.
matrixWorldInverse
)
+
"
translate3d(
"
+
_widthHalf
+
"
px,
"
+
_heightHalf
+
"
px, 0)
"
;
cameraElementR
.
style
.
WebkitTransform
=
style
;
cameraElementR
.
style
.
MozTransform
=
style
;
cameraElementR
.
style
.
oTransform
=
style
;
cameraElementR
.
style
.
transform
=
style
;
renderObject
(
scene
,
_cameraR
,
cameraElementR
,
'
R
'
);
};
};
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录