A very important point - using GooRunner event listeners is considerably slower than using regular DOM event listeners! Always use the regular events if you can. For example, it’s probably not a good idea to attach a GooRunner mousemove event unless you really have to, since that will fire all the picking and intersection logic as soon as the cursor is moved! again, remember that the GooRunner events do everything that regular events do, plus a lot more.
A Simple Example
The functionality is obvisously best illustrated with an example.
The scene does not really matter. Create any scene with a few entities or use an existing one!
Adding Listeners to GooRunner
Add an empty entity, attach a script component, and add an empty script. We’ll start by adding a simple event listener in the setup function, in the same manner as in the DOM Event Listener tutorial:
You can pause here, click around in your scene and explore the printed event details using the developer console in your browser. We have all the info we need, but we’ll do something a little more visual with it in a minute.
Console printed picking event information
A Small GUI
We’ll create an HTML entity to display the intersection information. Create an HTML entity and uncheck the box Move with Transform. Open the editor and enter this simple HTML (we are not breaking exciting web design ground right now):
This should give you this little information area in the top left corner:
Now we need to add a simple function to our script in order to display the info we got from the event object.
And then, of course, we add some code to the event listener callback to pass the variables. We also do some checking to handle the case where a pick ray misses all entities, or picks an HTML entity which has no 3D point.
Firing this script up and clicking any entity in the scene, we should now have the HTML entity populated:
An Intersection Marker
Something you might want to do is to manipulate your 3D scene depending on a picking result. For example, you could move the camera to a point of interest, make a game character move or fire a weapon, or maybe setting the point of gravity! One simple thing we can do to visualize the point is to add a simple intersection marker. We’ll use a sphere for this.
Start by creating some mesh data and a simple material for the sphere in the setup function:
Then, write functions to create and/or show the sphere at a certain point, or remove it.
Finally, hook these funcions up in the event callback:
When picking entities now, the small red sphere should show up at the picked point, just like in the example project at the top of this page.
Sometimes it’s useful to see the complete script. Check it out! And as always, here’s a complete scene in case you want to duplicate it.