我正在尝试制作一个渲染 Three.js 场景的 React 组件。但是,每当我尝试安装组件而不是看到渲染任何类型的场景时,我只会看到[object HTMLCanvasElement]显示的文本。
这是我的组件:
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 = …Run Code Online (Sandbox Code Playgroud)