-
Notifications
You must be signed in to change notification settings - Fork 0
/
sourcecode.txt
253 lines (191 loc) · 6.15 KB
/
sourcecode.txt
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
//Setup:
//get the DOM element in which you want to attach the scene
const container = document.querySelector('#container');
//create a WebGL renderer
const renderer = new THREE.WebGLRenderer();
//set the renderer size to window inner width and height
const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;
//set the renderer size to window inner width and height
renderer.setSize(WIDTH, HEIGHT);
//Adding a Camera
//set camera attributes
const VIEW_ANGLE = 45;
const ASPECT = WIDTH / HEIGHT;
const NEAR = 0.1;
const FAR = 10000;
//create a camera
const camera =
new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR
);
//set the camera position - x, y, z
camera.position.set( 0, 0, 500 );
// Create a scene
const scene = new THREE.Scene();
// load background image
var backgroundImage1 = new THREE.TextureLoader().load('bnight.jpg');
//set the scene background
scene.background = backgroundImage1;
// load an image as the background
var backgroundImage = new THREE.TextureLoader().load('universenight.jpg');
//add the camera to the scene.
scene.add(camera);
// Attach the renderer to the DOM element.
container.appendChild(renderer.domElement);
//Three.js uses geometric meshes to create primitive 3D shapes like spheres, cubes, etc. I’ll be using a sphere.
// Set up the sphere attributes
const RADIUS = 200;
const SEGMENTS = 50;
const RINGS = 50;
//Create a group (which will later include our sphere and its texture meshed together)
const globe = new THREE.Group();
//add it to the scene
scene.add(globe);
//load texture and create sphere
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var earthdaytexture , earthnighttexture;
var isNight = false;
var sphere;
// Instantiate a loader
var loader = new THREE.TextureLoader();
var earth_bump = new THREE.TextureLoader().load("bump.jpg");
// Load the earth day texture
loader.load('earth.jpg', function (texture) {
earthdaytexture = texture;
//create the sphere
sphere = new THREE.Mesh(
new THREE.SphereGeometry( RADIUS, SEGMENTS, RINGS ),
new THREE.MeshPhongMaterial( { map: earthdaytexture, overdraw: 0.2 ,shininess: 10 ,
bumpScale: 0.6
} )
);
//add sphere to globe group
globe.add(sphere);
});
// Load the earth night texture
loader.load('earthnight.jpg', function (texture) {
earthnighttexture = texture;
});
// create cloud spheres
var cloud_texture = new THREE.TextureLoader().load('cloud.png');
var cloud_geometry = new THREE.SphereGeometry(207, 51, 50);
var cloud_material = new THREE.MeshPhongMaterial({ overdraw: 0.2,
shininess: 10,
map: cloud_texture,
transparent: true,
opacity: 0.3
});
cloud = new THREE.Mesh(cloud_geometry, cloud_material);
//globe.add(cloud);
var cloud_texture1 = new THREE.TextureLoader().load('cloud.png');
var cloud_geometry1 = new THREE.SphereGeometry(207, 51, 50);
var cloud_material1 = new THREE.MeshPhongMaterial({ overdraw: 0.9,
shininess: 5,
map: cloud_texture,
transparent: true,
opacity: 0.2
});
cloud1 = new THREE.Mesh(cloud_geometry1, cloud_material1);
//globe.add(cloud);
// Set up the event listener for double click
container.addEventListener('dblclick', onDoubleClick, false);
function onDoubleClick(event) {
// Calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// update the picking ray with the camera and mouse position
raycaster.setFromCamera( mouse, camera );
// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects( [sphere] );
// Check if the double click was on the sphere
if (intersects.length > 0) {
// Switch the texture of the sphere
if (isNight) {
sphere.material.map = earthdaytexture;
isNight = false;
scene.background = backgroundImage1;
//globe.add(cloud);
} else {
sphere.material.map = earthnighttexture;
isNight = true;
scene.background = backgroundImage;
globe.add(cloud1);
}
}
}
// Move the sphere back (z) so we can see it.
globe.position.z = -300;
//Lighting
//create a point light
// set the position of the light
// add the light to the scene
pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(-600, 600, 600);
scene.add(pointLight);
// add the light to the scene
ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
//Update
var controls = new THREE.OrbitControls(camera, renderer.domElement);
function animate() {
requestAnimationFrame(animate);
globe.rotation.y -= 0.0014;
cloud.rotation.y += 0.0014;
cloud1.rotation.y += 0.0014;
controls.update();
renderer.render(scene, camera);
}
function update () {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(update);
// Rotate the sphere
//globe.rotation.x += 0.001;
//globe.rotation.y += 0.001;
}
controls.enableZoom = true;
controls.enableRotate = true;
controls.enablePan = true;
controls.zoom =1000;
controls.minDistance = 200;
controls.maxDistance = 2000;
controls.zoomSpeed = 0.5;
controls.keys = {
LEFT: 37, //left arrow
UP: 38, // up arrow
RIGHT: 39, // right arrow
BOTTOM: 40 // bottom arrow
}
document.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 65: //A
controls.update();
camera.position.x -= 10;
break;
case 68: //D
controls.update();
camera.position.x += 10;
break;
case 87: //W
controls.update();
camera.position.z -= 10;
break;
case 83: //S
controls.update();
camera.position.z += 10;
break;
}
});
document.addEventListener("keydown", function(event) {
if (event.code === "KeyR") {
controls.reset();
}
});
requestAnimationFrame(update);
requestAnimationFrame(animate);