Wal*_*ari 5 javascript 3d shadow webgl three.js
我做了一个Threejs项目,在那里我用perlin噪音动态地创建了一个地面.这是代码:
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)
Run Code Online (Sandbox Code Playgroud)
}
我很满意生成的几何体,但问题是阴影看起来真的不准确.
这是我的灯光代码:
const light = new THREE.DirectionalLight(
'white',
1,
)
light.shadow.mapSize.width = 512 * 12 // default is 512. doesnt do anything
light.shadow.mapSize.height = 512 * 12 // default is 512
light.castShadow = true
light.position.set(100, 100, 100)
scene.add(light)
light.shadowCameraVisible = true
Run Code Online (Sandbox Code Playgroud)
我的问题是,如何让地面阴影看起来更加准确和明确,并展示场地几何?
其余的代码可以在这里找到:https://github.com/Waltari10/workwork
考虑到您没有设置任何灯光,这个阴影看起来并没有那么糟糕:)。
我想这个渲染适用于一些默认照明或您在考虑阴影之前添加的照明。
尝试添加一些定向光,模拟太阳方向和颜色,看看是否有帮助,或者告诉我们有关您的照明设置的更多信息。
如果您已经有任何渲染阴影贴图的灯光,然后检查其分辨率,您可能需要将其放大。
| 归档时间: |
|
| 查看次数: |
98 次 |
| 最近记录: |