扩展 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

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

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

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);