如何在Three.js中实现带有阴影的纯白色地板？

你当前的核心矛盾是纯白地板的自发光掩盖了阴影，同时方向光的阴影参数没有针对性优化，导致阴影对比度不足。以下是无需烘焙阴影、适配动态场景的解决方案：

调整方向光阴影参数 #

默认阴影贴图分辨率低、相机范围不合理，会导致阴影模糊或淡弱。给方向光添加以下参数优化：

• 提升阴影贴图分辨率，让阴影边缘更清晰
• 扩大阴影相机范围，确保地板完全在阴影拍摄范围内
• 调整阴影强度，增强明暗对比

优化地板材质 #

保留纯白的基础色，把自发光（emissive）改为接近纯白的极低亮度色调——既能保证地板视觉上是纯白色，又不会因为自发光抵消阴影的明暗差。如果HDRI环境光太强，还可以关闭环境光对地板的影响。

修改后的完整代码 #

const ModelSceneEnvironment = () => {
  return (
    <>
      {/* Light  */}
      <directionalLight
        position={[0, 3, 0]}
        intensity={1}
        color='white'
        castShadow
        // 优化阴影清晰度与范围
        shadow-mapSize-width={2048}
        shadow-mapSize-height={2048}
        shadow-camera-left={-40}
        shadow-camera-right={40}
        shadow-camera-top={40}
        shadow-camera-bottom={-40}
        shadow-camera-near={0.1}
        shadow-camera-far={50}
        shadow-intensity={0.8} // 增强阴影对比度
      />
      <Environment
        files='/hdri_lightbox_default.hdr'
        background={false}
      />

      {/* Floor */}
      <fog
        attach='fog'
        args={['white', 0, 40]}
      />
      <Circle
        receiveShadow
        rotation={[-Math.PI / 2, 0, 0]}
        args={[40]}
      >
        <meshPhongMaterial
          color='white'
          emissive='#fafafa' // 极低亮度自发光，保留纯白视觉
          envMapIntensity={0} // 关闭环境光对地板的影响（可选）
        />
      </Circle>
    </>
  )
}

补充说明 #

• shadow-mapSize可根据性能调整：1024是基础清晰版，4096是超高清版（对性能要求更高）
• shadow-intensity可按需微调：0.7-0.9之间的数值既能保证阴影清晰，又不会显得生硬
• 动态模型场景下，以上调整完全支持实时阴影更新，无需烘焙操作

内容的提问来源于stack exchange，提问作者kprovalov