three.js OBJLoader не загружается в ответ

Question

Я пытаюсь загрузить файл объекта (.obj) для использования с three.js и реагировать (с реагировать-три-рендерер), но получить код My выглядит следующим образом:

import React from 'react';
import ReactDOM from 'react-dom';
import React3 from 'react-three-renderer';
import TrackballControls from './TrackballControls';
import * as THREE from 'three';
import * as OBJLoader from 'three-obj-loader';
OBJLoader(THREE);

class MyClass extends React.Component {
...
  render() {
    ...
    const objLoader = new THREE.OBJLoader();
  }
}

Тем не менее, я продолжаю получать: "экспорт" OBJLoader "(импортированный как" ТРИ ") не был найден в" трех "Кто-нибудь с идеей?

Answer 1

Так что кажется, что добавление this.THREE = THREE к компоненту реакции делает свое дело (странно, а?). Так что мой код в настоящее время выглядит так:

import React from 'react';
import ReactDOM from 'react-dom';
import React3 from 'react-three-renderer';
import TrackballControls from './TrackballControls';
import * as THREE from 'three';
import * as OBJLoader from 'three-obj-loader';
OBJLoader(THREE);

class MyClass extends React.Component {
...
  render() {
    ...
    this.THREE = THREE;
    const objLoader = new this.THREE.OBJLoader();
  }
}

Answer 2

OBJLoader теперь является частью основной библиотеки three.js, поэтому вы можете получить к нему доступ, просто выполнив:

 const objLoader = new THREE.OBJLoader();

При удалении строк:

import * as OBJLoader from 'three-obj-loader';
OBJLoader(THREE);

Поскольку вы уже импортировали библиотеку three.js в свой код.

Answer 3

Обновление 2019 использует "three-obj-mtl-loader" вместо'three-obj-loader'

  import { MTLLoader, OBJLoader } from "three-obj-mtl-loader";

Используйте этот метод для загрузки материала и модели OBJ

   /**
   * Load and Display OBJ Model
   */
  loadObjModel = (materialURL, objectURL) => {
    new MTLLoader().load(materialURL, materials => {
      materials.preload();
      //materials.Material.side = THREE.DoubleSide;
      console.log("Loaded Materials");
      var objLoader = new OBJLoader();
      objLoader.setMaterials(materials);
      objLoader.load(
        objectURL,
        object => {
          //const root = object.detail.loaderRootNode;
          console.log("Loaded Obj" + object);
          let mesh = object;
          this.scene.add(object);
          mesh.position.set(0, 0, 0);
          mesh.scale.set(0.07, 0.07, 0.07);
        },
        xhr => {
          console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
        },
        // called when loading has errors
        error => {
          console.log("An error happened" + error);
        }
      );
    });
  };

Загрузите модели obj с таким материалом

this.loadObjModel("./assets/windmill-fixed.mtl", "./assets/windmill.obj");