Question

我已经创建了一个基于高度图的平面但是相交它（光线投射）不起作用。此外，我正试图在三角形上方放置一个物体，但是这也失败了

编辑：当你引用高度（pgeo.vertices [i] .z = heightmap [i] * 5;）时，它似乎工作 SOMETIMES 。高亮显示但不总是，它也取决于相机视图。如果您放大/缩小三角形消失/再次出现等。

我在voxelpainter示例中使用了jsfiddle：

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

这是执行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);
    }
}

Answer 1

我愚弄了一段时间找到你的问题，但我发现了它：）

除了一件事，你的代码完全正常工作。问题是heightmap数组只有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

三个光线投射并将物体放置在平面上方不起作用

1 个答案: