feat: add pnpm workspace configuration and update project title

2026-08-23 16:04:27 +07:00
parent 2cc2c69bee
commit 421efb9ff1
4 changed files with 31 additions and 19 deletions
@@ -0,0 +1,3 @@
+{
+  "workbench.browser.openLocalhostLinks": true
+}
@@ -14,4 +14,4 @@
  "dependencies": {
    "three": "^0.174.0"
  }
-}
+}
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>First Three.js Project</title>
+    <title>Animations</title>
    <link rel="stylesheet" href="./style.css">
 </head>
 <body>
@@ -1,3 +1,4 @@
+import './style.css'
 import * as THREE from 'three'

 // Canvas
@@ -6,38 +7,46 @@ const canvas = document.querySelector('canvas.webgl')
 // Scene
 const scene = new THREE.Scene()

-/**
- * Object
- */
+// Object
 const geometry = new THREE.BoxGeometry(1, 1, 1)
 const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
 const mesh = new THREE.Mesh(geometry, material)
-// mesh.position.x = 0.7
-// mesh.position.y = -0.6
-// mesh.position.z = 1
-mesh.position.set(0.7, -0.6, 1);
 scene.add(mesh)

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

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

-/**
- * Renderer
- */
+// Renderer
 const renderer = new THREE.WebGLRenderer({
    canvas: canvas
 })
 renderer.setSize(sizes.width, sizes.height)
-renderer.render(scene, camera)
+
+// 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()