title: Load 3D files (fbx and obj) using threeJS
body: <p>I am using ThreeJS to &quot;open&quot; and view 3D files.
  At this moment I can only observe a 3D figure in 3D format.
  How can I replace this geometrical figure (cube) with a 3D file (obj or fbx)?</p>
  <p>In the project I placed two 3D files (one fbx and the other obj) with the name image.</p>
  <p>Do I need to use any specific loader to read this type of files?</p>
  <p>Can someone help me?</p>
  <p>Thanks !</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-9scpcr?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer"><strong>DEMO</strong></a></p>
  <p><strong>html</strong></p>
  <pre><code>&lt;canvas #canvas&gt;&lt;/canvas&gt;
  </code></pre>
  <p><strong>.ts</strong></p>
  <pre><code>  @ViewChild('canvas') canvasRef: ElementRef;
    renderer = new THREE.WebGLRenderer;
    scene = null;
    camera = null;
    controls = null;
    mesh = null;
    light = null;
  
    private calculateAspectRatio(): number {
      const height = this.canvas.clientHeight;
      if (height === 0) {
        return 0;
      }
      return this.canvas.clientWidth / this.canvas.clientHeight;
    }
  
    private get canvas(): HTMLCanvasElement {
      return this.canvasRef.nativeElement;
    }
  
    constructor() {
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(35, 800/640, 0.1, 1000)
    }
  
    ngAfterViewInit() {
      this.configScene();
      this.configCamera();
      this.configRenderer();
      this.configControls();
      this.createLight();
      this.createMesh();
      this.animate();
    }
  
    configScene() {
      this.scene.background = new THREE.Color( 0xdddddd );
    }
  
    configCamera() {
      this.camera.aspect = this.calculateAspectRatio();
      this.camera.updateProjectionMatrix();
        this.camera.position.set( -15, 10, 15 );
        this.camera.lookAt( this.scene.position );
    }
  
    configRenderer() {
      this.renderer = new THREE.WebGLRenderer({
        canvas: this.canvas,
        antialias: true,
        alpha: true
      });
      this.renderer.setPixelRatio(devicePixelRatio);
      this.renderer.setClearColor( 0x000000, 0 );
      this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);
    }
  
    configControls() {
      this.controls = new OrbitControls(this.camera, this.canvas);
      this.controls.autoRotate = false;
      this.controls.enableZoom = true;
      this.controls.enablePan = true;
      this.controls.update();
    }
  
    createLight() {
      this.light = new THREE.PointLight( 0xffffff );
        this.light.position.set( -10, 10, 10 );
        this.scene.add( this.light );
    }
  
    createMesh() {
      const geometry = new THREE.BoxGeometry(5, 5, 5);
      const material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
      this.mesh = new THREE.Mesh(geometry, material);
      this.scene.add(this.mesh);
    }
  
    animate() {
      window.requestAnimationFrame(() =&gt; this.animate());
      // this.mesh.rotation.x += 0.01;
      // this.mesh.rotation.y += 0.01;
      this.controls.update();
      this.renderer.render(this.scene, this.camera);
    }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/7dDyH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7dDyH.png" alt="img" /></a></p>