diff --git a/src/index.html b/src/index.html index 9d31bc6..78c1635 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - Materials + Lights diff --git a/src/script.js b/src/script.js index 73bddea..8333393 100644 --- a/src/script.js +++ b/src/script.js @@ -1,271 +1,137 @@ -import * as THREE from 'three' -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' -import GUI from 'lil-gui' -import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js' - -/** - * Debug - */ -const gui = new GUI() +import * as THREE from 'three'; +import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; +import GUI from 'lil-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() - -/** - * 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 +const scene = new THREE.Scene(); /** * Lights */ -// const ambientLight = new THREE.AmbientLight(0xffffff, 1) -// scene.add(ambientLight) +const ambientLight = new THREE.AmbientLight(0xffffff, 1.5); +scene.add(ambientLight); -// const pointLight = new THREE.PointLight(0xffffff, 30) -// pointLight.position.x = 2 -// pointLight.position.y = 3 -// pointLight.position.z = 4 -// 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 -}) +const pointLight = new THREE.PointLight(0xffffff, 50); +pointLight.position.x = 2; +pointLight.position.y = 3; +pointLight.position.z = 4; +scene.add(pointLight); /** * Objects */ -// MeshBasicMaterial -// const material = new THREE.MeshBasicMaterial() -// material.map = doorColorTexture -// 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) +// Material +const material = new THREE.MeshStandardMaterial(); +material.roughness = 0.4; // Objects const sphere = new THREE.Mesh( - new THREE.SphereGeometry(0.5, 64, 64), - material -) -sphere.position.x = - 1.5 + new THREE.SphereGeometry(0.5, 32, 32), + material +); +sphere.position.x = - 1.5; -const plane = new THREE.Mesh( - new THREE.PlaneGeometry(1, 1, 100, 100), - material -) +const cube = new THREE.Mesh( + new THREE.BoxGeometry(0.75, 0.75, 0.75), + material +); const torus = new THREE.Mesh( - new THREE.TorusGeometry(0.3, 0.2, 64, 128), - material -) -torus.position.x = 1.5 + new THREE.TorusGeometry(0.3, 0.2, 32, 64), + material +); +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 */ 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)) -}) + // 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.x = 1 -camera.position.y = 1 -camera.position.z = 2 -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 = 2; +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.setPixelRatio(Math.min(window.devicePixelRatio, 2)) + canvas: canvas +}); +renderer.setSize(sizes.width, sizes.height); +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 - plane.rotation.y = 0.1 * elapsedTime - torus.rotation.y = 0.1 * elapsedTime + // Update objects + sphere.rotation.y = 0.1 * elapsedTime; + cube.rotation.y = 0.1 * elapsedTime; + torus.rotation.y = 0.1 * elapsedTime; - sphere.rotation.x = - 0.15 * elapsedTime - plane.rotation.x = - 0.15 * elapsedTime - torus.rotation.x = - 0.15 * elapsedTime + sphere.rotation.x = 0.15 * elapsedTime; + cube.rotation.x = 0.15 * elapsedTime; + torus.rotation.x = 0.15 * elapsedTime; - // 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/static/textures/door/alpha.jpg b/static/textures/door/alpha.jpg deleted file mode 100755 index faea15f..0000000 Binary files a/static/textures/door/alpha.jpg and /dev/null differ diff --git a/static/textures/door/ambientOcclusion.jpg b/static/textures/door/ambientOcclusion.jpg deleted file mode 100755 index eed2e73..0000000 Binary files a/static/textures/door/ambientOcclusion.jpg and /dev/null differ diff --git a/static/textures/door/color.jpg b/static/textures/door/color.jpg deleted file mode 100644 index 614d9cd..0000000 Binary files a/static/textures/door/color.jpg and /dev/null differ diff --git a/static/textures/door/height.jpg b/static/textures/door/height.jpg deleted file mode 100644 index dd039ba..0000000 Binary files a/static/textures/door/height.jpg and /dev/null differ diff --git a/static/textures/door/metalness.jpg b/static/textures/door/metalness.jpg deleted file mode 100755 index 9c41587..0000000 Binary files a/static/textures/door/metalness.jpg and /dev/null differ diff --git a/static/textures/door/normal.jpg b/static/textures/door/normal.jpg deleted file mode 100755 index 59eb075..0000000 Binary files a/static/textures/door/normal.jpg and /dev/null differ diff --git a/static/textures/door/roughness.jpg b/static/textures/door/roughness.jpg deleted file mode 100755 index f55bdaf..0000000 Binary files a/static/textures/door/roughness.jpg and /dev/null differ diff --git a/static/textures/environmentMap/2k.hdr b/static/textures/environmentMap/2k.hdr deleted file mode 100644 index 6c9fab2..0000000 Binary files a/static/textures/environmentMap/2k.hdr and /dev/null differ diff --git a/static/textures/gradients/3.jpg b/static/textures/gradients/3.jpg deleted file mode 100644 index 58278ac..0000000 Binary files a/static/textures/gradients/3.jpg and /dev/null differ diff --git a/static/textures/gradients/5.jpg b/static/textures/gradients/5.jpg deleted file mode 100644 index 13342a9..0000000 Binary files a/static/textures/gradients/5.jpg and /dev/null differ diff --git a/static/textures/matcaps/1.png b/static/textures/matcaps/1.png deleted file mode 100644 index 59fe188..0000000 Binary files a/static/textures/matcaps/1.png and /dev/null differ diff --git a/static/textures/matcaps/2.png b/static/textures/matcaps/2.png deleted file mode 100644 index bb23f33..0000000 Binary files a/static/textures/matcaps/2.png and /dev/null differ diff --git a/static/textures/matcaps/3.png b/static/textures/matcaps/3.png deleted file mode 100644 index ef1cfbc..0000000 Binary files a/static/textures/matcaps/3.png and /dev/null differ diff --git a/static/textures/matcaps/4.png b/static/textures/matcaps/4.png deleted file mode 100644 index 6d12c7b..0000000 Binary files a/static/textures/matcaps/4.png and /dev/null differ diff --git a/static/textures/matcaps/5.png b/static/textures/matcaps/5.png deleted file mode 100644 index fb13465..0000000 Binary files a/static/textures/matcaps/5.png and /dev/null differ diff --git a/static/textures/matcaps/6.png b/static/textures/matcaps/6.png deleted file mode 100644 index 67a6e6d..0000000 Binary files a/static/textures/matcaps/6.png and /dev/null differ diff --git a/static/textures/matcaps/7.png b/static/textures/matcaps/7.png deleted file mode 100644 index 4c1a405..0000000 Binary files a/static/textures/matcaps/7.png and /dev/null differ diff --git a/static/textures/matcaps/8.png b/static/textures/matcaps/8.png deleted file mode 100644 index 7d84004..0000000 Binary files a/static/textures/matcaps/8.png and /dev/null differ