three.js OBJLoader没有加载反应

Question

我正在尝试加载一个对象（.obj）文件以与three.js一起使用并做出反应（使用react-three-renderer），然后得到一个 我的代码如下：

filename

然而，我继续得到：“导出'OBJLoader'（导入为'THREE'）未在'三'中找到 有想法的人吗？

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

更新2019使用“三-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”）;

Answer 3

OBJLoader现在是核心three.js库的一部分，因此您只需执行以下操作即可访问它：

 const objLoader = new THREE.OBJLoader();

在删除行时：

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

由于您已经在代码中导入了three.js库。