无法使用 ThreeJS 和 React 导入 3D 模型

Question

我正在使用 React 和 ThreeJS 将 3D 模型导入网页。问题出在将网格加载到我的 ThreeJS 场景中的函数中。我收到以下错误：

TypeError: Cannot read property 'scene' of undefined

就在我将网格添加到场景中的行之前，我打印出相同的对象并且在我的 GLB 文件中有一个属性 'scene'。这是一张图片：

这是我的代码：

import React, { Component } from 'react'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import gltfPath from '/home/mateus/Documents/index/src/cube.glb'


class ThreeDViewer extends Component {
    componentDidMount() {
        const width = this.mount.clientWidth
        const height = this.mount.clientHeight

        this.scene = new THREE.Scene()

        this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 5000)
        this.camera.position.z = 20

        this.renderer = new THREE.WebGLRenderer()
        this.renderer.setSize(width, height)
        this.mount.appendChild(this.renderer.domElement)

        const geometry = new THREE.BoxGeometry(1, 1, 1)
        const material = new THREE.MeshBasicMaterial({ color: '#00ff00' })

        this.cube = new THREE.Mesh(geometry, material)

        this.light = new THREE.AmbientLight(0xffffff, 100)
        this.scene.add(this.light)

        this.loader = new GLTFLoader()
        this.loader.load(gltfPath, function (gltf) {
            // I print gltf but I can't add it to my scene I don't know why
            console.log(gltf)
            this.scene.add(gltf.scene.children[2])

        }, undefined, function (error) {
            console.error(error)
        })


        this.start()
    }

如果我从 ThreeJs 库中添加立方体，它工作正常，但对于我的自定义模型，它不起作用。该模型只是一个由 blender 2.81 导出为 glb 的简单立方体。

Answer 1

this 在您的回调中未定义，请尝试使用箭头函数而不是函数声明：

this.loader.load(gltfPath, (gltf) => {
  this.scene.add(gltf.scene.children[2]);
});

无法使用 ThreeJS 和 React 导入 3D 模型

Can't import a 3D model using ThreeJS and React

javascript

blender

three.js

reactjs

gltf