Как загрузить файлы GLTF в реагировать .js - PullRequest
Новая
       17

Как загрузить файлы GLTF в реагировать .js

0 голосов
/ 13 июня 2019

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

Я пробовал несколько путей к файлу, но, похоже, он находится в правильном положении (в той же папке, что и компонент). Я также попытался другие файлы 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, так что условия для неспециалистов приветствуются.

...