Is there a way to extend a ThreeJS object?

问题:

I'm using ThreeJS to create an interaction where people can click cubes. However these cubes behave differently when clicked (different color animations, to keep the idea simple).

My idea was to create extension classes of the THREE.Mesh object and add my custom functions and attributes. This would help isolate the different behaviors of the cubes and provide a cleaner code.

I tried using John Resigs' function to extend classes, but it seems to work just for classes that ultimately extend his "Class" class.

Is there a way to do this?

回答1:

There are several ways to make class-based systems in Javascript. John Resig's "Class" is a great one, but it is not the type of inheritance that Three.js uses.

Notice in the Cube class file the line:

THREE.Geometry.call( this );

Javascript does not provide a built-in model for class inheritance, so unless you are using a library (like John Resig's) that bakes inheritance into class construction, you have to call the super method explicitly.

Your class would inherit from CubeGeometry if, inside your class, you call:

THREE.CubeGeometry.call( this );

You will also likely want to set CubeGeometry to be the prototype:

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