|
19 | 19 | </script> |
20 | 20 |
|
21 | 21 | <style> |
22 | | - body{ |
| 22 | + body { |
23 | 23 | background-color: black; |
24 | 24 | overflow: hidden; |
25 | 25 | margin: 0; |
26 | 26 | } |
| 27 | + |
| 28 | + div { |
| 29 | + background-color: transparent; |
| 30 | + text-align: center; |
| 31 | + color: blue; |
| 32 | + } |
| 33 | + |
| 34 | + label { |
| 35 | + background-color: transparent; |
| 36 | + color: blue; |
| 37 | + } |
27 | 38 | </style> |
28 | 39 |
|
29 | 40 | <title>Celestial Bodies (r169)</title> |
|
32 | 43 | <body> |
33 | 44 | <!-- Reference: https://discourse.threejs.org/t/sphere-not-rendering-in-my-threejs/72442 --> |
34 | 45 |
|
35 | | - <div id="div_loading" style="text-align: center; color: blue; margin-top: 15px;">Fetching images ... please wait</div> |
| 46 | + <div> |
| 47 | + <label for="rotate" title="Set Cube Rotation" id="lbl_rotate" style="float: left; display: none;"> |
| 48 | + <input type="checkbox" id="rotate" style="padding: 5px; margin: 5px;" checked /> |
| 49 | + Rotate |
| 50 | + </label> |
| 51 | + </div> |
| 52 | + <div id="div_loading">Fetching images ... please wait</div> |
36 | 53 |
|
37 | 54 | <script type="module"> |
38 | 55 | import * as THREE from "three"; |
|
70 | 87 | async function createCelestialBody( name = '', size, textureUrl, position ) { |
71 | 88 | let geometry = new THREE.SphereGeometry( size, 64, 32 ); |
72 | 89 |
|
73 | | - let map = textureUrl !== '' ? texture_loader.load( textureUrl ) : normal_map; |
| 90 | + let map = textureUrl !== '' ? texture_loader.load( textureUrl ) : null; |
74 | 91 |
|
75 | 92 | let material = new THREE.MeshStandardNodeMaterial({ |
76 | | - map: name === 'Sun' ? null : map, |
77 | | - bumpMap: name === 'Earth' ? bump_map : null, |
| 93 | + map: map, |
| 94 | + bumpMap: name === 'Earth' ? bump_map : ( name === 'Moon' ? map : null ), |
78 | 95 | emissive: name === 'Sun' ? new THREE.Color( 1, 1, 1 ) : new THREE.Color( 0, 0, 0 ), |
79 | | - emissiveMap: name === 'Sun' ? map : null, |
80 | | - roughnessMap: name === 'Earth' ? bump_map : name === 'Moon' ? map : null, |
| 96 | + roughnessMap: name === 'Earth' ? bump_map : ( name === 'Moon' ? map : null ), |
81 | 97 | normalMap: name === 'Earth' ? normal_map : null, |
82 | 98 | side: THREE.DoubleSide, |
83 | 99 | metalness: name === 'Sun' ? 0 : 0.25, |
84 | | - roughness: name === 'Earth' ? 0.5 : name === 'Moon' ? 0.25 : 0 |
| 100 | + roughness: name === 'Sun' ? 0 : 0.5 |
85 | 101 | }); |
86 | 102 |
|
87 | | - map.dispose(); |
| 103 | + if ( map ) map.dispose(); |
88 | 104 |
|
89 | 105 | let body = new THREE.Mesh( geometry, material ); |
90 | 106 | body.position.set( position.x, position.y, position.z ); |
|
101 | 117 |
|
102 | 118 | bump_map.dispose(); |
103 | 119 | normal_map.dispose(); |
| 120 | + |
| 121 | + document.getElementById('lbl_rotate').style.display = ''; |
104 | 122 | document.getElementById('div_loading').style.display = 'none'; |
105 | 123 | } |
106 | 124 | } |
|
167 | 185 | let controls = new OrbitControls( camera, renderer.domElement ); |
168 | 186 | controls.target.set( 0, 4, 0 ); |
169 | 187 | controls.enableDamping = true; |
170 | | - controls.autoRotate = true; |
171 | 188 | controls.autoRotateSpeed = -0.05; |
172 | 189 | controls.zoomSpeed = 0.6; |
173 | 190 | controls.rotateSpeed = 0.6; |
|
203 | 220 | renderer.setAnimationLoop(() => { |
204 | 221 | controls.update(); |
205 | 222 |
|
206 | | - scene.getObjectByName( 'Earth' ).rotation.y += 0.0005; // Earth + Moon rotation |
207 | | - scene.getObjectByName( 'Moon' ).rotation.y -= 0.0015; // Moon rotation |
| 223 | + if (document.getElementById( 'rotate' ).checked) { |
| 224 | + controls.autoRotate = true; |
| 225 | + |
| 226 | + scene.getObjectByName( 'Earth' ).rotation.y += 0.0005; // Earth + Moon rotation |
| 227 | + scene.getObjectByName( 'Moon' ).rotation.y -= 0.0015; // Moon rotation |
| 228 | + } else { |
| 229 | + controls.autoRotate = false; |
| 230 | + } |
208 | 231 |
|
209 | 232 | postProcessing.render(); |
210 | 233 | }); |
211 | 234 |
|
212 | | - window.addEventListener("resize", (event) => { |
| 235 | + window.addEventListener( 'resize', ( event ) => { |
213 | 236 | camera.aspect = innerWidth / innerHeight; |
214 | 237 | camera.updateProjectionMatrix(); |
215 | 238 | renderer.setSize( innerWidth, innerHeight ); |
|
0 commit comments