0

我用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几何图形连接球体。我尝试执行以下操作来创建线条，但我不知道如何添加到场景中。在普通的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;
4

1 回答 1

0

H/T 到 @cidicles 和 react-vr 文档！我创建了一个新SceneGroup模块，其中将 three.jsGroup作为初始化变量，然后当我准备好时，./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);
于 2017-11-07T14:38:38.020 回答