Fbx model loaded using FBXLoader is completely black

Questions
, ,
1

Hi

I have an fbx model which using FBXLoader I added to the scene. The model is fine when I open it in Windows 3D viewer but its totally black in the dom canvas.
Here is the screenshot

image
image1764×883 23.2 KB

Here is the code sample:-

this.scene = new THREE.Scene();

this.renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true,
});
this.renderer.setSize(this.width, this.height);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
this.renderer.outputEncoding = THREE.sRGBEncoding;
this.el.nativeElement.appendChild(this.renderer.domElement);

// Camera
if (!this.camera) {
  this.camera = new THREE.PerspectiveCamera(
    20,
    this.width / this.height,
    1
  );

  this.scene.add(this.camera);
}

(new FBXLoader()).load('../../../assets/model/model.fbx', (model: any) => {
    // const house = model.scene.clone();
    const house = model.clone();

    house.traverse( function ( child ) {

      if ( child.isMesh ) {

        child.castShadow = true;
        child.receiveShadow = true;
      }
    });

    house.scale.set(0.5, 0.5, 0.5);
    const box = new THREE.Box3().setFromObject(house);
    const center = box.getCenter(new THREE.Vector3());
    house.position.x += house.position.x - center.x;
    house.position.y += house.position.y - center.y;
    house.position.z += house.position.z - center.z;

    this.scene.add(house);
// Lights
    const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
			hemiLight.position.set( 0, 200, 0 );
			this.scene.add( hemiLight );

			const dirLight = new THREE.DirectionalLight( 0xffffff );
			dirLight.position.set( 0, 200, 100 );
			dirLight.castShadow = true;
			dirLight.shadow.camera.top = 180;
			dirLight.shadow.camera.bottom = - 100;
			dirLight.shadow.camera.left = - 120;
			dirLight.shadow.camera.right = 120;
			this.scene.add( dirLight );

    // const ground = new THREE.Mesh(new THREE.PlaneBufferGeometry(10, 10), new THREE.MeshStandardMaterial({ color: 0xffff99 }));
    // ground.rotateX(-Math.PI / 2);
    // ground.receiveShadow = true;
    // this.scene.add(ground);

    this.renderer.context.canvas.removeAttribute('tabindex')

    console.log("added")
 })
2

Do you mind sharing the FBX model in this thread?