import './style.css'
import * as THREE from 'three'

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Sizes
const sizes = {
    width: 800,
    height: 600
}

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)

// Time
let time = Date.now()


// Animations
const tick = () => {
    // Time
    const currentTime = Date.now() // ini jadi current time karena ada di dalam fungsi tick, jadi setiap kali tick dipanggil, currentTime akan diperbarui dengan waktu saat ini 
    const deltaTime = currentTime - time // deltaTime adalah selisih waktu antara currentTime dan time, yang digunakan untuk menghitung perubahan waktu sejak frame terakhir
    time = currentTime // Update objects

    // Update objects
    mesh.rotation.y += 0.001 * deltaTime // rotasi mesh pada sumbu y, dikalikan dengan deltaTime agar rotasi tetap konsisten meskipun frame rate berubah
    
    // Renderer
    renderer.render(scene, camera)
    
    window.requestAnimationFrame(tick)
}
tick()