通过修改几何顶点创建的低多边形地形正在产生黑色故障答案

【问题标题】：Low poly terrain created by modifying geometry vertices is producing black glitches通过修改几何顶点创建的低多边形地形正在产生黑色故障
【发布时间】：2018-03-26 23:41:48
【问题描述】：

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

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

这是我的这个过程的代码：

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 更改相机角度时会消失。

我认为这是由于用于操作几何顶点的简单方法，并且某些顶点可能重叠，导致它们呈现这样的效果。

我需要什么

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

【问题讨论】：

为什么不使用PlaneGeometry 作为基础几何体？
@Mugen87 最初我没有意识到PlaneGeometry 有宽度和高度段，所以我选择了BoxGeometry，因为我知道我可以操纵顶点，所以就保留它，PlaneGeometry 会不会更好的？将是一个简单的切换。
@Mugen87 哇更改为PlaneGeometry 是解决办法...谢谢！如果你想写一个快速的答案，我会接受它，如果不是，我稍后会回答自己！
@JJGerrish 你的问题的答案是什么？
@WestLangley 从@Mugen87 那里得到了答案，只是我使用BoxGeometry 而不是PlaneGeometry（它在下面被接受）

标签： javascript three.js

【解决方案1】：

切换到PlaneGeometry 应该更容易生成地形。

【讨论】：