title: Render Three.js Scene in react-360?
body: <p>I have a BoxGeometry added to a three.js scene. I have also added the scene in ReactInstance. The scene however doesn't seem to be rendered? I have tried this but doesn't work. just wanted to know in what react component the scene would be rendered? </p>
  
  <p>Cube.js:</p>
  
  <pre><code>import {Module} from 'react-360-web';
  import * as THREE from 'three';
  export default class Cube extends Module {
      scene: THREE.scene;
      constructor(scene) {
          super('Cube123');
          this.scene = scene;
      }
      add() {
          const geometry = new THREE.BoxGeometry(100, 100, 100);
          const material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
          const mesh = new THREE.Mesh(geometry, material);
          mesh.position.z = -4;
          this.scene.add(mesh);
      }
  } 
  </code></pre>
  
  <p>client.js:</p>
  
  <pre><code>import {ReactInstance, Location, Surface} from 'react-360-web';
  import Cube from './Cube';
  import * as THREE from 'three';
  function init(bundle, parent, options = {}) {
    const scene = new THREE.Scene();
    const Cube123 = new Cube(scene);
    const r360 = new ReactInstance(bundle, parent, {
      fullScreen: true,
      nativeModules: [ Cube123 ],
      scene: scene,
      ...options,
    });
    r360.scene = scene;
  
    r360.renderToLocation(
      r360.createRoot('CubeModule123'),
      new Location([0, -2, -10]),
    );
    r360.compositor.setBackground('./static_assets/360_world.jpg');
  }
  
  
  window.React360 = {init};
  </code></pre>
  
  <p>CubeModule.js:</p>
  
  <pre><code>import * as React from 'react';
  import {Animated, View, asset, NativeModules} from 'react-360';
  import Entity from 'Entity';
  import AmbientLight from 'AmbientLight';
  import PointLight from 'PointLight';
  
  const Cube123 = NativeModules.Cube123;
  export default class CubeModule extends React.Component{
      constructor() {
          super();
          Cube123.add();
      }
      render() {
          return (
              &lt;Animated.View
                  style={{
                      height: 100,
                      width: 200,
                      transform: [{translate: [0, 0, -3]}],
                      backgroundColor: 'rgba(255, 255, 255, 0.4)',
                      layoutOrigin: [0.5, 0, 0],
                      alignItems: 'center',
                  }}
              &gt;
              &lt;/Animated.View&gt;
          );
      }
  }
  </code></pre>