Extension classes Three.js

Question

I want to extend the Object3D class of Three.js, but I can’t figure out how to do this.

This is the Stackoverflow question that I read, re-read and tried, but can't make it work for me.

Is there a way to extend a ThreeJS object?

Can anyone suggest specific code on how to do this? Here is what I have at the moment:

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

And create an instance:

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

But calling the add method of the MyObject3D instance returns an error in which the "thing" does not have an add method.

What a deal?

Answer 1

You install the prototype in CubeGeometry, which does not have an add method. Based on how you try to instantiate the object, it looks like you really want your object to have a Mesh prototype.

Most likely you want something like this:

 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; 

Then to create it:

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