I'm currently working on a project that requires creating random low-poly style terrain. To achieve this, I have come up with the following approach:
- Start by creating a
BoxGeometryobject to serve as the floor, adjusting thewidthSegmentsandheightSegmentsbeyond the default value of 100 - Access each vertex using the
.verticesarray - Iterate through each vertex using a
forEachloop ongeomFloor.vertices - In each iteration, generate a random number within specified limits (minimum and maximum y position for the vertex)
- Assign the generated random number to the current vertex's
.yproperty - Update the vertices accordingly
Here's the code snippet for this process:
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);
}
The Issue at Hand
While the floor appears as intended from certain angles and sections, there are strange black shapes in larger areas which disappear upon changing the camera angle using OrbitControls.
A visual representation of the issue can be seen here: https://i.sstatic.net/7eHdM.png
This problem may stem from the simplistic method used to manipulate the geometry's vertices, resulting in some overlapping vertices causing rendering anomalies.
Resolution Required
- Main: Resolve the appearance of black shapes on the floor
- If possible, provide insight into why this occurs only in specific spots and viewing angles
- If my vertex manipulation is flawed or if there is a more effective way to generate random low-poly terrain, I would appreciate guidance on the correct coding approach