GLTFLoader textures not applied

Questions
1

Hi All,

Apologies for a question that I feel is a repeat - I’ve read all the threads on this on the discourse but am still struggling to fix my issue and am a complete beginner with threejs. I downloaded a disco ball gltf file, and am struggling to get the textures/colors applied.

Screen Shot 2021-09-14 at 10.29.40 AM
Screen Shot 2021-09-14 at 10.29.40 AM982×954 31.6 KB

I’ve tested that my file renders correctly on the gltf viewer, gone through the docs/threads about render settings and I have no console errors. My code is ugly but seems to be working - I’ve never worked with webGL and would love to figure this out if anyone has any ideas!

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
scene.background = new THREE.Color( 0xffffff );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.LinearEncoding;

document.body.appendChild( renderer.domElement );   

const spotLight = new THREE.SpotLight();
spotLight.position.set( 100, 10, 100 );
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;     
spotLight.shadow.camera.fov = 30;

scene.add( spotLight );

var loader = new THREE.GLTFLoader();

loader.load( 'scene.gltf', function ( gltf ) {
    mesh = gltf.scene;
    mesh.scale.set( 1, 1, 1 );
    scene.add( mesh );
}, undefined, function ( error ) {

	console.error( error );

} );


camera.position.z = 5;
function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}

animate();

Also adding the disco ball files herescene.bin (2.6 MB)
scene.gltf (10.8 KB)

metal_Mat_baseColor
metal_Mat_baseColor2048×2048 8.2 KB

metal_Mat_emissive
metal_Mat_emissive2048×2048 48.3 KB

metal_Mat_metallicRoughness
metal_Mat_metallicRoughness2048×2048 93.6 KB

metal_Mat_normal
metal_Mat_normal2048×2048 48.9 KB

Really appreciate any insights, and again, sorry for such a repetitive question!

2

These renderer settings are not ideal. Please try it with:

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;

Instead of using a spot light, start with:

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.6 );
hemiLight.position.set( 0, 100, 0 );
scene.add( hemiLight );

const dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
dirLight.position.set( 0, 100, 100 );
scene.add( dirLight );

In the next step, you may want to try to apply a HDR environment map to the model. Do it like in this demo: three.js webgl - GLTFloader