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

Question

I'm having trouble with this error that is the following:

I'm trying to load an .OBJ file in my react-app and I'm having this error. I've tried to use object.traverse like one similar question and nothing. I'll leave my code here:

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

According to the OBJLoader docs the success callback in the load method already accepts a THREE.Mesh object, so there's no need to create one. Try the following version of your verLoad function:

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