-
Notifications
You must be signed in to change notification settings - Fork 77
/
Copy pathearth.html
143 lines (124 loc) · 4.94 KB
/
earth.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<script src='vendor/three.js/build/three.min.js'></script>
<script src='../threex.planets.js'></script>
<script src='../threex.atmospherematerial.js'></script>
<!-- include for threex.glowdatgui -->
<script src='vendor/three.js/examples/js/libs/dat.gui.min.js'></script>
<script src="../threex.atmospheredatgui.js"></script>
<body style='margin: 0px; background-color: #000000; overflow: hidden;'><script>
var renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.shadowMapEnabled = true
var onRenderFcts= [];
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100 );
camera.position.z = 1;
var light = new THREE.AmbientLight( 0x222222 )
scene.add( light )
var light = new THREE.DirectionalLight( 0xffffff, 1 )
light.position.set(5,5,5)
scene.add( light )
light.castShadow = true
light.shadowCameraNear = 0.01
light.shadowCameraFar = 15
light.shadowCameraFov = 45
light.shadowCameraLeft = -1
light.shadowCameraRight = 1
light.shadowCameraTop = 1
light.shadowCameraBottom= -1
// light.shadowCameraVisible = true
light.shadowBias = 0.001
light.shadowDarkness = 0.2
light.shadowMapWidth = 1024
light.shadowMapHeight = 1024
//////////////////////////////////////////////////////////////////////////////////
// added starfield //
//////////////////////////////////////////////////////////////////////////////////
var starSphere = THREEx.Planets.createStarfield()
scene.add(starSphere)
//////////////////////////////////////////////////////////////////////////////////
// add an object and make it move //
//////////////////////////////////////////////////////////////////////////////////
// var datGUI = new dat.GUI()
var containerEarth = new THREE.Object3D()
containerEarth.rotateZ(-23.4 * Math.PI/180)
containerEarth.position.z = 0
scene.add(containerEarth)
var moonMesh = THREEx.Planets.createMoon()
moonMesh.position.set(0.5,0.5,0.5)
moonMesh.scale.multiplyScalar(1/5)
moonMesh.receiveShadow = true
moonMesh.castShadow = true
containerEarth.add(moonMesh)
var earthMesh = THREEx.Planets.createEarth()
earthMesh.receiveShadow = true
earthMesh.castShadow = true
containerEarth.add(earthMesh)
onRenderFcts.push(function(delta, now){
earthMesh.rotation.y += 1/32 * delta;
})
var geometry = new THREE.SphereGeometry(0.5, 32, 32)
var material = THREEx.createAtmosphereMaterial()
material.uniforms.glowColor.value.set(0x00b3ff)
material.uniforms.coeficient.value = 0.8
material.uniforms.power.value = 2.0
var mesh = new THREE.Mesh(geometry, material );
mesh.scale.multiplyScalar(1.01);
containerEarth.add( mesh );
// new THREEx.addAtmosphereMaterial2DatGui(material, datGUI)
var geometry = new THREE.SphereGeometry(0.5, 32, 32)
var material = THREEx.createAtmosphereMaterial()
material.side = THREE.BackSide
material.uniforms.glowColor.value.set(0x00b3ff)
material.uniforms.coeficient.value = 0.5
material.uniforms.power.value = 4.0
var mesh = new THREE.Mesh(geometry, material );
mesh.scale.multiplyScalar(1.15);
containerEarth.add( mesh );
// new THREEx.addAtmosphereMaterial2DatGui(material, datGUI)
var earthCloud = THREEx.Planets.createEarthCloud()
earthCloud.receiveShadow = true
earthCloud.castShadow = true
containerEarth.add(earthCloud)
onRenderFcts.push(function(delta, now){
earthCloud.rotation.y += 1/8 * delta;
})
//////////////////////////////////////////////////////////////////////////////////
// Camera Controls //
//////////////////////////////////////////////////////////////////////////////////
var mouse = {x : 0, y : 0}
document.addEventListener('mousemove', function(event){
mouse.x = (event.clientX / window.innerWidth ) - 0.5
mouse.y = (event.clientY / window.innerHeight) - 0.5
}, false)
onRenderFcts.push(function(delta, now){
camera.position.x += (mouse.x*5 - camera.position.x) * (delta*3)
camera.position.y += (mouse.y*5 - camera.position.y) * (delta*3)
camera.lookAt( scene.position )
})
//////////////////////////////////////////////////////////////////////////////////
// render the scene //
//////////////////////////////////////////////////////////////////////////////////
onRenderFcts.push(function(){
renderer.render( scene, camera );
})
//////////////////////////////////////////////////////////////////////////////////
// loop runner //
//////////////////////////////////////////////////////////////////////////////////
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
// keep looping
requestAnimationFrame( animate );
// measure time
lastTimeMsec = lastTimeMsec || nowMsec-1000/60
var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
lastTimeMsec = nowMsec
// call each update function
onRenderFcts.forEach(function(onRenderFct){
onRenderFct(deltaMsec/1000, nowMsec/1000)
})
})
</script></body>