javascript - 如何在Threejs中导入主JS文件中的JS文件

Question

我还是 Threejs 新手... 我想将一些 Threejs 代码放入另一个 JS 文件中，然后在我的 main.js 文件中使用它 这是一个简单的类似代码:

ma​​in.js

import * as THREE from 'three'
import Box from './classes/Parts.js'
const box = new Box()
scene.add(box)

Parts.js

class Box {
  constructor() {
    this.geom = new THREE.BoxGeometry(2, 2, 2);
    this.mat = new THREE.MeshBasicMaterial({
      color: 0xff0000
    });
    this.mesh = new THREE.Mesh(this.geom, this.mat);
  }
}
export default Box;

这类似于 this

但我收到此错误:THREE.Object3D.add:对象不是 THREE.Object3D 的实例。

我做错了什么？

Answer 1

您只能将派生自 THREE.Object3D 的自定义对象添加到场景图中。您的 Box 类的情况并非如此。像这样重写你的代码:

class Box extends THREE.Mesh {
  constructor() {
    const geom = new THREE.BoxGeometry(2, 2, 2);
    const mat = new THREE.MeshBasicMaterial({
      color: 0xff0000
    });
    super(geom,mat);
  }
}
export default Box;