Outline
An outline effect.
Requires <EffectComposer autoClear={false}> - without it, outlines don't render at all.
import { Outline } from '@react-three/postprocessing'
import { BlendFunction, Resolution, 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
patternScale={1.0} // the pattern texture scale
edgeStrength={1.0} // 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
multisampling={0} // the number of samples used for multisample antialiasing, requires WebGL 2
resolutionScale={0.5} // render resolution scale
resolutionX={Resolution.AUTO_SIZE} // render width
resolutionY={Resolution.AUTO_SIZE} // render height
kernelSize={KernelSize.VERY_SMALL} // blur kernel size
blur={false} // whether the outline should be blurred
xRay={true} // indicates whether X-Ray outlines are enabled
/>
)