In my Threejs project, I have implemented a method to dynamically create a ground using perlin noise. The code snippet is shown below:
createGround() {
const resolutionX = 100
const resolutionY = 100
const actualResolutionX = resolutionX + 1
const actualResolutionY = resolutionY + 1
const geometryPlane = new THREE.PlaneGeometry(this.sizeX, this.sizeY, resolutionX, resolutionY)
const noise = perlin.generatePerlinNoise(actualResolutionX, actualResolutionY)
let i = 0
for (let x = 0; x < actualResolutionX; x++) {
for (let y = 0; y < actualResolutionY; y++) {
let h = noise[i]
}
geometryPlane.vertices[i].z = h
i++
}
}
geometryPlane.verticesNeedUpdate = true
geometryPlane.computeFaceNormals()
const materialPlane = new THREE.MeshStandardMaterial({
color: 0xffff00,
side: THREE.FrontSide,
roughness: 1,
metallness: 0,
})
const ground = new THREE.Mesh(geometryPlane, materialPlane)
geometryPlane.computeVertexNormals()
ground.name = GROUND_NAME
ground.receiveShadow = true
scene.add(ground)
I am satisfied with the generated geometry, however, I am facing an issue with the accuracy of shadows on the ground.
https://i.sstatic.net/lnFlX.png
Below is the code snippet for the light setup:
const light = new THREE.DirectionalLight(
'white',
1,
)
light.shadow.mapSize.width = 512 * 12
light.shadow.mapSize.height = 512 * 12
light.castShadow = true
light.position.set(100, 100, 100)
scene.add(light)
light.shadowCameraVisible = true
My query is regarding how to improve the accuracy and definition of shadows on the ground to showcase its geometry effectively.
For the complete code, visit: https://github.com/Waltari10/workwork