Skip to content

Commit ae44e7a

Browse files
mapsammapsam
committed
earth + 3.js, big island imagery
1 parent 8abd3a8 commit ae44e7a

14 files changed

+296
-0
lines changed

‎_posts/2022-01-04-earth-threejs.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
layout: post
3+
title: "Earth & Three.js"
4+
extra_js:
5+
earth-threejs.js
6+
extra_js_cdn:
7+
https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
8+
---
9+
10+
Just a small experiment with three.js and a globe. Learned a lot from [this blog post](https://blog.mastermaps.com/2013/09/creating-webgl-earth-with-threejs.html).
11+
12+
First is just a simplified `SphereGeometry` with a `WireframeGeometry` overlayed as a child of the spherical mesh.
13+
14+
<div id="first" style="width:100%;height:200px;"></div>
15+
16+
Second we use `loadTexture` along with the `MeshBasicMaterial`.
17+
18+
<div id="texture" style="width:100%;height:200px;"></div>
19+
20+
The simplified sphere is fun but doesn't really look like a globe. Adding more vertices to the `SphereGeometry` gives us a more realistic view. Note the increased complexity of the mesh.
21+
22+
<div id="vertices" style="width:100%;height:200px;"></div>
23+
24+
Finally some rotation using `mesh.rotation.y` and an animation function that fires every redraw of the canvas.
25+
26+
<div id="rotation" style="width:100%;height:200px;"></div>

‎_posts/2022-01-26-big-island-imagery.md

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
layout: post
3+
title: "Imagery - Big Island, HI"
4+
---
5+
6+
I was in Hilo, HI recently and took a helicopter tour of [Kilauea](https://www.usgs.gov/volcanoes/kilauea), _the youngest and southeastern most volcano of the Island of Hawai'i_.
7+
8+
[![](/images/posts/big-island/DSCF4687.JPG)](/images/posts/big-island/DSCF4687.JPG)
9+
10+
Macadamia nut fields
11+
12+
[![](/images/posts/big-island/DSCF4690.JPG)](/images/posts/big-island/DSCF4690.JPG)
13+
14+
Lava flow
15+
16+
[![](/images/posts/big-island/DSCF4696.JPG)](/images/posts/big-island/DSCF4696.JPG)
17+
18+
Pu‘U ‘Ō‘Ō
19+
20+
[![](/images/posts/big-island/DSCF4702.JPG)](/images/posts/big-island/DSCF4702.JPG)
21+
22+
Napau crater
23+
24+
[![](/images/posts/big-island/DSCF4708.JPG)](/images/posts/big-island/DSCF4708.JPG)
25+
26+
Maunaulu in the forground, Makaopuhi Crater in the distance
27+
28+
[![](/images/posts/big-island/DSCF4710.JPG)](/images/posts/big-island/DSCF4710.JPG)
29+
30+
Fault lines south of Kilauea
31+
32+
[![](/images/posts/big-island/DSCF4713.JPG)](/images/posts/big-island/DSCF4713.JPG)
33+
34+
Kilauea active volcano. Free flowing lava in the center of image.
35+
36+
[![](/images/posts/big-island/DSCF4720.JPG)](/images/posts/big-island/DSCF4720.JPG)
37+
38+
"Narnia" outside of Hilo. Part of the Hilo Restricted Watershed Section of the Hilo Forest Reserve.
39+
40+
[![](/images/posts/big-island/DSCF4727.JPG)](/images/posts/big-island/DSCF4727.JPG)
41+
42+
Hilo Forest Reserve

‎css/big-images.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
p img {
2+
margin-left: -20%;
3+
margin-right: 20%;
4+
width: 140% !important;
5+
max-width: 140% !important;
6+
}

‎images/earth.jpeg

239 KB
Loading

‎images/posts/big-island/DSCF4687.JPG

1.41 MB
Loading

‎images/posts/big-island/DSCF4690.JPG

1.26 MB
Loading

‎images/posts/big-island/DSCF4696.JPG

2.19 MB
Loading

‎images/posts/big-island/DSCF4702.JPG

1.93 MB
Loading

‎images/posts/big-island/DSCF4708.JPG

611 KB
Loading

‎images/posts/big-island/DSCF4710.JPG

595 KB
Loading

‎images/posts/big-island/DSCF4713.JPG

1.25 MB
Loading

‎images/posts/big-island/DSCF4720.JPG

3.72 MB
Loading

‎images/posts/big-island/DSCF4727.JPG

3.75 MB
Loading

‎js/earth-threejs.js

+222
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
window.onload = function() {
2+
// FIRST
3+
first();
4+
texture();
5+
vertices();
6+
rotation();
7+
moon();
8+
}
9+
10+
function first() {
11+
// camera & scene
12+
const elem = document.getElementById('first');
13+
const camera = new THREE.PerspectiveCamera( 70, elem.offsetWidth / elem.offsetHeight, 0.01, 10 );
14+
camera.position.z = 1;
15+
const scene = new THREE.Scene();
16+
scene.background = new THREE.Color( 0xffffff );
17+
18+
// shape
19+
const geometry = new THREE.SphereGeometry( 0.5, 10, 5 );
20+
const material = new THREE.MeshBasicMaterial({
21+
color: 0xF012BE,
22+
});
23+
const mesh = new THREE.Mesh( geometry, material );
24+
scene.add( mesh );
25+
26+
// wireframe
27+
const wireframeGeometry = new THREE.WireframeGeometry( geometry );
28+
const wireframeMaterial = new THREE.LineBasicMaterial( {
29+
color: 0xffffff,
30+
transparent: true,
31+
opacity: 0.25
32+
} );
33+
const wireframe = new THREE.LineSegments( wireframeGeometry, wireframeMaterial );
34+
mesh.add( wireframe );
35+
36+
// renderer
37+
const renderer = new THREE.WebGLRenderer( { antialias: true } );
38+
renderer.setSize( elem.offsetWidth, elem.offsetHeight );
39+
elem.appendChild( renderer.domElement );
40+
41+
function animate() {
42+
requestAnimationFrame( animate );
43+
renderer.render( scene, camera );
44+
}
45+
46+
animate();
47+
}
48+
49+
function texture() {
50+
// camera & scene
51+
const elem = document.getElementById('texture');
52+
const camera = new THREE.PerspectiveCamera( 70, elem.offsetWidth / elem.offsetHeight, 0.01, 10 );
53+
camera.position.z = 1;
54+
const scene = new THREE.Scene();
55+
scene.background = new THREE.Color( 0xffffff );
56+
57+
// shape
58+
const geometry = new THREE.SphereGeometry( 0.5, 10, 5 );
59+
const material = new THREE.MeshBasicMaterial({
60+
// color: 0xF012BE,
61+
map: THREE.ImageUtils.loadTexture('/images/earth.jpeg')
62+
});
63+
const mesh = new THREE.Mesh( geometry, material );
64+
scene.add( mesh );
65+
66+
// wireframe
67+
const wireframeGeometry = new THREE.WireframeGeometry( geometry );
68+
const wireframeMaterial = new THREE.LineBasicMaterial( {
69+
color: 0xffffff,
70+
transparent: true,
71+
opacity: 0.25
72+
} );
73+
const wireframe = new THREE.LineSegments( wireframeGeometry, wireframeMaterial );
74+
mesh.add( wireframe );
75+
76+
// renderer
77+
const renderer = new THREE.WebGLRenderer( { antialias: true } );
78+
renderer.setSize( elem.offsetWidth, elem.offsetHeight );
79+
elem.appendChild( renderer.domElement );
80+
81+
function animate() {
82+
requestAnimationFrame( animate );
83+
renderer.render( scene, camera );
84+
}
85+
86+
animate();
87+
}
88+
89+
function vertices() {
90+
// camera & scene
91+
const elem = document.getElementById('vertices');
92+
const camera = new THREE.PerspectiveCamera( 70, elem.offsetWidth / elem.offsetHeight, 0.01, 10 );
93+
camera.position.z = 1;
94+
const scene = new THREE.Scene();
95+
scene.background = new THREE.Color( 0xffffff );
96+
97+
// shape
98+
const geometry = new THREE.SphereGeometry( 0.5, 32, 16 );
99+
const material = new THREE.MeshBasicMaterial({
100+
// color: 0xF012BE,
101+
map: THREE.ImageUtils.loadTexture('/images/earth.jpeg')
102+
});
103+
const mesh = new THREE.Mesh( geometry, material );
104+
scene.add( mesh );
105+
106+
// wireframe
107+
const wireframeGeometry = new THREE.WireframeGeometry( geometry );
108+
const wireframeMaterial = new THREE.LineBasicMaterial( {
109+
color: 0xffffff,
110+
transparent: true,
111+
opacity: 0.25
112+
} );
113+
const wireframe = new THREE.LineSegments( wireframeGeometry, wireframeMaterial );
114+
mesh.add( wireframe );
115+
116+
// renderer
117+
const renderer = new THREE.WebGLRenderer( { antialias: true } );
118+
renderer.setSize( elem.offsetWidth, elem.offsetHeight );
119+
elem.appendChild( renderer.domElement );
120+
121+
function animate() {
122+
requestAnimationFrame( animate );
123+
renderer.render( scene, camera );
124+
}
125+
126+
animate();
127+
}
128+
129+
function rotation() {
130+
// camera & scene
131+
const elem = document.getElementById('rotation');
132+
const camera = new THREE.PerspectiveCamera( 70, elem.offsetWidth / elem.offsetHeight, 0.01, 10 );
133+
camera.position.z = 1;
134+
const scene = new THREE.Scene();
135+
scene.background = new THREE.Color( 0xffffff );
136+
137+
// shape
138+
const geometry = new THREE.SphereGeometry( 0.5, 32, 32 );
139+
const material = new THREE.MeshBasicMaterial({
140+
// color: 0xF012BE,
141+
map: THREE.ImageUtils.loadTexture('/images/earth.jpeg')
142+
});
143+
const mesh = new THREE.Mesh( geometry, material );
144+
scene.add( mesh );
145+
146+
// renderer
147+
const renderer = new THREE.WebGLRenderer( { antialias: true } );
148+
renderer.setSize( elem.offsetWidth, elem.offsetHeight );
149+
elem.appendChild( renderer.domElement );
150+
151+
function animate() {
152+
requestAnimationFrame( animate );
153+
mesh.rotation.y += 0.004;
154+
renderer.render( scene, camera );
155+
}
156+
157+
animate();
158+
}
159+
160+
function moon() {
161+
const elem = document.getElementById('moon');
162+
163+
renderer = new THREE.WebGLRenderer({
164+
antialias: true
165+
});
166+
renderer.setSize(elem.offsetWidth, elem.offsetHeight);
167+
elem.appendChild(renderer.domElement);
168+
169+
camera = new THREE.PerspectiveCamera(70, elem.offsetWidth / elem.offsetHeight, 1, 100);
170+
camera.position.set(0, -4, -1.5);
171+
172+
loader = new THREE.TextureLoader();
173+
loader.setCrossOrigin("");
174+
175+
scene = new THREE.Scene();
176+
scene.background = new THREE.Color(0xffffff);
177+
scene.add(camera);
178+
// window.onresize = resize;
179+
180+
var ambientLight = new THREE.AmbientLight(0x404040);
181+
scene.add(ambientLight);
182+
183+
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
184+
directionalLight.position.x = -0.75;
185+
directionalLight.position.y = -0.5;
186+
directionalLight.position.z = -1;
187+
scene.add( directionalLight );
188+
189+
var axis = new THREE.AxesHelper(2);
190+
scene.add(axis);
191+
192+
var material = new THREE.MeshPhongMaterial({color:'#f08080'});
193+
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
194+
mesh = new THREE.Mesh(geometry, material);
195+
196+
var material2 = new THREE.MeshPhongMaterial({color:'#8080f0'});
197+
var geometry2 = new THREE.BoxGeometry( 1, 1, 1 );
198+
child = new THREE.Mesh(geometry2, material2);
199+
child.position.x = 1.5;
200+
201+
mesh.add(child);
202+
scene.add(mesh);
203+
204+
function animate() {
205+
child.position.set(0, 0, 0);
206+
child.rotateY(0.02)
207+
child.translateX(1.5);
208+
209+
mesh.position.set(0, 0, 0);
210+
mesh.rotateZ(0.01);
211+
mesh.translateX(1.0);
212+
213+
requestAnimationFrame(animate);
214+
render();
215+
}
216+
217+
function render() {
218+
renderer.render(scene, camera);
219+
}
220+
221+
animate();
222+
}

0 commit comments

Comments
 (0)