javascript - Three.js raycasting and placing object above plane does not work -

i've created plane based on heightmap intersecting (raycasting) not work. i'm trying place object above triangle hover fails

edit: when quote out height (pgeo.vertices[i].z = heightmap[i] * 5;), seems work sometimes. highlight shows not , depends on camera view also. if zoom in/out triangle disappears/appears again etc..

i've based jsfiddle on voxelpainter example:

http://jsfiddle.net/waf6u7xp/1/

however i'm not sure if there better way calculate triangle hover? maybe projection based on heightmap? ideas?

this code executes raycast:

function ondocumentmousemove( event ) {      event.preventdefault();      mouse2d.x = ( event.clientx / window.innerwidth ) * 2 - 1;     mouse2d.y = - ( event.clienty / window.innerheight ) * 2 + 1;      var vector = new three.vector3( mouse2d.x, mouse2d.y, camera.near );     projector.unprojectvector( vector, camera );      var raycaster = new three.raycaster( camera.position, vector.sub( camera.position ).normalize() );     var intersects = raycaster.intersectobjects(objects);      // toggle rotation bool meshes clicked     if ( intersects.length > 0 ) {          var match = intersects[0];          console.log(match);         selectedtile = match.faceindex;         var f = face = match.face;         var faceidx = match.faceindex;         var faces = match.object.geometry.faces;         var vertices = match.object.geometry.vertices;           var fa = vertices[f.a];         var fb = vertices[f.b];         var fc = vertices[f.c];           var = fa.clone();         var b = fb.clone();         var c = fc.clone();          highlightpla.geometry.vertices[0].setx(math.ceil(a.x));         highlightpla.geometry.vertices[0].sety(math.ceil(a.y));         highlightpla.geometry.vertices[0].setz(a.z+1);         highlightpla.geometry.vertices[1].setx(math.ceil(b.x));         highlightpla.geometry.vertices[1].sety(math.ceil(b.y));         highlightpla.geometry.vertices[1].setz(b.z+1);         highlightpla.geometry.vertices[2].setx(math.ceil(c.x));         highlightpla.geometry.vertices[2].sety(math.ceil(c.y));         highlightpla.geometry.vertices[2].setz(c.z+1);     } } 

i fooled around time locate problem, found :)

your code totally working except 1 thing. problem heightmap array has 2493 points. means point geometry way out of range dimension of 127 x 127

if change planegeometry valid amount of widthsegments , heightsegments amount of points totally working.

so change code to:

var size = math.floor( math.sqrt( heightmap.length ) ) - 1; var pgeo = new three.planegeometry( 16384/2, 16384/2, size, size ); 

and okay...

here updated , cleaned fiddle