Skip to content

Instantly share code, notes, and snippets.

@imrobbiegreen
Created May 30, 2022 23:57
Show Gist options
  • Save imrobbiegreen/3b07d6b6ec438b92bfa43f61ff4ccfa5 to your computer and use it in GitHub Desktop.
Save imrobbiegreen/3b07d6b6ec438b92bfa43f61ff4ccfa5 to your computer and use it in GitHub Desktop.
Looking for a more effective solution to load gltf models
// Model 1
// Model 1 Maps
const s1RoomColor = textureLoader.load('/Threesources/Textures/HighRes/s1RoomBaseColor.jpg')
const s1RoomRoughness = textureLoader.load('/Threesources/Textures/HighRes/s1RoomRoughness.jpg')
const s1RoomMetalness = textureLoader.load('/Threesources/Textures/HighRes/s1RoomMetallic.jpg')
const s1RoomNormal = textureLoader.load('/Threesources/Textures/HighRes/s1RoomNormal.jpg')
const s1RoomOpacity = textureLoader.load('/Threesources/Textures/HighRes/s1RoomOpacity.png')
// Model 1 Flip
s1RoomColor.flipY = false
s1RoomRoughness.flipY = false
s1RoomMetalness.flipY = false
s1RoomNormal.flipY = false
s1RoomOpacity.flipY = false
// Model 1 Material
const s1RoomMaterial = new THREE.MeshPhysicalMaterial({
map: s1RoomColor,
roughnessMap: s1RoomRoughness,
metalnessMap: s1RoomMetalness,
normalMap: s1RoomNormal,
alphaMap: s1RoomOpacity,
transparent: true,
opacity: 1,
metalness: 0.5,
})
// Model 1 Loader
loader.load(
'/Threesources/Mesh/GLB/s1Room.glb',
(s1Room) => {
s1Room.scene.traverse((child) =>
{
child.material = s1RoomMaterial
child.receiveShadow = true
})
scene.add(s1Room)
}
)
// Model 2
// Model 2 Maps
const s2RoomColor = textureLoader.load('/Threesources/Textures/HighRes/s2RoomBaseColor.jpg')
const s2RoomRoughness = textureLoader.load('/Threesources/Textures/HighRes/s2RoomRoughness.jpg')
const s2RoomMetalness = textureLoader.load('/Threesources/Textures/HighRes/s2RoomMetallic.jpg')
const s2RoomNormal = textureLoader.load('/Threesources/Textures/HighRes/s2RoomNormal.jpg')
const s2RoomOpacity = textureLoader.load('/Threesources/Textures/HighRes/s2RoomOpacity.png')
// Model 2 Flip
s2RoomColor.flipY = false
s2RoomRoughness.flipY = false
s2RoomMetalness.flipY = false
s2RoomNormal.flipY = false
s2RoomOpacity.flipY = false
// Model 2 Material
const s2RoomMaterial = new THREE.MeshPhysicalMaterial({
map: s2RoomColor,
roughnessMap: s2RoomRoughness,
metalnessMap: s2RoomMetalness,
normalMap: s2RoomNormal,
alphaMap: s2RoomOpacity,
transparent: true,
opacity: 1,
metalness: 0.5,
})
// Model 2 Loader
loader.load(
'/Threesources/Mesh/GLB/s2Room.glb',
(s2Room) => {
s2Room.scene.traverse((child) =>
{
child.material = s2RoomMaterial
child.receiveShadow = true
})
scene.add(s2Room)
}
)
// Model 3
// Model 3 Maps
const s3RoomColor = textureLoader.load('/Threesources/Textures/HighRes/s3RoomBaseColor.jpg')
const s3RoomRoughness = textureLoader.load('/Threesources/Textures/HighRes/s3RoomRoughness.jpg')
const s3RoomMetalness = textureLoader.load('/Threesources/Textures/HighRes/s3RoomMetallic.jpg')
const s3RoomNormal = textureLoader.load('/Threesources/Textures/HighRes/s3RoomNormal.jpg')
const s3RoomOpacity = textureLoader.load('/Threesources/Textures/HighRes/s3RoomOpacity.png')
// Model 3 Flip
s3RoomColor.flipY = false
s3RoomRoughness.flipY = false
s3RoomMetalness.flipY = false
s3RoomNormal.flipY = false
s3RoomOpacity.flipY = false
// Model 3 Material
const s3RoomMaterial = new THREE.MeshPhysicalMaterial({
map: s3RoomColor,
roughnessMap: s3RoomRoughness,
metalnessMap: s3RoomMetalness,
normalMap: s3RoomNormal,
alphaMap: s3RoomOpacity,
transparent: true,
opacity: 1,
metalness: 0.5,
})
// Model 3 Loader
loader.load(
'/Threesources/Mesh/GLB/s3Room.glb',
(s3Room) => {
s3Room.scene.traverse((child) =>
{
child.material = s3RoomMaterial
child.receiveShadow = true
})
scene.add(s3Room)
}
)
// Model 4
// Model 4 Maps
const s4RoomColor = textureLoader.load('/Threesources/Textures/HighRes/s4RoomBaseColor.jpg')
const s4RoomRoughness = textureLoader.load('/Threesources/Textures/HighRes/s4RoomRoughness.jpg')
const s4RoomMetalness = textureLoader.load('/Threesources/Textures/HighRes/s4RoomMetallic.jpg')
const s4RoomNormal = textureLoader.load('/Threesources/Textures/HighRes/s4RoomNormal.jpg')
const s4RoomOpacity = textureLoader.load('/Threesources/Textures/HighRes/s4RoomOpacity.png')
// Model 4 Flip
s4RoomColor.flipY = false
s4RoomRoughness.flipY = false
s4RoomMetalness.flipY = false
s4RoomNormal.flipY = false
s4RoomOpacity.flipY = false
// Model 4 Material
const s4RoomMaterial = new THREE.MeshPhysicalMaterial({
map: s4RoomColor,
roughnessMap: s4RoomRoughness,
metalnessMap: s4RoomMetalness,
normalMap: s4RoomNormal,
alphaMap: s4RoomOpacity,
transparent: true,
opacity: 1,
metalness: 0.5,
})
// Model 4 Loader
loader.load(
'/Threesources/Mesh/GLB/s4Room.glb',
(s4Room) => {
s4Room.scene.traverse((child) =>
{
child.material = s4RoomMaterial
child.receiveShadow = true
})
scene.add(s4Room)
}
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment