three.js OBJLoader未加载反应

Question

我正在尝试加载一个对象(.obj)文件，以便与three.js一起使用，并使用react -三重呈现器，但得到一个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‘(作为’3‘导入)在’三‘中没有找到有想法的人吗？

Answer 1

因此，将this.THREE = THREE添加到react组件中似乎很有意义(奇怪，是吧？)。所以我的代码现在看起来是：

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/winmill.obj”)；