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

Question

I've created a plane based on a heightmap but intersecting it (raycasting) does not work. Also i'm trying to place a object above the triangle i hover but this also fails

EDIT: When you quote out the height (pgeo.vertices[i].z = heightmap[i] * 5;), it seems to work SOMETIMES. The highlight shows up but not always and it depends on the camera view also. If you zoom in/out the triangle disappears/appears again etc..

I've based the jsfiddle on the voxelpainter example:

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

However i'm not sure if there is a better way to calculate which triangle i hover? Maybe with projection based on the heightmap? Any ideas?

this is the code that executes the 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 for meshes that we 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 a = 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);
    }
}

That jsfiddle is using three.js r54 which is pretty old. I've updated it with the latest stable (r68). jsfiddle.net/waf6u7xp/3 — mrdoob
@mrdoob thanks didn't notice i accidentally included the old one. Anyways this really seems like a bug! Once the height is applied it doesn't detect intersections at all.. — Captain Obvious

Wilt Wilt · Accepted Answer · 2014-09-16T10:12:29

I fooled around some time to locate your problem, but I found it :)

Your code is totally working except for one thing. The problem is that the heightmap array has only 2493 points. This means your point geometry is way out of range with a dimension of 127 x 127

If you change your PlaneGeometry to a valid amount of widthSegments and heightSegments for the amount of points it is 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 all is okay...

Here is an updated and cleaned up fiddle

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

1 Answers