title: TypeError: Cannot read property 'center' of undefined (Three.js + React.js)
body: <p>I'm having trouble with this error that is the following:</p>
  
  <p><a href="https://i.stack.imgur.com/eWEvv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eWEvv.jpg" alt="enter image description here"></a></p>
  
  <p>I'm trying to load an .OBJ file in my react-app and I'm having this error. I've tried to use <em>object.traverse</em> like one similar question and nothing. I'll leave my code here:</p>
  
  <pre><code>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 (
        &lt;div className="App"&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>