javascript - Three.js 光线转换和将对象放置在平面上方不起作用

Question

我已经根据高度图创建了一个平面，但与它相交(光线转换)不起作用。另外，我试图将一个对象放置在我悬停的三 Angular 形上方，但这也失败了

编辑:当您引用高度(pgeo.vertices[i].z = heightmap[i] * 5;)时，它似乎有时有效。高光会出现，但并不总是出现，这也取决于相机 View 。如果放大/缩小，三 Angular 形就会消失/再次出现等等。

我基于 voxelpainter 示例构建了 jsfiddle:

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

但是我不确定是否有更好的方法来计算我悬停的三 Angular 形？也许基于高度图的投影？有什么想法吗？

这是执行光线转换的代码:

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);
    }
}

Answer 1

我花了一些时间来定位你的问题，但我找到了它:)

除了一件事之外，您的代码完全可以工作。问题是高度图数组只有 2493 个点。这意味着您的点几何图形超出了尺寸为 127 x 127

的范围

如果您将 PlaneGeometry 更改为有效的 widthSegments 和 heightSegments 数量，则它完全有效。

因此将代码更改为:

var size = Math.floor( Math.sqrt( heightmap.length ) ) - 1;
var pgeo = new THREE.PlaneGeometry( 16384/2, 16384/2, size, size );

一切都好...

Here is an updated and cleaned up fiddle