I am attempting to show a WebGL renderer in a perspective component, and have been working with a test component forked off the perspective example “image” component.
I think I have made a bit of progress and the Typescript itself compiles, but when I try to return either my domElement or the container that I put it in, I get a react error saying:
Objects are not valid as a React child (found: [object HTMLDivElement]).rgs[]
I am assuming this is because I need to be passing it back some type of html, as thats what it looks like in any of the examples I can find, but I would like to pass back the already created element, any ideas?
I am 100% new to Javascript and Typescript so I appreciate your patience if the answer is painfully obvious
Here is a copy of the module, and I greatly appreciate any help.
import * as React from 'react';
import { Component, ComponentMeta, ComponentProps, SizeObject } from '@inductiveautomation/perspective-client';
import { observer } from 'mobx-react';
import * as THREE from '../include/three.module.js';
import { OrbitControls } from '../include/OrbitControls.js';
import { GLTFLoader } from '../include/GLTFLoader.js';
export const COMPONENT_TYPE = "ThreeD.display.Viewer";
export interface ViewerProps {
color: string;
}
@observer
export class Viewer extends Component<ComponentProps, any> {
render() {
const container = document.createElement( 'div' );
const camera: any = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 100 );
const scene: any = new THREE.Scene();
const renderer: any = new THREE.WebGLRenderer({ antialias: true });
const controls: any = new OrbitControls( camera, renderer.domElement );
const loader: any = new GLTFLoader();
init();
render();
function init() {
camera.position.set( - 25, 15, 15);
let ambientLight = new THREE.AmbientLight( 0x404040 );
let directionalLight1: any = new THREE.DirectionalLight( 0xC0C090 );
let directionalLight2: any = new THREE.DirectionalLight( 0xC0C090 );
directionalLight1.position.set( - 100, - 50, 100 );
directionalLight2.position.set( 100, 50, - 100 );
scene.add( directionalLight1 );
scene.add( directionalLight2 );
scene.add( ambientLight );
loader.setPath( 'models/Trapezoid/' );
loader.load( 'Trapezoid.glb', function ( gltf: { scene: any } ) {
scene.add( gltf.scene );
render();
} );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.8;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );
const pmremGenerator = new THREE.PMREMGenerator( renderer );
pmremGenerator.compileEquirectangularShader();
controls.addEventListener( 'change', render );
controls.minDistance = 2;
controls.maxDistance = 100;
controls.target.set( 0, 0, - 0.2 );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
//This is presumably where the error is coming from
return(container);
}
}
// this is the actual thing that gets registered with the component registry
export class ViewerMeta implements ComponentMeta {
getComponentType(): string {
return COMPONENT_TYPE;
}
// the class or React Type that this component provides
getViewClass(): React.ReactType {
return Viewer;
}
getDefaultSize(): SizeObject {
return ({
width: 360,
height: 360
});
}
}