@react-three/drei 8.16.7 → 8.18.0

package/README.md

@@ -65,6 +65,8 @@ 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="#clone">Clone</a></li>
           <li><a href="#useanimations">useAnimations</a></li>
         </ul>
         <li><a href="#shaders">Shaders</a></li>
@@ -100,6 +102,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 +644,62 @@ 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/)
+
+#### Clone
+
+Declarative abstraction around THREE.Object3D.clone. This is useful when you want to create a shallow copy of an existing fragment (and Object3D, Groups, etc) into your scene, for instance a group from a loaded GLTF. This clone is now re-usable, but it will still refer to the original geometries and materials. You can also deeply clone, down to geometries and materials using the `deep` prop.
+
+```jsx
+<Clone object={nodes.table} />
+```
+
+You can dynamically insert objects, these will apply to anything that isn't a group or a plain object3d (meshes, lines, etc):
+
+```jsx
+const { nodes } = useGLTF(url)
+return (
+  <Clone object={nodes.table}>
+    <meshStandardMaterial color="green" />
+  </Clone>
+```
+
+Or make inserts conditional:
+
+```jsx
+<Clone object={nodes.table}>
+  {(object) => (object.name === 'table' ? <meshStandardMaterial color="green" /> : null)}
+</Clone>
+```
+
 #### useAnimations
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-useanimations--use-animations-st)
@@ -1137,6 +1196,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

package/core/Clone.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("lodash.pick");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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 o=n(e),c=a(t),l=n(r);exports.Clone=function e({object:t,deep:r=!1,children:n,keys:a=["near","far","color","distance","decay","penumbra","angle","intensity","skeleton","visible","castShadow","receiveShadow","morphTargetDictionary","morphTargetInfluences","name","geometry","material","position","rotation","scale","up","userData"],...u}){const i=l.default(t,a);return c.createElement("group",u,c.createElement("group",i,null==t?void 0:t.children.map((t=>{let u=l.default(t,a);r&&(u.geometry&&(u.geometry=u.geometry.clone()),u.material&&(u.material=u.material.clone()));let i=t.type[0].toLowerCase()+t.type.slice(1);return"group"!==i&&"object3D"!==i||(i=e,u.object=t),c.createElement(i,o.default({key:t.uuid},u),"function"==typeof n?n(t):n)}))))};

package/core/Clone.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare function Clone({ object, deep, children, keys, ...props }: {
+    [x: string]: any;
+    object: any;
+    deep?: boolean | undefined;
+    children: any;
+    keys?: string[] | undefined;
+}): JSX.Element;

package/core/Clone.js

@@ -0,0 +1,34 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import pick from 'lodash.pick';
+
+function Clone({
+  object,
+  deep = false,
+  children,
+  keys = ['near', 'far', 'color', 'distance', 'decay', 'penumbra', 'angle', 'intensity', 'skeleton', 'visible', 'castShadow', 'receiveShadow', 'morphTargetDictionary', 'morphTargetInfluences', 'name', 'geometry', 'material', 'position', 'rotation', 'scale', 'up', 'userData'],
+  ...props
+}) {
+  const spread = pick(object, keys);
+  return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement("group", spread, object == null ? void 0 : object.children.map(child => {
+    let spread = pick(child, keys);
+
+    if (deep) {
+      if (spread.geometry) spread.geometry = spread.geometry.clone();
+      if (spread.material) spread.material = spread.material.clone();
+    }
+
+    let Element = child.type[0].toLowerCase() + child.type.slice(1);
+
+    if (Element === 'group' || Element === 'object3D') {
+      Element = Clone;
+      spread.object = child;
+    }
+
+    return /*#__PURE__*/React.createElement(Element, _extends({
+      key: child.uuid
+    }, spread), typeof children === 'function' ? children(child) : children);
+  })));
+}
+
+export { Clone };

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" | "penumbra" | "intensity" | "isLight" | "shadow" | "shadowCameraFov" | "shadowCameraLeft" | "shadowCameraRight" | "shadowCameraTop" | "shadowCameraBottom" | "shadowCameraNear" | "shadowCameraFar" | "shadowBias" | "shadowMapWidth" | "shadowMapHeight" | "power" | "depthBuffer" | "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("./Clone.cjs.js"),l=require("./OrthographicCamera.cjs.js"),x=require("./PerspectiveCamera.cjs.js"),q=require("./CubeCamera.cjs.js"),d=require("./DeviceOrientationControls.cjs.js"),C=require("./FlyControls.cjs.js"),h=require("./MapControls.cjs.js"),m=require("./OrbitControls.cjs.js"),B=require("./TrackballControls.cjs.js"),P=require("./ArcballControls.cjs.js"),b=require("./TransformControls.cjs.js"),M=require("./PointerLockControls.cjs.js"),T=require("./FirstPersonControls.cjs.js"),S=require("./GizmoHelper.cjs.js"),f=require("./GizmoViewcube.cjs.js"),g=require("./GizmoViewport.cjs.js"),v=require("./useCubeTexture.cjs.js"),L=require("./useFBX.cjs.js"),E=require("./useGLTF.cjs.js"),A=require("./useProgress.cjs.js"),G=require("./useTexture.cjs.js"),k=require("./useKTX2.cjs.js"),D=require("./Stats.cjs.js"),F=require("./useDepthBuffer.cjs.js"),w=require("./useAspect.cjs.js"),z=require("./useCamera.cjs.js"),I=require("./useDetectGPU.cjs.js"),O=require("./useHelper.cjs.js"),R=require("./useBVH.cjs.js"),y=require("./useContextBridge.cjs.js"),H=require("./useAnimations.cjs.js"),V=require("./useFBO.cjs.js"),Q=require("./useIntersect.cjs.js"),X=require("./useBoxProjectedEnv.cjs.js"),K=require("./CurveModifier.cjs.js"),W=require("./MeshDistortMaterial.cjs.js"),N=require("./MeshWobbleMaterial.cjs.js"),U=require("./MeshReflectorMaterial.cjs.js"),_=require("./PointMaterial.cjs.js"),J=require("./shaderMaterial.cjs.js"),Y=require("./softShadows.cjs.js"),Z=require("./shapes.cjs.js"),$=require("./RoundedBox.cjs.js"),ee=require("./ScreenQuad.cjs.js"),re=require("./Center.cjs.js"),se=require("./Bounds.cjs.js"),te=require("./CameraShake.cjs.js"),oe=require("./Float.cjs.js"),ie=require("./Stage.cjs.js"),ue=require("./Backdrop.cjs.js"),ae=require("./Shadow.cjs.js"),ne=require("./ContactShadows.cjs.js"),je=require("./Reflector.cjs.js"),ce=require("./SpotLight.cjs.js"),pe=require("./Environment.cjs.js"),le=require("./Lightformer.cjs.js"),xe=require("./Sky.cjs.js"),qe=require("./Stars.cjs.js"),de=require("./Cloud.cjs.js"),Ce=require("./useMatcapTexture.cjs.js"),he=require("./useNormalTexture.cjs.js"),me=require("./Points.cjs.js"),Be=require("./Instances.cjs.js"),Pe=require("./Segments.cjs.js"),be=require("./Detailed.cjs.js"),Me=require("./Preload.cjs.js"),Te=require("./BakeShadows.cjs.js"),Se=require("./meshBounds.cjs.js"),fe=require("./AdaptiveDpr.cjs.js"),ge=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.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("../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.Clone=p.Clone,exports.OrthographicCamera=l.OrthographicCamera,exports.PerspectiveCamera=x.PerspectiveCamera,exports.CubeCamera=q.CubeCamera,exports.DeviceOrientationControls=d.DeviceOrientationControls,exports.FlyControls=C.FlyControls,exports.MapControls=h.MapControls,exports.OrbitControls=m.OrbitControls,exports.TrackballControls=B.TrackballControls,exports.ArcballControls=P.ArcballControls,exports.TransformControls=b.TransformControls,exports.PointerLockControls=M.PointerLockControls,exports.FirstPersonControls=T.FirstPersonControls,exports.GizmoHelper=S.GizmoHelper,exports.useGizmoContext=S.useGizmoContext,exports.GizmoViewcube=f.GizmoViewcube,exports.GizmoViewport=g.GizmoViewport,exports.useCubeTexture=v.useCubeTexture,exports.useFBX=L.useFBX,exports.useGLTF=E.useGLTF,exports.useProgress=A.useProgress,exports.IsObject=G.IsObject,exports.useTexture=G.useTexture,exports.useKTX2=k.useKTX2,exports.Stats=D.Stats,exports.useDepthBuffer=F.useDepthBuffer,exports.useAspect=w.useAspect,exports.useCamera=z.useCamera,exports.useDetectGPU=I.useDetectGPU,exports.useHelper=O.useHelper,exports.useBVH=R.useBVH,exports.useContextBridge=y.useContextBridge,exports.useAnimations=H.useAnimations,exports.useFBO=V.useFBO,exports.useIntersect=Q.useIntersect,exports.useBoxProjectedEnv=X.useBoxProjectedEnv,exports.CurveModifier=K.CurveModifier,exports.MeshDistortMaterial=W.MeshDistortMaterial,exports.MeshWobbleMaterial=N.MeshWobbleMaterial,exports.MeshReflectorMaterial=U.MeshReflectorMaterial,exports.PointMaterial=_.PointMaterial,exports.PointMaterialImpl=_.PointMaterialImpl,exports.shaderMaterial=J.shaderMaterial,exports.softShadows=Y.softShadows,exports.Box=Z.Box,exports.Circle=Z.Circle,exports.Cone=Z.Cone,exports.Cylinder=Z.Cylinder,exports.Dodecahedron=Z.Dodecahedron,exports.Extrude=Z.Extrude,exports.Icosahedron=Z.Icosahedron,exports.Lathe=Z.Lathe,exports.Octahedron=Z.Octahedron,exports.Plane=Z.Plane,exports.Polyhedron=Z.Polyhedron,exports.Ring=Z.Ring,exports.Sphere=Z.Sphere,exports.Tetrahedron=Z.Tetrahedron,exports.Torus=Z.Torus,exports.TorusKnot=Z.TorusKnot,exports.Tube=Z.Tube,exports.RoundedBox=$.RoundedBox,exports.ScreenQuad=ee.ScreenQuad,exports.Center=re.Center,exports.Bounds=se.Bounds,exports.useBounds=se.useBounds,exports.CameraShake=te.CameraShake,exports.Float=oe.Float,exports.Stage=ie.Stage,exports.Backdrop=ue.Backdrop,exports.Shadow=ae.Shadow,exports.ContactShadows=ne.ContactShadows,exports.Reflector=je.Reflector,exports.SpotLight=ce.SpotLight,exports.Environment=pe.Environment,exports.EnvironmentCube=pe.EnvironmentCube,exports.EnvironmentMap=pe.EnvironmentMap,exports.EnvironmentPortal=pe.EnvironmentPortal,exports.Lightformer=le.Lightformer,exports.Sky=xe.Sky,exports.calcPosFromAngles=xe.calcPosFromAngles,exports.Stars=qe.Stars,exports.Cloud=de.Cloud,exports.useMatcapTexture=Ce.useMatcapTexture,exports.useNormalTexture=he.useNormalTexture,exports.Point=me.Point,exports.Points=me.Points,exports.PointsBuffer=me.PointsBuffer,exports.Instance=Be.Instance,exports.Instances=Be.Instances,exports.Merged=Be.Merged,exports.Segment=Pe.Segment,exports.Segments=Pe.Segments,exports.Detailed=be.Detailed,exports.Preload=Me.Preload,exports.BakeShadows=Te.BakeShadows,exports.meshBounds=Se.meshBounds,exports.AdaptiveDpr=fe.AdaptiveDpr,exports.AdaptiveEvents=ge.AdaptiveEvents;

package/core/index.d.ts

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

package/core/index.js

@@ -8,6 +8,8 @@ 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 { Clone } from './Clone.js';
 export { OrthographicCamera } from './OrthographicCamera.js';
 export { PerspectiveCamera } from './PerspectiveCamera.js';
 export { CubeCamera } from './CubeCamera.js';
@@ -85,8 +87,9 @@ import 'three';
 import 'three-stdlib';
 import 'troika-three-text';
 import 'suspend-react';
-import 'lodash.omit';
+import 'meshline';
 import 'lodash.pick';
+import 'lodash.omit';
 import 'zustand';
 import 'stats.js';
 import '../helpers/useEffectfulState.js';