javascript - 扩展 Three.js 类

Question

我想扩展 Three.js Object3D 类，但不知道该怎么做。

有一个 Stackoverflow 问题，我已经阅读、重新阅读并尝试过，但无法让它为我工作。

Is there a way to extend a ThreeJS object?

谁能提供一些关于如何实现这一目标的具体代码？这是我目前拥有的:

var MyObject3D = function() {
   THREE.Object3D.call(this);
   MyObject3D.prototype = new THREE.CubeGeometry();
   MyObject3D.prototype.constructor = MyObject3D;
}

并创建一个实例:

var thing = new MyObject3D();
var testGeo = new THREE.CubeGeometry(10, 10, 10);
var testMat = new THREE.MeshPhongMaterial();
var testMesh = new THREE.Mesh(testGeo, testMat);
thing.add(testMesh);

但是调用 MyObject3D 实例的“add”方法会返回“thing”没有方法“add”的错误。

这是怎么回事？

Answer 1

您将原型(prototype)设置为 CubeGeometry，它没有添加方法。根据您尝试实例化对象的方式，看起来您实际上希望您的对象具有 Mesh 原型(prototype)。

很可能你想要这样的东西:

var MyObject3D = function() {
    // Run the Mesh constructor with the given arguments
    THREE.Mesh.apply(this, arguments);
};
// Make MyObject3D have the same methods as Mesh
MyObject3D.prototype = Object.create(THREE.Mesh.prototype);
// Make sure the right constructor gets called
MyObject3D.prototype.constructor = MyObject3D;

然后实例化它:

var testGeo = new THREE.CubeGeometry(20, 20, 20);
var testMat = new Three.MeshNormalMaterial();
var thing = new MyObject3D(testGeo, testMat);