javascript - Raycasting hard-faces of a mesh -- Three.js -


i created box in three.js

var scene = new three.scene(); var camera = new three.perspectivecamera( 100, window.innerwidth/window.innerheight, 0.1, 1000 ); camera.position.set(5, 5, 10);  var geo = new three.boxgeometry(5,2,5);  var mat = new three.meshbasicmaterial({color:0xff0ff0, wireframe:false, vertexcolors: three.facecolors});  var mesh = new three.mesh( geo, mat); scene.add(mesh);  var renderer = new three.webglrenderer(); renderer.setsize( window.innerwidth, window.innerheight ); document.body.appendchild( renderer.domelement ); renderer.render(scene, camera); 

after want raycast cubes faces mouse on on.thus created function

var raycaster = new three.raycaster(); var mouse = new three.vector2();  function onmousemove( event ) {     mouse.x = ( event.clientx / window.innerwidth ) * 2 - 1;     mouse.y = - ( event.clienty / window.innerheight ) * 2 + 1;           raycaster.setfromcamera( mouse, camera );         var intersects = raycaster.intersectobject( mesh);      ( var = 0; < intersects.length; i++ ) {         intersects[ ].face.color.sethex( 0xddc2a3);         mesh.geometry.colorsneedupdate = true;     }      renderer.render( scene, camera ); }  window.addeventlistener( 'mousemove', onmousemove, false ); 

it nearly works correct. mean, changes color of half of face. know, mesh created boxgeometry() has 12 face3. want the complete face or hard-face or face4 took shape face3+face3. idea how can accomplish this?

in specific example, given you're using default box-geometry , know there 2 faces per side, wrapped in specific direction/order, should able pair each of 2 faces so:

var facesperside = 2; ( var = 0; < intersects.length; i++ ) {     var side = math.floor(intersects[i].faceindex/facesperside);     for(var j=0;j<facesperside;j++) {         mesh.geometry.faces[side*facesperside+j].color.sethex(0xddc2a3);     }     mesh.geometry.colorsneedupdate = true; } 

edit: bit more complex if using variable number of segments width/height/depth, or if using non-platonic solid geometry.


Comments

Popular posts from this blog

javascript - Thinglink image not visible until browser resize -

firebird - Error "invalid transaction handle (expecting explicit transaction start)" executing script from Delphi -

mongodb - How to keep track of users making Stripe Payments -