Angular集成Three.js时PointerLockControls依赖注入报错求助

报错Cannot resolve all parameters for PointerLockControls的核心原因是你错误地将PointerLockControls纳入了Angular的依赖注入（DI）系统中，但它并非Angular可注入服务，实例化时必须传入相机和DOM元素两个参数，DI系统无法自动解析这些参数。

具体修改步骤： #

1. 移除Providers中的PointerLockControls
   从组件的providers数组里删掉PointerLockControls，Angular不需要为它提供依赖注入：

   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: [STYLESHEETS_SRC + 'app.component.min.css'],
     providers: [Scene, PerspectiveCamera, WebGLRenderer] // 移除PointerLockControls
   })
   

2. 修改PointerLockControls的声明与实例化方式
   不要在构造函数中注入PointerLockControls，改为在组件中声明私有变量，然后手动实例化并传入正确参数：

   export class AppComponent implements OnInit {
     private sensitivity: number = .02;
     private pointerLock!: PointerLockControls; // 声明变量
   
     constructor(
       @Inject(DOCUMENT) private document: Document,
       @Inject(WINDOW) private window: Window,
       private scene: Scene = new THREE.Scene(),
       private camera: PerspectiveCamera = new THREE.PerspectiveCamera(),
       private renderer: WebGLRenderer = new THREE.WebGLRenderer()
       // 移除PointerLockControls的注入
     ) {
       // ... 其他相机、渲染器初始化代码 ...
   
       // 实例化PointerLockControls
       this.pointerLock = new PointerLockControls(this.camera, this.renderer.domElement);
       // 绑定用户交互触发锁定（浏览器安全策略要求必须用户主动操作）
       this.renderer.domElement.addEventListener('click', () => {
         this.pointerLock.lock();
       });
   
       scene.add(new THREE.AxesHelper(5));
     }
   }
   

3. 移除冗余事件监听（可选）
   你之前添加的mousemove事件监听会和PointerLockControls的内置控制逻辑冲突，建议删除这段代码，直接使用控件的原生功能。

关键注意事项： #

浏览器出于安全限制，PointerLockControls.lock()必须由用户主动交互（点击、按键等）触发，不能在页面加载时自动调用，否则会执行失败。

内容的提问来源于stack exchange，提问作者KoolerNolan