在 ThreeJS 中为每个段自定义 PlaneGeometry 边

Question

目前 PlaneGeometry 有一个选项可以更改线段的宽度和高度，但这对边没有影响。在线框模式下查看几何时，每个段当前都有索引位置以创建 'N' 形状：

目前的索引是：

0 = 西南
1 = 西北
2 = 东南
3 = 东北

这为每个带线框的线段提供了一个 'N' 形状，但是我想为每个线段创建一个带边的 'X' 形状而不是这个 'N' 形状。目前我正在使用平面来创建不同的高度并且具有 'X' 形状会使结果看起来不那么尖锐（下面的屏幕截图）。

我想所有需要的顶点都已经存在了，但是如何在每个线段的点 0 和点 3 之间获得额外的边呢？

我试过在网上寻找答案，但找不到关于这个问题的明确答案，而且很多文章都比 R125 版本更早，R125 版本对 Geometries 进行了重大更改。目前我使用的是 R135 版本。

我猜我需要创建一个自定义缓冲区几何图形，但我不确定如何正确执行它并且不会损失太多性能。

所有红线和蓝线都是线框模式下当前存在的边。
所有绿线都是需要的，但目前不存在，在不损失性能的情况下执行此操作的最佳方法是什么？

提前致谢！

Answer 1

我尝试了很多次，但最终并没有变得太难。我通过创建自定义 BufferGeometry 创建了此自定义 PlaneGeometry。虽然使用起来可能重 3 倍；

目前每个图块段拥有 36 (12 * 3) 个位置，而默认的 PlaneGeometry 拥有 12 (4 * 3) 个位置。虽然我不确定多 3 倍的位置是否自动意味着多 3 倍的性能使用，但它肯定比默认的 PlaneGeometry 使用更多。

结果如下（高度的变化更平滑更漂亮）：

创建几何体的代码：

    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array([

        // (North Face)
        .5, -.5, 0, // 0:  Center
        1, -1, 0,   // 1:  NE
        1, 0, 0,    // 2:  NW

        // (East Face)
        .5, -.5, 0, // 3:  Center
        0, -1, 0,   // 4:  SE
        1, -1, 0,   // 5:  NE

        // (South Face)
        .5, -.5, 0, // 6:  Center
        0, 0, 0,    // 7:  SW
        0, -1, 0,   // 8:  SE

        // (West Face)
        .5, -.5, 0, // 9:  Center
        1, 0, 0,    // 10: NW
        0, 0, 0,    // 11: SW

    ]);

    geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
 
    const material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true  } );
    const mesh = new THREE.Mesh( geometry, material );

    mesh.rotation.x = - Math.PI / 2;
    scene.add( mesh );

在 ThreeJS 中为每个段自定义 PlaneGeometry 边

Customize PlaneGeometry edges for each segment in ThreeJS

javascript

three.js