Я пытаюсь загрузить 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, поэтому условия для непрофессионалов будут признательны.