javascript - 通过修改几何顶点创建的低多边形地形会产生黑色故障

Question

我正在尝试为我的项目创建随机的低多边形地形。我决定最好采用以下方式:

1. 创建一个 BoxGeometry 对象作为我的地板，并将 widthSegments 和 heightSegments 设置为大于默认值 (100)
2. 使用.vertices数组访问每个顶点
3. 在 geomFloor.vertices 上使用 forEach 循环遍历每个顶点
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);
}

问题

正如您从下面的屏幕截图中看到的，这就是我希望地板的外观，并且在某些部分和某些 Angular ，它确实按预期工作。

但是，在地板的大面积区域中，会创建这些奇怪的黑色形状，但当您使用 OrbitControls 更改摄像机 Angular 时它们会消失。

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

我需要什么

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

Answer 1

切换到 PlaneGeometry 应该可以更轻松地生成地形。