PDA

View Full Version : add event listener in webgl designed object



thanoc
06-27-2012, 03: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!

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

Ralph
07-18-2012, 12: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/

thanoc
07-18-2012, 03:45 AM
I think using three.js library something can be done
look at this example
http://yomotsu.github.com/threejs-examples/ray_basic/
each cube is separated from the others as far as the click event is concerned

Ralph
07-18-2012, 06: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.