refactor: use THREE.Clock for animation timing

feat: add pnpm workspace configuration and update project title
2026-08-23 16:04:37 +07:00 · 2026-08-23 16:04:27 +07:00
4 changed files with 30 additions and 19 deletions
@@ -0,0 +1,3 @@
+{
+  "workbench.browser.openLocalhostLinks": true
+}
@@ -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,45 @@ 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)
+
+// Clock
+const clock = new THREE.Clock()
+
+
+// Animations
+const tick = () => {
+
+    // Clock
+    const elapsedTime = clock.getElapsedTime()
+
+    // Update objects
+    mesh.rotation.y += 0.001 * elapsedTime
+    
+    // Renderer
    renderer.render(scene, camera)
+    
+    window.requestAnimationFrame(tick)
+}
+tick()
Author	SHA1	Message	Date
sayudhalw	e190aea4b6	refactor: use THREE.Clock for animation timing	2026-08-23 16:04:37 +07:00
sayudhalw	421efb9ff1	feat: add pnpm workspace configuration and update project title	2026-08-23 16:04:27 +07:00