Блог

Я использую ThreeJS для «открытия» и просмотра 3D-файлов. На данный момент я могу наблюдать только 3D-фигуру в формате 3D. Как я могу заменить эту геометрическую фигуру (куб) 3D-файлом (obj или fbx)?

В проект я поместил два 3D-файла (один fbx, а другой obj) с именем image.

Нужно ли мне использовать какой-либо конкретный загрузчик для чтения файлов этого типа?

Кто-нибудь может мне помочь?

Спасибо!

ДЕМОНСТРАЦИЯ

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

Нужно ли мне использовать какой-либо конкретный загрузчик для чтения файлов этого типа?

ДА. Вы должны использовать THREE.OBJLoader и THREE.FBXLoader , если хотите загрузить файлы OBJ или FBX. Для загрузки OBJ-файлов рабочий процесс выглядит следующим образом:

Импортируйте загрузчик:

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

Загрузите ресурс и добавьте его в свою сцену:

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

Кстати: нет необходимости использовать пакет npm @avatsaev/three-orbitcontrols-ts . Вы можете импортировать OrbitControls из three пакета.

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