如何在 react.js 中加载 gltf 文件

Question

我正在尝试使用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 文件。

注意：我是三.js新手，所以外行术语将不胜感激。

Answer 1

您可以将 gltf 文件转换为 JSX，并使用 react-three-fiber 来协调 threejs。这里有一个例子：https://github.com/react-spring/react-three-fiber/tree/3.x/tools 三根纤维包装 threejs 类似于 react-dom 包装 html 的方式，协调器不一定会改变规则，这使得它不像看起来那样抽象。