Renderizando o elemento three.js no React?
Estou tentando criar um componente React que renderize uma cena three.js. No entanto, sempre que tento montar o componente em vez de ver qualquer tipo de cena sendo renderizada, apenas vejo o texto[object HTMLCanvasElement]
sendo mostrado.
Aqui está o meu componente:
import React from 'react';
import * as THREE from 'three';
class Cube extends React.Component {
constructor() {
super();
this.animate = this.animate.bind(this);
this.scene = new THREE.Scene();
this.geometry = new THREE.BoxGeometry(200, 200, 200);
this.material = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});
this.mesh = new THREE.Mesh(this.geometry,this.material);
this.scene.add(this.mesh);
this.renderer = null;
this.camera = null;
}
render() {
if (typeof window !== 'undefined') {
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
this.camera.position.z = 1000;
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(window.innerWidth, window.innerHeight);
return (
<div dangerouslySetInnerHTML={{__html: this.renderer.domElement}}></div>
);
} else {
return null;
}
}
}
export default Cube;
Eu recebi o código dopágina de pacote de três npm e tentou convertê-lo em um componente React. O que estou fazendo de errado que está fazendo a cena não renderizar?