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!

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/

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

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.

You can read the complete design of the website inside these sites :
imtit.i r
imtit.c om

You can read about this in “Chapter 10. Advanced Techniques” of the book WebGL Programming Guide

Check out this example:
ch10/PickObject: ch10/PickObject - JSFiddle - Code Playground

I moved all examples to JSFiddle:

Chapter 02. Your First Step with WebGL
ch02/HelloCanvas: ch02/HelloCanvas - JSFiddle - Code Playground
ch02/HelloPoint1: ch02/HelloPoint1 - JSFiddle - Code Playground
ch02/HelloPoint2: ch02/HelloPoint2 - JSFiddle - Code Playground
ch02/ClickedPoints: ch02/ClickedPoints - JSFiddle - Code Playground
ch02/ColoredPoints: ch02/ColoredPoints - JSFiddle - Code Playground

Chapter 03. Drawing and Transforming Triangles
ch03/MultiPoint: ch03/MultiPoint - JSFiddle - Code Playground
ch03/HelloTriangle: ch03/HelloTriangle - JSFiddle - Code Playground
ch03/HelloQuad: ch03/HelloQuad - JSFiddle - Code Playground
ch03/HelloQuad_FAN: ch03/HelloQuad_FAN - JSFiddle - Code Playground
ch03/HelloTriangle_LINES: ch03/HelloTriangle_LINES - JSFiddle - Code Playground
ch03/HelloTriangle_LINE_STRIP: ch03/HelloTriangle_LINE_STRIP - JSFiddle - Code Playground
ch03/HelloTriangle_LINE_LOOP: ch03/HelloTriangle_LINE_LOOP - JSFiddle - Code Playground
ch03/TranslatedTriangle: ch03/TranslatedTriangle - JSFiddle - Code Playground
ch03/RotatedTriangle: ch03/RotatedTriangle - JSFiddle - Code Playground
ch03/RotatedTriangle_Matrix: ch03/RotatedTriangle_Matrix - JSFiddle - Code Playground
ch03/ScaledTriangle_Matrix: ch03/ScaledTriangle_Matrix - JSFiddle - Code Playground

Chapter 04. More Transformations and Basic Animation
ch04/RotatedTriangle_Matrix4: ch04/RotatedTriangle_Matrix4 - JSFiddle - Code Playground
ch04/RotatedTranslatedTriangle: ch04/RotatedTranslatedTriangle - JSFiddle - Code Playground
ch04/TranslatedRotatedTriangle: ch04/TranslatedRotatedTriangle - JSFiddle - Code Playground
ch04/RotatingTriangle: ch04/RotatingTriangle - JSFiddle - Code Playground
ch04/RotatingTranslatedTriangle: ch04/RotatingTranslatedTriangle - JSFiddle - Code Playground
ch04/RotatingTriangle_withButtons: ch04/RotatingTriangle_withButtons - JSFiddle - Code Playground

Chapter 05. Using Colors and Texture Images
ch05/MultiAttributeSize: ch05/MultiAttributeSize - JSFiddle - Code Playground
ch05/MultiAttributeSize_Interleaved: ch05/MultiAttributeSize_Interleaved - JSFiddle - Code Playground
ch05/MultiAttributeColor: ch05/MultiAttributeColor - JSFiddle - Code Playground
ch05/ColoredTriangle: ch05/ColoredTriangle - JSFiddle - Code Playground
ch05/HelloTriangle_FragCoord: ch05/HelloTriangle_FragCoord - JSFiddle - Code Playground
ch05/TexturedQuad: ch05/TexturedQuad - JSFiddle - Code Playground
ch05/TexturedQuad_Repeat: ch05/TexturedQuad_Repeat - JSFiddle - Code Playground
ch05/TexturedQuad_Clamp_Mirror: ch05/TexturedQuad_Clamp_Mirror - JSFiddle - Code Playground
ch05/MultiTexture: ch05/MultiTexture - JSFiddle - Code Playground

Chapter 07. Toward the 3D World
ch07/LookAtTriangles: ch07/LookAtTriangles - JSFiddle - Code Playground
ch07/LookAtRotatedTriangles: ch07/LookAtRotatedTriangles - JSFiddle - Code Playground
ch07/LookAtRotatedTriangles_modelViewMatrix: ch07/LookAtRotatedTriangles_modelViewMatrix - JSFiddle - Code Playground
ch07/LookAtTrianglesWithKeys: ch07/LookAtTrianglesWithKeys - JSFiddle - Code Playground
ch07/OrthoView: ch07/OrthoView - JSFiddle - Code Playground
ch07/LookAtTrianglesWithKey_ViewVolume: ch07/LookAtTrianglesWithKey_ViewVolume - JSFiddle - Code Playground
ch07/OrthoView_halfSize: ch07/OrthoView_halfSize - JSFiddle - Code Playground
ch07/OrthoView_halfWidth: ch07/OrthoView_halfWidth - JSFiddle - Code Playground
ch07/PerspectiveView: ch07/PerspectiveView - JSFiddle - Code Playground
ch07/PerspectiveView_mvp: ch07/PerspectiveView_mvp - JSFiddle - Code Playground
ch07/PerspectiveView_mvpMatrix: ch07/PerspectiveView_mvpMatrix - JSFiddle - Code Playground
ch07/DepthBuffer: ch07/DepthBuffer - JSFiddle - Code Playground
ch07/Zfighting: ch07/Zfighting - JSFiddle - Code Playground
ch07/HelloCube: ch07/HelloCube - JSFiddle - Code Playground
ch07/ColoredCube: ch07/ColoredCube - JSFiddle - Code Playground
ch07/ColoredCube_singleColor: ch07/ColoredCube_singleColor - JSFiddle - Code Playground

Chapter 08. Lighting Objects
ch08/LightedCube: ch08/LightedCube - JSFiddle - Code Playground
ch08/LightedCube_animation: ch08/LightedCube_animation - JSFiddle - Code Playground
ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/
ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/
ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/
ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/
ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/
ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/
ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/
ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/

Chapter 09. Hierarchical Objects
ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/
ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/
ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/

Chapter 10. Advanced Techniques
ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/
ch10/PickObject: ch10/PickObject - JSFiddle - Code Playground
ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/
ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/
ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/
ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/
ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/
ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/
ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/
ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/
ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/
ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/
ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/
ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/
ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/
ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/
ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/

Gifts
gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/
gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/
gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/
gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/
gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/
gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/
gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/
appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/

Appendix
appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/
appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/