sayudhalw/03-First-Three-JS-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add pnpm workspace configuration and update project title

Browse Source
This commit is contained in:
sayudhalw
2026-08-23 16:04:27 +07:00
parent 2cc2c69bee
commit 421efb9ff1
4 changed files with 31 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+3
View File
@@ -0,0 +1,3 @@
{
"workbench.browser.openLocalhostLinks": true
}
src/index.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"> <link rel="stylesheet" href="./style.css">
</head> </head>
<body> <body>
src/script.js
+26 -17
View File
@@ -1,3 +1,4 @@
import './style.css'
import * as THREE from 'three' import * as THREE from 'three'
// Canvas // Canvas
@@ -6,38 +7,46 @@ const canvas = document.querySelector('canvas.webgl')
// Scene // Scene
const scene = new THREE.Scene() const scene = new THREE.Scene()
/** // Object
* Object
*/
const geometry = new THREE.BoxGeometry(1, 1, 1) const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }) const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material) 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) scene.add(mesh)
/** // Sizes
* Sizes
*/
const sizes = { const sizes = {
width: 800, width: 800,
height: 600 height: 600
} }
/** // Camera
* Camera
*/
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height) const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3 camera.position.z = 3
scene.add(camera) scene.add(camera)
/** // Renderer
* Renderer
*/
const renderer = new THREE.WebGLRenderer({ const renderer = new THREE.WebGLRenderer({
canvas: canvas canvas: canvas
}) })
renderer.setSize(sizes.width, sizes.height) 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()