diff --git a/package.json b/package.json
index 942878b..779dd82 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,6 @@
"vite-plugin-restart": "^0.4.2"
},
"dependencies": {
- "gsap": "^3.15.0",
- "lil-gui": "^0.21.0",
"three": "^0.174.0"
}
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2d55499..526cf8e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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]
- gsap@3.15.0:
- resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}
-
is-number@7.0.0:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'}
- lil-gui@0.21.0:
- resolution: {integrity: sha512-tpvxN7v1GvE/Tv+GRopfOp0W7fVEjF4PltkuX8vOCIfim22rD1ztvfkoEMcv9lzQeuNUSeIrUmUjBwmlW/oUew==}
-
micromatch@4.0.8:
resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
engines: {node: '>=8.6'}
@@ -661,12 +649,8 @@ snapshots:
fsevents@2.3.3:
optional: true
- gsap@3.15.0: {}
-
is-number@7.0.0: {}
- lil-gui@0.21.0: {}
-
micromatch@4.0.8:
dependencies:
braces: 3.0.3
diff --git a/src/index.html b/src/index.html
index bd38d4d..99cc2f0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,7 +3,7 @@
- Fullscreen and resizing
+ Textures
diff --git a/src/script.js b/src/script.js
index 037310a..f11bb27 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1,153 +1,148 @@
-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
*/
const sizes = {
- width: window.innerWidth,
- height: window.innerHeight
-};
+ width: window.innerWidth,
+ height: window.innerHeight
+}
window.addEventListener('resize', () =>
{
- // Update sizes
- sizes.width = window.innerWidth;
- sizes.height = window.innerHeight;
+ // Update sizes
+ 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);
+ canvas: canvas
+})
+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();
+ // Update controls
+ controls.update()
- // Render
- renderer.render(scene, camera);
+ // Render
+ renderer.render(scene, camera)
- // Call tick again on the next frame
- window.requestAnimationFrame(tick);
-};
+ // Call tick again on the next frame
+ window.requestAnimationFrame(tick)
+}
-tick();
\ No newline at end of file
+tick()
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index fd66ac7..6eb548e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,14 +1,19 @@
-* {
+*
+{
margin: 0;
padding: 0;
}
-html, body {
+html,
+body
+{
overflow: hidden;
}
-.webgl {
+.webgl
+{
position: fixed;
top: 0;
left: 0;
-}
\ No newline at end of file
+ outline: none;
+}
diff --git a/static/textures/checkerboard-1024x1024.png b/static/textures/checkerboard-1024x1024.png
new file mode 100644
index 0000000..0261947
Binary files /dev/null and b/static/textures/checkerboard-1024x1024.png differ
diff --git a/static/textures/checkerboard-8x8.png b/static/textures/checkerboard-8x8.png
new file mode 100644
index 0000000..fc75455
Binary files /dev/null and b/static/textures/checkerboard-8x8.png differ
diff --git a/static/textures/door/alpha.jpg b/static/textures/door/alpha.jpg
new file mode 100755
index 0000000..faea15f
Binary files /dev/null and b/static/textures/door/alpha.jpg differ
diff --git a/static/textures/door/ambientOcclusion.jpg b/static/textures/door/ambientOcclusion.jpg
new file mode 100755
index 0000000..eed2e73
Binary files /dev/null and b/static/textures/door/ambientOcclusion.jpg differ
diff --git a/static/textures/door/color.jpg b/static/textures/door/color.jpg
new file mode 100644
index 0000000..614d9cd
Binary files /dev/null and b/static/textures/door/color.jpg differ
diff --git a/static/textures/door/height.jpg b/static/textures/door/height.jpg
new file mode 100644
index 0000000..dd039ba
Binary files /dev/null and b/static/textures/door/height.jpg differ
diff --git a/static/textures/door/metalness.jpg b/static/textures/door/metalness.jpg
new file mode 100755
index 0000000..9c41587
Binary files /dev/null and b/static/textures/door/metalness.jpg differ
diff --git a/static/textures/door/normal.jpg b/static/textures/door/normal.jpg
new file mode 100755
index 0000000..59eb075
Binary files /dev/null and b/static/textures/door/normal.jpg differ
diff --git a/static/textures/door/roughness.jpg b/static/textures/door/roughness.jpg
new file mode 100755
index 0000000..f55bdaf
Binary files /dev/null and b/static/textures/door/roughness.jpg differ
diff --git a/static/textures/minecraft.png b/static/textures/minecraft.png
new file mode 100644
index 0000000..b179f66
Binary files /dev/null and b/static/textures/minecraft.png differ