Three.js引入外部JS类时scene.add报非Object3D实例错误

报错THREE.Object3D.add: object not an instance of THREE.Object3D的直接原因是：你传入scene.add()的是自定义Box类的实例，这个实例本身不属于Three.js的Object3D类型；你在Box类内部创建的this.mesh才是符合要求、可以被加入场景的Mesh对象。
另外你现有代码还有一个隐藏问题：Parts.js文件里没有引入Three.js，就算解决了类型问题，运行时也会抛出THREE is not defined的错误。

你可以任选以下一种方案调整：

• 方案1：不改动类定义，调用时传入类内部生成的mesh
  先在Parts.js顶部补上Three.js的引入：import * as THREE from 'three'，再修改main.js的调用逻辑即可：

  import * as THREE from 'three'
  import Box from './classes/Parts.js'
  const box = new Box()
  scene.add(box.mesh) // 传入实际的Mesh实例
  

• 方案2：让自定义类继承THREE.Mesh（更推荐，符合Three.js扩展习惯）
  修改Parts.js代码，让Box类直接继承自Three.js的Mesh，这样类实例本身就是合法的Object3D对象，可以直接被加入场景：

  // Parts.js
  import * as THREE from 'three'
  class Box extends THREE.Mesh {
    constructor() {
      const geom = new THREE.BoxGeometry(2, 2, 2)
      const mat = new THREE.MeshBasicMaterial({ color: 0xff0000 })
      super(geom, mat) // 调用父类构造函数完成Mesh初始化
    }
  }
  export default Box
  

  这种写法下你原来的main.js代码不需要做任何修改就能正常运行。

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