diff --git a/.storybook/stories/useTrailTexture.stories.tsx b/.storybook/stories/useTrailTexture.stories.tsx index 52b393ab4..2dbe38667 100644 --- a/.storybook/stories/useTrailTexture.stories.tsx +++ b/.storybook/stories/useTrailTexture.stories.tsx @@ -13,7 +13,7 @@ export default { function TrailMesh() { // a convenience hook that uses useLoader and TextureLoader - const { texture, onMove } = useTrailTexture({ + const [texture, onMove] = useTrailTexture({ size: number('Size', 256, { min: 64, step: 8 }), radius: number('Radius', 0.3, { range: true, min: 0.1, max: 1, step: 0.1 }), maxAge: number('Max age', 750, { range: true, min: 300, max: 1000, step: 100 }), diff --git a/README.md b/README.md index e1b938e7c..8f3db5b17 100644 --- a/README.md +++ b/README.md @@ -1982,7 +1982,7 @@ return ( Demo

-This hook returns a `THREE.Texture` with a pointer trail which can be used in shaders to control displacement among other things. +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 = { @@ -2008,7 +2008,7 @@ type TrailConfig = { ``` ```jsx -const { texture, onMove } = useTrailTexture(config) +const [texture, onMove] = useTrailTexture(config) return ( diff --git a/src/core/useTrailTexture.tsx b/src/core/useTrailTexture.tsx index 58d972eca..81cf483c6 100644 --- a/src/core/useTrailTexture.tsx +++ b/src/core/useTrailTexture.tsx @@ -1,5 +1,5 @@ import { useMemo, useCallback } from 'react' -import { useFrame } from '@react-three/fiber' +import { ThreeEvent, useFrame } from '@react-three/fiber' import { Texture } from 'three' /** @@ -196,7 +196,7 @@ class TrailTexture { } } -export function useTrailTexture(config: Partial = {}) { +export function useTrailTexture(config: Partial = {}): [Texture, (ThreeEvent) => void] { const { size, maxAge, radius, intensity, interpolate, smoothing, minForce, blend, ease } = config const trail = useMemo( () => new TrailTexture(config), @@ -204,5 +204,5 @@ export function useTrailTexture(config: Partial = {}) { ) useFrame((_, delta) => void trail.update(delta)) const onMove = useCallback((e) => trail.addTouch(e.uv), [trail]) - return { texture: trail.texture, onMove } + return [trail.texture, onMove] }