Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
61ca6974
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,发现更多精彩内容 >>
提交
61ca6974
编写于
5月 29, 2011
作者:
E
Eberhard Gräther
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
added modified earth example for TrackballCamera
上级
f4a08e57
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
338 addition
and
0 deletion
+338
-0
examples/webgl_trackballcamera_earth.html
examples/webgl_trackballcamera_earth.html
+338
-0
未找到文件。
examples/webgl_trackballcamera_earth.html
0 → 100644
浏览文件 @
61ca6974
<!DOCTYPE html>
<html>
<title>
three.js webgl - trackball camera - earth
</title>
<style
type=
"text/css"
>
body
{
background
:
#FFF
;
color
:
#EEE
;
padding
:
0
;
margin
:
0
;
font-weight
:
bold
;
overflow
:
hidden
;
font-family
:
Monospace
;
font-size
:
13px
;
text-align
:
center
;
}
#info
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
padding
:
5px
;
z-index
:
100
;
}
a
{
color
:
green
;
}
b
{
color
:
green
;
}
</style>
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"../src/extras/cameras/TrackballCamera.js"
></script>
<script
type=
"text/javascript"
src=
"js/Detector.js"
></script>
<script
type=
"text/javascript"
src=
"js/RequestAnimationFrame.js"
></script>
<script
type=
"text/javascript"
src=
"js/Stats.js"
></script>
</head>
<body>
<div
id=
"info"
>
<a
href=
"http://github.com/mrdoob/three.js"
target=
"_blank"
>
three.js
</a>
- earth [trackball camera]
<br/><br/>
<b>
MOVE
</b>
mouse
&
press
<b>
LEFT/SHIFT:
</b>
rotate,
<b>
MIDDLE/ALT:
</b>
zoom,
<b>
RIGHT/CTRL:
</b>
pan
</div>
<script
type=
"text/javascript"
>
if
(
!
Detector
.
webgl
)
{
Detector
.
addGetWebGLMessage
();
return
;
}
var
radius
=
6371
,
tilt
=
0.41
,
rotationSpeed
=
0.1
,
cloudsScale
=
1.005
,
moonScale
=
0.23
,
height
=
window
.
innerHeight
,
width
=
window
.
innerWidth
,
container
,
stats
,
camera
,
scene
,
renderer
,
geometry
,
meshPlanet
,
meshClouds
,
meshMoon
,
meshMoon2
,
meshMoon3
,
dirLight
,
ambientLight
,
time
=
new
Date
().
getTime
();
window
.
onload
=
function
()
{
init
();
animate
();
}
function
init
()
{
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
scene
=
new
THREE
.
Scene
();
renderer
=
new
THREE
.
WebGLRenderer
(
{
clearAlpha
:
1
,
clearColor
:
0x000000
}
);
renderer
.
setSize
(
width
,
height
);
renderer
.
sortObjects
=
false
;
renderer
.
autoClear
=
false
;
container
.
appendChild
(
renderer
.
domElement
);
camera
=
new
THREE
.
TrackballCamera
({
fov
:
25
,
aspect
:
width
/
height
,
near
:
50
,
far
:
1
e7
,
rotateSpeed
:
0.6
,
zoomSpeed
:
1.2
,
panSpeed
:
0.2
,
noZoom
:
false
,
noPan
:
false
,
staticMoving
:
false
,
dynamicDampingFactor
:
0.2
,
minDistance
:
radius
*
1.1
,
maxDistance
:
radius
*
100
,
keys
:
[
16
,
18
,
17
],
// [ rotateKey, zoomKey, panKey ],
domElement
:
renderer
.
domElement
,
});
camera
.
position
.
z
=
radius
*
7
;
dirLight
=
new
THREE
.
DirectionalLight
(
0xFFFFFF
);
dirLight
.
position
.
set
(
-
1
,
0
,
1
);
dirLight
.
position
.
normalize
();
scene
.
addLight
(
dirLight
);
ambientLight
=
new
THREE
.
AmbientLight
(
0xFFFFFF
);
scene
.
addLight
(
ambientLight
);
var
planetTexture
=
THREE
.
ImageUtils
.
loadTexture
(
"
textures/planets/earth_atmos_2048.jpg
"
),
cloudsTexture
=
THREE
.
ImageUtils
.
loadTexture
(
"
textures/planets/earth_clouds_1024.png
"
),
normalTexture
=
THREE
.
ImageUtils
.
loadTexture
(
"
textures/planets/earth_normal_2048.jpg
"
),
specularTexture
=
THREE
.
ImageUtils
.
loadTexture
(
"
textures/planets/earth_specular_2048.jpg
"
),
moonTexture
=
THREE
.
ImageUtils
.
loadTexture
(
"
textures/planets/moon_1024.jpg
"
);
var
shader
=
THREE
.
ShaderUtils
.
lib
[
"
normal
"
],
uniforms
=
THREE
.
UniformsUtils
.
clone
(
shader
.
uniforms
);
uniforms
[
"
tNormal
"
].
texture
=
normalTexture
;
uniforms
[
"
uNormalScale
"
].
value
=
0.85
;
uniforms
[
"
tDiffuse
"
].
texture
=
planetTexture
;
uniforms
[
"
tSpecular
"
].
texture
=
specularTexture
;
uniforms
[
"
enableAO
"
].
value
=
false
;
uniforms
[
"
enableDiffuse
"
].
value
=
true
;
uniforms
[
"
enableSpecular
"
].
value
=
true
;
uniforms
[
"
uDirLightPos
"
].
value
=
dirLight
.
position
;
uniforms
[
"
uDirLightColor
"
].
value
=
dirLight
.
color
;
uniforms
[
"
uAmbientLightColor
"
].
value
=
ambientLight
.
color
;
uniforms
[
"
uDiffuseColor
"
].
value
.
setHex
(
0xffffff
);
uniforms
[
"
uSpecularColor
"
].
value
.
setHex
(
0xaaaaaa
);
uniforms
[
"
uAmbientColor
"
].
value
.
setHex
(
0x000000
);
uniforms
[
"
uShininess
"
].
value
=
30
;
var
materialNormalMap
=
new
THREE
.
MeshShaderMaterial
({
fragmentShader
:
shader
.
fragmentShader
,
vertexShader
:
shader
.
vertexShader
,
uniforms
:
uniforms
});
// planet
geometry
=
new
THREE
.
Sphere
(
radius
,
100
,
50
);
geometry
.
computeTangents
();
meshPlanet
=
new
THREE
.
Mesh
(
geometry
,
materialNormalMap
);
meshPlanet
.
rotation
.
y
=
1.3
;
meshPlanet
.
rotation
.
z
=
tilt
;
scene
.
addObject
(
meshPlanet
);
// clouds
var
materialClouds
=
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffffff
,
map
:
cloudsTexture
,
transparent
:
true
}
);
meshClouds
=
new
THREE
.
Mesh
(
geometry
,
materialClouds
);
meshClouds
.
scale
.
set
(
cloudsScale
,
cloudsScale
,
cloudsScale
);
meshClouds
.
rotation
.
z
=
tilt
;
scene
.
addObject
(
meshClouds
);
// moon
var
materialMoon
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xffffff
,
map
:
moonTexture
}
);
meshMoon
=
new
THREE
.
Mesh
(
geometry
,
materialMoon
);
meshMoon
.
position
.
set
(
radius
*
5
,
0
,
0
);
meshMoon
.
scale
.
set
(
moonScale
,
moonScale
,
moonScale
);
scene
.
addObject
(
meshMoon
);
// moon2
var
materialMoon2
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xffffff
,
map
:
moonTexture
}
);
meshMoon2
=
new
THREE
.
Mesh
(
geometry
,
materialMoon
);
meshMoon2
.
position
.
set
(
-
radius
*
7
,
0
,
radius
*
3
);
meshMoon2
.
scale
.
set
(
moonScale
,
moonScale
,
moonScale
);
scene
.
addObject
(
meshMoon2
);
// moon3
var
materialMoon3
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xffffff
,
map
:
moonTexture
}
);
meshMoon3
=
new
THREE
.
Mesh
(
geometry
,
materialMoon
);
meshMoon3
.
position
.
set
(
radius
,
0
,
-
radius
*
10
);
meshMoon3
.
scale
.
set
(
moonScale
,
moonScale
,
moonScale
);
scene
.
addObject
(
meshMoon3
);
// stars
var
i
,
vector
,
starsGeometry
=
new
THREE
.
Geometry
();
for
(
i
=
0
;
i
<
1500
;
i
++
)
{
vector
=
new
THREE
.
Vector3
(
Math
.
random
()
*
2
-
1
,
Math
.
random
()
*
2
-
1
,
Math
.
random
()
*
2
-
1
);
vector
.
multiplyScalar
(
radius
);
starsGeometry
.
vertices
.
push
(
new
THREE
.
Vertex
(
vector
)
);
}
var
stars
,
starsMaterials
=
[
new
THREE
.
ParticleBasicMaterial
(
{
color
:
0x555555
,
size
:
2
,
sizeAttenuation
:
false
}
),
new
THREE
.
ParticleBasicMaterial
(
{
color
:
0x555555
,
size
:
1
,
sizeAttenuation
:
false
}
),
new
THREE
.
ParticleBasicMaterial
(
{
color
:
0x333333
,
size
:
2
,
sizeAttenuation
:
false
}
),
new
THREE
.
ParticleBasicMaterial
(
{
color
:
0x3a3a3a
,
size
:
1
,
sizeAttenuation
:
false
}
),
new
THREE
.
ParticleBasicMaterial
(
{
color
:
0x1a1a1a
,
size
:
2
,
sizeAttenuation
:
false
}
),
new
THREE
.
ParticleBasicMaterial
(
{
color
:
0x1a1a1a
,
size
:
1
,
sizeAttenuation
:
false
}
)
];
for
(
i
=
10
;
i
<
30
;
i
++
)
{
stars
=
new
THREE
.
ParticleSystem
(
starsGeometry
,
starsMaterials
[
i
%
6
]
);
stars
.
rotation
.
x
=
Math
.
random
()
*
6
;
stars
.
rotation
.
y
=
Math
.
random
()
*
6
;
stars
.
rotation
.
z
=
Math
.
random
()
*
6
;
var
s
=
i
*
10
;
stars
.
scale
.
set
(
s
,
s
,
s
);
stars
.
matrixAutoUpdate
=
false
;
stars
.
updateMatrix
();
scene
.
addObject
(
stars
);
}
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
stats
.
domElement
.
style
.
top
=
'
0px
'
;
stats
.
domElement
.
style
.
zIndex
=
100
;
container
.
appendChild
(
stats
.
domElement
);
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
};
function
onWindowResize
(
event
)
{
width
=
window
.
innerWidth
;
height
=
window
.
innerHeight
;
renderer
.
setSize
(
width
,
height
);
camera
.
aspect
=
width
/
height
;
camera
.
updateProjectionMatrix
();
camera
.
screen
.
width
=
width
;
camera
.
screen
.
height
=
height
;
camera
.
radius
=
(
width
+
height
)
/
4
;
};
function
animate
()
{
requestAnimationFrame
(
animate
);
render
();
stats
.
update
();
};
function
render
()
{
var
t
=
new
Date
().
getTime
(),
dt
=
(
t
-
time
)
/
1000
;
time
=
t
;
meshPlanet
.
rotation
.
y
+=
rotationSpeed
*
dt
;
meshClouds
.
rotation
.
y
+=
1.25
*
rotationSpeed
*
dt
;
var
angle
=
dt
*
rotationSpeed
;
meshMoon
.
position
=
rotateY
(
meshMoon
.
position
,
angle
*
2
);
meshMoon
.
rotation
.
y
+=
angle
;
meshMoon2
.
position
=
rotateY
(
meshMoon2
.
position
,
-
angle
*
1.5
);
meshMoon2
.
rotation
.
y
+=
angle
;
meshMoon3
.
position
=
rotateY
(
meshMoon3
.
position
,
angle
);
meshMoon3
.
rotation
.
y
+=
angle
;
renderer
.
clear
();
renderer
.
render
(
scene
,
camera
);
};
function
rotateY
(
vector
,
angle
)
{
return
new
THREE
.
Vector3
(
Math
.
cos
(
angle
)
*
vector
.
x
-
Math
.
sin
(
angle
)
*
vector
.
z
,
0
,
Math
.
sin
(
angle
)
*
vector
.
x
+
Math
.
cos
(
angle
)
*
vector
.
z
);
};
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录