React VR - Render Three.js Elements in Scene - three.js

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;

Answer 1

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