跳到主要内容

光晕效果

类型​

组件

默认用法​

import * as THREE from 'three'
import { Scene, Bloom } from 'react-three-lite'

export default function BloomComponent() {
  const handleCreated = (scene: THREE.Scene, { camera }: any) => {
    camera.position.set(0, 1.5, 3)

    const geometry = new THREE.BoxGeometry()
    const material = new THREE.MeshLambertMaterial({ color: 0xff5500 })
    const cube0 = new THREE.Mesh(geometry, material)
    cube0.position.set(0.5, 0, 0)
    cube0.layers.set(0)
    scene.add(cube0)

    const cube1 = new THREE.Mesh(geometry, material)
    cube1.position.set(-0.5, 0, 0)
    cube1.layers.set(1)
    scene.add(cube1)
  }

  return (
    <div style={{ marginTop: '10px', width: '100%', height: '300px' }}>
      <Scene onCreated={handleCreated}>
        <Bloom layer={1} />
      </Scene>
    </div>
  )
}

属性​

名称类型默认值描述
layernumber0可选 泛光所在的层。
strengthnumber1可选 泛光强度。
radiusnumber0.5可选 泛光半径。
thresholdnumber0.5可选 泛光阈值。