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
Post a Comment