Refactor materials and textures in the project
- Updated the title in index.html from "Textures" to "Materials". - Enhanced script.js by adding GUI controls for material properties and loading various textures. - Removed unused textures: checkerboard-1024x1024.png, checkerboard-8x8.png, and minecraft.png. - Added new textures: environmentMap/2k.hdr, gradients/3.jpg, gradients/5.jpg, and multiple matcap textures (1.png to 8.png). - Implemented a MeshPhysicalMaterial with adjustable properties for metalness, roughness, transmission, and thickness. - Updated object rotations for better visual effects in the scene.
This commit is contained in:
sayudhalw
+185
-62
@@ -1,5 +1,12 @@
|
||||
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()
|
||||
|
||||
/**
|
||||
* Base
|
||||
@@ -13,72 +20,179 @@ 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()
|
||||
|
||||
const textureLoader = new THREE.TextureLoader(loadingManager)
|
||||
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')
|
||||
|
||||
// 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')
|
||||
doorColorTexture.colorSpace = THREE.SRGBColorSpace
|
||||
matcapTexture.colorSpace = THREE.SRGBColorSpace
|
||||
|
||||
/**
|
||||
* Object
|
||||
* Lights
|
||||
*/
|
||||
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)
|
||||
// const ambientLight = new THREE.AmbientLight(0xffffff, 1)
|
||||
// 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
|
||||
})
|
||||
|
||||
/**
|
||||
* 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)
|
||||
|
||||
// Objects
|
||||
const sphere = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(0.5, 64, 64),
|
||||
material
|
||||
)
|
||||
sphere.position.x = - 1.5
|
||||
|
||||
const plane = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(1, 1, 100, 100),
|
||||
material
|
||||
)
|
||||
|
||||
const torus = new THREE.Mesh(
|
||||
new THREE.TorusGeometry(0.3, 0.2, 64, 128),
|
||||
material
|
||||
)
|
||||
torus.position.x = 1.5
|
||||
|
||||
scene.add(sphere, plane, torus)
|
||||
|
||||
/**
|
||||
* Sizes
|
||||
@@ -110,7 +224,7 @@ window.addEventListener('resize', () =>
|
||||
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
|
||||
camera.position.z = 2
|
||||
scene.add(camera)
|
||||
|
||||
// Controls
|
||||
@@ -135,6 +249,15 @@ const tick = () =>
|
||||
{
|
||||
const elapsedTime = clock.getElapsedTime()
|
||||
|
||||
// Update objects
|
||||
sphere.rotation.y = 0.1 * elapsedTime
|
||||
plane.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
|
||||
|
||||
// Update controls
|
||||
controls.update()
|
||||
|
||||
|
||||
Reference in New Issue
Block a user