Кроме того, рендеринг сцены ThreeJS не имеет ничего общего с рендерингом объектов DOM, кроме подключения холста к контейнеру в DOM, то, что рисуется на вашем холсте, определяется webglrenderer

аюсь создать компонент React, который отображает сцену three.js. Однако всякий раз, когда я пытаюсь смонтировать компонент вместо того, чтобы увидеть какую-либо сцену, которая отображается, я просто вижу текст[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;

Я получил код отстраница пакета три нпм и попытался преобразовать его в компонент React. Что я делаю не так, что сцена не рендерится?

Ответы на вопрос(1)

Решение Вопроса

вы должны сделать следующее, сохраняя ref для вашего элемента div контейнера:

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

Это будет держать ваш холст внутри. Далее, в componentDidMount добавьте ваш трехмерный холст в контейнер.

this.container.appendChild(renderer.domElement);

Вы также забыли позвонитьthis.renderer.render(scene,camera); А также не восстанавливайте элементы сцены и рендерера при каждом рендеринге. Подумайте об этом, если вы обновите сцену с вашей текущей настройкой, вы будете воссоздавать новую сцену, новый рендерер в каждом кадре анимации, как это вообще возможно? Инициируйте свои конфигурации в componentDidMount, а затем исправьте их в компоненте didUpdate, также вы можете избежать связывания, используя функции стрелок.animate = () => {}.

 MarksCode17 сент. 2017 г., 06:24
Разве не весь смысл реакции в том, что вы визуализируете вещи в функции render (). Нет ли более чистого способа сделать это?
 Anatoly Strashkevich17 сент. 2017 г., 07:04
Кроме того, рендеринг сцены ThreeJS не имеет ничего общего с рендерингом объектов DOM, кроме подключения холста к контейнеру в DOM, то, что рисуется на вашем холсте, определяется webglrenderer
 Anatoly Strashkevich17 сент. 2017 г., 07:00
Вы правы, визуализируйте, но не СОЗДАЙТЕ с нуля, this.renderer = new THREE.WebGLRenderer (); создаст новый webglrenderer, это большой объект, который прикрепил сцену и камеру, чтобы визуализировать то, что внутри вас должно вызывать МЕТОД этого объекта, который называется рендерингом, и не воссоздавать этот огромный объект с нуля в каждом кадре.

Ваш ответ на вопрос