94 lines
2.4 KiB
JavaScript
94 lines
2.4 KiB
JavaScript
import * as THREE from 'three';
|
|
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
const scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0x000000);
|
|
|
|
const camera = new THREE.PerspectiveCamera(60, 2, 0.1, 100);
|
|
camera.position.set(0, 0, 22);
|
|
camera.lookAt(0, 0, 0);
|
|
|
|
const ambientLight = new THREE.AmbientLight(0xffffff, 0.18);
|
|
scene.add(ambientLight);
|
|
|
|
const sunlight = new THREE.PointLight(0xffffff, 350, 300);
|
|
scene.add(sunlight);
|
|
|
|
const solarSystem = new THREE.Object3D();
|
|
scene.add(solarSystem);
|
|
|
|
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
|
|
|
|
const sunMaterial = new THREE.MeshStandardMaterial({
|
|
color: 0xffcc55,
|
|
emissive: 0xffaa00,
|
|
emissiveIntensity: 1.2,
|
|
});
|
|
const sun = new THREE.Mesh(sphereGeometry, sunMaterial);
|
|
sun.scale.set(2.4, 2.4, 2.4);
|
|
solarSystem.add(sun);
|
|
|
|
const earthOrbit = new THREE.Object3D();
|
|
earthOrbit.position.set(0, 0, 0);
|
|
sun.add(earthOrbit);
|
|
|
|
const earthMaterial = new THREE.MeshStandardMaterial({
|
|
color: 0x2a66ff,
|
|
roughness: 0.9,
|
|
metalness: 0.05,
|
|
});
|
|
const earth = new THREE.Mesh(sphereGeometry, earthMaterial);
|
|
earth.scale.set(0.65, 0.65, 0.65);
|
|
earth.position.x = 8;
|
|
earthOrbit.add(earth);
|
|
|
|
const moonOrbit = new THREE.Object3D();
|
|
moonOrbit.position.set(0, 0, 0);
|
|
earth.add(moonOrbit);
|
|
|
|
const moonMaterial = new THREE.MeshStandardMaterial({
|
|
color: 0xbbbbbb,
|
|
roughness: 1,
|
|
metalness: 0,
|
|
});
|
|
const moon = new THREE.Mesh(sphereGeometry, moonMaterial);
|
|
moon.scale.set(0.28, 0.28, 0.28);
|
|
moon.position.x = 2.2;
|
|
moonOrbit.add(moon);
|
|
|
|
const EARTH_SPIN_SPEED = 2.1;
|
|
|
|
let previousTime = 0;
|
|
|
|
function resizeRendererToDisplaySize() {
|
|
const width = window.innerWidth;
|
|
const height = window.innerHeight;
|
|
const needResize = renderer.domElement.width !== width || renderer.domElement.height !== height;
|
|
if (needResize) {
|
|
renderer.setSize(width, height, false);
|
|
camera.aspect = width / height;
|
|
camera.updateProjectionMatrix();
|
|
}
|
|
}
|
|
|
|
function render(time) {
|
|
const seconds = time * 0.001;
|
|
const delta = seconds - previousTime;
|
|
previousTime = seconds;
|
|
|
|
resizeRendererToDisplaySize();
|
|
|
|
sun.rotation.y = seconds * 0.3;
|
|
earthOrbit.rotation.y = seconds * 0.9;
|
|
earth.rotation.y += delta * EARTH_SPIN_SPEED;
|
|
moonOrbit.rotation.y = seconds * 2.2;
|
|
|
|
renderer.render(scene, camera);
|
|
requestAnimationFrame(render);
|
|
}
|
|
|
|
requestAnimationFrame(render);
|