@react-three/drei 8.16.5 → 8.17.0

package/README.md

@@ -65,6 +65,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#effects">Effects</a></li>
           <li><a href="#gradienttexture">GradientTexture</a></li>
           <li><a href="#edges">Edges</a></li>
+          <li><a href="#trail">Trail</a></li>
           <li><a href="#useanimations">useAnimations</a></li>
         </ul>
         <li><a href="#shaders">Shaders</a></li>
@@ -100,6 +101,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#usecursor">useCursor</a></li>
           <li><a href="#useintersect">useIntersect</a></li>
           <li><a href="#useboxprojectedenv">useBoxProjectedEnv</a></li>
+          <li><a href="#useTrail">useTrail</a></li>
         </ul>
         <li><a href="#loading">Loaders</a></li>
         <ul>
@@ -641,6 +643,36 @@ Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/index.html?q=EdgesGeome
 </mesh>
 ```
 
+#### Trail
+
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-trail--use-trail-st)
+
+A declarative, `three.MeshLine` based Trails implementation. You can attach it to any mesh and it will give it a beautiful trail.
+
+Props defined bellow with their default values.
+
+```jsx
+<Trail
+  width={0.2} // Width of the line
+  color={'hotpink'} // Color of the line
+  length={1} // Length of the line
+  decay={1} // How fast the line fades away
+  target={undefined} // Optional target. This object will produce the trail.
+  attenuation={(width) => width} // A function to define the width in each point along it.
+>
+  {/* If `target` is not defined, Trail will use the first `Object3D` child as the target. */}
+  <mesh>
+    <sphereGeometry />
+    <meshBasicMaterial />
+  </mesh>
+
+  {/* You can optionally define a custom meshLineMaterial to use. */}
+  {/* <meshLineMaterial color={"red"} /> */}
+</Trail>
+```
+
+👉 Inspired by [TheSpite's Codevember 2021 #9](https://spite.github.io/codevember-2021/9/)
+
 #### useAnimations
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-useanimations--use-animations-st)
@@ -1137,6 +1169,27 @@ const projection = useBoxProjectedEnv(
 </CubeCamera>
 ```
 
+#### useTrail
+
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-trail--use-trail-st)
+
+A hook to obtain an array of points that make up a [Trail](#trail). You can use this array to drive your own `MeshLine` or make a trail out of anything you please.
+
+Note: The hook returns a ref (`MutableRefObject<Vector3[]>`) this means updates to it will not trigger a re-draw, thus keeping this cheap.
+
+```js
+const points = useTrail(
+  target, // Required target object. This object will produce the trail.
+  length, // Length of the line
+  decay // How fast the line fades away
+)
+
+// To use...
+useFrame(() => {
+  meshLineRef.current.position.setPoints(points.current)
+})
+```
+
 # Loading
 
 #### Loader
@@ -1522,10 +1575,10 @@ Calculates a boundary box and centers its children accordingly. `alignTop` adjus
   <a href="https://codesandbox.io/s/rz2g0"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/rz2g0/screenshot.png" alt="Demo"/></a>
 </p>
 
-Calculates a boundary box and centers the camera accordingly. If you are using controls, make sure to pass them the `makeDefault` prop. `fit` fits the current view on first render. `clip` sets the cameras near/far planes.
+Calculates a boundary box and centers the camera accordingly. If you are using controls, make sure to pass them the `makeDefault` prop. `fit` fits the current view on first render. `clip` sets the cameras near/far planes. `observe` will optionally use r3f's resize-observer to refresh bounds on resize.
 
 ```jsx
-<Bounds fit clip damping={6} margin={1.2}>
+<Bounds fit clip observe damping={6} margin={1.2}>
   <mesh />
 </Bounds>
 ```

package/core/Bounds.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=o(e),n=o(t);const c=e=>e&&e.isOrthographicCamera,i=a.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:o,clip:s,margin:m=1.2,eps:u=.01,onFit:f}){const p=a.useRef(null),l=r.useThree((e=>e.camera)),x=r.useThree((e=>e.controls)),h=r.useThree((e=>e.invalidate)),y=a.useRef(f);function z(e,t){return Math.abs(e.x-t.x)<u&&Math.abs(e.y-t.y)<u&&Math.abs(e.z-t.z)<u}function d(e,t,r,o){e.x=n.MathUtils.damp(e.x,t.x,r,o),e.y=n.MathUtils.damp(e.y,t.y,r,o),e.z=n.MathUtils.damp(e.z,t.z,r,o)}y.current=f;const[M]=a.useState((()=>({animating:!1,focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[g]=a.useState((()=>({focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[b]=a.useState((()=>new n.Box3)),w=a.useMemo((()=>{function e(){const e=b.getSize(new n.Vector3),t=b.getCenter(new n.Vector3),r=Math.max(e.x,e.y,e.z),o=c(l)?4*r:r/(2*Math.atan(Math.PI*l.fov/360)),a=c(l)?4*r:o/l.aspect,i=m*Math.max(o,a);return{box:b,size:e,center:t,distance:i}}return{getSize:e,refresh(t){var r;if((r=t)&&r.isObject3D?b.setFromObject(t):(e=>e&&e.isBox3)(t)?b.copy(t):p.current&&b.setFromObject(p.current),b.isEmpty()){const e=l.position.length()||10;b.setFromCenterAndSize(new n.Vector3,new n.Vector3(e,e,e))}if("OrthographicTrackballControls"===(null==x?void 0:x.constructor.name)){const{distance:t}=e(),r=l.position.clone().sub(x.target).normalize().multiplyScalar(t),o=x.target.clone().add(r);l.position.copy(o)}return this},clip(){const{distance:t}=e();return x&&(x.maxDistance=10*t),l.near=t/100,l.far=100*t,l.updateProjectionMatrix(),x&&x.update(),h(),this},fit(){M.camera.copy(l.position),x&&M.focus.copy(x.target);const{center:r,distance:o}=e(),a=r.clone().sub(l.position).normalize().multiplyScalar(o);if(g.camera.copy(r).sub(a),g.focus.copy(r),c(l)){M.zoom=l.zoom;let e=0,o=0;const a=[new n.Vector3(b.min.x,b.min.y,b.min.z),new n.Vector3(b.min.x,b.max.y,b.min.z),new n.Vector3(b.min.x,b.min.y,b.max.z),new n.Vector3(b.min.x,b.max.y,b.max.z),new n.Vector3(b.max.x,b.max.y,b.max.z),new n.Vector3(b.max.x,b.max.y,b.min.z),new n.Vector3(b.max.x,b.min.y,b.max.z),new n.Vector3(b.max.x,b.min.y,b.min.z)];r.applyMatrix4(l.matrixWorldInverse);for(const t of a)t.applyMatrix4(l.matrixWorldInverse),e=Math.max(e,Math.abs(t.y-r.y)),o=Math.max(o,Math.abs(t.x-r.x));e*=2,o*=2;const c=(l.top-l.bottom)/e,i=(l.right-l.left)/o;g.zoom=Math.min(c,i)/m,t||(l.zoom=g.zoom,l.updateProjectionMatrix())}return t?M.animating=!0:(l.position.copy(g.camera),l.lookAt(g.focus),x&&(x.target.copy(g.focus),x.update())),y.current&&y.current(this.getSize()),h(),this}}}),[b,l,x,m,t,h]);return a.useLayoutEffect((()=>{if(w.refresh(),o&&w.fit(),s&&w.clip(),x){const e=()=>M.animating=!1;return x.addEventListener("start",e),()=>x.removeEventListener("start",e)}}),[s,o,x]),r.useFrame(((e,r)=>{if(M.animating){if(d(M.focus,g.focus,t,r),d(M.camera,g.camera,t,r),M.zoom=n.MathUtils.damp(M.zoom,g.zoom,t,r),l.position.copy(M.camera),c(l)&&(l.zoom=M.zoom,l.updateProjectionMatrix()),x?(x.target.copy(M.focus),x.update()):l.lookAt(M.focus),h(),c(l)&&!(Math.abs(M.zoom-g.zoom)<u))return;if(!c(l)&&!z(M.camera,g.camera))return;if(x&&!z(M.focus,g.focus))return;M.animating=!1}})),a.createElement("group",{ref:p},a.createElement(i.Provider,{value:w},e))},exports.useBounds=function(){return a.useContext(i)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=o(e),n=o(t);const c=e=>e&&e.isOrthographicCamera,i=a.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:o,clip:s,observe:u,margin:m=1.2,eps:f=.01,onFit:l}){const p=a.useRef(null),{camera:x,invalidate:z,size:d,controls:y}=r.useThree(),h=a.useRef(l);function M(e,t){return Math.abs(e.x-t.x)<f&&Math.abs(e.y-t.y)<f&&Math.abs(e.z-t.z)<f}function g(e,t,r,o){e.x=n.MathUtils.damp(e.x,t.x,r,o),e.y=n.MathUtils.damp(e.y,t.y,r,o),e.z=n.MathUtils.damp(e.z,t.z,r,o)}h.current=l;const[b]=a.useState((()=>({animating:!1,focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[w]=a.useState((()=>({focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[v]=a.useState((()=>new n.Box3)),V=a.useMemo((()=>{function e(){const e=v.getSize(new n.Vector3),t=v.getCenter(new n.Vector3),r=Math.max(e.x,e.y,e.z),o=c(x)?4*r:r/(2*Math.atan(Math.PI*x.fov/360)),a=c(x)?4*r:o/x.aspect,i=m*Math.max(o,a);return{box:v,size:e,center:t,distance:i}}return{getSize:e,refresh(t){if((r=t)&&r.isBox3)v.copy(t);else{const e=t||p.current;e.updateWorldMatrix(!0,!0),v.setFromObject(e)}var r;if(v.isEmpty()){const e=x.position.length()||10;v.setFromCenterAndSize(new n.Vector3,new n.Vector3(e,e,e))}if("OrthographicTrackballControls"===(null==y?void 0:y.constructor.name)){const{distance:t}=e(),r=x.position.clone().sub(y.target).normalize().multiplyScalar(t),o=y.target.clone().add(r);x.position.copy(o)}return this},clip(){const{distance:t}=e();return y&&(y.maxDistance=10*t),x.near=t/100,x.far=100*t,x.updateProjectionMatrix(),y&&y.update(),z(),this},fit(){b.camera.copy(x.position),y&&b.focus.copy(y.target);const{center:r,distance:o}=e(),a=r.clone().sub(x.position).normalize().multiplyScalar(o);if(w.camera.copy(r).sub(a),w.focus.copy(r),c(x)){b.zoom=x.zoom;let e=0,o=0;const a=[new n.Vector3(v.min.x,v.min.y,v.min.z),new n.Vector3(v.min.x,v.max.y,v.min.z),new n.Vector3(v.min.x,v.min.y,v.max.z),new n.Vector3(v.min.x,v.max.y,v.max.z),new n.Vector3(v.max.x,v.max.y,v.max.z),new n.Vector3(v.max.x,v.max.y,v.min.z),new n.Vector3(v.max.x,v.min.y,v.max.z),new n.Vector3(v.max.x,v.min.y,v.min.z)];r.applyMatrix4(x.matrixWorldInverse);for(const t of a)t.applyMatrix4(x.matrixWorldInverse),e=Math.max(e,Math.abs(t.y-r.y)),o=Math.max(o,Math.abs(t.x-r.x));e*=2,o*=2;const c=(x.top-x.bottom)/e,i=(x.right-x.left)/o;w.zoom=Math.min(c,i)/m,t||(x.zoom=w.zoom,x.updateProjectionMatrix())}return t?b.animating=!0:(x.position.copy(w.camera),x.lookAt(w.focus),y&&(y.target.copy(w.focus),y.update())),h.current&&h.current(this.getSize()),z(),this}}}),[v,x,y,m,t,z]);a.useLayoutEffect((()=>{if(y){const e=()=>b.animating=!1;return y.addEventListener("start",e),()=>y.removeEventListener("start",e)}}),[y]);const j=a.useRef(0);return a.useEffect((()=>{(u||0==j.current++)&&(V.refresh(),o&&V.fit(),s&&V.clip())}),[d,s,o,u]),r.useFrame(((e,r)=>{if(b.animating){if(g(b.focus,w.focus,t,r),g(b.camera,w.camera,t,r),b.zoom=n.MathUtils.damp(b.zoom,w.zoom,t,r),x.position.copy(b.camera),c(x)&&(x.zoom=b.zoom,x.updateProjectionMatrix()),y?(y.target.copy(b.focus),y.update()):x.lookAt(b.focus),z(),c(x)&&!(Math.abs(b.zoom-w.zoom)<f))return;if(!c(x)&&!M(b.camera,w.camera))return;if(y&&!M(b.focus,w.focus))return;b.animating=!1}})),a.createElement("group",{ref:p},a.createElement(i.Provider,{value:V},e))},exports.useBounds=function(){return a.useContext(i)};

package/core/Bounds.d.ts

@@ -16,9 +16,10 @@ export declare type BoundsProps = JSX.IntrinsicElements['group'] & {
     damping?: number;
     fit?: boolean;
     clip?: boolean;
+    observe?: boolean;
     margin?: number;
     eps?: number;
     onFit?: (data: SizeProps) => void;
 };
-export declare function Bounds({ children, damping, fit, clip, margin, eps, onFit }: BoundsProps): JSX.Element;
+export declare function Bounds({ children, damping, fit, clip, observe, margin, eps, onFit }: BoundsProps): JSX.Element;
 export declare function useBounds(): BoundsApi;

package/core/Bounds.js

@@ -4,8 +4,6 @@ import { useThree, useFrame } from '@react-three/fiber';
 
 const isOrthographic = def => def && def.isOrthographicCamera;
 
-const isObject3D = def => def && def.isObject3D;
-
 const isBox3 = def => def && def.isBox3;
 
 const context = /*#__PURE__*/React.createContext(null);
@@ -14,15 +12,19 @@ function Bounds({
   damping = 6,
   fit,
   clip,
+  observe,
   margin = 1.2,
   eps = 0.01,
   onFit
 }) {
-  const ref = React.useRef(null);
-  const camera = useThree(state => state.camera); // @ts-expect-error new in @react-three/fiber@7.0.5
-
-  const controls = useThree(state => state.controls);
-  const invalidate = useThree(state => state.invalidate);
+  const ref = React.useRef(null); // @ts-expect-error new in @react-three/fiber@7.0.5
+
+  const {
+    camera,
+    invalidate,
+    size,
+    controls
+  } = useThree();
   const onFitRef = React.useRef(onFit);
   onFitRef.current = onFit;
 
@@ -68,7 +70,11 @@ function Bounds({
       getSize,
 
       refresh(object) {
-        if (isObject3D(object)) box.setFromObject(object);else if (isBox3(object)) box.copy(object);else if (ref.current) box.setFromObject(ref.current);
+        if (isBox3(object)) box.copy(object);else {
+          const target = object || ref.current;
+          target.updateWorldMatrix(true, true);
+          box.setFromObject(target);
+        }
 
         if (box.isEmpty()) {
           const max = camera.position.length() || 10;
@@ -158,10 +164,6 @@ function Bounds({
     };
   }, [box, camera, controls, margin, damping, invalidate]);
   React.useLayoutEffect(() => {
-    api.refresh();
-    if (fit) api.fit();
-    if (clip) api.clip();
-
     if (controls) {
       // Try to prevent drag hijacking
       const callback = () => current.animating = false;
@@ -169,7 +171,16 @@ function Bounds({
       controls.addEventListener('start', callback);
       return () => controls.removeEventListener('start', callback);
     }
-  }, [clip, fit, controls]);
+  }, [controls]); // Scale pointer on window resize
+
+  const count = React.useRef(0);
+  React.useEffect(() => {
+    if (observe || count.current++ === 0) {
+      api.refresh();
+      if (fit) api.fit();
+      if (clip) api.clip();
+    }
+  }, [size, clip, fit, observe]);
   useFrame((state, delta) => {
     if (current.animating) {
       damp(current.focus, goal.focus, damping, delta);

package/core/Points.d.ts

@@ -11,6 +11,6 @@ declare type PointsBuffersProps = JSX.IntrinsicElements['points'] & {
     sizes?: Float32Array;
     stride?: 2 | 3;
 };
-export declare const PointsBuffer: React.ForwardRefExoticComponent<Pick<PointsBuffersProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "updateMorphTargets" | "colors" | "isPoints" | "positions" | "sizes" | "stride"> & React.RefAttributes<THREE.Points<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+export declare const PointsBuffer: React.ForwardRefExoticComponent<Pick<PointsBuffersProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "updateMorphTargets" | "colors" | "stride" | "isPoints" | "positions" | "sizes"> & React.RefAttributes<THREE.Points<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
 export declare const Points: React.ForwardRefExoticComponent<Pick<PointsInstancesProps | PointsBuffersProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onContextMenu" | "onDoubleClick" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOut" | "onWheel" | "onPointerMissed" | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "updateMorphTargets" | "isPoints"> & React.RefAttributes<THREE.Points<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
 export {};

package/core/SpotLight.d.ts

@@ -10,5 +10,5 @@ declare const SpotLight: React.ForwardRefExoticComponent<Pick<Omit<import("@reac
     radiusBottom?: number | undefined;
     opacity?: number | undefined;
     color?: string | number | undefined;
-}, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "distance" | "opacity" | "decay" | "target" | "angle" | "intensity" | "isLight" | "shadow" | "shadowCameraFov" | "shadowCameraLeft" | "shadowCameraRight" | "shadowCameraTop" | "shadowCameraBottom" | "shadowCameraNear" | "shadowCameraFar" | "shadowBias" | "shadowMapWidth" | "shadowMapHeight" | "power" | "depthBuffer" | "penumbra" | "isSpotLight" | "attenuation" | "anglePower" | "radiusTop" | "radiusBottom"> & React.RefAttributes<SpotLightImpl>>;
+}, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "distance" | "opacity" | "decay" | "target" | "angle" | "attenuation" | "intensity" | "isLight" | "shadow" | "shadowCameraFov" | "shadowCameraLeft" | "shadowCameraRight" | "shadowCameraTop" | "shadowCameraBottom" | "shadowCameraNear" | "shadowCameraFar" | "shadowBias" | "shadowMapWidth" | "shadowMapHeight" | "power" | "depthBuffer" | "penumbra" | "isSpotLight" | "anglePower" | "radiusTop" | "radiusBottom"> & React.RefAttributes<SpotLightImpl>>;
 export { SpotLight };

package/core/Trail.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),t=require("react"),r=require("three"),n=require("meshline");function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=o(t);const s={width:.2,length:1,decay:1,local:!1,stride:0,interval:1},u=(e,t=1)=>(e.set(e.subarray(t)),e.fill(-1/0,-t),e);function c(t,n){const{length:o,local:c,decay:l,interval:a,stride:f}={...s,...n},d=i.useRef(),[h]=i.useState((()=>new r.Vector3));i.useLayoutEffect((()=>{t&&(d.current=Float32Array.from({length:1e3*o*3},((e,r)=>t.position.getComponent(r%3))))}),[o,t]);const p=i.useRef(new r.Vector3),y=i.useRef(0);return e.useFrame((()=>{if(t&&d.current){if(0===y.current){let e;c?e=t.position:(t.getWorldPosition(h),e=h);const r=100*l;for(let t=0;t<r;t++)e.distanceTo(p.current)<f||(u(d.current,3),d.current.set(e.toArray(),d.current.length-3));p.current.copy(e)}y.current++,y.current=y.current%a}})),d}const l=i.forwardRef(((t,o)=>{const{children:u}=t,{width:l,length:a,decay:f,local:d,stride:h,interval:p}={...s,...t},{color:y="hotpink",attenuation:g,target:m}=t,v=e.useThree((e=>e.size)),b=i.useRef(null),[w,M]=i.useState(null),j=c(w,{length:a,decay:f,local:d,stride:h,interval:p});i.useEffect((()=>{const e=(null==m?void 0:m.current)||b.current.children.find((e=>e instanceof r.Object3D));e&&M(e)}),[j,m]);const O=i.useMemo((()=>new n.MeshLine),[]),E=i.useMemo((()=>{var e;const t=new n.MeshLineMaterial({lineWidth:.1*l,color:y,sizeAttenuation:1,resolution:new r.Vector2(v.width,v.height)});let o;if(Array.isArray(u))o=u.find((e=>{const t=e;return"string"==typeof t.type&&"meshLineMaterial"===t.type}));else{const e=u;"string"==typeof e.type&&"meshLineMaterial"===e.type&&(o=e)}return"object"==typeof(null==(e=o)?void 0:e.props)&&t.setValues(o.props),t}),[l,y,v,u]);return i.useEffect((()=>{E.uniforms.resolution.value.set(v.width,v.height)}),[v]),e.useFrame((()=>{j.current&&O.setPoints(j.current,g)})),i.createElement("group",null,i.createElement("mesh",{ref:o,geometry:O,material:E}),i.createElement("group",{ref:b},u))}));exports.Trail=l,exports.useTrail=c;

package/core/Trail.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ColorRepresentation, Object3D } from 'three';
+import { MeshLine } from 'meshline';
+declare type Settings = {
+    width: number;
+    length: number;
+    decay: number;
+    local: boolean;
+    stride: number;
+    interval: number;
+};
+export declare function useTrail(target: Object3D, settings: Partial<Settings>): React.MutableRefObject<Float32Array | undefined>;
+export declare const Trail: React.ForwardRefExoticComponent<{
+    color?: ColorRepresentation | undefined;
+    attenuation?: ((width: number) => number) | undefined;
+    target?: React.MutableRefObject<Object3D<import("three").Event>> | undefined;
+} & Partial<Settings> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<MeshLine>>;
+export {};

package/core/Trail.js

@@ -0,0 +1,158 @@
+import { useFrame, useThree } from '@react-three/fiber';
+import * as React from 'react';
+import { Vector3, Object3D, Vector2 } from 'three';
+import { MeshLine, MeshLineMaterial } from 'meshline';
+
+const defaults = {
+  width: 0.2,
+  length: 1,
+  decay: 1,
+  local: false,
+  stride: 0,
+  interval: 1
+};
+
+const shiftLeft = (collection, steps = 1) => {
+  collection.set(collection.subarray(steps));
+  collection.fill(-Infinity, -steps);
+  return collection;
+};
+
+function useTrail(target, settings) {
+  const {
+    length,
+    local,
+    decay,
+    interval,
+    stride
+  } = { ...defaults,
+    ...settings
+  };
+  const points = React.useRef();
+  const [worldPosition] = React.useState(() => new Vector3());
+  React.useLayoutEffect(() => {
+    if (target) {
+      points.current = Float32Array.from({
+        length: length * 1000 * 3
+      }, (_, i) => target.position.getComponent(i % 3));
+    }
+  }, [length, target]);
+  const prevPosition = React.useRef(new Vector3());
+  const frameCount = React.useRef(0);
+  useFrame(() => {
+    if (!target) return;
+    if (!points.current) return;
+
+    if (frameCount.current === 0) {
+      let newPosition;
+
+      if (local) {
+        newPosition = target.position;
+      } else {
+        target.getWorldPosition(worldPosition);
+        newPosition = worldPosition;
+      }
+
+      const steps = 100 * decay;
+
+      for (let i = 0; i < steps; i++) {
+        if (newPosition.distanceTo(prevPosition.current) < stride) continue;
+        shiftLeft(points.current, 3);
+        points.current.set(newPosition.toArray(), points.current.length - 3);
+      }
+
+      prevPosition.current.copy(newPosition);
+    }
+
+    frameCount.current++;
+    frameCount.current = frameCount.current % interval;
+  });
+  return points;
+}
+const Trail = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
+  const {
+    children
+  } = props;
+  const {
+    width,
+    length,
+    decay,
+    local,
+    stride,
+    interval
+  } = { ...defaults,
+    ...props
+  };
+  const {
+    color = 'hotpink',
+    attenuation,
+    target
+  } = props;
+  const size = useThree(s => s.size);
+  const ref = React.useRef(null);
+  const [anchor, setAnchor] = React.useState(null);
+  const points = useTrail(anchor, {
+    length,
+    decay,
+    local,
+    stride,
+    interval
+  });
+  React.useEffect(() => {
+    const t = (target == null ? void 0 : target.current) || ref.current.children.find(o => {
+      return o instanceof Object3D;
+    });
+
+    if (t) {
+      setAnchor(t);
+    }
+  }, [points, target]);
+  const geo = React.useMemo(() => new MeshLine(), []);
+  const mat = React.useMemo(() => {
+    var _matOverride;
+
+    const m = new MeshLineMaterial({
+      lineWidth: 0.1 * width,
+      color: color,
+      sizeAttenuation: 1,
+      resolution: new Vector2(size.width, size.height)
+    }); // Get and apply first <meshLineMaterial /> from children
+
+    let matOverride;
+
+    if (Array.isArray(children)) {
+      matOverride = children.find(child => {
+        const c = child;
+        return typeof c.type === 'string' && c.type === 'meshLineMaterial';
+      });
+    } else {
+      const c = children;
+
+      if (typeof c.type === 'string' && c.type === 'meshLineMaterial') {
+        matOverride = c;
+      }
+    }
+
+    if (typeof ((_matOverride = matOverride) == null ? void 0 : _matOverride.props) === 'object') {
+      m.setValues(matOverride.props);
+    }
+
+    return m;
+  }, [width, color, size, children]);
+  React.useEffect(() => {
+    mat.uniforms.resolution.value.set(size.width, size.height);
+  }, [size]);
+  useFrame(() => {
+    if (!points.current) return;
+    geo.setPoints(points.current, attenuation);
+  });
+  return /*#__PURE__*/React.createElement("group", null, /*#__PURE__*/React.createElement("mesh", {
+    ref: forwardRef,
+    geometry: geo,
+    material: mat
+  }), /*#__PURE__*/React.createElement("group", {
+    ref: ref
+  }, children));
+});
+
+export { Trail, useTrail };

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("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Effects.cjs.js"),a=require("./GradientTexture.cjs.js"),n=require("./Image.cjs.js"),j=require("./Edges.cjs.js"),c=require("./OrthographicCamera.cjs.js"),p=require("./PerspectiveCamera.cjs.js"),x=require("./CubeCamera.cjs.js"),l=require("./DeviceOrientationControls.cjs.js"),d=require("./FlyControls.cjs.js"),q=require("./MapControls.cjs.js"),C=require("./OrbitControls.cjs.js"),h=require("./TrackballControls.cjs.js"),m=require("./ArcballControls.cjs.js"),B=require("./TransformControls.cjs.js"),P=require("./PointerLockControls.cjs.js"),b=require("./FirstPersonControls.cjs.js"),M=require("./GizmoHelper.cjs.js"),S=require("./GizmoViewcube.cjs.js"),f=require("./GizmoViewport.cjs.js"),g=require("./useCubeTexture.cjs.js"),T=require("./useFBX.cjs.js"),v=require("./useGLTF.cjs.js"),L=require("./useProgress.cjs.js"),E=require("./useTexture.cjs.js"),A=require("./useKTX2.cjs.js"),G=require("./Stats.cjs.js"),k=require("./useDepthBuffer.cjs.js"),D=require("./useAspect.cjs.js"),F=require("./useCamera.cjs.js"),w=require("./useDetectGPU.cjs.js"),z=require("./useHelper.cjs.js"),I=require("./useBVH.cjs.js"),O=require("./useContextBridge.cjs.js"),R=require("./useAnimations.cjs.js"),y=require("./useFBO.cjs.js"),H=require("./useIntersect.cjs.js"),V=require("./useBoxProjectedEnv.cjs.js"),Q=require("./CurveModifier.cjs.js"),X=require("./MeshDistortMaterial.cjs.js"),K=require("./MeshWobbleMaterial.cjs.js"),W=require("./MeshReflectorMaterial.cjs.js"),N=require("./PointMaterial.cjs.js"),U=require("./shaderMaterial.cjs.js"),_=require("./softShadows.cjs.js"),J=require("./shapes.cjs.js"),Y=require("./RoundedBox.cjs.js"),Z=require("./ScreenQuad.cjs.js"),$=require("./Center.cjs.js"),ee=require("./Bounds.cjs.js"),re=require("./CameraShake.cjs.js"),se=require("./Float.cjs.js"),te=require("./Stage.cjs.js"),oe=require("./Backdrop.cjs.js"),ie=require("./Shadow.cjs.js"),ue=require("./ContactShadows.cjs.js"),ae=require("./Reflector.cjs.js"),ne=require("./SpotLight.cjs.js"),je=require("./Environment.cjs.js"),ce=require("./Lightformer.cjs.js"),pe=require("./Sky.cjs.js"),xe=require("./Stars.cjs.js"),le=require("./Cloud.cjs.js"),de=require("./useMatcapTexture.cjs.js"),qe=require("./useNormalTexture.cjs.js"),Ce=require("./Points.cjs.js"),he=require("./Instances.cjs.js"),me=require("./Segments.cjs.js"),Be=require("./Detailed.cjs.js"),Pe=require("./Preload.cjs.js"),be=require("./BakeShadows.cjs.js"),Me=require("./meshBounds.cjs.js"),Se=require("./AdaptiveDpr.cjs.js"),fe=require("./AdaptiveEvents.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("lodash.omit"),require("lodash.pick"),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("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.Line=t.Line,exports.PositionalAudio=o.PositionalAudio,exports.Text=i.Text,exports.Effects=u.Effects,exports.isWebGL2Available=u.isWebGL2Available,exports.GradientTexture=a.GradientTexture,exports.Image=n.Image,exports.Edges=j.Edges,exports.OrthographicCamera=c.OrthographicCamera,exports.PerspectiveCamera=p.PerspectiveCamera,exports.CubeCamera=x.CubeCamera,exports.DeviceOrientationControls=l.DeviceOrientationControls,exports.FlyControls=d.FlyControls,exports.MapControls=q.MapControls,exports.OrbitControls=C.OrbitControls,exports.TrackballControls=h.TrackballControls,exports.ArcballControls=m.ArcballControls,exports.TransformControls=B.TransformControls,exports.PointerLockControls=P.PointerLockControls,exports.FirstPersonControls=b.FirstPersonControls,exports.GizmoHelper=M.GizmoHelper,exports.useGizmoContext=M.useGizmoContext,exports.GizmoViewcube=S.GizmoViewcube,exports.GizmoViewport=f.GizmoViewport,exports.useCubeTexture=g.useCubeTexture,exports.useFBX=T.useFBX,exports.useGLTF=v.useGLTF,exports.useProgress=L.useProgress,exports.IsObject=E.IsObject,exports.useTexture=E.useTexture,exports.useKTX2=A.useKTX2,exports.Stats=G.Stats,exports.useDepthBuffer=k.useDepthBuffer,exports.useAspect=D.useAspect,exports.useCamera=F.useCamera,exports.useDetectGPU=w.useDetectGPU,exports.useHelper=z.useHelper,exports.useBVH=I.useBVH,exports.useContextBridge=O.useContextBridge,exports.useAnimations=R.useAnimations,exports.useFBO=y.useFBO,exports.useIntersect=H.useIntersect,exports.useBoxProjectedEnv=V.useBoxProjectedEnv,exports.CurveModifier=Q.CurveModifier,exports.MeshDistortMaterial=X.MeshDistortMaterial,exports.MeshWobbleMaterial=K.MeshWobbleMaterial,exports.MeshReflectorMaterial=W.MeshReflectorMaterial,exports.PointMaterial=N.PointMaterial,exports.PointMaterialImpl=N.PointMaterialImpl,exports.shaderMaterial=U.shaderMaterial,exports.softShadows=_.softShadows,exports.Box=J.Box,exports.Circle=J.Circle,exports.Cone=J.Cone,exports.Cylinder=J.Cylinder,exports.Dodecahedron=J.Dodecahedron,exports.Extrude=J.Extrude,exports.Icosahedron=J.Icosahedron,exports.Lathe=J.Lathe,exports.Octahedron=J.Octahedron,exports.Plane=J.Plane,exports.Polyhedron=J.Polyhedron,exports.Ring=J.Ring,exports.Sphere=J.Sphere,exports.Tetrahedron=J.Tetrahedron,exports.Torus=J.Torus,exports.TorusKnot=J.TorusKnot,exports.Tube=J.Tube,exports.RoundedBox=Y.RoundedBox,exports.ScreenQuad=Z.ScreenQuad,exports.Center=$.Center,exports.Bounds=ee.Bounds,exports.useBounds=ee.useBounds,exports.CameraShake=re.CameraShake,exports.Float=se.Float,exports.Stage=te.Stage,exports.Backdrop=oe.Backdrop,exports.Shadow=ie.Shadow,exports.ContactShadows=ue.ContactShadows,exports.Reflector=ae.Reflector,exports.SpotLight=ne.SpotLight,exports.Environment=je.Environment,exports.EnvironmentCube=je.EnvironmentCube,exports.EnvironmentMap=je.EnvironmentMap,exports.EnvironmentPortal=je.EnvironmentPortal,exports.Lightformer=ce.Lightformer,exports.Sky=pe.Sky,exports.calcPosFromAngles=pe.calcPosFromAngles,exports.Stars=xe.Stars,exports.Cloud=le.Cloud,exports.useMatcapTexture=de.useMatcapTexture,exports.useNormalTexture=qe.useNormalTexture,exports.Point=Ce.Point,exports.Points=Ce.Points,exports.PointsBuffer=Ce.PointsBuffer,exports.Instance=he.Instance,exports.Instances=he.Instances,exports.Merged=he.Merged,exports.Segment=me.Segment,exports.Segments=me.Segments,exports.Detailed=Be.Detailed,exports.Preload=Pe.Preload,exports.BakeShadows=be.BakeShadows,exports.meshBounds=Me.meshBounds,exports.AdaptiveDpr=Se.AdaptiveDpr,exports.AdaptiveEvents=fe.AdaptiveEvents;
+"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("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Effects.cjs.js"),a=require("./GradientTexture.cjs.js"),n=require("./Image.cjs.js"),j=require("./Edges.cjs.js"),c=require("./Trail.cjs.js"),p=require("./OrthographicCamera.cjs.js"),x=require("./PerspectiveCamera.cjs.js"),l=require("./CubeCamera.cjs.js"),q=require("./DeviceOrientationControls.cjs.js"),d=require("./FlyControls.cjs.js"),C=require("./MapControls.cjs.js"),h=require("./OrbitControls.cjs.js"),m=require("./TrackballControls.cjs.js"),B=require("./ArcballControls.cjs.js"),P=require("./TransformControls.cjs.js"),b=require("./PointerLockControls.cjs.js"),M=require("./FirstPersonControls.cjs.js"),T=require("./GizmoHelper.cjs.js"),S=require("./GizmoViewcube.cjs.js"),f=require("./GizmoViewport.cjs.js"),g=require("./useCubeTexture.cjs.js"),v=require("./useFBX.cjs.js"),L=require("./useGLTF.cjs.js"),E=require("./useProgress.cjs.js"),A=require("./useTexture.cjs.js"),G=require("./useKTX2.cjs.js"),k=require("./Stats.cjs.js"),D=require("./useDepthBuffer.cjs.js"),F=require("./useAspect.cjs.js"),w=require("./useCamera.cjs.js"),z=require("./useDetectGPU.cjs.js"),I=require("./useHelper.cjs.js"),O=require("./useBVH.cjs.js"),R=require("./useContextBridge.cjs.js"),y=require("./useAnimations.cjs.js"),H=require("./useFBO.cjs.js"),V=require("./useIntersect.cjs.js"),Q=require("./useBoxProjectedEnv.cjs.js"),X=require("./CurveModifier.cjs.js"),K=require("./MeshDistortMaterial.cjs.js"),W=require("./MeshWobbleMaterial.cjs.js"),N=require("./MeshReflectorMaterial.cjs.js"),U=require("./PointMaterial.cjs.js"),_=require("./shaderMaterial.cjs.js"),J=require("./softShadows.cjs.js"),Y=require("./shapes.cjs.js"),Z=require("./RoundedBox.cjs.js"),$=require("./ScreenQuad.cjs.js"),ee=require("./Center.cjs.js"),re=require("./Bounds.cjs.js"),se=require("./CameraShake.cjs.js"),te=require("./Float.cjs.js"),oe=require("./Stage.cjs.js"),ie=require("./Backdrop.cjs.js"),ue=require("./Shadow.cjs.js"),ae=require("./ContactShadows.cjs.js"),ne=require("./Reflector.cjs.js"),je=require("./SpotLight.cjs.js"),ce=require("./Environment.cjs.js"),pe=require("./Lightformer.cjs.js"),xe=require("./Sky.cjs.js"),le=require("./Stars.cjs.js"),qe=require("./Cloud.cjs.js"),de=require("./useMatcapTexture.cjs.js"),Ce=require("./useNormalTexture.cjs.js"),he=require("./Points.cjs.js"),me=require("./Instances.cjs.js"),Be=require("./Segments.cjs.js"),Pe=require("./Detailed.cjs.js"),be=require("./Preload.cjs.js"),Me=require("./BakeShadows.cjs.js"),Te=require("./meshBounds.cjs.js"),Se=require("./AdaptiveDpr.cjs.js"),fe=require("./AdaptiveEvents.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.omit"),require("lodash.pick"),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("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.Line=t.Line,exports.PositionalAudio=o.PositionalAudio,exports.Text=i.Text,exports.Effects=u.Effects,exports.isWebGL2Available=u.isWebGL2Available,exports.GradientTexture=a.GradientTexture,exports.Image=n.Image,exports.Edges=j.Edges,exports.Trail=c.Trail,exports.useTrail=c.useTrail,exports.OrthographicCamera=p.OrthographicCamera,exports.PerspectiveCamera=x.PerspectiveCamera,exports.CubeCamera=l.CubeCamera,exports.DeviceOrientationControls=q.DeviceOrientationControls,exports.FlyControls=d.FlyControls,exports.MapControls=C.MapControls,exports.OrbitControls=h.OrbitControls,exports.TrackballControls=m.TrackballControls,exports.ArcballControls=B.ArcballControls,exports.TransformControls=P.TransformControls,exports.PointerLockControls=b.PointerLockControls,exports.FirstPersonControls=M.FirstPersonControls,exports.GizmoHelper=T.GizmoHelper,exports.useGizmoContext=T.useGizmoContext,exports.GizmoViewcube=S.GizmoViewcube,exports.GizmoViewport=f.GizmoViewport,exports.useCubeTexture=g.useCubeTexture,exports.useFBX=v.useFBX,exports.useGLTF=L.useGLTF,exports.useProgress=E.useProgress,exports.IsObject=A.IsObject,exports.useTexture=A.useTexture,exports.useKTX2=G.useKTX2,exports.Stats=k.Stats,exports.useDepthBuffer=D.useDepthBuffer,exports.useAspect=F.useAspect,exports.useCamera=w.useCamera,exports.useDetectGPU=z.useDetectGPU,exports.useHelper=I.useHelper,exports.useBVH=O.useBVH,exports.useContextBridge=R.useContextBridge,exports.useAnimations=y.useAnimations,exports.useFBO=H.useFBO,exports.useIntersect=V.useIntersect,exports.useBoxProjectedEnv=Q.useBoxProjectedEnv,exports.CurveModifier=X.CurveModifier,exports.MeshDistortMaterial=K.MeshDistortMaterial,exports.MeshWobbleMaterial=W.MeshWobbleMaterial,exports.MeshReflectorMaterial=N.MeshReflectorMaterial,exports.PointMaterial=U.PointMaterial,exports.PointMaterialImpl=U.PointMaterialImpl,exports.shaderMaterial=_.shaderMaterial,exports.softShadows=J.softShadows,exports.Box=Y.Box,exports.Circle=Y.Circle,exports.Cone=Y.Cone,exports.Cylinder=Y.Cylinder,exports.Dodecahedron=Y.Dodecahedron,exports.Extrude=Y.Extrude,exports.Icosahedron=Y.Icosahedron,exports.Lathe=Y.Lathe,exports.Octahedron=Y.Octahedron,exports.Plane=Y.Plane,exports.Polyhedron=Y.Polyhedron,exports.Ring=Y.Ring,exports.Sphere=Y.Sphere,exports.Tetrahedron=Y.Tetrahedron,exports.Torus=Y.Torus,exports.TorusKnot=Y.TorusKnot,exports.Tube=Y.Tube,exports.RoundedBox=Z.RoundedBox,exports.ScreenQuad=$.ScreenQuad,exports.Center=ee.Center,exports.Bounds=re.Bounds,exports.useBounds=re.useBounds,exports.CameraShake=se.CameraShake,exports.Float=te.Float,exports.Stage=oe.Stage,exports.Backdrop=ie.Backdrop,exports.Shadow=ue.Shadow,exports.ContactShadows=ae.ContactShadows,exports.Reflector=ne.Reflector,exports.SpotLight=je.SpotLight,exports.Environment=ce.Environment,exports.EnvironmentCube=ce.EnvironmentCube,exports.EnvironmentMap=ce.EnvironmentMap,exports.EnvironmentPortal=ce.EnvironmentPortal,exports.Lightformer=pe.Lightformer,exports.Sky=xe.Sky,exports.calcPosFromAngles=xe.calcPosFromAngles,exports.Stars=le.Stars,exports.Cloud=qe.Cloud,exports.useMatcapTexture=de.useMatcapTexture,exports.useNormalTexture=Ce.useNormalTexture,exports.Point=he.Point,exports.Points=he.Points,exports.PointsBuffer=he.PointsBuffer,exports.Instance=me.Instance,exports.Instances=me.Instances,exports.Merged=me.Merged,exports.Segment=Be.Segment,exports.Segments=Be.Segments,exports.Detailed=Pe.Detailed,exports.Preload=be.Preload,exports.BakeShadows=Me.BakeShadows,exports.meshBounds=Te.meshBounds,exports.AdaptiveDpr=Se.AdaptiveDpr,exports.AdaptiveEvents=fe.AdaptiveEvents;

package/core/index.d.ts

@@ -8,6 +8,7 @@ export * from './Effects';
 export * from './GradientTexture';
 export * from './Image';
 export * from './Edges';
+export * from './Trail';
 export * from './OrthographicCamera';
 export * from './PerspectiveCamera';
 export * from './CubeCamera';

package/core/index.js

@@ -8,6 +8,7 @@ export { Effects, isWebGL2Available } from './Effects.js';
 export { GradientTexture } from './GradientTexture.js';
 export { Image } from './Image.js';
 export { Edges } from './Edges.js';
+export { Trail, useTrail } from './Trail.js';
 export { OrthographicCamera } from './OrthographicCamera.js';
 export { PerspectiveCamera } from './PerspectiveCamera.js';
 export { CubeCamera } from './CubeCamera.js';
@@ -85,6 +86,7 @@ import 'three';
 import 'three-stdlib';
 import 'troika-three-text';
 import 'suspend-react';
+import 'meshline';
 import 'lodash.omit';
 import 'lodash.pick';
 import 'zustand';