高度雾

类型

组件

默认用法

屏幕空间高度雾：密度随世界高度指数衰减的雾层，支持雾面流动噪声与朝向光源的方向散射。下面的每个示例都可以用 WebGPU（默认）或 WebGL 渲染器查看 —— 切换标签页进行对比。

下方示例放置了一个地面和一排向远处延伸的立柱，让雾气覆盖在几何体之上，从而清晰展示高度渐变效果。

WebGPU

import { useRef, useEffect } from 'react'
import * as THREE from 'three'
import { Scene, HeightFog } from 'react-three-lite'
import type { SceneComponents } from 'react-three-lite'

// 向远处延伸的立柱：[x, z, width, height]
const pillars: [number, number, number, number][] = [
  [-5, 5, 2.8, 13],
  [6, 2, 3.2, 17],
  [-2, -4, 2.6, 11],
  [8, -9, 3.4, 21],
  [-9, -15, 3.0, 15],
  [3, -22, 2.8, 19],
  [-6, -30, 3.4, 23]
]

export default function App() {
  const meshesRef = useRef<THREE.Mesh[]>([])

  const handleCreated = (scene: THREE.Scene, components: SceneComponents) => {
    const { camera } = components
    camera.position.set(0, 5, 14)
    camera.lookAt(0, 7, -12)

    const ground = new THREE.Mesh(
      new THREE.PlaneGeometry(400, 400),
      new THREE.MeshStandardMaterial({ color: 0x2f3440, roughness: 1 })
    )
    ground.rotation.x = -Math.PI / 2

    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshStandardMaterial({ color: 0x5c6579, roughness: 0.85 })
    const columns = pillars.map(([x, z, width, height]) => {
      const column = new THREE.Mesh(geometry, material)
      column.position.set(x, height / 2, z)
      column.scale.set(width, height, width)
      return column
    })

    meshesRef.current = [ground, ...columns]
    scene.add(...meshesRef.current)
  }

  // 卸载时清理
  useEffect(() => {
    return () => {
      meshesRef.current.forEach((mesh) => {
        mesh.parent?.remove(mesh)
        mesh.geometry.dispose()
        const meshMaterial = mesh.material as THREE.Material
        meshMaterial.dispose()
      })
      meshesRef.current = []
    }
  }, [])

  return (
    <Scene
      bgColor="rgb(40, 42, 54)"
      gridHelper={{ size: 400, divisions: 40, colorGrid: 0x3a4050, colorCenterLine: 0x4d5570, y: 0.02 }}
      style={{ marginTop: '10px', marginBottom: '16px', width: '100%', height: '300px' }}
      onCreated={handleCreated}
    >
      <HeightFog />
    </Scene>
  )
}

WebGL

import { useRef, useEffect } from 'react'
import * as THREE from 'three'
import { Scene, HeightFog } from 'react-three-lite'
import type { SceneComponents } from 'react-three-lite'

// 向远处延伸的立柱：[x, z, width, height]
const pillars: [number, number, number, number][] = [
  [-5, 5, 2.8, 13],
  [6, 2, 3.2, 17],
  [-2, -4, 2.6, 11],
  [8, -9, 3.4, 21],
  [-9, -15, 3.0, 15],
  [3, -22, 2.8, 19],
  [-6, -30, 3.4, 23]
]

export default function App() {
  const meshesRef = useRef<THREE.Mesh[]>([])

  const handleCreated = (scene: THREE.Scene, components: SceneComponents) => {
    const { camera } = components
    camera.position.set(0, 5, 14)
    camera.lookAt(0, 7, -12)

    const ground = new THREE.Mesh(
      new THREE.PlaneGeometry(400, 400),
      new THREE.MeshStandardMaterial({ color: 0x2f3440, roughness: 1 })
    )
    ground.rotation.x = -Math.PI / 2

    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshStandardMaterial({ color: 0x5c6579, roughness: 0.85 })
    const columns = pillars.map(([x, z, width, height]) => {
      const column = new THREE.Mesh(geometry, material)
      column.position.set(x, height / 2, z)
      column.scale.set(width, height, width)
      return column
    })

    meshesRef.current = [ground, ...columns]
    scene.add(...meshesRef.current)
  }

  // 卸载时清理
  useEffect(() => {
    return () => {
      meshesRef.current.forEach((mesh) => {
        mesh.parent?.remove(mesh)
        mesh.geometry.dispose()
        const meshMaterial = mesh.material as THREE.Material
        meshMaterial.dispose()
      })
      meshesRef.current = []
    }
  }, [])

  return (
    <Scene
      rendererType="webgl"
      bgColor="rgb(40, 42, 54)"
      gridHelper={{ size: 400, divisions: 40, colorGrid: 0x3a4050, colorCenterLine: 0x4d5570, y: 0.02 }}
      style={{ marginTop: '10px', marginBottom: '16px', width: '100%', height: '300px' }}
      onCreated={handleCreated}
    >
      <HeightFog />
    </Scene>
  )
}

属性

雾体

属性	类型	默认值	说明
fogColor	string | number | Color	'#c9d4cc'	雾颜色
fogDensity	number	0.02	雾面处的雾密度
fogHeight	number	10	雾面的世界高度
fogHeightFalloff	number	0.25	高度衰减系数；雾面之上每升高 1/falloff 个单位密度减半
fogMaxOpacity	number	1	雾的最大不透明度（限制雾对场景的遮盖程度）
fogStartDistance	number	0	雾从距离相机多远开始累积

流动噪声

属性	类型	默认值	说明
noiseStrength	number	0	噪声对雾面的垂直扰动幅度（0 表示关闭噪声）
noiseScale	number	0.012	噪声图案的世界空间缩放
noiseSpeedX	number	0	噪声沿 X 轴的流动速度
noiseSpeedZ	number	0	噪声沿 Z 轴的流动速度

方向散射

属性	类型	默认值	说明
inscatteringColor	string | number | Color	'#ffe2b0'	散射光颜色
inscatteringIntensity	number	1	散射强度
inscatteringExponent	number	5	方向衰减指数，值越大散射越集中在光源方向
inscatteringStartDistance	number	0	散射从距离相机多远开始
lightAzimuth	number	30	光源方向方位角（度）
lightElevation	number	25	光源方向仰角（度）