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