Как загрузить файлы gltf в react.js

Я пытаюсь загрузить glTF файл в свое reactjs приложение, используя gltf загрузчик. Мне удается отобразить базовый куб на холсте, но с помощью загрузчика gltf я получаю только пустой холст без 3D-объекта.

Я пробовал несколько путей к файлу, но, похоже, он находится в правильном положении (в той же папке, что и компонент). Я также безуспешно пробовал другие glTF файлы. Нужно ли мне куда-то включать bin-файл?

Вот мой код:

import React, { Component } from 'react';
import * as THREE from 'three';
import GLTFLoader from 'three-gltf-loader';


const OrbitControls = require("three-orbit-controls") (THREE);

class Viewer extends Component{


  componentDidMount(){
    const width = this.mount.clientWidth
    const height = this.mount.clientHeight

    //ADD SCENE
    this.scene = new THREE.Scene()

    //ADD CAMERA
    this.camera = new THREE.PerspectiveCamera(
      75,
      width / height,
      0.1,
      1000
    )
    this.camera.position.z = 4

    //ADD RENDERER
    this.renderer = new THREE.WebGLRenderer({ antialias: true })
    this.renderer.setClearColor('#888888')
    this.renderer.setSize(width, height)
    this.mount.appendChild(this.renderer.domElement)

    //ADD ORBIT CONTROL
    this.controls = new OrbitControls(this.camera,     this.renderer.domElement);

    //ADD CUBE
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshBasicMaterial({ color: '#433F81'    })
    this.cube = new THREE.Mesh(geometry, material)
    this.scene.add(this.cube)

    //ADD OBJECT
    const loader = new GLTFLoader();
      loader.load('model.gltf', (object) => {
        this.scene.add(object.scene);
      });

    this.animate();

  }

  componentWillUnmount(){
    this.stop()
    this.mount.removeChild(this.renderer.domElement)
  }

  animate = () => {
   this.renderScene()
   this.frameId = window.requestAnimationFrame(this.animate)
 }

  renderScene = () => {
    this.renderer.render(this.scene, this.camera)
  }


  render(){
    return(
      <div
        style={{ width: '400px', height: '400px' }}
        ref={(mount) => { this.mount = mount }}
      />
    )
  }
}

export default Viewer;

Приложение должно отображать 3D-файл на холсте.

ПРИМЕЧАНИЕ. Я новичок в three.js, поэтому условия для непрофессионалов будут признательны.


person julian3003    schedule 13.06.2019    source источник
comment
эта статья не относится к конкретной реакции, но загружает файл gLTF. Проблемы, с которыми вы можете столкнуться, включают то, что ваша камера не обращена к модели или ее усеченная часть слишком велика или слишком мала. Другая проблема может заключаться в том, что вам нужно добавить фонари.   -  person gman    schedule 13.06.2019


Ответы (1)


Вы можете превратить файлы gltf в JSX и использовать react-three-fiber для согласования threejs. Вот пример: https://github.com/react-spring/react-three-fiber/tree/3.x/tools три волокна обертывают threejs аналогично тому, как response-dom обертывает html, согласователи не обязательно меняют правила, что делает его менее сложным абстракция как кажется.

person hpalu    schedule 23.09.2019