擴展Three.js類

Question

我想擴展Three.js Object3D類，但不知道該怎么做。

我已經閱讀，重新閱讀並嘗試過這個Stackoverflow問題，但無法讓它對我有用。

有沒有辦法擴展ThreeJS對象？

誰能提供一些特定的代碼來實現這一目標？ 這是我目前所擁有的：

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，它沒有add方法。 根據您嘗試實例化對象的方式，看起來您實際上希望對象具有Mesh原型。

您最有可能想要這樣的東西：

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