Load 3D files (fbx and obj) using threeJS

Question

I am using ThreeJS to "open" 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)?

In the project I placed two 3D files (one fbx and the other obj) with the name image.

Do I need to use any specific loader to read this type of files?

Can someone help me?

Thanks !

DEMO

html

<canvas #canvas></canvas>

.ts

  @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(() => this.animate());
    // this.mesh.rotation.x += 0.01;
    // this.mesh.rotation.y += 0.01;
    this.controls.update();
    this.renderer.render(this.scene, this.camera);
  }

Mugen87 · Accepted Answer · 2020-09-29 14:12:00Z

Do I need to use any specific loader to read this type of files?

Yes. You have to use THREE.OBJLoader and THREE.FBXLoader if you want to load OBJ or FBX files. For loading OBJ files, the workflow looks like so:

Import the loader:

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

Load the asset and add it to your scene:

const loader = new OBJLoader();
loader.load('https://threejs.org/examples/models/obj/tree.obj', object => {
    this.scene.add(object);
});

BTW: There is no need to use the npm package @avatsaev/three-orbitcontrols-ts. You can import OrbitControls from the three package.

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

Collectives™ on Stack Overflow

Load 3D files (fbx and obj) using threeJS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related