通过修改几何顶点创建的低多边形地形会产生黑色毛刺

Question

我正在尝试为我的项目创建随机低多边形样式的地形。我决定最好这样做的方式如下：

1. 创建BoxGeometry对象作为我的楼层，并将widthSegments和heightSegments设置为超过默认值（100）
2. 使用.vertices数组访问每个顶点
3. 使用forEach
上的geomFloor.vertices循环遍历每个顶点
4. 每次迭代，在点之间生成一个随机数（顶点的最大和最小y位置）
5. 将当前顶点.y设置为随机数
6. 更新顶点

以下是此流程的代码：

function createFloorSecondScene(){ 
    var geomFloor = new THREE.BoxGeometry(20000, 1, 20000, 100, 1, 100); 

    geomFloor.mergeVertices();

    var randomFloorVertexPos;

    geomFloor.vertices.forEach(function(floorVertex){
        randomFloorVertexPos = Math.floor(Math.random() * ((0) - 
        (-90)) + (-90));

        floorVertex.y = randomFloorVertexPos;
        geomFloor.verticesNeedUpdate = true;
    });

    var matFloor = new THREE.MeshPhongMaterial({color: 
    Colors.grassGreen});
    matFloor.flatShading = true;

    var Floor = new THREE.Mesh(geomFloor, matFloor);

    Floor.position.y = -72.5;
    Floor.receiveShadow = true;
    Floor.castShadow = true;
    Floor.name = "floor";
    scene.add(Floor);
}

问题

从下面的屏幕截图中可以看出，这就是我希望地板看起来的样子，在某些部分和某些角度，它确实可以正常工作。



但是，在地板的大部分区域，会创建这些奇怪的黑色形状，但在使用OrbitControls更改摄像机角度时会消失。



我认为这是由于用于操纵几何体顶点的简单方法，并且某些顶点可能重叠，导致它们像这样渲染。

我需要什么

• Main：修复黑色形状
• 如果你能（不必要），解释为什么这只发生在某些地方和某些角度
• 如果我以错误的方式操纵顶点和/或有更好的方法来创建我需要的随机低多边形地形，我将不胜感激地解释正确的编码方式。

Answer 1

切换到PlaneGeometry可以让您更轻松地生成地形。