scene.js:68 Uncaught (承诺) TypeError:无法读取未定义的属性(读取“场景”)

Question

我试图在.glb中加载一个动画模型( three.js )，但是我得到了上面的错误。如果我在main方法中粘贴Load动画模型函数，那么它可以工作，但是如果我在单独的类中使用它，那么它就不再工作了。另外，LoadStaticModel函数确实可以工作，但是动画函数不起作用。有什么好主意吗？提前感谢！

以下是代码：

class CharacterControllerInput{
   mixers = [];
   scene;
  constructor(scene){
    this.scene = scene;
    this.LoadAnimatedModel();
  }

   LoadAnimatedModel(scene){
    this.scene = scene;

    const loader = new GLTFLoader();
    loader.load( 'http://127.0.0.1:3000/docs/BeterWerktDit.glb', function ( gltf ) {

      gltf.scene.traverse( function ( object ) {

        if ( object.isMesh ) object.castShadow = true;

      } );


      const model1 =  SkeletonUtils.clone( gltf.scene );


      const mixer1 = new THREE.AnimationMixer( model1 );


      mixer1.clipAction( gltf.animations[ 0 ] ).play(); 

      
      this.scene.add( model1);
      this.mixers.push( mixer1);

      render();

    } );
  }

这里是类的缩写版本，我在其中实例化了这个类。

class Scene{

  constructor(){
    this.main();
  }
    main(){

    const canvas = document.querySelector('#c');


    const renderer =  new THREE.WebGLRenderer({canvas, antialias: true});


    const scene = new THREE.Scene();
    




      this.character = new CharacterControllerInput(scene);
    render();

       function render(){

        const width = window.innerWidth;
        const height = window.innerHeight;
        camera.aspect = window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();
  
        renderer.setSize(width, height, false);
  
        const delta = clock.getDelta();
        for (const mixer of mixers) mixer.update(delta);

        renderer.render(scene, camera);
        requestAnimationFrame(render)
      }
      requestAnimationFrame(render);
  }
  
};

let _APP = null;

window.addEventListener('DOMContentLoaded', () => {
  _APP = new Scene();
});

Answer 1

我解决了错误。问题是我在回调函数中使用了this.scene。所以这个。引用回调函数。

以下代码起作用：

class CharacterControllerInput {
  scene;
  constructor(scene, mixers) {
    this.scene = scene;
    this.mixers = mixers;
    this.LoadAnimatedModel();
  }

  _init() {
    this.LoadAnimatedModel();
  }

  LoadAnimatedModel() {
    const loader = new GLTFLoader();
    const scene = this.scene;
    const mixers = this.mixers;

    loader.load('http://127.0.0.1:3000/docs/BeterWerktDit.glb', function (gltf) {

      gltf.scene.traverse(function (object) {

        if (object.isMesh) object.castShadow = true;

      });

      const model = SkeletonUtils.clone(gltf.scene);


      const mixer = new THREE.AnimationMixer(model);

      mixer.clipAction(gltf.animations[0]).play();

      scene.add(model);
      mixers.push(mixer);


    });
  }