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"
},
"dependencies": {
"gsap": "^3.15.0",
"lil-gui": "^0.21.0",
"three": "^0.174.0"
}
}
pnpm-lock.yaml
Generated
-16
View File
@@ -8,12 +8,6 @@ importers:
.:
dependencies:
gsap:
specifier: ^3.15.0
version: 3.15.0
lil-gui:
specifier: ^0.21.0
version: 0.21.0
three:
specifier: ^0.174.0
version: 0.174.0
@@ -358,16 +352,10 @@ packages:
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin]
[email protected]:
resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}
[email protected]:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'}
[email protected]:
resolution: {integrity: sha512-tpvxN7v1GvE/Tv+GRopfOp0W7fVEjF4PltkuX8vOCIfim22rD1ztvfkoEMcv9lzQeuNUSeIrUmUjBwmlW/oUew==}
[email protected]:
resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
engines: {node: '>=8.6'}
@@ -661,12 +649,8 @@ snapshots:
[email protected]:
optional: true
[email protected]: {}
[email protected]: {}
[email protected]: {}
[email protected]:
dependencies:
braces: 3.0.3
src/index.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<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">
</head>
<body>
src/script.js
+98 -103
View File
@@ -1,63 +1,84 @@
import * as THREE from 'three';
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 = {};
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
/**
* Base
*/
// Canvas
const canvas = document.querySelector('canvas.webgl');
const canvas = document.querySelector('canvas.webgl')
// 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
*/
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);
// const positionsArray = new Float32Array([
// 0, 0, 0,
// 0, 1, 0,
// 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);
});
*/
const geometry = new THREE.BoxGeometry(1, 1, 1)
console.log(geometry.attributes)
const material = new THREE.MeshBasicMaterial({ map: colorTexture })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
/**
* Sizes
@@ -65,89 +86,63 @@ gui.add(debugObject, 'subdivision').min(1).max(20).step(1).onFinishChange(() =>
const sizes = {
width: window.innerWidth,
height: window.innerHeight
};
}
window.addEventListener('resize', () =>
{
// Update sizes
sizes.width = window.innerWidth;
sizes.height = window.innerHeight;
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update Camera
camera.aspect = sizes.width / sizes.height;
camera.updateProjectionMatrix();
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update Renderer
renderer.setSize(sizes.width, sizes.height);
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();
}
}
});
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100);
camera.position.z = 3;
scene.add(camera);
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 1
camera.position.y = 1
camera.position.z = 1
scene.add(camera)
// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
});
renderer.setSize(sizes.width, sizes.height);
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
/**
* Animate
*/
const timer = new Timer();
timer.connect(document); // pause otomatis saat tab tidak aktif
const clock = new THREE.Clock()
const tick = () =>
{
timer.update();
const elapsedTime = timer.getElapsed();
const elapsedTime = clock.getElapsedTime()
// Update controls
controls.update();
controls.update()
// Render
renderer.render(scene, camera);
renderer.render(scene, camera)
// 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;
padding: 0;
}
html, body {
html,
body
{
overflow: hidden;
}
.webgl {
.webgl
{
position: fixed;
top: 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