@react-three/drei 9.42.1 → 9.43.0

package/README.md

@@ -122,7 +122,8 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#usetexture">useTexture</a></li>
           <li><a href="#usektx2">useKTX2</a></li>
           <li><a href="#usecubetexture">useCubeTexture</a></li>
-          <li><a href="#usevideotexture">useVideoTexture</a></li>          
+          <li><a href="#usevideotexture">useVideoTexture</a></li>
+          <li><a href="#usetrailtexture">useTrailTexture</a></li>          
         </ul>
         <li><a href="#performance">Performance</a></li>
         <ul>
@@ -1975,6 +1976,35 @@ return (
     <meshBasicMaterial map={texture} toneMapped={false} />
 ```
 
+#### useTrailTexture
+
+<p>
+  <a href="https://codesandbox.io/s/fj1qlg"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/fj1qlg/screenshot.png" alt="Demo"/></a>
+</p>
+
+This hook returns a `THREE.Texture` with a pointer trail which can be used in shaders to control displacement among other things.
+
+```tsx
+type TrailConfig = {
+  size?: number // texture size (default: 64x64)
+  maxAge?: number // max age (ms) of trail points (default: 750)
+  radius?: number // trail radius (default: 0.3)
+  intensity?: number // canvas trail opacity (default: 0.2)
+  interpolate?: number // add points in between slow pointer events (default: 0)
+  smoothing?: number // moving average of pointer force (default: 0)
+  minForce?: number // minimum pointer force (default: 0.3)
+  blend?: CanvasRenderingContext2D['globalCompositeOperation'] // (default: 'screen')
+  ease?: (t: number) => number // default: easeCircOut
+}
+```
+
+```jsx
+const { texture, onMove } = useTrailTexture(config: TrailConfig)
+return (
+  <mesh onPointerMove={onMove}>
+    <shaderMaterial displacementMap={texture} />
+```
+
 # Performance
 
 #### Instances
@@ -2564,6 +2594,7 @@ Calculates a boundary box and centers the camera accordingly. If you are using c
   <mesh />
 </Bounds>
 ```
+
 The Bounds component also acts as a context provider, use the `useBounds` hook to refresh the bounds, fit the camera, clip near/far planes, go to camera orientations or focus objects. `refresh(object?: THREE.Object3D | THREE.Box3)` will recalculate bounds, since this can be expensive only call it when you know the view has changed. `clip` sets the cameras near/far planes. `to` sets a position and target for the camera. `fit` zooms and centers the view.
 
 ```jsx

package/core/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./CatmullRomLine.cjs.js"),o=require("./Line.cjs.js"),i=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),a=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),c=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),x=require("./Trail.cjs.js"),l=require("./Sampler.cjs.js"),d=require("./ComputedAttribute.cjs.js"),q=require("./Clone.cjs.js"),m=require("./MarchingCubes.cjs.js"),h=require("./Decal.cjs.js"),C=require("./Svg.cjs.js"),M=require("./OrthographicCamera.cjs.js"),S=require("./PerspectiveCamera.cjs.js"),P=require("./CubeCamera.cjs.js"),b=require("./DeviceOrientationControls.cjs.js"),B=require("./FlyControls.cjs.js"),g=require("./MapControls.cjs.js"),f=require("./OrbitControls.cjs.js"),T=require("./TrackballControls.cjs.js"),v=require("./ArcballControls.cjs.js"),L=require("./TransformControls.cjs.js"),A=require("./PointerLockControls.cjs.js"),k=require("./FirstPersonControls.cjs.js"),D=require("./GizmoHelper.cjs.js"),E=require("./GizmoViewcube.cjs.js"),R=require("./GizmoViewport.cjs.js"),w=require("./useCubeTexture.cjs.js"),G=require("./useFBX.cjs.js"),z=require("./useGLTF.cjs.js"),F=require("./useKTX2.cjs.js"),O=require("./useProgress.cjs.js"),I=require("./useTexture.cjs.js"),V=require("./useVideoTexture.cjs.js"),y=require("./Stats.cjs.js"),H=require("./useDepthBuffer.cjs.js"),Q=require("./useAspect.cjs.js"),X=require("./useCamera.cjs.js"),K=require("./useDetectGPU.cjs.js"),W=require("./useHelper.cjs.js"),N=require("./useBVH.cjs.js"),U=require("./useContextBridge.cjs.js"),_=require("./useAnimations.cjs.js"),J=require("./useFBO.cjs.js"),Y=require("./useIntersect.cjs.js"),Z=require("./useBoxProjectedEnv.cjs.js"),$=require("./BBAnchor.cjs.js"),ee=require("./CurveModifier.cjs.js"),re=require("./MeshDistortMaterial.cjs.js"),se=require("./MeshWobbleMaterial.cjs.js"),te=require("./MeshReflectorMaterial.cjs.js"),oe=require("./MeshRefractionMaterial.cjs.js"),ie=require("./PointMaterial.cjs.js"),ue=require("./shaderMaterial.cjs.js"),ae=require("./softShadows.cjs.js"),ne=require("./shapes.cjs.js"),ce=require("./RoundedBox.cjs.js"),je=require("./ScreenQuad.cjs.js"),pe=require("./Center.cjs.js"),xe=require("./Bounds.cjs.js"),le=require("./CameraShake.cjs.js"),de=require("./Float.cjs.js"),qe=require("./Stage.cjs.js"),me=require("./Backdrop.cjs.js"),he=require("./Shadow.cjs.js"),Ce=require("./ContactShadows.cjs.js"),Me=require("./AccumulativeShadows.cjs.js"),Se=require("./Reflector.cjs.js"),Pe=require("./SpotLight.cjs.js"),be=require("./Environment.cjs.js"),Be=require("./Lightformer.cjs.js"),ge=require("./Sky.cjs.js"),fe=require("./Stars.cjs.js"),Te=require("./Cloud.cjs.js"),ve=require("./Sparkles.cjs.js"),Le=require("./useMatcapTexture.cjs.js"),Ae=require("./useNormalTexture.cjs.js"),ke=require("./Points.cjs.js"),De=require("./Instances.cjs.js"),Ee=require("./Segments.cjs.js"),Re=require("./Detailed.cjs.js"),we=require("./Preload.cjs.js"),Ge=require("./BakeShadows.cjs.js"),ze=require("./meshBounds.cjs.js"),Fe=require("./AdaptiveDpr.cjs.js"),Oe=require("./AdaptiveEvents.cjs.js"),Ie=require("./PerformanceMonitor.cjs.js"),Ve=require("./RenderTexture.cjs.js"),ye=require("./Mask.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.CatmullRomLine=t.CatmullRomLine,exports.Line=o.Line,exports.PositionalAudio=i.PositionalAudio,exports.Text=u.Text,exports.Text3D=a.Text3D,exports.Effects=n.Effects,exports.isWebGL2Available=n.isWebGL2Available,exports.GradientTexture=c.GradientTexture,exports.Image=j.Image,exports.Edges=p.Edges,exports.Trail=x.Trail,exports.useTrail=x.useTrail,exports.Sampler=l.Sampler,exports.useSurfaceSampler=l.useSurfaceSampler,exports.ComputedAttribute=d.ComputedAttribute,exports.Clone=q.Clone,exports.MarchingCube=m.MarchingCube,exports.MarchingCubes=m.MarchingCubes,exports.MarchingPlane=m.MarchingPlane,exports.Decal=h.Decal,exports.Svg=C.Svg,exports.OrthographicCamera=M.OrthographicCamera,exports.PerspectiveCamera=S.PerspectiveCamera,exports.CubeCamera=P.CubeCamera,exports.DeviceOrientationControls=b.DeviceOrientationControls,exports.FlyControls=B.FlyControls,exports.MapControls=g.MapControls,exports.OrbitControls=f.OrbitControls,exports.TrackballControls=T.TrackballControls,exports.ArcballControls=v.ArcballControls,exports.TransformControls=L.TransformControls,exports.PointerLockControls=A.PointerLockControls,exports.FirstPersonControls=k.FirstPersonControls,exports.GizmoHelper=D.GizmoHelper,exports.useGizmoContext=D.useGizmoContext,exports.GizmoViewcube=E.GizmoViewcube,exports.GizmoViewport=R.GizmoViewport,exports.useCubeTexture=w.useCubeTexture,exports.useFBX=G.useFBX,exports.useGLTF=z.useGLTF,exports.useKTX2=F.useKTX2,exports.useProgress=O.useProgress,exports.IsObject=I.IsObject,exports.useTexture=I.useTexture,exports.useVideoTexture=V.useVideoTexture,exports.Stats=y.Stats,exports.useDepthBuffer=H.useDepthBuffer,exports.useAspect=Q.useAspect,exports.useCamera=X.useCamera,exports.useDetectGPU=K.useDetectGPU,exports.useHelper=W.useHelper,exports.useBVH=N.useBVH,exports.useContextBridge=U.useContextBridge,exports.useAnimations=_.useAnimations,exports.useFBO=J.useFBO,exports.useIntersect=Y.useIntersect,exports.useBoxProjectedEnv=Z.useBoxProjectedEnv,exports.BBAnchor=$.BBAnchor,exports.CurveModifier=ee.CurveModifier,exports.MeshDistortMaterial=re.MeshDistortMaterial,exports.MeshWobbleMaterial=se.MeshWobbleMaterial,exports.MeshReflectorMaterial=te.MeshReflectorMaterial,exports.MeshRefractionMaterial=oe.MeshRefractionMaterial,exports.PointMaterial=ie.PointMaterial,exports.PointMaterialImpl=ie.PointMaterialImpl,exports.shaderMaterial=ue.shaderMaterial,exports.softShadows=ae.softShadows,exports.Box=ne.Box,exports.Capsule=ne.Capsule,exports.Circle=ne.Circle,exports.Cone=ne.Cone,exports.Cylinder=ne.Cylinder,exports.Dodecahedron=ne.Dodecahedron,exports.Extrude=ne.Extrude,exports.Icosahedron=ne.Icosahedron,exports.Lathe=ne.Lathe,exports.Octahedron=ne.Octahedron,exports.Plane=ne.Plane,exports.Polyhedron=ne.Polyhedron,exports.Ring=ne.Ring,exports.Sphere=ne.Sphere,exports.Tetrahedron=ne.Tetrahedron,exports.Torus=ne.Torus,exports.TorusKnot=ne.TorusKnot,exports.Tube=ne.Tube,exports.RoundedBox=ce.RoundedBox,exports.ScreenQuad=je.ScreenQuad,exports.Center=pe.Center,exports.Bounds=xe.Bounds,exports.useBounds=xe.useBounds,exports.CameraShake=le.CameraShake,exports.Float=de.Float,exports.Stage=qe.Stage,exports.Backdrop=me.Backdrop,exports.Shadow=he.Shadow,exports.ContactShadows=Ce.ContactShadows,exports.AccumulativeShadows=Me.AccumulativeShadows,exports.RandomizedLight=Me.RandomizedLight,exports.accumulativeContext=Me.accumulativeContext,exports.Reflector=Se.Reflector,exports.SpotLight=Pe.SpotLight,exports.SpotLightShadow=Pe.SpotLightShadow,exports.Environment=be.Environment,exports.EnvironmentCube=be.EnvironmentCube,exports.EnvironmentMap=be.EnvironmentMap,exports.EnvironmentPortal=be.EnvironmentPortal,exports.useEnvironment=be.useEnvironment,exports.Lightformer=Be.Lightformer,exports.Sky=ge.Sky,exports.calcPosFromAngles=ge.calcPosFromAngles,exports.Stars=fe.Stars,exports.Cloud=Te.Cloud,exports.Sparkles=ve.Sparkles,exports.useMatcapTexture=Le.useMatcapTexture,exports.useNormalTexture=Ae.useNormalTexture,exports.Point=ke.Point,exports.Points=ke.Points,exports.PointsBuffer=ke.PointsBuffer,exports.PositionPoint=ke.PositionPoint,exports.Instance=De.Instance,exports.Instances=De.Instances,exports.Merged=De.Merged,exports.Segment=Ee.Segment,exports.SegmentObject=Ee.SegmentObject,exports.Segments=Ee.Segments,exports.Detailed=Re.Detailed,exports.Preload=we.Preload,exports.BakeShadows=Ge.BakeShadows,exports.meshBounds=ze.meshBounds,exports.AdaptiveDpr=Fe.AdaptiveDpr,exports.AdaptiveEvents=Oe.AdaptiveEvents,exports.PerformanceMonitor=Ie.PerformanceMonitor,exports.usePerformanceMonitor=Ie.usePerformanceMonitor,exports.RenderTexture=Ve.RenderTexture,exports.Mask=ye.Mask,exports.useMask=ye.useMask;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./CatmullRomLine.cjs.js"),o=require("./Line.cjs.js"),i=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),a=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),c=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),x=require("./Trail.cjs.js"),l=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),d=require("./Clone.cjs.js"),m=require("./MarchingCubes.cjs.js"),h=require("./Decal.cjs.js"),C=require("./Svg.cjs.js"),M=require("./OrthographicCamera.cjs.js"),S=require("./PerspectiveCamera.cjs.js"),T=require("./CubeCamera.cjs.js"),P=require("./DeviceOrientationControls.cjs.js"),b=require("./FlyControls.cjs.js"),B=require("./MapControls.cjs.js"),g=require("./OrbitControls.cjs.js"),f=require("./TrackballControls.cjs.js"),v=require("./ArcballControls.cjs.js"),L=require("./TransformControls.cjs.js"),A=require("./PointerLockControls.cjs.js"),k=require("./FirstPersonControls.cjs.js"),D=require("./GizmoHelper.cjs.js"),E=require("./GizmoViewcube.cjs.js"),R=require("./GizmoViewport.cjs.js"),w=require("./useCubeTexture.cjs.js"),G=require("./useFBX.cjs.js"),z=require("./useGLTF.cjs.js"),F=require("./useKTX2.cjs.js"),O=require("./useProgress.cjs.js"),I=require("./useTexture.cjs.js"),V=require("./useVideoTexture.cjs.js"),y=require("./Stats.cjs.js"),H=require("./useDepthBuffer.cjs.js"),Q=require("./useAspect.cjs.js"),X=require("./useCamera.cjs.js"),K=require("./useDetectGPU.cjs.js"),W=require("./useHelper.cjs.js"),N=require("./useBVH.cjs.js"),U=require("./useContextBridge.cjs.js"),_=require("./useAnimations.cjs.js"),J=require("./useFBO.cjs.js"),Y=require("./useIntersect.cjs.js"),Z=require("./useBoxProjectedEnv.cjs.js"),$=require("./BBAnchor.cjs.js"),ee=require("./useTrailTexture.cjs.js"),re=require("./CurveModifier.cjs.js"),se=require("./MeshDistortMaterial.cjs.js"),te=require("./MeshWobbleMaterial.cjs.js"),oe=require("./MeshReflectorMaterial.cjs.js"),ie=require("./MeshRefractionMaterial.cjs.js"),ue=require("./PointMaterial.cjs.js"),ae=require("./shaderMaterial.cjs.js"),ne=require("./softShadows.cjs.js"),ce=require("./shapes.cjs.js"),je=require("./RoundedBox.cjs.js"),pe=require("./ScreenQuad.cjs.js"),xe=require("./Center.cjs.js"),le=require("./Bounds.cjs.js"),qe=require("./CameraShake.cjs.js"),de=require("./Float.cjs.js"),me=require("./Stage.cjs.js"),he=require("./Backdrop.cjs.js"),Ce=require("./Shadow.cjs.js"),Me=require("./ContactShadows.cjs.js"),Se=require("./AccumulativeShadows.cjs.js"),Te=require("./Reflector.cjs.js"),Pe=require("./SpotLight.cjs.js"),be=require("./Environment.cjs.js"),Be=require("./Lightformer.cjs.js"),ge=require("./Sky.cjs.js"),fe=require("./Stars.cjs.js"),ve=require("./Cloud.cjs.js"),Le=require("./Sparkles.cjs.js"),Ae=require("./useMatcapTexture.cjs.js"),ke=require("./useNormalTexture.cjs.js"),De=require("./Points.cjs.js"),Ee=require("./Instances.cjs.js"),Re=require("./Segments.cjs.js"),we=require("./Detailed.cjs.js"),Ge=require("./Preload.cjs.js"),ze=require("./BakeShadows.cjs.js"),Fe=require("./meshBounds.cjs.js"),Oe=require("./AdaptiveDpr.cjs.js"),Ie=require("./AdaptiveEvents.cjs.js"),Ve=require("./PerformanceMonitor.cjs.js"),ye=require("./RenderTexture.cjs.js"),He=require("./Mask.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.CatmullRomLine=t.CatmullRomLine,exports.Line=o.Line,exports.PositionalAudio=i.PositionalAudio,exports.Text=u.Text,exports.Text3D=a.Text3D,exports.Effects=n.Effects,exports.isWebGL2Available=n.isWebGL2Available,exports.GradientTexture=c.GradientTexture,exports.Image=j.Image,exports.Edges=p.Edges,exports.Trail=x.Trail,exports.useTrail=x.useTrail,exports.Sampler=l.Sampler,exports.useSurfaceSampler=l.useSurfaceSampler,exports.ComputedAttribute=q.ComputedAttribute,exports.Clone=d.Clone,exports.MarchingCube=m.MarchingCube,exports.MarchingCubes=m.MarchingCubes,exports.MarchingPlane=m.MarchingPlane,exports.Decal=h.Decal,exports.Svg=C.Svg,exports.OrthographicCamera=M.OrthographicCamera,exports.PerspectiveCamera=S.PerspectiveCamera,exports.CubeCamera=T.CubeCamera,exports.DeviceOrientationControls=P.DeviceOrientationControls,exports.FlyControls=b.FlyControls,exports.MapControls=B.MapControls,exports.OrbitControls=g.OrbitControls,exports.TrackballControls=f.TrackballControls,exports.ArcballControls=v.ArcballControls,exports.TransformControls=L.TransformControls,exports.PointerLockControls=A.PointerLockControls,exports.FirstPersonControls=k.FirstPersonControls,exports.GizmoHelper=D.GizmoHelper,exports.useGizmoContext=D.useGizmoContext,exports.GizmoViewcube=E.GizmoViewcube,exports.GizmoViewport=R.GizmoViewport,exports.useCubeTexture=w.useCubeTexture,exports.useFBX=G.useFBX,exports.useGLTF=z.useGLTF,exports.useKTX2=F.useKTX2,exports.useProgress=O.useProgress,exports.IsObject=I.IsObject,exports.useTexture=I.useTexture,exports.useVideoTexture=V.useVideoTexture,exports.Stats=y.Stats,exports.useDepthBuffer=H.useDepthBuffer,exports.useAspect=Q.useAspect,exports.useCamera=X.useCamera,exports.useDetectGPU=K.useDetectGPU,exports.useHelper=W.useHelper,exports.useBVH=N.useBVH,exports.useContextBridge=U.useContextBridge,exports.useAnimations=_.useAnimations,exports.useFBO=J.useFBO,exports.useIntersect=Y.useIntersect,exports.useBoxProjectedEnv=Z.useBoxProjectedEnv,exports.BBAnchor=$.BBAnchor,exports.useTrailTexture=ee.useTrailTexture,exports.CurveModifier=re.CurveModifier,exports.MeshDistortMaterial=se.MeshDistortMaterial,exports.MeshWobbleMaterial=te.MeshWobbleMaterial,exports.MeshReflectorMaterial=oe.MeshReflectorMaterial,exports.MeshRefractionMaterial=ie.MeshRefractionMaterial,exports.PointMaterial=ue.PointMaterial,exports.PointMaterialImpl=ue.PointMaterialImpl,exports.shaderMaterial=ae.shaderMaterial,exports.softShadows=ne.softShadows,exports.Box=ce.Box,exports.Capsule=ce.Capsule,exports.Circle=ce.Circle,exports.Cone=ce.Cone,exports.Cylinder=ce.Cylinder,exports.Dodecahedron=ce.Dodecahedron,exports.Extrude=ce.Extrude,exports.Icosahedron=ce.Icosahedron,exports.Lathe=ce.Lathe,exports.Octahedron=ce.Octahedron,exports.Plane=ce.Plane,exports.Polyhedron=ce.Polyhedron,exports.Ring=ce.Ring,exports.Sphere=ce.Sphere,exports.Tetrahedron=ce.Tetrahedron,exports.Torus=ce.Torus,exports.TorusKnot=ce.TorusKnot,exports.Tube=ce.Tube,exports.RoundedBox=je.RoundedBox,exports.ScreenQuad=pe.ScreenQuad,exports.Center=xe.Center,exports.Bounds=le.Bounds,exports.useBounds=le.useBounds,exports.CameraShake=qe.CameraShake,exports.Float=de.Float,exports.Stage=me.Stage,exports.Backdrop=he.Backdrop,exports.Shadow=Ce.Shadow,exports.ContactShadows=Me.ContactShadows,exports.AccumulativeShadows=Se.AccumulativeShadows,exports.RandomizedLight=Se.RandomizedLight,exports.accumulativeContext=Se.accumulativeContext,exports.Reflector=Te.Reflector,exports.SpotLight=Pe.SpotLight,exports.SpotLightShadow=Pe.SpotLightShadow,exports.Environment=be.Environment,exports.EnvironmentCube=be.EnvironmentCube,exports.EnvironmentMap=be.EnvironmentMap,exports.EnvironmentPortal=be.EnvironmentPortal,exports.useEnvironment=be.useEnvironment,exports.Lightformer=Be.Lightformer,exports.Sky=ge.Sky,exports.calcPosFromAngles=ge.calcPosFromAngles,exports.Stars=fe.Stars,exports.Cloud=ve.Cloud,exports.Sparkles=Le.Sparkles,exports.useMatcapTexture=Ae.useMatcapTexture,exports.useNormalTexture=ke.useNormalTexture,exports.Point=De.Point,exports.Points=De.Points,exports.PointsBuffer=De.PointsBuffer,exports.PositionPoint=De.PositionPoint,exports.Instance=Ee.Instance,exports.Instances=Ee.Instances,exports.Merged=Ee.Merged,exports.Segment=Re.Segment,exports.SegmentObject=Re.SegmentObject,exports.Segments=Re.Segments,exports.Detailed=we.Detailed,exports.Preload=Ge.Preload,exports.BakeShadows=ze.BakeShadows,exports.meshBounds=Fe.meshBounds,exports.AdaptiveDpr=Oe.AdaptiveDpr,exports.AdaptiveEvents=Ie.AdaptiveEvents,exports.PerformanceMonitor=Ve.PerformanceMonitor,exports.usePerformanceMonitor=Ve.usePerformanceMonitor,exports.RenderTexture=ye.RenderTexture,exports.Mask=He.Mask,exports.useMask=He.useMask;

package/core/index.d.ts

@@ -52,6 +52,7 @@ export * from './useFBO';
 export * from './useIntersect';
 export * from './useBoxProjectedEnv';
 export * from './BBAnchor';
+export * from './useTrailTexture';
 export * from './CurveModifier';
 export * from './MeshDistortMaterial';
 export * from './MeshWobbleMaterial';

package/core/index.js

@@ -52,6 +52,7 @@ export { useFBO } from './useFBO.js';
 export { useIntersect } from './useIntersect.js';
 export { useBoxProjectedEnv } from './useBoxProjectedEnv.js';
 export { BBAnchor } from './BBAnchor.js';
+export { useTrailTexture } from './useTrailTexture.js';
 export { CurveModifier } from './CurveModifier.js';
 export { MeshDistortMaterial } from './MeshDistortMaterial.js';
 export { MeshWobbleMaterial } from './MeshWobbleMaterial.js';

package/core/useHelper.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber");function t(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var u=t(e);exports.useHelper=function(e,t,...n){const c=u.useRef(),a=r.useThree((e=>e.scene));return u.useEffect((()=>(e&&t&&null!=e&&e.current&&(c.current=new t(e.current,...n),c.current&&a.add(c.current)),!e&&c.current&&a.remove(c.current),()=>{c.current&&a.remove(c.current)})),[a,t,e,...n]),r.useFrame((()=>{var e;null!=(e=c.current)&&e.update&&c.current.update()})),c};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber");function t(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var u=t(e);exports.useHelper=function(e,t,...n){const c=u.useRef(),s=r.useThree((e=>e.scene));return u.useEffect((()=>{let r;if(e&&null!=e&&e.current&&t&&(c.current=r=new t(e.current,...n)),r)return s.add(r),()=>{c.current=void 0,s.remove(r),null==r.dispose||r.dispose()}}),[s,t,e,...n]),r.useFrame((()=>{var e;null==(e=c.current)||null==e.update||e.update()})),c};

package/core/useHelper.d.ts

@@ -3,8 +3,9 @@ import { Object3D } from 'three';
 import { Falsey } from 'utility-types';
 declare type Helper = Object3D & {
     update: () => void;
+    dispose: () => void;
 };
 declare type Constructor = new (...args: any[]) => any;
 declare type Rest<T> = T extends [infer _, ...infer R] ? R : never;
-export declare function useHelper<T extends Constructor>(object3D: React.MutableRefObject<Object3D | null | undefined> | Falsey | undefined, helperConstructor: T, ...args: Rest<ConstructorParameters<T>>): React.MutableRefObject<Helper | undefined>;
+export declare function useHelper<T extends Constructor>(object3D: React.MutableRefObject<Object3D> | Falsey, helperConstructor: T, ...args: Rest<ConstructorParameters<T>>): React.MutableRefObject<Helper | undefined>;
 export {};

package/core/useHelper.js

@@ -5,36 +5,25 @@ function useHelper(object3D, helperConstructor, ...args) {
   const helper = React.useRef();
   const scene = useThree(state => state.scene);
   React.useEffect(() => {
-    if (object3D) {
-      if (helperConstructor && object3D != null && object3D.current) {
-        helper.current = new helperConstructor(object3D.current, ...args);
+    let currentHelper = undefined;
 
-        if (helper.current) {
-          scene.add(helper.current);
-        }
-      }
+    if (object3D && object3D != null && object3D.current && helperConstructor) {
+      helper.current = currentHelper = new helperConstructor(object3D.current, ...args);
     }
-    /**
-     * Dispose of the helper if no object 3D is passed
-     */
 
-
-    if (!object3D && helper.current) {
-      scene.remove(helper.current);
+    if (currentHelper) {
+      scene.add(currentHelper);
+      return () => {
+        helper.current = undefined;
+        scene.remove(currentHelper);
+        currentHelper.dispose == null ? void 0 : currentHelper.dispose();
+      };
     }
-
-    return () => {
-      if (helper.current) {
-        scene.remove(helper.current);
-      }
-    };
   }, [scene, helperConstructor, object3D, ...args]);
   useFrame(() => {
     var _helper$current;
 
-    if ((_helper$current = helper.current) != null && _helper$current.update) {
-      helper.current.update();
-    }
+    return void ((_helper$current = helper.current) == null ? void 0 : _helper$current.update == null ? void 0 : _helper$current.update());
   });
   return helper;
 }

package/core/useTrailTexture.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("@react-three/fiber"),i=require("three");const s=t=>Math.sqrt(1-Math.pow(t-1,2));class a{constructor({size:t=64,maxAge:e=750,radius:i=.3,intensity:a=.2,interpolate:h=0,smoothing:r=0,minForce:c=.3,blend:o="screen",ease:n=s}={}){this.size=t,this.maxAge=e,this.radius=i,this.intensity=a,this.ease=n,this.interpolate=h,this.smoothing=r,this.minForce=c,this.blend=o,this.trail=[],this.force=0,this.initTexture()}initTexture(){this.canvas=document.createElement("canvas"),this.canvas.width=this.canvas.height=this.size,this.ctx=this.canvas.getContext("2d"),this.ctx.fillStyle="black",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height),this.texture=new i.Texture(this.canvas),this.canvas.id="touchTexture",this.canvas.style.width=this.canvas.style.height=`${this.canvas.width}px`}update(t){this.clear(),this.trail.forEach(((e,i)=>{e.age+=1e3*t,e.age>this.maxAge&&this.trail.splice(i,1)})),this.trail.length||(this.force=0),this.trail.forEach((t=>{this.drawTouch(t)})),this.texture.needsUpdate=!0}clear(){this.ctx.globalCompositeOperation="source-over",this.ctx.fillStyle="black",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height)}addTouch(t){const e=this.trail[this.trail.length-1];if(e){const i=e.x-t.x,s=e.y-t.y,a=i*i+s*s,h=Math.max(this.minForce,Math.min(1e4*a,1));if(this.force=function(t,e,i=.9){return e*i+t*(1-i)}(h,this.force,this.smoothing),this.interpolate){const t=Math.ceil(a/Math.pow(.5*this.radius/this.interpolate,2));if(t>1)for(let a=1;a<t;a++)this.trail.push({x:e.x-i/t*a,y:e.y-s/t*a,age:0,force:h})}}this.trail.push({x:t.x,y:t.y,age:0,force:this.force})}drawTouch(t){const e={x:t.x*this.size,y:(1-t.y)*this.size};let i=1;i=t.age<.3*this.maxAge?this.ease(t.age/(.3*this.maxAge)):this.ease(1-(t.age-.3*this.maxAge)/(.7*this.maxAge)),i*=t.force,this.ctx.globalCompositeOperation=this.blend;const s=this.size*this.radius*i,a=this.ctx.createRadialGradient(e.x,e.y,Math.max(0,.25*s),e.x,e.y,Math.max(0,s));a.addColorStop(0,`rgba(255, 255, 255, ${this.intensity})`),a.addColorStop(1,"rgba(0, 0, 0, 0.0)"),this.ctx.beginPath(),this.ctx.fillStyle=a,this.ctx.arc(e.x,e.y,Math.max(0,s),0,2*Math.PI),this.ctx.fill()}}exports.useTrailTexture=function(i){const s=t.useMemo((()=>new a(i)),[i]);e.useFrame(((t,e)=>{s&&s.update(e)}));const h=t.useCallback((t=>{s.addTouch(t.uv)}),[s]);return{texture:s.texture,onMove:h}};

package/core/useTrailTexture.d.ts

@@ -0,0 +1,17 @@
+import { Texture } from 'three';
+declare type TrailConfig = {
+    size?: number;
+    maxAge?: number;
+    radius?: number;
+    intensity?: number;
+    interpolate?: number;
+    smoothing?: number;
+    minForce?: number;
+    blend?: CanvasRenderingContext2D['globalCompositeOperation'];
+    ease?: (t: number) => number;
+};
+export declare function useTrailTexture(config?: TrailConfig): {
+    texture: Texture;
+    onMove: (e: any) => void;
+};
+export {};

package/core/useTrailTexture.js

@@ -0,0 +1,160 @@
+import { useMemo, useCallback } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { Texture } from 'three';
+
+/**
+ *  Adapted from https://github.com/brunoimbrizi/interactive-particles/blob/master/src/scripts/webgl/particles/TrailTexture.js
+ *  Changes:
+ *    * accepts config as constructor params
+ *    * frame-rate independent aging
+ *    * added option to interpolate between slow mouse events
+ *    * added option for smoothing between values to avoid large jumps in force
+ */
+
+// smooth new sample (measurement) based on previous sample (current)
+function smoothAverage(current, measurement, smoothing = 0.9) {
+  return measurement * smoothing + current * (1.0 - smoothing);
+} // default ease
+
+
+const easeCircleOut = x => Math.sqrt(1 - Math.pow(x - 1, 2));
+
+class TrailTexture {
+  constructor({
+    size = 64,
+    maxAge = 750,
+    radius = 0.3,
+    intensity = 0.2,
+    interpolate = 0,
+    smoothing = 0,
+    minForce = 0.3,
+    blend = 'screen',
+    // source-over is canvas default. Others are slower
+    ease = easeCircleOut
+  } = {}) {
+    this.size = size;
+    this.maxAge = maxAge;
+    this.radius = radius;
+    this.intensity = intensity;
+    this.ease = ease;
+    this.interpolate = interpolate;
+    this.smoothing = smoothing;
+    this.minForce = minForce;
+    this.blend = blend;
+    this.trail = [];
+    this.force = 0;
+    this.initTexture();
+  }
+
+  initTexture() {
+    this.canvas = document.createElement('canvas');
+    this.canvas.width = this.canvas.height = this.size;
+    this.ctx = this.canvas.getContext('2d');
+    this.ctx.fillStyle = 'black';
+    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    this.texture = new Texture(this.canvas);
+    this.canvas.id = 'touchTexture';
+    this.canvas.style.width = this.canvas.style.height = `${this.canvas.width}px`;
+  }
+
+  update(delta) {
+    this.clear(); // age points
+
+    this.trail.forEach((point, i) => {
+      point.age += delta * 1000; // remove old
+
+      if (point.age > this.maxAge) {
+        this.trail.splice(i, 1);
+      }
+    }); // reset force when empty (when smoothing)
+
+    if (!this.trail.length) this.force = 0;
+    this.trail.forEach(point => {
+      this.drawTouch(point);
+    });
+    this.texture.needsUpdate = true;
+  }
+
+  clear() {
+    this.ctx.globalCompositeOperation = 'source-over';
+    this.ctx.fillStyle = 'black';
+    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  addTouch(point) {
+    const last = this.trail[this.trail.length - 1];
+
+    if (last) {
+      const dx = last.x - point.x;
+      const dy = last.y - point.y;
+      const dd = dx * dx + dy * dy;
+      const force = Math.max(this.minForce, Math.min(dd * 10000, 1));
+      this.force = smoothAverage(force, this.force, this.smoothing);
+
+      if (!!this.interpolate) {
+        const lines = Math.ceil(dd / Math.pow(this.radius * 0.5 / this.interpolate, 2));
+
+        if (lines > 1) {
+          for (let i = 1; i < lines; i++) {
+            this.trail.push({
+              x: last.x - dx / lines * i,
+              y: last.y - dy / lines * i,
+              age: 0,
+              force
+            });
+          }
+        }
+      }
+    }
+
+    this.trail.push({
+      x: point.x,
+      y: point.y,
+      age: 0,
+      force: this.force
+    });
+  }
+
+  drawTouch(point) {
+    const pos = {
+      x: point.x * this.size,
+      y: (1 - point.y) * this.size
+    };
+    let intensity = 1;
+
+    if (point.age < this.maxAge * 0.3) {
+      intensity = this.ease(point.age / (this.maxAge * 0.3));
+    } else {
+      intensity = this.ease(1 - (point.age - this.maxAge * 0.3) / (this.maxAge * 0.7));
+    }
+
+    intensity *= point.force; // apply blending
+
+    this.ctx.globalCompositeOperation = this.blend;
+    const radius = this.size * this.radius * intensity;
+    const grd = this.ctx.createRadialGradient(pos.x, pos.y, Math.max(0, radius * 0.25), pos.x, pos.y, Math.max(0, radius));
+    grd.addColorStop(0, `rgba(255, 255, 255, ${this.intensity})`);
+    grd.addColorStop(1, `rgba(0, 0, 0, 0.0)`);
+    this.ctx.beginPath();
+    this.ctx.fillStyle = grd;
+    this.ctx.arc(pos.x, pos.y, Math.max(0, radius), 0, Math.PI * 2);
+    this.ctx.fill();
+  }
+
+}
+
+function useTrailTexture(config) {
+  const trail = useMemo(() => new TrailTexture(config), [config]);
+  useFrame((_, delta) => {
+    if (trail) trail.update(delta);
+  });
+  const onMove = useCallback(e => {
+    trail.addTouch(e.uv);
+  }, [trail]);
+  return {
+    texture: trail.texture,
+    onMove
+  };
+}
+
+export { useTrailTexture };