refactor: remove GSAP and lil-gui dependencies, update project structure and textures
This commit is contained in:
sayudhalw
+105
-110
@@ -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();
|
||||
tick()
|
||||
Reference in New Issue
Block a user