CODEWITHSUNDEEP
three.js
Harry
Harry

Reputation: 621

Load 3D files (fbx and obj) using threeJS

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);
  }

img

Upvotes: 2

Views: 3208

Answers (1)

Mugen87
Mugen87

Reputation: 31026

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';

Upvotes: 2

Related Questions