React 和 Three.js MTLLoader "material.onBeforeCompile 未定义"

Question

我正在尝试使用 Meteor 在 React 中构建一个简单的对象查看器，它可以使用以下 npm 模块导入 .obj 和 .mtl 文件：

• 三（0.87.1）
• 反应（15.6.1）
• 三对象加载器(1.1.3)
• 三MTL装载机（1.0.1）

到目前为止，我已经设法使用 OBJLoader 显示一个对象。但是当我在使用 MTLLoader 应用纹理后尝试渲染对象时，我从控制台收到此错误：

遗漏的类型错误：无法读取属性 '的toString' 在WebGLPrograms.getProgramCode（modules.js哈希= eae498e3ee56e21f967b663c5bed3444c66eaef2：50707？）的未定义在initMaterial（modules.js哈希= eae498e3ee56e21f967b663c5bed3444c66eaef2：54628）在setProgram（modules.js哈希= eae498e3ee56e21f967b663c5bed3444c66eaef2？ 54820）在WebGLRenderer.renderBufferDirect（modules.js散列= eae498e3ee56e21f967b663c5bed3444c66eaef2：53883）在渲染对象（modules.js散列= eae498e3ee56e21f967b663c5bed3444c66eaef2：54613）在renderObjects（modules.js散列= eae498e3ee56e21f967b663c5bed3444c66eaef2：54586）在WebGLRenderer.render（模块。 js?hash=eae498e3ee56e21f967b663c5bed3444c66eaef2:54350) at WebGlDisplay.renderScene (WebGlDisplay.jsx:86) at onClick (WebGlDisplay.jsx:90) at HTMLUnknownElement。boundFunc (modules.js?hash=eae498e3ee56e21f967b663c5bed3444c66eaef2:8794)

原因：material.onBeforeCompile在getProgramCode未定义

我的代码如下所示：

import React, { Component } from 'react'
import THREE from 'three'
const MTLLoader = require('three-mtl-loader');
const OBJLoader = require('three-obj-loader')(THREE);

export default class WebGlDisplay extends Component {
  constructor(props) {
    super(props)
  }

      //init canvas
   init(){
    const width = this.mount.clientWidth;
    const height = this.mount.clientHeight;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setClearColor('#000000', 0.2);
    renderer.setSize(width, height);
    camera.position.set(3,4,6);
    camera.lookAt(new THREE.Vector3());
    this.scene = scene;
    this.camera = camera;
    this.renderer = renderer;
    this.mount.appendChild(this.renderer.domElement);
  }

  //load & render object
  drawOBJ(){
    const mtlLoader = new MTLLoader();
    let onProgress = function(e){console.log("rendering:" + e)};
    let onError = function(e){console.log("error:" + e)};
    mtlLoader.load("eagle.mtl", materials => {
        materials.preload();
        // OBJ Loader
        const objLoader = new THREE.OBJLoader();
        this.materials = materials;
        objLoader.setMaterials(materials);
        objLoader.load("eagle.obj", object => {
              this.object = object;
            this.scene.add(object);
        }, onProgress, onError);
    }, onProgress,onError);
    this.renderScene();
  }

  componentDidMount() {
    this.init();
    this.drawOBJ();
  }

  renderScene() {
    this.renderer.render(this.scene, this.camera)
  }

  render() {
    return (
      <div onClick={(e) => this.renderScene()}
        style={{ width: '800px', height: '600px' }}
        ref={(mount) => { this.mount = mount }}
      />
    )
  }
}

有谁知道为什么我会收到这个错误？我尝试使用不同的 .obj- 和 .mtl-文件，但错误仍然存​​在（每当我尝试调用renderScene()）。

无论如何，这可能是模块版本的问题，还是加载时的一些时间问题？

任何帮助，将不胜感激。

Answer 1

问题似乎是三 mtl-loader NPM 包在它的 package.json 中引用了一个过时的 Three.js 版本，所以即使您使用的是最新版本的三，该插件也不是！

显然这不是一个可行的长期修复，但我将三个版本更改node_modules/three-mtl-loader/package.json为 0.87.1 并删除了目录node_modules/three-mtl-loader/node_modules以进行良好测量并运行我的示例，它立即起作用，纹理等等。

显然插件需要更新。我还看到插件中的源代码和三个示例文件夹中的源代码之间至少有一个功能差异（case 语句中的“Tr”与“tr”），并且它不遵循与其他加载器插件相同的初始化行为（特别是它不是通过调用require("three-mtl-loader")(THREE)) 来初始化的，因此需要做一些工作才能使其成形。

或者，作者似乎已将其 repo 中的版本号更新为 0.86.0（足够高），只是还没有部署到 NPM。所以，如果你觉得勇敢，你可以改变你的 package.json 来拥有这条线

"dependencies": { ... "three-mtl-loader": "git+https://git@github.com/nascherman/three-mtl-loader.git", ... }