Spaces:
No application file
No application file
// Import | |
import * as THREE from "https://unpkg.com/three@0.127.0/build/three.module.js"; | |
import { OrbitControls } from "https://unpkg.com/three@0.127.0/examples/jsm/controls/OrbitControls.js"; | |
////////////////////////////////////// | |
// NOTE Creating renderer | |
const renderer = new THREE.WebGLRenderer(); | |
renderer.setSize(window.innerWidth, window.innerHeight); | |
document.body.appendChild(renderer.domElement); | |
////////////////////////////////////// | |
////////////////////////////////////// | |
// NOTE texture loader | |
const textureLoader = new THREE.TextureLoader(); | |
////////////////////////////////////// | |
////////////////////////////////////// | |
// NOTE import all texture | |
const starTexture = textureLoader.load("./image/stars.jpg"); | |
const sunTexture = textureLoader.load("./image/sun.jpg"); | |
const mercuryTexture = textureLoader.load("./image/mercury.jpg"); | |
const venusTexture = textureLoader.load("./image/venus.jpg"); | |
const earthTexture = textureLoader.load("./image/earth.jpg"); | |
const marsTexture = textureLoader.load("./image/mars.jpg"); | |
const jupiterTexture = textureLoader.load("./image/jupiter.jpg"); | |
const saturnTexture = textureLoader.load("./image/saturn.jpg"); | |
const uranusTexture = textureLoader.load("./image/uranus.jpg"); | |
const neptuneTexture = textureLoader.load("./image/neptune.jpg"); | |
const plutoTexture = textureLoader.load("./image/pluto.jpg"); | |
const saturnRingTexture = textureLoader.load("./image/saturn_ring.png"); | |
const uranusRingTexture = textureLoader.load("./image/uranus_ring.png"); | |
const scene = new THREE.Scene(); | |
const cubeTextureLoader = new THREE.CubeTextureLoader(); | |
const cubeTexture = cubeTextureLoader.load([ | |
starTexture, | |
starTexture, | |
starTexture, | |
starTexture, | |
starTexture, | |
starTexture, | |
]); | |
scene.background = cubeTexture; | |
const camera = new THREE.PerspectiveCamera( | |
75, | |
window.innerWidth / window.innerHeight, | |
0.1, | |
1000 | |
); | |
camera.position.set(-50, 90, 150); | |
const orbit = new OrbitControls(camera, renderer.domElement); | |
const sungeo = new THREE.SphereGeometry(15, 50, 50); | |
const sunMaterial = new THREE.MeshBasicMaterial({ | |
map: sunTexture, | |
}); | |
const sun = new THREE.Mesh(sungeo, sunMaterial); | |
scene.add(sun); | |
const sunLight = new THREE.PointLight(0xffffff, 4, 300); | |
scene.add(sunLight); | |
const ambientLight = new THREE.AmbientLight(0xffffff, 0); | |
scene.add(ambientLight); | |
const path_of_planets = []; | |
function createLineLoopWithMesh(radius, color, width) { | |
const material = new THREE.LineBasicMaterial({ | |
color: color, | |
linewidth: width, | |
}); | |
const geometry = new THREE.BufferGeometry(); | |
const lineLoopPoints = []; | |
const numSegments = 100; | |
for (let i = 0; i <= numSegments; i++) { | |
const angle = (i / numSegments) * Math.PI * 2; | |
const x = radius * Math.cos(angle); | |
const z = radius * Math.sin(angle); | |
lineLoopPoints.push(x, 0, z); | |
} | |
geometry.setAttribute( | |
"position", | |
new THREE.Float32BufferAttribute(lineLoopPoints, 3) | |
); | |
const lineLoop = new THREE.LineLoop(geometry, material); | |
scene.add(lineLoop); | |
path_of_planets.push(lineLoop); | |
} | |
const genratePlanet = (size, planetTexture, x, ring) => { | |
const planetGeometry = new THREE.SphereGeometry(size, 50, 50); | |
const planetMaterial = new THREE.MeshStandardMaterial({ | |
map: planetTexture, | |
}); | |
const planet = new THREE.Mesh(planetGeometry, planetMaterial); | |
const planetObj = new THREE.Object3D(); | |
planet.position.set(x, 0, 0); | |
if (ring) { | |
const ringGeo = new THREE.RingGeometry( | |
ring.innerRadius, | |
ring.outerRadius, | |
32 | |
); | |
const ringMat = new THREE.MeshBasicMaterial({ | |
map: ring.ringmat, | |
side: THREE.DoubleSide, | |
}); | |
const ringMesh = new THREE.Mesh(ringGeo, ringMat); | |
planetObj.add(ringMesh); | |
ringMesh.position.set(x, 0, 0); | |
ringMesh.rotation.x = -0.5 * Math.PI; | |
} | |
scene.add(planetObj); | |
planetObj.add(planet); | |
createLineLoopWithMesh(x, 0xffffff, 3); | |
return { | |
planetObj: planetObj, | |
planet: planet, | |
}; | |
}; | |
const planets = [ | |
{ | |
...genratePlanet(3.2, mercuryTexture, 28), | |
rotaing_speed_around_sun: 0.004, | |
self_rotation_speed: 0.004, | |
}, | |
{ | |
...genratePlanet(5.8, venusTexture, 44), | |
rotaing_speed_around_sun: 0.015, | |
self_rotation_speed: 0.002, | |
}, | |
{ | |
...genratePlanet(6, earthTexture, 62), | |
rotaing_speed_around_sun: 0.01, | |
self_rotation_speed: 0.02, | |
}, | |
{ | |
...genratePlanet(4, marsTexture, 78), | |
rotaing_speed_around_sun: 0.008, | |
self_rotation_speed: 0.018, | |
}, | |
{ | |
...genratePlanet(12, jupiterTexture, 100), | |
rotaing_speed_around_sun: 0.002, | |
self_rotation_speed: 0.04, | |
}, | |
{ | |
...genratePlanet(10, saturnTexture, 138, { | |
innerRadius: 10, | |
outerRadius: 20, | |
ringmat: saturnRingTexture, | |
}), | |
rotaing_speed_around_sun: 0.0009, | |
self_rotation_speed: 0.038, | |
}, | |
{ | |
...genratePlanet(7, uranusTexture, 176, { | |
innerRadius: 7, | |
outerRadius: 12, | |
ringmat: uranusRingTexture, | |
}), | |
rotaing_speed_around_sun: 0.0004, | |
self_rotation_speed: 0.03, | |
}, | |
{ | |
...genratePlanet(7, neptuneTexture, 200), | |
rotaing_speed_around_sun: 0.0001, | |
self_rotation_speed: 0.032, | |
}, | |
{ | |
...genratePlanet(2.8, plutoTexture, 216), | |
rotaing_speed_around_sun: 0.0007, | |
self_rotation_speed: 0.008, | |
}, | |
]; | |
const options = { | |
"Real view": false, | |
"Show path": false, | |
speed: 5, | |
}; | |
ambientLight.intensity = options["Real view"] ? 0 : 0.5; | |
path_of_planets.forEach((dpath) => { | |
dpath.visible = options["Show path"]; | |
}); | |
function animate(time) { | |
sun.rotateY(options.speed * 0.004); | |
planets.forEach( | |
({ planetObj, planet, rotaing_speed_around_sun, self_rotation_speed }) => { | |
planetObj.rotateY(options.speed * rotaing_speed_around_sun); | |
planet.rotateY(options.speed * self_rotation_speed); | |
} | |
); | |
renderer.render(scene, camera); | |
} | |
renderer.setAnimationLoop(animate); | |
window.addEventListener("resize", () => { | |
camera.aspect = window.innerWidth / window.innerHeight; | |
camera.updateProjectionMatrix(); | |
renderer.setSize(window.innerWidth, window.innerHeight); | |
}); |