Is there a way to extend a ThreeJS object?

Question

I use ThreeJS to create interactions where people can click cubes. However, these cubes behave differently when pressed (different color animations to make the idea simple).

My idea was to create extension classes for the THREE.Mesh object and add my custom functions and attributes. This will help isolate the different types of cube behavior and provide cleaner code.

I tried using the John Resigs function to extend classes , but it seems to work only for classes that end up extending the class of the class.

Is there any way to do this?

Answer 1

There are several ways to create class-based systems in Javascript. John Resig's “Class” is great, but it's not the type of inheritance Three.js uses.

Pay attention to the Cube class file :

THREE.Geometry.call( this ); 

Javascript does not provide an inline model for class inheritance, so if you are not using a library (like John Resig) that bakes inheritance into a cool construct, you must explicitly call the super method.

Your class inherits CubeGeometry if inside your class you call:

 THREE.CubeGeometry.call( this ); 

You probably want to install the CubeGeometry prototype:

 THREE.MyCubeGeometry.prototype = new THREE.CubeGeometry(); THREE.MyCubeGeometry.prototype.constructor = THREE.MyCubeGeometry;