title: unable to load .mtl and .obj through react-three-renderer
body: <p>I'm trying to load .obj and .mtl through react-three-renderer but i'm missing out on loading the model. Currently i'm able to render a cube inside the div. However, i want to replace the cube with my .obj model.</p>
  
  <p>installation:</p>
  
  <pre><code>npm install --save react@15.6.1 react-dom@15.6.1 three@0.86.0
  npm install --save react-three-renderer
  npm install --save three-obj-loader
  npm install --save three-mtl-loader
  </code></pre>
  
  <p>usage: cube inside a div</p>
  
  <pre><code>import React from 'react';
  import React3 from 'react-three-renderer';
  import * as THREE from 'three';
  import OBJLoader from 'three-obj-loader';// added while importing character .obj
  import OBJLoader from 'three-mtl-loader';// added while importing character .mtl
  
  
  class Simple extends React.Component {
    static propTypes = {
      width: React.PropTypes.number.isRequired,
      height: React.PropTypes.number.isRequired,
    };
  
    constructor(props, context) {
      super(props, context);
  
      this.cameraPosition = new THREE.Vector3(0, 0, 5);
  
      // construct the position vector here, because if we use 'new' within render,
      // React will think that things have changed when they have not.
  
      this.state = {
        cubeRotation: new THREE.Euler(),
      };
  
      this._onAnimate = () =&gt; {
        // we will get this callback every frame
  
        // pretend cubeRotation is immutable.
        // this helps with updates and pure rendering.
        // React will be sure that the rotation has now updated.
        this.setState({
          cubeRotation: new THREE.Euler(
            this.state.cubeRotation.x + 0.1,
            this.state.cubeRotation.y + 0.1,
            0
          ),
        });
      };
    }
  
    render() {
      const {
        width,
        height,
      } = this.props;
  
      // or you can use:
      // width = window.innerWidth
      // height = window.innerHeight
  
      return (&lt;React3
        mainCamera="camera" // this points to the perspectiveCamera below
        width={width}
        height={height}
  
        onAnimate={this._onAnimate}
      &gt;
        &lt;scene&gt;
          &lt;perspectiveCamera
            name="camera"
            fov={75}
            aspect={width / height}
            near={0.1}
            far={1000}
  
            position={this.cameraPosition}
          /&gt;
          &lt;mesh
            rotation={this.state.cubeRotation}
          &gt;
            &lt;boxGeometry
              width={1}
              height={1}
              depth={1}
            /&gt;
            &lt;meshBasicMaterial
              color={0x00ff00}
            /&gt;
          &lt;/mesh&gt;
        &lt;/scene&gt;
      &lt;/React3&gt;);
    }
  }
  
  export default Simple;
  </code></pre>
  
  <p>Expected 3D model .obj .mtl but where to add this code ?</p>
  
  <pre><code>const mtlLoader = new THREE.MTLLoader();
  mtlLoader.setBaseUrl(PATH);
  mtlLoader.setPath(PATH); // One of these might not be needed
  mtlLoader.crossOrigin = '*'; // Use as needed
  mtlLoader.load(MTL_FILE, materials =&gt; {
      materials.preload();
      // OBJ Loader
      const objLoader = new THREE.OBJLoader();
      objLoader.setMaterials(materials);
      objLoader.setPath(PATH);
      objLoader.load(OBJ_FILE, object =&gt; {
          for(let child of object.children) {
              child.material.side = THREE.DoubleSide
          }
  
      }, onProgress, onError);
  });
  </code></pre>