Не удается импортировать 3D-модель, используя Three JS и React

Question

Я использую React и Three JS для импорта 3D-модели на веб-страницу. Проблема в функции загрузки me sh в мою сцену Three JS. Я получаю следующую ошибку:

TypeError: Cannot read property 'scene' of undefined

Прямо перед строкой, я добавляю me sh в сцену, я распечатываю тот же объект и появляется свойство 'scene внутри моего файла GLB. Вот изображение:

Вот мой код:

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()
    }

Если я добавлю куб из Трех Js lib работает нормально, но с моей пользовательской моделью не работает. Модель представляет собой простой куб, экспортированный как glb с помощью блендера 2.81.

Answer 1

this не определено в вашем обратном вызове, попробуйте использовать функцию стрелки вместо объявления функции:

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