如何在 Threejs 的主 JS 文件中导入 JS 文件答案

【问题标题】：How to import JS file in main JS file in Threejs如何在 Threejs 的主 JS 文件中导入 JS 文件
【发布时间】：2022-06-10 17:45:18
【问题描述】：

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

import * as THREE from 'three'
import Player from './classes/player.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][1]

但我收到此错误：THREE.Object3D.add: object not an instance of THREE.Object3D.

我做错了什么？ [1]：https://discourse.threejs.org/t/how-do-you-do-to-work-with-external-js-classes-files-and-put-this-on-a-main-js-file-with-modules/26564/2

【问题讨论】：

标签： javascript three.js webgl

【解决方案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;

【讨论】：