Рендеринг Three.js Сцена в реакции-360?

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

Я знаю, что это не дает точного ответа на вопрос, но взгляните на эту веб-страницу с реакции 360:

Реактив 360 что это?

В частности, взгляните на это:

Чем React 360 отличается от A-Frame? A-Frame - это фреймворк для построения виртуальных миров с использованием декларативных HTML-подобных компонентов. Он имеет богатую коллекцию доступных компонентов из динамичного сообщества и отлично подходит для создания сложных трехмерных сцен, которые можно просматривать в виртуальной реальности. Мы полагаем, что React 360 служит для другого варианта использования, оптимизированного для приложений, которые полагаются на пользовательские интерфейсы или по природе событий. Просмотрите наши примеры, чтобы увидеть типы вещей, которые вы можете легко построить с помощью React 360.

Пытаетесь выяснить, какие рамки вам подходят? Вот быстрый тест. Если ваше приложение управляется взаимодействием с пользователем и имеет много элементов 2D или 3D пользовательского интерфейса, React 360 предоставит вам необходимые инструменты. Если ваше приложение состоит из множества трехмерных объектов или использует сложные эффекты, такие как шейдеры и постобработка, вы получите лучшую поддержку от A-Frame. В любом случае, вы будете создавать захватывающие впечатления, которые готовы к виртуальной реальности!

Чем React 360 отличается от Three.js? Three.js - это библиотека для 3D-рендеринга в веб-браузере. Это гораздо более низкоуровневый инструмент, чем React 360, и он требует управления необработанными трехмерными сетками и текстурами. React 360 предназначен для того, чтобы скрыть от вас многое, кроме случаев, когда это необходимо, чтобы вы могли сосредоточиться на поведении и внешнем виде вашего приложения.

В настоящее время React 360 полагается на Three.js для некоторых видов рендеринга. Однако мы открываем соответствующие API, чтобы вскоре разработчики React 360 могли использовать библиотеку 3D-рендеринга по своему выбору, включая необработанные вызовы WebGL.

Я знаю, что это, вероятно, не тот ответ, который вы хотели, но, честно говоря, как человек, который много балуется с рамкой и реагирует на 360, если вы хотите использовать кубы, сферические фигуры и т. Д. Вы должны пойти с Афраме. Этот вопрос был задан в вопросах GitHub на странице Reaction360, и консенсус был тот же. Теоретически это возможно, но вам придется наклониться назад, чтобы заставить его работать.