Skip to content

UseThreeJs

官方文档 ThreeJs postprocessing

安装

bash
pnpm add @oiij/three-js

示例

Base

loading

Types

ts
declare const RendererOptions: WebGLRendererParameters
interface EffectComposerOptions {
  depthBuffer?: boolean
  stencilBuffer?: boolean
  alpha?: boolean
  multisampling?: number
  frameBufferType?: number
  passes?: Pass[] | ((renderer: WebGLRenderer, scene: Scene, camera: Camera) => Pass)[]
  overrideMaterial?: Material
}
declare function usePostprocessing(renderer: WebGLRenderer, scene: Scene, camera: Camera, options?: EffectComposerOptions): {
  composer: EffectComposer
  renderPass: RenderPass
  dispose: () => void
  resize: ({
    width,
    height
  }: {
    width: number
    height: number
  }) => void
}
declare function useCopyPass(): {
  copyPass: ShaderPass
  dispose: () => void
}
interface SMAAEffectOptions {
  smaa?: {
    preset?: SMAAPreset
    edgeDetectionMode?: EdgeDetectionMode
    predicationMode?: PredicationMode
  }
  texture?: {
    blendFunction?: BlendFunction
    texture?: Texture
    aspectCorrection?: boolean
  }
}
declare function useSmaaEffectPass(camera: Camera, options?: SMAAEffectOptions): {
  smaaEffect: SMAAEffect
  edgesTextureEffect: TextureEffect
  weightsTextureEffect: TextureEffect
  smaaEffectPass: EffectPass
  dispose: () => void
}
interface OutlineEffectOptions {
  blendFunction?: BlendFunction
  patternTexture?: Texture
  patternScale?: number
  edgeStrength?: number
  pulseSpeed?: number
  visibleEdgeColor?: number
  hiddenEdgeColor?: number
  multisampling?: number
  resolutionScale?: number
  resolutionX?: number
  resolutionY?: number
  width?: number
  height?: number
  kernelSize?: KernelSize
  blur?: boolean
  xRay?: boolean
}
declare function useOutlinePass(scene: Scene, camera: Camera, options?: OutlineEffectOptions): {
  outlineEffect: OutlineEffect
  outlinePass: EffectPass
  selection: postprocessing20.Selection
  dispose: () => void
}
declare function useSelectiveBloomPass(scene: Scene, camera: Camera, options?: BloomEffectOptions): {
  selectiveBloomEffect: SelectiveBloomEffect
  selection: postprocessing20.Selection
  selectiveBloomEffectPass: EffectPass
  dispose: () => void
}