From 421efb9ff12038312b530ddc1313cf7e61c2fd6b Mon Sep 17 00:00:00 2001 From: sayudhalw Date: Sun, 23 Aug 2026 16:04:27 +0700 Subject: [PATCH] feat: add pnpm workspace configuration and update project title --- .vscode/settings.json | 3 +++ package.json | 2 +- src/index.html | 2 +- src/script.js | 43 ++++++++++++++++++++++++++----------------- 4 files changed, 31 insertions(+), 19 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..eb76a4d --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "workbench.browser.openLocalhostLinks": true +} diff --git a/package.json b/package.json index 94964ab..779dd82 100644 --- a/package.json +++ b/package.json @@ -14,4 +14,4 @@ "dependencies": { "three": "^0.174.0" } -} \ No newline at end of file +} diff --git a/src/index.html b/src/index.html index 7ceda5a..04e323b 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - First Three.js Project + Animations diff --git a/src/script.js b/src/script.js index 39522ea..6d1541f 100644 --- a/src/script.js +++ b/src/script.js @@ -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) \ No newline at end of file + +// 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() \ No newline at end of file