在 react-360 中渲染三.js场景?

Question

我有一个BoxGeometry添加到一个三.js的场景中。我还在 ReactInstance 中添加了场景。然而，场景似乎没有被渲染？我已经尝试过这个，但不起作用。只是想知道场景将在哪个 react 组件中渲染？

立方体.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);
}
} 

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

立方体模块.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 的这个网页：

React 360 这是什么？

具体来说，看看这个：

React 360 与 A-Frame 有何不同？ A-Frame是一个框架，用于使用类似XML的声明性组件构建VR世界。它拥有来自充满活力的社区的丰富可用组件集合，非常适合创建可以在 VR 中查看的复杂 3D 场景。我们相信 React 360 提供了一个不同的用例，围绕依赖用户界面的应用程序进行优化，或者本质上是事件驱动的。浏览我们的示例，了解您可以使用 React 360 轻松构建的内容类型。

试图找出适合您的框架？这是一个快速测试。如果您的应用程序由用户交互驱动，并且有许多 2D 或 3D UI 元素，React 360 将提供您需要的工具。如果您的应用程序由许多 3D 对象组成，或者依赖于着色器和后期处理等复杂效果，您将从 A-Frame 获得更好的支持。无论哪种方式，您都将构建出色的沉浸式体验，这些体验都可用于 VR！

React 360 与 Three.js 有何不同？ 三.js 是一个用于在 Web 浏览器中进行 3D 渲染的库。它是一个比 React 360 低得多的工具，需要控制原始 3D 网格和纹理。React 360 旨在对你隐藏大部分内容，除非需要，以便你可以专注于应用程序的行为和外观。

目前，React 360 依靠 Three.js 来完成一些渲染工作。但是，我们正在开放相关的API，以便React 360开发人员可能很快就能够使用他们选择的3D渲染库，包括原始WebGL调用。

我知道这可能不是你想要的答案，但老实说，如果你想使用立方体、球形、形状等，作为一个涉足 aframe 和 react 360 的人。你应该选择Aframe。这个问题已经在react360页面上的github问题上被问过，共识是相同的。从理论上讲这是可能的，但你必须向后弯腰才能让它工作。