instanceof判断OrthographicCamera实例返回false问题求助

• 检查Three.js依赖的一致性与重复安装
  在项目根目录执行npm list three，查看输出是否存在多个Three.js实例（不同版本或不同路径的副本）。同时确认packages/objects和packages/common的package.json中Three.js的版本完全一致，版本不一致会触发npm安装多个独立副本。

• 强制工作区共享同一Three.js实例
  在根目录的package.json中添加overrides配置，强制所有子包使用同一个Three.js版本：

  "overrides": {
    "three": "^0.158.0" // 替换为你项目使用的实际版本
  }
  

  删除所有子包及根目录的node_modules和package-lock.json，重新执行npm install。

• 验证导入的构造函数引用是否一致
  在相机创建的装饰器和instanceof判断的代码中，分别打印OrthographicCamera的引用地址：

  // 装饰器文件中
  import { OrthographicCamera } from 'three';
  console.log('装饰器中的OrthographicCamera引用:', OrthographicCamera);
  
  // 判断代码文件中
  import { OrthographicCamera } from 'three';
  console.log('判断代码中的OrthographicCamera引用:', OrthographicCamera);
  

  如果两次打印的引用地址不同，说明加载了不同的Three.js模块副本，这就是instanceof返回false的核心原因。

• 统一导入路径，避免命名冲突
  确保所有文件中导入Three.js相关类时，都使用import { ... } from 'three'的标准方式，禁止使用相对路径或自定义别名引入不同的Three.js副本。
  另外注意代码中的命名冲突：装饰器里的readonly camera!: Camera;中的Camera，与@Injectable的Camera类重名，建议修改为明确的类型别名：

  import { OrthographicCamera, Camera as ThreeCamera } from 'three';
  
  export function Camera(options?: CameraOptions) {
    return function (target: new () => object) {
      return class GameCamera extends target {
        readonly camera!: ThreeCamera;  
        // ... 其余代码不变
      }
    }
  }
  

• 检查模块打包工具的去重配置
  如果项目使用Webpack、Vite等打包工具，配置强制Three.js单例加载：

  • Webpack：在webpack.config.js中添加resolve别名：

    const path = require('path');
    module.exports = {
      resolve: {
        alias: {
          'three': path.resolve(__dirname, 'node_modules/three')
        }
      }
    }
    

  • Vite：在vite.config.js中配置dedupe：

    export default {
      resolve: {
        dedupe: ['three']
      }
    }
    

内容的提问来源于stack exchange，提问作者Get Off My Lawn