three.js OBJLoader 未在反应中加载

Posted 2023-02-27

【中文标题】three.js OBJLoader 未在反应中加载

【英文标题】：three.js OBJLoader not loading in react

【发布时间】：2017-12-24 18:59:15

【问题描述】：

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

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’（导入为‘三’） 有人有想法吗？

【参考方案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();
  

【参考方案2】：

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

 const objLoader = new THREE.OBJLoader();

删除线条时：

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

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

【讨论】：

我在这里遗漏了什么吗？看起来确切的代码行已经出现在 OPs 代码中。你有没有改变一些东西来解决这个问题？如果有，请解释。

是同一行代码，但是原题中的'OBJLoader'函数是通过代码'OBJLoader(THREE);'附加到'THREE'对象的。正如我的帖子中提到的，这是使用较旧的库/非标准方法，这可能会引入错误。

啊，那个编辑让你的答案更清楚了，谢谢

【参考方案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");