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()