Outline
An outline effect.
import { Outline } from '@react-three/postprocessing'
import { BlendFunction, Resizer, KernelSize } from 'postprocessing'
return (
<Outline
selection={[meshRef1, meshRef2]} // selection of objects that will be outlined
selectionLayer={10} // selection layer
blendFunction={BlendFunction.SCREEN} // set this to BlendFunction.ALPHA for dark outlines
patternTexture={null} // a pattern texture
edgeStrength={2.5} // the edge strength
pulseSpeed={0.0} // a pulse speed. A value of zero disables the pulse effect
visibleEdgeColor={0xffffff} // the color of visible edges
hiddenEdgeColor={0x22090a} // the color of hidden edges
width={Resizer.AUTO_SIZE} // render width
height={Resizer.AUTO_SIZE} // render height
kernelSize={KernelSize.LARGE} // blur kernel size
blur={false} // whether the outline should be blurred
xRay={true} // indicates whether X-Ray outlines are enabled
/>
)
Props
Name | Type | Default | Description |
---|---|---|---|
selection | Objects | Selection of objects that will be outlined | |
blendFunction | BlendFunction | BlendFunction.SCREEN | The blend function of this effect. |
width | Number | Resizer.AUTO_SIZE | The render width. |
height | Number | Resizer.AUTO_SIZE | The render height. |
selectionLayer | Number | The selection layer | |
patternTexture | Number | null | A pattern texture |
edgeStrength | Number | 1 | The edge strength |
pulseSpeed | Number | 0 | The pulse speed. A value of zero disables the pulse effect. |
visibleEdgeColor | Number | 0xffffff | The color of visible edges. |
hiddenEdgeColor | Number | 0x22090a | The color of hidden edges. |
kernelSize | KernelSize | KernelSize.VERY_SMALL | The blur kernel size. |
blur | Boolean | false | Whether the outline should be blurred. |
xray | Boolean | true | Whether occluded parts of selected objects should be visible. |