React VR - 在场景中渲染三个.js元素

Question

我使用react-vr init App启动了一个示例项目，并且使用以下方法在整个场景中生成球体没有问题：

{ 
    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]}]
    }}/> 
}

但是现在我希望通过一个简单的Line几何体来连接球体。我尝试执行以下操作来创建线条，但我不知道如何添加到场景中。在简单的三.js代码中，我会简单地scene.add()，但我不确定它在 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 和 react-vr 文档！我创建了一个新的SceneGroup模块，其中它采用 three.js Group 作为初始化变量，然后当我准备好./index.vr.js时，我调用 SceneGroupModule.drawLine(); 实际绘制Line并添加到场景中。

./客户端.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);