View Full Version : add event listener in webgl designed object

06-27-2012, 04:56 AM
Hello, I have draw some points with webgl and now I want to add event listeners to these points. Is there any way to do that?
Thank you!

07-13-2012, 02:48 AM
Hm, actually, that's a good question. I haven't found a way to do that so any hrlp will be appreciated.

07-18-2012, 01:43 AM
There's no simple way. You can however add event listeners to the canvas. On mouse event do a picking and then emit a signal for every picked point. That's how I did it for the tooltips at http://onpub.cbs.mpg.de/

07-18-2012, 04:45 AM
I think using three.js library something can be done
look at this example
each cube is separated from the others as far as the click event is concerned

07-18-2012, 07:47 AM
Doesn't do anything special. If you look at the code of that expample, especially that part :

renderer.domElement.addEventListener('click', function(e){
var mouseX = e.clientX - getElementPosition(renderer.domElement).left;
var mouseY = e.clientY - getElementPosition(renderer.domElement).top;
var x = (mouseX / renderer.domElement.width) * 2 - 1;
var y = - (mouseY / renderer.domElement.height) * 2 + 1;
var vector = new THREE.Vector3(x, y, 1);
projector.unprojectVector(vector, camera);

var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());
var intersects = ray.intersectObjects(meshArray);

if(intersects.length > 0){
console.log(intersects[ 0 ].object);
var color = Math.random() * 0xffffff;
intersects[ 0 ].object.material.color.setHex( color );
renderer.render( scene, camera );
}, false);

You see it adds an event listener to the renderer, casts a ray from the mouse coord into the scene, calculates which objects intersects the ray and colors the first box in the hit array in a random color.

So my first answer still stands. You implement some picking, or use the ones already there in Three.js or PhiloGL for example, add mouse event listeners to your canvas, pick the object and do something.