Question

我将一个BoxGeometry添加到了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看一下此网页：

React 360 what is it?

具体地说，看看这个：

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问题上被问到，共识是相同的。从理论上讲是可能的，但是您必须向后弯腰才能使它起作用。

在react-360渲染Three.js场景？

1 个答案: