jquery - How to add simple click event to `cube` -

i created cube using, three.js. how add click event cube?

is require additional js libraries or can directly add event in object?

here code :

$(function () {           var scene           = new three.scene();         var camera          = new three.perspectivecamera( 50, window.innerwidth / window.innerheight, 0.1, 1000);         var webglrenderer   = new three.webglrenderer({ antialias : true });          webglrenderer.setclearcolor (0xeeeeee, 1.0);         webglrenderer.setsize ( window.innerwidth, window.innerheight );         webglrenderer.shadowmapenabled = true;          var cube = createmesh(new three.cubegeometry(5, 5, 5), "floor-wood.jpg" );         cube.position.x = -12;         scene.add(cube);         // console.log(cube.geometry.facevertexuvs);          var step = 0;          render ();          camera.position.x = 00;         camera.position.y = 12;         camera.position.z = 28;         camera.lookat(new three.vector3(0, 0, 0));          var ambilight = new three.ambientlight(0x141414)         scene.add(ambilight);          var light = new three.directionallight();         light.position.set(20, 30, 20);         scene.add(light);          function createmesh (geo, imgfile) {              var texture = three.imageutils.loadtexture ("images/" + imgfile);             var mat      = new three.meshphongmaterial();             mat.map = texture;              var mesh = new three.mesh ( geo, mat);              return mesh;          }          function render () {              cube.rotation.y = step;             cube.rotation.x = step;              requestanimationframe ( render );             webglrenderer.render( scene, camera );         }           $('#webgl-output')             .append(webglrenderer.domelement);        }); 

you cant attach event directly mesh because not dom element.

there three.js extension called threex.domevents allows attach mouse events mesh, click, hover, mouse in/ mouse out.

what raycasting on mesh when trigger dom event, pretty straightforward. works latest r71.

usage:

var domevents   = new threex.domevents(camera, renderer.domelement)  domevents.addeventlistener(mesh, 'click', function(event){     console.log('you clicked on mesh', mesh) }, false)