地面阴影看起来不准确且浑浊

时间:2018-10-12 10:25:03

标签: javascript three.js 3d webgl shadow

我做了一个Threejs项目,在其中我根据Perlin噪声动态创建了地面。这是代码:

protected final void setAuthenticationFilter(F authFilter) {
    this.authFilter = authFilter;
}

}

我对生成的几何图形感到满意,但问题是阴影看起来确实不准确。

enter image description here

这是我的灯代码:

createGround() {

const resolutionX = 100
const resolutionY = 100
const actualResolutionX = resolutionX + 1 // plane adds one vertex
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)

我的问题是,如何使地面阴影看起来更加准确和清晰,并展现地面几何图形?

其余代码可在以下位置找到:https://github.com/Waltari10/workwork

1 个答案:

答案 0 :(得分:0)

考虑到您没有设置任何灯光,这个阴影看起来并不那么糟糕:

我想这个渲染器可以使用某些默认照明或您在考虑阴影之前添加的照明。

尝试添加一些定向光,模拟太阳的方向和颜色,看看是否有帮助,或者向我们详细介绍您的照明设置。

如果已经有任何灯光可以渲染阴影贴图,请检查其分辨率,您可能需要将其放大。