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

Compare commits

base: sayudhalw/03-First-Three-JS-Project:2cc2c69beedb0bf447c04d857d438069c3968cea
Branches Tags
sayudhalw/03-First-Three-JS-Project:main
...
compare: sayudhalw/03-First-Three-JS-Project:e190aea4b694340750079fabe9bdb49f50980f1b
Branches Tags
sayudhalw/03-First-Three-JS-Project:main
2 Commits
2cc2c69bee ... e190aea4b6
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
4 changed files with 30 additions and 19 deletions
Expand all files Collapse all files
.vscode/settings.json
Vendored
+3
View File
@@ -0,0 +1,3 @@
{
"workbench.browser.openLocalhostLinks": true
}
package.json
+1 -1
View File
@@ -14,4 +14,4 @@
"dependencies": { "dependencies": {
"three": "^0.174.0" "three": "^0.174.0"
} }
} }
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
+25 -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,45 @@ 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)
// 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()