У меня есть 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>
);
}
}