threejs 相机控制器设置报错？求解？

Question

loader.load( '/public/lu/a.gltf', ( gltf ) => {
  // console.log('控制台查看加载gltf文件返回的对象结构',gltf);
  // console.log('gltf对象场景属性',gltf.scene);
  scene.add(new THREE.AmbientLight(0x666666, 0.3));//环境光
  gltf.scene.traverse( function ( child ) {
    if ( child.isMesh ) {
      child.material.emissive =  child.material.color;
      child.material.emissiveMap = child.material.map ;
    }
  });
  // 返回的场景对象gltf.scene插入到threejs场景中
  scene.add( gltf.scene );
  this.initCamera();
  this.initWebGLRenderer();

  // 设置相机控件轨道控制器OrbitControls
  const controls = new OrbitControls(this.camera, this.renderer.domElement);
  // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
  controls.addEventListener('change', () => {
    this.renderer.render(this.scene, this.camera); //执行渲染操作
  });//监听鼠标、键盘事件
})

拖动鼠标报错:

Cannot read properties of undefined (reading 'matrixWorldAutoUpdate')

Answer 1

你this.camera或者this.renderer在用OrbitControls定义的对吗

initCamera() {
    const aspect = window.innerWidth / window.innerHeight;
    this.camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
    this.camera.position.set(0, 0, 5);
}

initWebGLRenderer() {
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(this.renderer.domElement);
}

animate() {
    requestAnimationFrame(this.animate.bind(this));
    this.controls.update();
    this.renderer.render(this.scene, this.camera);
}

loader.load('/public/lu/a.gltf', (gltf) => {
    // ...
    this.initCamera();
    this.initWebGLRenderer();

    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.animate();
});