52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
import * as THREE from "three"
|
|
|
|
const scene = new THREE.Scene()
|
|
|
|
const camera = new THREE.PerspectiveCamera(
|
|
75,
|
|
window.innerWidth / window.innerHeight,
|
|
0.1,
|
|
1000
|
|
)
|
|
camera.position.z = 15
|
|
|
|
const renderer = new THREE.WebGLRenderer()
|
|
renderer.setSize(window.innerWidth, window.innerHeight)
|
|
renderer.setClearColor(0xffffff, 1)
|
|
document.body.appendChild(renderer.domElement)
|
|
|
|
const light = new THREE.PointLight(0xffffff, 2)
|
|
light.position.set(0, 0, 0)
|
|
scene.add(light)
|
|
|
|
// Sun
|
|
const sunGeometry = new THREE.SphereGeometry(2, 32, 32)
|
|
const sunMaterial = new THREE.MeshBasicMaterial({ color: "yellow" })
|
|
const sunMesh = new THREE.Mesh(sunGeometry, sunMaterial)
|
|
scene.add(sunMesh)
|
|
|
|
// Earth Orbit Group (pivot)
|
|
const earthOrbit = new THREE.Group()
|
|
sunMesh.add(earthOrbit)
|
|
|
|
// Earth
|
|
const earthGeometry = new THREE.SphereGeometry(1, 32, 32)
|
|
const earthMaterial = new THREE.MeshStandardMaterial({ color: "blue" })
|
|
const earthMesh = new THREE.Mesh(earthGeometry, earthMaterial)
|
|
|
|
// distance from sun
|
|
earthMesh.position.x = 5
|
|
|
|
earthOrbit.add(earthMesh)
|
|
|
|
// Animation
|
|
function animate() {
|
|
requestAnimationFrame(animate)
|
|
|
|
earthOrbit.rotation.y += 0.01 // orbit
|
|
earthMesh.rotation.y += 0.05 // spin
|
|
|
|
renderer.render(scene, camera)
|
|
}
|
|
|
|
animate() |