Created
May 30, 2022 23:57
-
-
Save imrobbiegreen/3b07d6b6ec438b92bfa43f61ff4ccfa5 to your computer and use it in GitHub Desktop.
Looking for a more effective solution to load gltf models
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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