TypeError：无法读取未定义的属性“ center”（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);
}