refactor: update title in index.html and clean up script.js, removing unused textures

2026-08-25 14:20:03 +07:00
parent 9f184ed90b
commit 0212ab224c
20 changed files with 80 additions and 214 deletions
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Materials</title>
+    <title>Lights</title>
    <link rel="stylesheet" href="./style.css">
 </head>
 <body>
@@ -1,198 +1,64 @@
-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 GUI from 'lil-gui'
+import GUI from 'lil-gui';
 import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
 /**
 * Debug
 */
 const gui = new GUI()
 /**
 * Base
 */
 // Debug
 const gui = new GUI();
 // 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 textureLoader = new THREE.TextureLoader()
 const doorColorTexture = textureLoader.load('./textures/door/color.jpg')
 const doorAlphaTexture = textureLoader.load('./textures/door/alpha.jpg')
 const doorAmbientOcclusionTexture = textureLoader.load('./textures/door/ambientOcclusion.jpg')
 const doorHeightTexture = textureLoader.load('./textures/door/height.jpg')
 const doorNormalTexture = textureLoader.load('./textures/door/normal.jpg')
 const doorMetalnessTexture = textureLoader.load('./textures/door/metalness.jpg')
 const doorRoughnessTexture = textureLoader.load('./textures/door/roughness.jpg')
 const matcapTexture = textureLoader.load('./textures/matcaps/8.png')
 const gradientTexture = textureLoader.load('./textures/gradients/5.jpg')
 doorColorTexture.colorSpace = THREE.SRGBColorSpace
 matcapTexture.colorSpace = THREE.SRGBColorSpace
 /**
 * Lights
 */
-// const ambientLight = new THREE.AmbientLight(0xffffff, 1)
+const ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
-// scene.add(ambientLight)
+scene.add(ambientLight);
-// const pointLight = new THREE.PointLight(0xffffff, 30)
+const pointLight = new THREE.PointLight(0xffffff, 50);
-// pointLight.position.x = 2
+pointLight.position.x = 2;
-// pointLight.position.y = 3
+pointLight.position.y = 3;
-// pointLight.position.z = 4
+pointLight.position.z = 4;
-// scene.add(pointLight)
+scene.add(pointLight);
 /**
 * Environment map
 */
 const rgbeLoader = new RGBELoader()
 rgbeLoader.load('./textures/environmentMap/2k.hdr', (environmentMap) =>
 {
    environmentMap.mapping = THREE.EquirectangularReflectionMapping
    scene.background = environmentMap
    scene.environment = environmentMap
 })
 /**
 * Objects
 */
-// MeshBasicMaterial
+// Material
-// const material = new THREE.MeshBasicMaterial()
+const material = new THREE.MeshStandardMaterial();
-// material.map = doorColorTexture
+material.roughness = 0.4;
 // material.color = new THREE.Color('#ff0000')
 // material.wireframe = true
 // material.transparent = true
 // material.opacity = 0.5
 // material.alphaMap = doorAlphaTexture
 // material.side = THREE.DoubleSide
 // MeshNormalMaterial
 // const material = new THREE.MeshNormalMaterial()
 // material.flatShading = true
 // MeshMatcapMaterial
 // const material = new THREE.MeshMatcapMaterial()
 // material.matcap = matcapTexture
 // MeshDepthMaterial
 // const material = new THREE.MeshDepthMaterial()
 // MeshLambertMaterial
 // const material = new THREE.MeshLambertMaterial()
 // MeshPhongMaterial
 // const material = new THREE.MeshPhongMaterial()
 // material.shininess = 100
 // material.specular = new THREE.Color(0x1188ff)
 // MeshToonMaterial
 // const material = new THREE.MeshToonMaterial()
 // gradientTexture.minFilter = THREE.NearestFilter
 // gradientTexture.magFilter = THREE.NearestFilter
 // gradientTexture.generateMipmaps = false
 // material.gradientMap = gradientTexture
 // // MeshStandardMaterial
 // const material = new THREE.MeshStandardMaterial()
 // material.metalness = 1
 // material.roughness = 1
 // material.map = doorColorTexture
 // material.aoMap = doorAmbientOcclusionTexture
 // material.aoMapIntensity = 1
 // material.displacementMap = doorHeightTexture
 // material.displacementScale = 0.1
 // material.metalnessMap = doorMetalnessTexture
 // material.roughnessMap = doorRoughnessTexture
 // material.normalMap = doorNormalTexture
 // material.normalScale.set(0.5, 0.5)
 // material.transparent = true
 // material.alphaMap = doorAlphaTexture
 // gui.add(material, 'metalness').min(0).max(1).step(0.0001)
 // gui.add(material, 'roughness').min(0).max(1).step(0.0001)
 /**
 * MeshPhysicalMaterial
 */
 // Base material
 const material = new THREE.MeshPhysicalMaterial()
 material.metalness = 0
 material.roughness = 0.15
 // material.map = doorColorTexture
 // material.aoMap = doorAmbientOcclusionTexture
 // material.aoMapIntensity = 1
 // material.displacementMap = doorHeightTexture
 // material.displacementScale = 0.1
 // material.metalnessMap = doorMetalnessTexture
 // material.roughnessMap = doorRoughnessTexture
 // material.normalMap = doorNormalTexture
 // material.normalScale.set(0.5, 0.5)
 // material.transparent = true
 // material.alphaMap = doorAlphaTexture
 gui.add(material, 'metalness').min(0).max(1).step(0.0001)
 gui.add(material, 'roughness').min(0).max(1).step(0.0001)
 // // Clearcoat
 // material.clearcoat = 1
 // material.clearcoatRoughness = 0
 // gui.add(material, 'clearcoat').min(0).max(1).step(0.0001)
 // gui.add(material, 'clearcoatRoughness').min(0).max(1).step(0.0001)
 // // Sheen
 // material.sheen = 1
 // material.sheenRoughness = 0.25
 // material.sheenColor.set(1, 1, 1)
 // gui.add(material, 'sheen').min(0).max(1).step(0.0001)
 // gui.add(material, 'sheenRoughness').min(0).max(1).step(0.0001)
 // gui.addColor(material, 'sheenColor')
 // // Iridescence
 // material.iridescence = 1
 // material.iridescenceIOR = 1
 // material.iridescenceThicknessRange = [ 100, 800 ]
 // gui.add(material, 'iridescence').min(0).max(1).step(0.0001)
 // gui.add(material, 'iridescenceIOR').min(1).max(2.333).step(0.0001)
 // gui.add(material.iridescenceThicknessRange, '0').min(1).max(1000).step(1)
 // gui.add(material.iridescenceThicknessRange, '1').min(1).max(1000).step(1)
 // Transmission
 material.transmission = 1
 material.ior = 1.5
 material.thickness = 0.5
 gui.add(material, 'transmission').min(0).max(1).step(0.0001)
 gui.add(material, 'ior').min(1).max(10).step(0.0001)
 gui.add(material, 'thickness').min(0).max(1).step(0.0001)
 // Objects
 const sphere = new THREE.Mesh(
-    new THREE.SphereGeometry(0.5, 64, 64),
+	new THREE.SphereGeometry(0.5, 32, 32),
 	material
-)
+);
-sphere.position.x = - 1.5
+sphere.position.x = - 1.5;
-const plane = new THREE.Mesh(
+const cube = new THREE.Mesh(
-    new THREE.PlaneGeometry(1, 1, 100, 100),
+	new THREE.BoxGeometry(0.75, 0.75, 0.75),
 	material
-)
+);
 const torus = new THREE.Mesh(
-    new THREE.TorusGeometry(0.3, 0.2, 64, 128),
+	new THREE.TorusGeometry(0.3, 0.2, 32, 64),
 	material
-)
+);
-torus.position.x = 1.5
+torus.position.x = 1.5;
-scene.add(sphere, plane, torus)
+const plane = new THREE.Mesh(
 	new THREE.PlaneGeometry(5, 5),
 	material
 );
 plane.rotation.x = - Math.PI * 0.5;
 plane.position.y = - 0.65;
 scene.add(sphere, cube, torus, plane);
 /**
 * Sizes
@@ -200,72 +66,72 @@ scene.add(sphere, plane, torus)
 const sizes = {
 	width: window.innerWidth,
 	height: window.innerHeight
-}
+};
 window.addEventListener('resize', () =>
 {
 	// Update sizes
-    sizes.width = window.innerWidth
+	sizes.width = window.innerWidth;
-    sizes.height = window.innerHeight
+	sizes.height = window.innerHeight;
 	// Update camera
-    camera.aspect = sizes.width / sizes.height
+	camera.aspect = sizes.width / sizes.height;
-    camera.updateProjectionMatrix()
+	camera.updateProjectionMatrix();
 	// 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));
-})
+});
 /**
 * 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.x = 1
+camera.position.x = 1;
-camera.position.y = 1
+camera.position.y = 1;
-camera.position.z = 2
+camera.position.z = 2;
-scene.add(camera)
+scene.add(camera);
 // Controls
-const controls = new OrbitControls(camera, canvas)
+const controls = new OrbitControls(camera, canvas);
-controls.enableDamping = true
+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))
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
 /**
 * Animate
 */
-const clock = new THREE.Clock()
+const clock = new THREE.Clock();
 const tick = () =>
 {
-    const elapsedTime = clock.getElapsedTime()
+	const elapsedTime = clock.getElapsedTime();
 	// Update objects
-    sphere.rotation.y = 0.1 * elapsedTime
+	sphere.rotation.y = 0.1 * elapsedTime;
-    plane.rotation.y = 0.1 * elapsedTime
+	cube.rotation.y = 0.1 * elapsedTime;
-    torus.rotation.y = 0.1 * elapsedTime
+	torus.rotation.y = 0.1 * elapsedTime;
-    sphere.rotation.x = - 0.15 * elapsedTime
+	sphere.rotation.x = 0.15 * elapsedTime;
-    plane.rotation.x = - 0.15 * elapsedTime
+	cube.rotation.x = 0.15 * elapsedTime;
-    torus.rotation.x = - 0.15 * elapsedTime
+	torus.rotation.x = 0.15 * elapsedTime;
 	// 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();