glodrei
Version:
useful add-ons for react-three-fiber
45 lines (39 loc) • 1.31 kB
text/mdx
title: TrailTexture / useTrailTexture
sourcecode: src/core/TrailTexture.tsx
[](https://drei.pmnd.rs/?path=/story/misc-trailtexture)
<Grid cols={4}>
<li>
<Codesandbox id="fj1qlg" />
</li>
</Grid>
This hook returns a `THREE.Texture` with a pointer trail which can be used in shaders to control displacement among other things, and a movement callback `event => void` which reads from `event.uv`.
```tsx
type TrailConfig = {
/** texture size (default: 256x256) */
size?: number
/** Max age (ms) of trail points (default: 750) */
maxAge?: number
/** Trail radius (default: 0.3) */
radius?: number
/** Canvas trail opacity (default: 0.2) */
intensity?: number
/** Add points in between slow pointer events (default: 0) */
interpolate?: number
/** Moving average of pointer force (default: 0) */
smoothing?: number
/** Minimum pointer force (default: 0.3) */
minForce?: number
/** Blend mode (default: 'screen') */
blend?: CanvasRenderingContext2D['globalCompositeOperation']
/** Easing (default: easeCircOut) */
ease?: (t: number) => number
}
```
```jsx
const [texture, onMove] = useTrailTexture(config)
return (
<mesh onPointerMove={onMove}>
<meshStandardMaterial displacementMap={texture} />
```