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

refactor: remove GSAP and lil-gui dependencies, update project structure and textures

Browse Source
This commit is contained in:
sayudhalw
2026-08-25 10:10:49 +07:00
parent 2680337232
commit a345a4c057
15 changed files with 115 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
-2
View File
@@ -12,8 +12,6 @@
"vite-plugin-restart": "^0.4.2" "vite-plugin-restart": "^0.4.2"
}, },
"dependencies": { "dependencies": {
"gsap": "^3.15.0",
"lil-gui": "^0.21.0",
"three": "^0.174.0" "three": "^0.174.0"
} }
} }
pnpm-lock.yaml
Generated
-16
View File
@@ -8,12 +8,6 @@ importers:
.: .:
dependencies: dependencies:
gsap:
specifier: ^3.15.0
version: 3.15.0
lil-gui:
specifier: ^0.21.0
version: 0.21.0
three: three:
specifier: ^0.174.0 specifier: ^0.174.0
version: 0.174.0 version: 0.174.0
@@ -358,16 +352,10 @@ packages:
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin] os: [darwin]
[email protected]:
resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}
[email protected]: [email protected]:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'} engines: {node: '>=0.12.0'}
[email protected]:
resolution: {integrity: sha512-tpvxN7v1GvE/Tv+GRopfOp0W7fVEjF4PltkuX8vOCIfim22rD1ztvfkoEMcv9lzQeuNUSeIrUmUjBwmlW/oUew==}
[email protected]: [email protected]:
resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==} resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
engines: {node: '>=8.6'} engines: {node: '>=8.6'}
@@ -661,12 +649,8 @@ snapshots:
[email protected]: [email protected]:
optional: true optional: true
[email protected]: {}
[email protected]: {} [email protected]: {}
[email protected]: {}
[email protected]: [email protected]:
dependencies: dependencies:
braces: 3.0.3 braces: 3.0.3
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>Fullscreen and resizing</title> <title>Textures</title>
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
</head> </head>
<body> <body>
src/script.js
+105 -110
View File
@@ -1,153 +1,148 @@
import * as THREE from 'three'; import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { Timer } from 'three/examples/jsm/misc/Timer.js';
import { gsap } from 'gsap';
import GUI from 'lil-gui';
/**
* Debug
*/
const gui = new GUI();
const debugObject = {};
/** /**
* Base * Base
*/ */
// Canvas // Canvas
const canvas = document.querySelector('canvas.webgl'); const canvas = document.querySelector('canvas.webgl')
// Scene // Scene
const scene = new THREE.Scene(); const scene = new THREE.Scene()
/**
* Textures
*/
const loadingManager = new THREE.LoadingManager()
loadingManager.onStart = () =>
{
console.log('loadingManager: loading started')
}
loadingManager.onLoad = () =>
{
console.log('loadingManager: loading finished')
}
loadingManager.onProgress = () =>
{
console.log('loadingManager: loading progressing')
}
loadingManager.onError = () =>
{
console.log('loadingManager: loading error')
}
const textureLoader = new THREE.TextureLoader(loadingManager)
// const colorTexture = textureLoader.load('/textures/checkerboard-1024x1024.png')
// const colorTexture = textureLoader.load('/textures/checkerboard-2x2.png')
const colorTexture = textureLoader.load(
'/textures/minecraft.png',
() =>
{
console.log('textureLoader: loading finished')
},
() =>
{
console.log('textureLoader: loading progressing')
},
() =>
{
console.log('textureLoader: loading error')
}
)
colorTexture.colorSpace = THREE.SRGBColorSpace
colorTexture.wrapS = THREE.MirroredRepeatWrapping
colorTexture.wrapT = THREE.MirroredRepeatWrapping
// colorTexture.repeat.x = 2
// colorTexture.repeat.y = 3
// colorTexture.offset.x = 0.5
// colorTexture.offset.y = 0.5
// colorTexture.rotation = Math.PI * 0.25
// colorTexture.center.x = 0.5
// colorTexture.center.y = 0.5
colorTexture.generateMipmaps = false
colorTexture.minFilter = THREE.NearestFilter
colorTexture.magFilter = THREE.NearestFilter
const alphaTexture = textureLoader.load('/textures/door/alpha.jpg')
const heightTexture = textureLoader.load('/textures/door/height.jpg')
const normalTexture = textureLoader.load('/textures/door/normal.jpg')
const ambientOcclusionTexture = textureLoader.load('/textures/door/ambientOcclusion.jpg')
const metalnessTexture = textureLoader.load('/textures/door/metalness.jpg')
const roughnessTexture = textureLoader.load('/textures/door/roughness.jpg')
/** /**
* Object * Object
*/ */
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2); const geometry = new THREE.BoxGeometry(1, 1, 1)
console.log(geometry.attributes)
// const positionsArray = new Float32Array([ const material = new THREE.MeshBasicMaterial({ map: colorTexture })
// 0, 0, 0, const mesh = new THREE.Mesh(geometry, material)
// 0, 1, 0, scene.add(mesh)
// 1, 0, 0
// ]);
// const geometry = new THREE.BufferGeometry();
// geometry.setAttribute('position', new THREE.BufferAttribute(positionsArray, 3));
debugObject.color = '#ffffff';
const material = new THREE.MeshBasicMaterial({ color: debugObject.color, wireframe: true });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
gui.add(mesh.position, 'y').min(-3).max(3).step(0.01).name('elevation');
gui.add(material, 'wireframe');
gui.add(mesh, 'visible').name('isVisible');
gui.addColor(debugObject, 'color').onChange(() =>
{
material.color.set(debugObject.color);
});
debugObject.spin = () =>
{
gsap.to(mesh.rotation, { duration: 1, y: mesh.rotation.y + Math.PI * 2 });
};
gui.add(debugObject, 'spin');
debugObject.subdivision = 2;
gui.add(debugObject, 'subdivision').min(1).max(20).step(1).onFinishChange(() =>
{
mesh.geometry.dispose();
mesh.geometry = new THREE.BoxGeometry(1, 1, 1, debugObject.subdivision, debugObject.subdivision, debugObject.subdivision);
});
/** /**
* Sizes * Sizes
*/ */
const sizes = { const sizes = {
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight height: window.innerHeight
}; }
window.addEventListener('resize', () => window.addEventListener('resize', () =>
{ {
// Update sizes // Update sizes
sizes.width = window.innerWidth; sizes.width = window.innerWidth
sizes.height = window.innerHeight; sizes.height = window.innerHeight
// Update Camera // Update camera
camera.aspect = sizes.width / sizes.height; camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix(); camera.updateProjectionMatrix()
// Update Renderer // Update renderer
renderer.setSize(sizes.width, sizes.height); renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
}); })
window.addEventListener('dblclick', () =>
{
const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;
if (!fullscreenElement)
{
if (canvas.requestFullscreen)
{
canvas.requestFullscreen();
}
else if (canvas.webkitRequestFullscreen)
{
canvas.webkitRequestFullscreen();
}
}
else
{
if (document.exitFullscreen)
{
document.exitFullscreen();
}
else if (document.webkitExitFullscreen)
{
document.webkitExitFullscreen();
}
}
});
/** /**
* Camera * Camera
*/ */
// Base camera // Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100); const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.z = 3; camera.position.x = 1
scene.add(camera); camera.position.y = 1
camera.position.z = 1
scene.add(camera)
// Controls // Controls
const controls = new OrbitControls(camera, canvas); const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true; controls.enableDamping = true
/** /**
* 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.setPixelRatio(Math.min(window.devicePixelRatio, 2))
/** /**
* Animate * Animate
*/ */
const timer = new Timer(); const clock = new THREE.Clock()
timer.connect(document); // pause otomatis saat tab tidak aktif
const tick = () => const tick = () =>
{ {
timer.update(); const elapsedTime = clock.getElapsedTime()
const elapsedTime = timer.getElapsed();
// Update controls // Update controls
controls.update(); controls.update()
// Render // Render
renderer.render(scene, camera); renderer.render(scene, camera)
// Call tick again on the next frame // Call tick again on the next frame
window.requestAnimationFrame(tick); window.requestAnimationFrame(tick)
}; }
tick(); tick()
src/style.css
+8 -3
View File
@@ -1,14 +1,19 @@
* { *
{
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
html, body { html,
body
{
overflow: hidden; overflow: hidden;
} }
.webgl { .webgl
{
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
outline: none;
} }
static/textures/checkerboard-1024x1024.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 745 B

static/textures/checkerboard-8x8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 B

static/textures/door/alpha.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

static/textures/door/ambientOcclusion.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

static/textures/door/color.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 763 KiB

static/textures/door/height.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

static/textures/door/metalness.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

static/textures/door/normal.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

static/textures/door/roughness.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

static/textures/minecraft.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 239 B