Unable to load FBX file . I am using latest Version of three js . Can anyone share the code for loading FBX file


here is my code

const canvas = document.querySelector(’#c’);
const renderer = new THREE.WebGLRenderer({canvas});

  //var loader = new FBXLoader();
  var loader = new THREE.FBXLoader();

var scene = new THREE.Scene();

loader.load(‘testfiles/Coat_r/Coat_.FBX’, function (object) {
scene.add(object);
});

Can you please share the FBX file in this thread?

It looks like the problem may be that you’re using physical materials in 3ds max. These aren’t supported by most FBX loaders - the 3ds max exporter warns you about this when you try to export them.

Aside from that, please share all of your code. It’s not possible to see what your problem is from the lines you posted.

Coat_.FBX (791.4 KB)

  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 45;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(5, 10, 20);

  const controls = new THREE.OrbitControls(camera, canvas);
  controls.target.set(0, 0, 0);
  controls.update();

  const scene = new THREE.Scene();
  //scene.background = new THREE.Color('black');
  //scene.background = new THREE.Color('transparent');  
  {
    const skyColor = abc;  // light blue
    const groundColor = abc;  // brownish orange
    const intensity = 1;
    const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
    scene.add(light);
  }
  {
  var loader = new THREE.FBXLoader();
  loader.load('testfiles/Coat_r/Coat_.FBX', function (object) {
  scene.add(object);
  },
  undefined, function (error) {
  console.error(error);
  });

  }
  
  
  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render() {

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);

Still not resolved this issue …please somebody figure it out…i am just beginner in this i have no idea