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

我正在尝试使用

glTF

loader在我的

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;

import React，{Component}来自'React'；
从“三”中导入*作为三；
从“三个gltf加载器”导入GLTFLoader；
常数轨道控制=需要（“三个轨道控制”）（三个）；
类查看器扩展组件{
componentDidMount（）{
const width=this.mount.clientWidth
常量高度=this.mount.clientHeight
//添加场景
this.scene=new THREE.scene（）
//添加摄像头
this.camera=新的3.perspective相机(
75,
宽度/高度，
0.1,
1000
)
这个.camera.position.z=4
//添加渲染器
this.renderer=new THREE.WebGLRenderer（{antialas:true}）
this.renderer.setClearColor（“#8888888”）
this.renderer.setSize（宽度、高度）
this.mount.appendChild（this.renderer.doElement）
//添加轨道控制
this.controls=新的轨道控件（this.camera、this.renderer.doElement）；
//添加多维数据集
常量几何体=新的三个.BoxGeometry（1,1,1）
const material=new THREE.MeshBasicMaterial（{color:'#433F81'}）
this.cube=新的3.Mesh（几何体、材质）
this.scene.add（this.cube）
//添加对象
const loader=新的GLTFLoader（）；
loader.load（'model.gltf'，（object）=>{
this.scene.add（object.scene）；
});
这个。动画（）；
}
组件将卸载（）{
这个
this.mount.removeChild（this.renderer.domeElement）
}
动画=（）=>{
this.renderScene（）
this.frameId=window.requestAnimationFrame（this.animate）
}
renderScene=（）=>{
this.renderer.render（this.scene，this.camera）
}
render（）{
返回(
{this.mount=mount}
/>
)
}
}
导出默认查看器；

应用程序应该在画布上显示3D文件

---

注意：我是three.js的新手，因此希望使用外行术语。

您可以将gltf文件转换为JSX，并使用react three fiber来协调three js。这里有一个例子：three fiber包装threejs类似于react dom包装html的方式，协调器不一定会更改规则，这使得它看起来不像是一个抽象。

您可以将gltf文件转换为JSX，并使用react three fiber协调threejs。这里有一个例子：three fiber wraps threejs类似于react dom包装html的方式，协调器不一定会更改规则，这使得它看起来不像是抽象的。

不是react特定的，但它确实加载了一个gLTF文件。您可能遇到的问题包括您的相机没有面对模型，或者它的视锥太大或太小。另一个问题可能是您需要添加灯光。不是特定于react的，但它确实加载gLTF文件。您可能遇到的问题包括您的相机没有面对模型，或者它的视锥太大或太小。另一个问题可能是您需要添加灯光。