不能从 THREE.js 类扩展答案

【问题标题】：can't extend from THREE.js class不能从 THREE.js 类扩展
【发布时间】：2020-09-27 02:36:23
【问题描述】：

我对 three.js 和 javascript 非常陌生，所以我不完全确定这是一个 three.js 还是 javascript 问题，但我无法以正确的方式从 THREE.Mesh 类继承并拥有我的网格显示在屏幕上。出于某种原因，我不允许调用构造函数 new THREE.Mesh(geometry, material);在我的类的构造函数中。请有人指出我正确的方向。

我读了这篇文章：Extending Three.js classes

并让它工作，但我想使用一个实际的类而不是那里提出的这个奇怪的构造。

    class Icon extends THREE.Mesh{
      constructor(iconName, worldPosition, cameraPosition){
        super();
        this.iconName = iconName;
        this.worldPosition = worldPosition;
        this.cameraPosition = cameraPosition;
        var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );     
        var mesh = new THREE.Mesh( geometry, material );   
        console.log(this.mesh); // Error: undefined
      }
    };
...

scene.add(obj.mesh);
// Error: THREE.Object3D.add: object not an instance of THREE.Object3D.

【问题讨论】：

您为什么想要在构造函数中为已经是网格的实例创建new THREE.Mesh(…)（通过继承）？看起来您要么根本不想要继承，而是倾向于组合并将.mesh 作为Icon 对象的属性，或者您应该调用super( geometry, material );
感谢您指出这一点！ class Icon extends THREE.Mesh{ constructor(iconName, worldPosition, cameraPosition, colour){ var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: colour } ); let mesh = super(geometry, material ); scene.add(mesh); }

标签： javascript inheritance three.js

【解决方案1】：

正确的类应该是这样的：

class Icon extends THREE.Mesh{
  constructor(iconName, worldPosition, cameraPosition){
    super();
    this.iconName = iconName;
    this.worldPosition = worldPosition;
    this.cameraPosition = cameraPosition;
    this.geometry = new THREE.BoxBufferGeometry();
    this.material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );     
    console.log(this);
  }
};

与其创建Mesh 的新实例，不如将新几何和材料分配给现有属性geometry 和material。

【讨论】：