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)

Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

i rendering jbutton image on simulate jcheckbox behavior. why don't let jtable render jcheckbox? because need bigger checkboxes , there's no way can resize them (as far know). so, have own table cell renderer , editor. both renders jbutton , checkbox images on them. trying change image checked image unchecked image (or vice versa) , update cell value (boolean true or false). however, reason, getcelleditorvalue() not update table. so, release mouse, value goes original one. any appreciated! lot! public class tableexample extends jframe { jscrollpane pane; jpanel panel; jtable table; object[][] data; mytablemodel tm; renderer buttoncolumn; public tableexample(object[][] data) throws ioexception { string[] columns = {"column#1", "column#2", "column#3", "column#4", "column#5", "column#6"}; this.data = data; this.setpreferredsize(new dimension(700, 500));
Read more