我正在尝试创建一个呈现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 = 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;
我从three npm package page获得了代码,并尝试将其转换为React组件。我做错了什么让场景无法渲染?
答案 0 :(得分:4)
为了使其正常工作,您应该执行以下操作,并保持对容器div元素的引用:
<div style={{width:"inherit", height:"inherit", position:"absolute"}}
ref={thisNode => this.container=thisNode}
>
</div>
这将使你的画布保持在里面。接下来,在componentDidMount中将3d画布附加到容器。
this.container.appendChild(renderer.domElement);
您也忘记致电this.renderer.render(scene,camera);
并且不要在每次重新渲染时重新实例化场景元素和渲染器。想想看,如果您将使用当前设置更新场景,您将在每个动画帧上重新创建新场景,新渲染器,这怎么可能?在componentDidMount中初始化您的配置,然后在组件didUpdate中更正它们,也可以使用箭头函数animate = () => {}
来避免绑定。