3

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?

PCoelho
  • 7,850
  • 11
  • 31
  • 36

1 Answers1

4

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;
BishopZ
  • 6,269
  • 8
  • 45
  • 58
  • Ok, I managed to make it work using your idea. Can we say that the call function behaves like the "super" in other languages? – PCoelho Jun 12 '12 at 16:36
  • @PCoelho `call` is just a way to execute a function from a given context – jbabey Jun 12 '12 at 18:43
  • there is no built-in "super" in JS. "THREE.Geometry" is the super method, and call() is calling it and injecting the local scope "this". Class-based stuff seems a bit strange in JS because it is not like other languages, but it makes JS much more flexible than other inherently class-based languages. – BishopZ Jun 13 '12 at 13:49