Render Three.js Scene in react-360?

Question

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?

Cube.js:

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);
    }
} 

client.js:

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};

CubeModule.js:

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 (
            <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',
                }}
            >
            </Animated.View>
        );
    }
}

Answer 1

I know this doesn't answer the question exactly but take a look at this web page from react 360:

React 360 what is it?

Specifically, take a look at this:

How is React 360 Different from A-Frame? A-Frame is a framework for building VR worlds using declarative HTML-like components. It has a rich collection of available components from a vibrant community, and is great for creating intricate 3D scenes that can be viewed in VR. We believe that React 360 serves a different use case optimized around applications that rely on user interfaces, or are event-driven in nature. Look through our examples to see the types of things you can easily build with React 360.

Trying to figure out which framework is right for you? Here's a quick test. If your application is driven by user interaction, and has many 2D or 3D UI elements, React 360 will provide the tools you need. If your application consists of many 3D objects, or relies on complex effects like shaders and post-processing, you'll get better support from A-Frame. Either way, you'll be building great immersive experiences that are VR-ready!

How is React 360 Different from Three.js? Three.js is a library for 3D rendering in the web browser. It's a much lower-level tool than React 360, and requires control of raw 3D meshes and textures. React 360 is designed to hide much of this from you unless it's needed, so that you can focus on the behavior and appearance of your application.

Currently, React 360 relies on Three.js for some of its rendering work. However we are opening up the relevant APIs so that React 360 developers may soon be able to use the 3D rendering library of their choice, including raw WebGL calls.

I know it's probably not the answer you wanted but honestly as someone who has dabbled a lot with aframe and react 360, if you want to use cubes, spherse, shapes, etc. You should go with Aframe. This question has been asked on the github issues on the react360 page and the consensus was the same. Theoretically it is possible, but you'll have to bend over backwards just to make it work.