渲染Three.js场景的反应-360？

Question

我在three.js场景中添加了一个three.js。我还在ReactInstance中添加了这个场景。然而，这一幕似乎没有呈现出来？我试过了，但不起作用。只想知道场景会呈现在什么反应组件中？

Cube.js：

import {Module} from 'react-360-web';
import * as THREE from 'three';
export default class Cube extends Module {
    scene: THREE.scene;
    constructor(scene) {
        super('Cube123');
        this.scene = scene;
    }
    add() {
        const geometry = new THREE.BoxGeometry(100, 100, 100);
        const material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.z = -4;
        this.scene.add(mesh);
    }
} 

client.js：

import {ReactInstance, Location, Surface} from 'react-360-web';
import Cube from './Cube';
import * as THREE from 'three';
function init(bundle, parent, options = {}) {
  const scene = new THREE.Scene();
  const Cube123 = new Cube(scene);
  const r360 = new ReactInstance(bundle, parent, {
    fullScreen: true,
    nativeModules: [ Cube123 ],
    scene: scene,
    ...options,
  });
  r360.scene = scene;

  r360.renderToLocation(
    r360.createRoot('CubeModule123'),
    new Location([0, -2, -10]),
  );
  r360.compositor.setBackground('./static_assets/360_world.jpg');
}


window.React360 = {init};

CubeModule.js：

import * as React from 'react';
import {Animated, View, asset, NativeModules} from 'react-360';
import Entity from 'Entity';
import AmbientLight from 'AmbientLight';
import PointLight from 'PointLight';

const Cube123 = NativeModules.Cube123;
export default class CubeModule extends React.Component{
    constructor() {
        super();
        Cube123.add();
    }
    render() {
        return (
            <Animated.View
                style={{
                    height: 100,
                    width: 200,
                    transform: [{translate: [0, 0, -3]}],
                    backgroundColor: 'rgba(255, 255, 255, 0.4)',
                    layoutOrigin: [0.5, 0, 0],
                    alignItems: 'center',
                }}
            >
            </Animated.View>
        );
    }
}

Answer 1

我知道这并不能准确地回答这个问题，但是看看react 360的这个网页：

反应360它是什么？

具体来说，请看以下内容：

360与A帧有何不同？一个框架是一个使用声明性HTML类组件来构建虚拟现实世界的框架.它从一个充满活力的社区收集了丰富的可用组件，非常适合创建复杂的3D场景，可以在VR中查看。我们认为React 360提供了不同的用例，这些应用程序依赖用户界面，或者本质上是事件驱动的。看看我们的例子，看看你可以轻松构建的东西类型的反应360。 试图找出哪个框架适合你？这是一个快速测试。如果您的应用程序是由用户交互驱动的，并且有许多2D或3D UI元素，React 360将提供您需要的工具。如果您的应用程序包含许多3D对象，或者依赖于复杂的效果，如着色器和后处理，您将得到更好的支持从A-框架。无论哪种方式，你将建立伟大的沉浸体验，是虚拟现实准备！ 360与Three.js有何不同？Three.js是一个用于在web浏览器中进行三维渲染的库。这是一个比React 360低得多的工具，需要控制原始的3D网格和纹理。React 360的设计是为了对你隐瞒很多，除非它是必要的，这样你就可以专注于你的应用程序的行为和外观。 目前，React 360的一些渲染工作依赖于Three.js。然而，我们正在开放相关的API，以便360开发人员可能很快就能够使用他们选择的3D渲染库，包括原始的WebGL调用。

我知道这可能不是你想要的答案，但老实说，如果你想使用立方体，球体，形状等等，你应该选择Aframe。这个问题已经在react360页面的github问题上被问到了，共识也是一样的。从理论上讲，这是可能的，但你必须向后弯曲，才能使它发挥作用。