在 React 中渲染三个.js 元素? [英] Rendering three.js element in React?

问题描述

我正在尝试制作一个渲染three.js 场景的React 组件.但是，每当我尝试安装组件而不是看到正在渲染的任何类型的场景时，我只会看到文本 [object HTMLCanvasElement] 正在显示.

这是我的组件:

从'react'导入React；从三"导入 * 为三；类 Cube 扩展了 React.Component {构造函数(){极好的();this.animate = this.animate.bind(this);this.scene = new THREE.Scene();this.geometry = new THREE.BoxGeometry(200, 200, 200);this.material = new THREE.MeshBasicMaterial({颜色:0xff0000，线框:真实});this.mesh = new THREE.Mesh(this.geometry,this.material);this.scene.add(this.mesh);this.renderer = null;this.camera = null;}使成为() {如果(窗口类型！== '未定义'){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);返回 (<div risklySetInnerHTML={{__html: this.renderer.domElement}}></div>);} 别的 {返回空；}}}导出默认立方体；

我从 三个 npm 包页面 获得了代码，并尝试将其转换为反应组件.我做错了什么使场景无法渲染?

解决方案

为了使其工作，您应该执行以下操作，请保留对容器 div 元素的引用:

<div style={{width:"inherit", height:"inherit", position:"absolute"}}ref={thisNode =>this.container=thisNode}>

这将使您的画布保持在里面.接下来，在 componentDidMount 中将您的 3d 画布附加到容器中.

this.container.appendChild(renderer.domElement);

你也忘记调用this.renderer.render(scene,camera);并且也不要在每次重新渲染时重新实例化场景元素和渲染器.想想看，如果您将使用当前设置更新场景，您将在每个动画帧上重新创建新场景、新渲染器，这怎么可能?在 componentDidMount 中初始化你的配置，然后在组件 didUpdate 中更正它们，你也可以通过使用箭头函数来避免绑定 animate = () =>;{}.

I'm trying to make a React component that renders a three.js scene. However, whenever I try mounting the component instead of seeing any sort of scene being rendered, I just see the text [object HTMLCanvasElement] being shown.

Here's my component:

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;

I got the code from the three npm package page and tried to convert it into a React component. What am I doing wrong that is making the scene not render?

解决方案

In order to make it work you should do the following, keep ref to your container div element:

<div style={{width:"inherit", height:"inherit", position:"absolute"}} 
  ref={thisNode => this.container=thisNode}
>    
</div>  

This will keep your canvas inside. Next thing, in componentDidMount append your 3d canvas to container.

this.container.appendChild(renderer.domElement);

You also forget to call this.renderer.render(scene,camera); And also do not reinstantiate scene elements and renderer on every rerender. Think about this, if you will update scene with your current setup you will be recreating new scene, new renderer on every animation frame how is this could be even possible? Init your configurations in componentDidMount and then correct them in component didUpdate, also you can avoid bind by using arrow functions animate = () => {}.

这篇关于在 React 中渲染三个.js 元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！