Ever dreamed of a object3d.on(‘click’, function(){ … });?

I have :) This post presents a little experiment. What about implementing the concept of dom events in 3D Space. In a web page, a click event is trigger when a user click on a element. This is common knowledge in web development. What about having that but in a three.js scene ? Maybe people will start do 3D user interface with that, who knows. How great would that be ?!? So let’s do that.

Try it out. The demo contains 3 teapots. Each bind a different type of events. When the events are triggered, teapots are animated. Animations are made by tween.js, a nice js tweening engine seen in a previous post. Play with it to get a feel of it, maybe think about the type of UI you could do in 3D.

Let’s Get Started

First let’s include the source. You download threex.domevent.js. and copy this line in your page.

1 <script src= 'threex.domevent.js' ></script>

Let’s Use It

Let’s say we want do to an action when the user is clicking on a object. We just do the following.

1 2 3 mesh . on ( 'click' , function (){ mesh . scale . x *= 2 ; });

This short line means ”if the user click on this mesh, make it twice wider”. Eloquent meaning, short syntax … pretty sweet in my book. If you wish to stop listening just do as usual.

1 mesh . off ( 'click' , callback )

In fact, there is 2 naming for those functions: one is addEventListener / removeEventListener from HTMLElement The other is copied on jQuery api: on / off Pick the one you like. They are doing the same thing.

Always in a effort to stay close to usual pratices, the events name are the same as in DOM. The semantic is the same too. Currently, the available events are click, dblclick, mouseup, mousedown, mouseover and mouse out.

Some Internals

three.js already has the ability to interact with the mouse. You can see it in action here and here. Internally they use 2 three.js classes: THREE.Projector and THREE.Ray. threex.domevent.js is an higher level api on top of those functions, an interface which mimic dom events, something closer to the usual web developper.

It is a nice api. clean, short, object oriented and feels familiar to web developpers. A little hichup tho, it modifies THREE.Object3D class. It is a global class, so it may be legitimatly considered unclean by some people. If this bother you, simply do THREEx.DomEvent.noConflict() and use the standalone API. It is documented in the annoted source. In fact, the object oriented API is just a thin wrapper on top of the standalone API.

Conclusion

We all know the click event when the user click on a webpage. This experiment wishes to provide to web developpers the same experience in 3D. I hope people will do crazy innovations by using 3D in user interfaces. This is a first version. Maybe we will implement bubbling in the future, even events like ‘change’.

As usual, threex.domevent.js source is available on github. There is an annoted source for implementation details. That’s all folks. Have fun.