Results 1 to 5 of 5

Thread: add event listener in webgl designed object

  1. #1
    Junior Member
    Join Date
    Jun 2012
    Posts
    3

    add event listener in webgl designed object

    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!

  2. #2

    Re: add event listener in webgl designed object

    Hm, actually, that's a good question. I haven't found a way to do that so any hrlp will be appreciated.

  3. #3
    Junior Member
    Join Date
    Mar 2011
    Posts
    17

    Re: add event listener in webgl designed object

    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/

  4. #4
    Junior Member
    Join Date
    Jun 2012
    Posts
    3

    Re: add event listener in webgl designed object

    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

  5. #5
    Junior Member
    Join Date
    Mar 2011
    Posts
    17

    Re: add event listener in webgl designed object

    Doesn't do anything special. If you look at the code of that expample, especially that part :

    Code :
    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.

Similar Threads

  1. Replies: 0
    Last Post: 04-10-2012, 03:40 PM
  2. Replies: 0
    Last Post: 02-26-2009, 10:37 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •