1

我将 BoxGeometry 添加到了 three.js 场景中。我还在 ReactInstance 中添加了场景。然而，场景似乎没有被渲染？我已经尝试过了，但没有用。只是想知道场景将在哪个反应组件中呈现？

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

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>
        );
    }
}
4

1 回答 1

0

我知道这并不能准确回答问题，但请查看 react 360 中的此网页：

React 360 是什么？

具体来说，看看这个：

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

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

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

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

我知道这可能不是您想要的答案，但老实说，如果您想使用立方体、球体、形状等，那么作为一个涉足 aframe 并做出 360 反应的人，您应该使用 Aframe。这个问题已经在react360页面上的github问题上问过，共识是一样的。理论上这是可能的，但你必须向后弯腰才能让它发挥作用。

于 2019-05-01T20:13:34.510 回答