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几何体连接Spheres。我尝试使用以下内容创建该行，但我不知道如何添加到场景中。在简单的three.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到@cidicles和react-vr文档！我创建了一个新的SceneGroup模块，其中需要三个.js Group作为初始化变量，然后当我准备好./index.vr.js时，我调用SceneGroupModule.drawLine();来实际绘制Line并添加到场景中。

./ 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 - 渲染场景中的Three.js元素

1 个答案: