React VR - Render Three.js Elements in Scene

Question

I used the react-vr init App to spin up a sample project and had no problem generating spheres throughout my scene using:

{ 
    data.map(node => return <Sphere key={`node-${node.id}`} radius={1} widthSegments={8} heightSegments={8} lit={true}
        style={{color: "red", transform: [{translate: [node.x, node.y, node.z]}]
    }}/> 
}

But now I am looking to connect the Spheres via a simple Line geometry. I tried doing the below to create the line, but I don't know how to add to the scene. In plain three.js code I would simply scene.add(), but I'm not sure how that works in react-vr.

import {
    LineBasicMaterial,
    Line,
    Geometry,
    Vector3
} from 'three';

const lineMaterial = new LineBasicMaterial({color: 0xf0f0f0, transparent: true});
lineMaterial.opacity = .75;
const line = new Line(new Geometry(), lineMaterial);
line.geometry.vertices = [new Vector3(0, 0, 0), new Vector3(0, 0, 0)];
line.renderOrder = 10;

You may want to check out the native modules section of the documentation. There is an example there which shows how to use threejs objects in react vr. — cidicles, Nov 03 '17 at 20:18
Thanks @cidicles. My thought was that there is a `scene` object which is generated somewhere during the `init` process and I was hoping it was available via `props` or other. — hotshotiguana, Nov 04 '17 at 13:52
When you declare the vrinstance in client.js you can pass it a custom scene `scene: scene` and can use that in your native modules to make changes to your global scene containing your core components. — cidicles, Nov 07 '17 at 01:00

score 0 · Answer 1 · answered Nov 07 '17 at 14:38

H/T to @cidicles and the react-vr docs! I create a new SceneGroup module in which it takes a three.js Group as an initializing variable and then when I'm ready in ./index.vr.js I call SceneGroupModule.drawLine(); to actually draw the Line and add to the scene.

./client.js

import {VRInstance} from 'react-vr-web';
import {
    Scene,
    Group
} from 'three';

function init(bundle, parent, options) {
    const scene = new Scene();

    const sceneGroupModule = new SceneGroupModule();

    const vr = new VRInstance(bundle, 'App', parent, {
        nativeModules: [sceneGroupModule],
        scene: scene,
    });

    const group = new Group();
    scene.add(group);
    sceneGroupModule.init(group);

    vr.render = () => {};

    // Begin the animation loop
    vr.start();
    return vr;
}

window.ReactVR = {init};

export default class SceneGroupModule extends Module {

    constructor() {
        super('SceneGroupModule');
    }

    // Called directly after the module is created.
    init(sceneGroup) {
        this.sceneGroup = sceneGroup;
    }

    drawLine() {

        const lineMaterial = new LineBasicMaterial({color: 0xf0f0f0, transparent: true});
        lineMaterial.opacity = .75;
        const line = new Line(new Geometry(), lineMaterial);
        line.geometry.vertices = [new Vector3(0, 0, 0), new Vector3(0, 0, 0)];

        line.geometry.vertices = [
            new Vector3(10, 2, 5),
            new Vector3(11, 3, 4)
        ];

        line.geometry.verticesNeedUpdate = true;

        this.sceneGroup.add(line);
    }
}

./index.vr.js

import React from 'react';
import {
    AppRegistry,
    View,
    NativeModules
} from 'react-vr';

// Native Module defined in vr/client.js
const SceneGroupModule = NativeModules.SceneGroupModule;

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        SceneGroupModule.drawLine();
    }

    render() {
        return (
            <View
                style={{
                    transform: [{translate: [0, 0, -3]}],
                    layoutOrigin: [0.5, 0, 0],
                    alignItems: 'center',
                }}
            >
            </View>
        );
    }
}

AppRegistry.registerComponent('App', () => App);

React VR - Render Three.js Elements in Scene

1 Answers1