Realistic Rendering

antialias 抗锯齿

const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true
})

加入 shadow

根据环境，将方向光源放到合适的位置，然后开启阴影 可以加入 helper，来帮助调整阴影

// 开启阴影
directionalLight.castShadow = true
// 可以调整渲染阴影的相机远近
directionalLight.shadow.camera.far = 15
// 可以调整渲染阴影的精度
directionalLight.shadow.mapSize.set(1024, 1024)
// 添加阴影辅助器
const directionalLightHelper = new THREE.CameraHelper(directionalLight.shadow.camera)

scene.add(directionalLightHelper)
// 设置阴影的接收者
directionalLight.target.position.set(0, 4, 0)
// 将阴影接收者添加到场景中
scene.add(directionalLight.target)

texture ploy haven

在Three.js中，colorSpace属性的默认值是THREE.LinearSRGBColorSpace。这个属性用于指定纹理的颜色空间，影响渲染时的颜色表现。 将colorSpace设置为THREE.SRGBColorSpace的意义在于，sRGB颜色空间更符合人眼的感知，能够提供更准确的颜色表现，特别是在处理颜色纹理时。sRGB颜色空间会进行伽马校正，使得颜色在显示器上看起来更自然。 在你的代码中，wallColorTexture的colorSpace被设置为THREE.SRGBColorSpace，这意味着这个纹理将使用sRGB颜色空间进行渲染，从而提供更准确的颜色表现。

gltf 会自动将颜色空间转换为线性空间，所以不需要手动设置

what is normal bias / bias in shadow

在阴影渲染中，normal bias（法线偏移）和bias（偏移）是两个重要的参数，它们用于解决阴影贴图中的自遮挡问题（shadow acne）。

1. Normal Bias（法线偏移）：

   • 法线偏移是指在计算阴影时，对物体表面的法线进行微小的调整。由于阴影贴图是通过光线的投影得到的，而物体的表面法线会影响阴影的形状和位置，因此法线偏移可以减少阴影贴图与物体表面之间的穿插现象。
   • 在Three.js中，可以通过设置shadow.normalBias属性来实现法线偏移。shadow.normalBias是一个THREE.Vector2类型的值，表示法线偏移的强度和方向。
   • 法线偏移量通常是一个很小的值，例如0.001，以确保阴影不会与物体表面发生穿插。

2. Bias（偏移）：

   • Bias是指在阴影渲染时，对阴影贴图的深度值进行微小的调整。由于阴影贴图是通过光线的投影得到的，而物体的表面法线会影响阴影的形状和位置，因此偏移可以减少阴影贴图与物体表面之间的穿插现象。
   • 在Three.js中，可以通过设置shadow.bias属性来实现偏移。shadow.bias是一个浮点数，表示偏移的强度。
   • 偏移量通常是一个很小的值，例如0.001，以确保阴影不会与物体表面发生穿插。