javascript - TypeError : Cannot read property 'center' of undefined (Three. js + React.js)

Question

我遇到了以下错误:

我正在尝试在我的 react-app 中加载一个 .OBJ 文件，但我遇到了这个错误。我试过像一个类似的问题一样使用 object.traverse 但什么也没有。我会在这里留下我的代码:

import React, { Component } from "react";
import "./App.css";
const THREE = require('three');
const OBJLoader = require('three-obj-loader');
OBJLoader(THREE);

class App extends Component {

  componentDidMount() {

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth / 2, window.innerHeight / 2);
    document.body.appendChild(renderer.domElement);

    var loader = new THREE.OBJLoader();
    loader.load('/3d/obj.OBJ', verLoad);

    function verLoad(geometry, materials) {

      var mesh = new THREE.Mesh(geometry, materials);
      scene.add(mesh);
      mesh.position.z = -10;

    }

    camera.position.z = 5;

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();

  }

  render() {
    return (
      <div className="App">
      </div>
    );
  }
}

export default App;

Answer 1

根据OBJLoader记录 load 方法中的成功回调已经接受了一个 THREE.Mesh 对象，因此无需创建一个。尝试以下版本的 verLoad 函数:

function verLoad(obj) {
    obj.position.z = -10;
    scene.add(obj);
}