@react-three/drei 9.0.0-beta.1 → 9.0.0-beta.4

package/core/Sampler.js

@@ -0,0 +1,65 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { MeshSurfaceSampler } from 'three-stdlib';
+import { Vector3, Color, Object3D } from 'three';
+
+const Sampler = ({
+  children,
+  weight,
+  transform,
+  instances,
+  mesh,
+  ...props
+}) => {
+  const group = React.useRef(null);
+  const instancedRef = React.useRef(null);
+  const meshToSampleRef = React.useRef(null);
+  React.useEffect(() => {
+    var _instances$current, _mesh$current;
+
+    instancedRef.current = (_instances$current = instances == null ? void 0 : instances.current) !== null && _instances$current !== void 0 ? _instances$current : group.current.children.find(c => c.hasOwnProperty('instanceMatrix'));
+    meshToSampleRef.current = (_mesh$current = mesh == null ? void 0 : mesh.current) !== null && _mesh$current !== void 0 ? _mesh$current : group.current.children.find(c => c.type === 'Mesh');
+  }, [children, mesh == null ? void 0 : mesh.current, instances == null ? void 0 : instances.current]);
+  React.useEffect(() => {
+    if (typeof meshToSampleRef.current === 'undefined') return;
+    if (typeof instancedRef.current === 'undefined') return;
+    const sampler = new MeshSurfaceSampler(meshToSampleRef.current);
+
+    if (weight) {
+      sampler.setWeightAttribute(weight);
+    }
+
+    sampler.build();
+    const position = new Vector3();
+    const normal = new Vector3();
+    const color = new Color();
+    const dummy = new Object3D();
+    meshToSampleRef.current.updateMatrixWorld(true);
+
+    for (let i = 0; i < instancedRef.current.count; i++) {
+      sampler.sample(position, normal, color);
+
+      if (typeof transform === 'function') {
+        transform({
+          dummy,
+          sampledMesh: meshToSampleRef.current,
+          position,
+          normal,
+          color
+        }, i);
+      } else {
+        dummy.position.copy(position);
+      }
+
+      dummy.updateMatrix();
+      instancedRef.current.setMatrixAt(i, dummy.matrix);
+    }
+
+    instancedRef.current.instanceMatrix.needsUpdate = true;
+  }, [children, mesh == null ? void 0 : mesh.current, instances == null ? void 0 : instances.current]);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: group
+  }, props), children);
+};
+
+export { Sampler };

package/core/Shadow.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Mesh, Color } from 'three';
-export declare const Shadow: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").Node<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>, typeof Mesh>, import("@react-three/fiber").NonFunctionKeys<{
+export declare const Shadow: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>, import("@react-three/fiber").NodeProps<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>, typeof Mesh>>>, import("@react-three/fiber").NonFunctionKeys<{
     position?: import("@react-three/fiber").Vector3 | undefined;
     up?: import("@react-three/fiber").Vector3 | undefined;
     scale?: import("@react-three/fiber").Vector3 | undefined;

package/core/SpotLight.d.ts

@@ -1,8 +1,24 @@
 import * as React from 'react';
 import { DepthTexture, SpotLight as SpotLightImpl } from 'three';
-declare const SpotLight: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").Object3DNode<SpotLightImpl, typeof SpotLightImpl>, "color" | undefined> & {
-    color?: import("@react-three/fiber").Color | undefined;
-} & {
+declare const SpotLight: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<SpotLightImpl>, import("@react-three/fiber").NodeProps<SpotLightImpl, typeof SpotLightImpl>>>, import("@react-three/fiber").NonFunctionKeys<{
+    position?: import("@react-three/fiber").Vector3 | undefined;
+    up?: import("@react-three/fiber").Vector3 | undefined;
+    scale?: import("@react-three/fiber").Vector3 | undefined;
+    rotation?: import("@react-three/fiber").Euler | undefined;
+    matrix?: import("@react-three/fiber").Matrix4 | undefined;
+    quaternion?: import("@react-three/fiber").Quaternion | undefined;
+    layers?: import("@react-three/fiber").Layers | undefined;
+    dispose?: (() => void) | null | undefined;
+}>> & {
+    position?: import("@react-three/fiber").Vector3 | undefined;
+    up?: import("@react-three/fiber").Vector3 | undefined;
+    scale?: import("@react-three/fiber").Vector3 | undefined;
+    rotation?: import("@react-three/fiber").Euler | undefined;
+    matrix?: import("@react-three/fiber").Matrix4 | undefined;
+    quaternion?: import("@react-three/fiber").Quaternion | undefined;
+    layers?: import("@react-three/fiber").Layers | undefined;
+    dispose?: (() => void) | null | undefined;
+} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     depthBuffer?: DepthTexture | undefined;
     attenuation?: number | undefined;
     anglePower?: number | undefined;
@@ -10,5 +26,5 @@ declare const SpotLight: React.ForwardRefExoticComponent<Pick<Omit<import("@reac
     radiusBottom?: number | undefined;
     opacity?: number | undefined;
     color?: string | number | undefined;
-}, "visible" | "attach" | "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" | "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/Stage.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),i=require("./Environment.cjs.js"),a=require("./ContactShadows.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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)}require("three-stdlib"),require("use-asset"),require("../helpers/environment-assets.cjs.js");var u=s(e),c=o(t),l=o(r);const f={rembrandt:{main:[1,2,1],fill:[-2,-.5,-2]},portrait:{main:[-1,2,.5],fill:[-1,.5,-1.5]},upfront:{main:[0,2,1],fill:[-1,.5,-1.5]},soft:{main:[-2,4,4],fill:[-1,.5,-1.5]}};exports.Stage=function({children:e,controls:t,shadows:r=!0,adjustCamera:s=!0,environment:o="city",intensity:d=1,preset:h="rembrandt",shadowBias:m=0,contactShadow:p={blur:2,opacity:.5,position:[0,0,0]},...b}){const g=f[h],y=n.useThree((e=>e.camera)),j=n.useThree((e=>e.controls)),w=c.useRef(null),E=c.useRef(null),[{radius:x,width:v,height:q},O]=c.useState({radius:0,width:0,height:0});return c.useLayoutEffect((()=>{w.current.position.set(0,0,0),w.current.updateWorldMatrix(!0,!0);const e=(new l.Box3).setFromObject(E.current),t=new l.Vector3,r=new l.Sphere,n=e.max.y-e.min.y,i=e.max.x-e.min.x;e.getCenter(t),e.getBoundingSphere(r),O({radius:r.radius,width:i,height:n}),w.current.position.set(-t.x,-t.y+n/2,-t.z)}),[e]),c.useLayoutEffect((()=>{if(s){const e=x/(q>v?1.5:2.5);y.position.set(0,.5*x,2.5*x),y.near=.1,y.far=Math.max(5e3,4*x),y.lookAt(0,e,0);const r=j||(null==t?void 0:t.current);r&&(r.target.set(0,e,0),r.update())}}),[j,x,q,v,s]),c.createElement("group",b,c.createElement("group",{ref:w},c.createElement("group",{ref:E},e)),p&&c.createElement(a.ContactShadows,u.default({width:2*x,height:2*x,far:x/2},p)),o&&c.createElement(i.Environment,{preset:o}),c.createElement("ambientLight",{intensity:d/3}),c.createElement("spotLight",{penumbra:1,position:[g.main[0]*x,g.main[1]*x,g.main[2]*x],intensity:2*d,castShadow:r,"shadow-bias":m}),c.createElement("pointLight",{position:[g.fill[0]*x,g.fill[1]*x,g.fill[2]*x],intensity:d}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),i=require("./Environment.cjs.js"),a=require("./ContactShadows.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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)}require("three-stdlib"),require("../helpers/environment-assets.cjs.js");var u=o(e),c=s(t),l=s(r);const f={rembrandt:{main:[1,2,1],fill:[-2,-.5,-2]},portrait:{main:[-1,2,.5],fill:[-1,.5,-1.5]},upfront:{main:[0,2,1],fill:[-1,.5,-1.5]},soft:{main:[-2,4,4],fill:[-1,.5,-1.5]}};exports.Stage=function({children:e,controls:t,shadows:r=!0,adjustCamera:o=!0,environment:s="city",intensity:d=1,preset:m="rembrandt",shadowBias:h=0,contactShadow:p={blur:2,opacity:.5,position:[0,0,0]},...b}){const g=f[m],y=n.useThree((e=>e.camera)),j=n.useThree((e=>e.controls)),w=c.useRef(null),E=c.useRef(null),[{radius:x,width:v,height:q},O]=c.useState({radius:0,width:0,height:0});return c.useLayoutEffect((()=>{w.current.position.set(0,0,0),w.current.updateWorldMatrix(!0,!0);const e=(new l.Box3).setFromObject(E.current),t=new l.Vector3,r=new l.Sphere,n=e.max.y-e.min.y,i=e.max.x-e.min.x;e.getCenter(t),e.getBoundingSphere(r),O({radius:r.radius,width:i,height:n}),w.current.position.set(-t.x,-t.y+n/2,-t.z)}),[e]),c.useLayoutEffect((()=>{if(o){const e=x/(q>v?1.5:2.5);y.position.set(0,.5*x,2.5*x),y.near=.1,y.far=Math.max(5e3,4*x),y.lookAt(0,e,0);const r=j||(null==t?void 0:t.current);r&&(r.target.set(0,e,0),r.update())}}),[j,x,q,v,o]),c.createElement("group",b,c.createElement("group",{ref:w},c.createElement("group",{ref:E},e)),p&&c.createElement(a.ContactShadows,u.default({scale:2*x,far:x/2},p)),s&&c.createElement(i.Environment,{preset:s}),c.createElement("ambientLight",{intensity:d/3}),c.createElement("spotLight",{penumbra:1,position:[g.main[0]*x,g.main[1]*x,g.main[2]*x],intensity:2*d,castShadow:r,"shadow-bias":h}),c.createElement("pointLight",{position:[g.fill[0]*x,g.fill[1]*x,g.fill[2]*x],intensity:d}))};

package/core/Stage.d.ts

@@ -26,7 +26,7 @@ declare type ControlsProto = {
 declare type Props = JSX.IntrinsicElements['group'] & {
     shadows?: boolean;
     adjustCamera?: boolean;
-    environment?: PresetsType;
+    environment?: PresetsType | null;
     intensity?: number;
     ambience?: number;
     controls?: React.MutableRefObject<ControlsProto>;

package/core/Stage.js

@@ -91,8 +91,7 @@ function Stage({
   }, /*#__PURE__*/React.createElement("group", {
     ref: inner
   }, children)), contactShadow && /*#__PURE__*/React.createElement(ContactShadows, _extends({
-    width: radius * 2,
-    height: radius * 2,
+    scale: radius * 2,
     far: radius / 2
   }, contactShadow)), environment && /*#__PURE__*/React.createElement(Environment, {
     preset: environment

package/core/Stars.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("three");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 a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=a(e);class n extends r.ShaderMaterial{constructor(){super({uniforms:{time:{value:0},fade:{value:1}},vertexShader:"\n      uniform float time;\n      attribute float size;\n      varying vec3 vColor;\n      void main() {\n        vColor = color;\n        vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);\n        gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(mvPosition.x + 2.0 * time + 100.0));\n        gl_Position = projectionMatrix * mvPosition;\n      }",fragmentShader:"\n      uniform sampler2D pointTexture;\n      uniform float fade;\n      varying vec3 vColor;\n      void main() {\n        float opacity = 1.0;\n        if (fade == 1.0) {\n          float d = distance(gl_PointCoord, vec2(0.5, 0.5));\n          opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));\n        }\n        gl_FragColor = vec4(vColor, opacity);\n      }"})}}const i=e=>(new r.Vector3).setFromSpherical(new r.Spherical(e,Math.acos(1-2*Math.random()),2*Math.random()*Math.PI)),c=o.forwardRef((({radius:e=100,depth:a=50,count:c=5e3,saturation:s=0,factor:u=4,fade:l=!1},f)=>{const m=o.useRef(),[d,v,p]=o.useMemo((()=>{const t=[],o=[],n=Array.from({length:c},(()=>(.5+.5*Math.random())*u)),l=new r.Color;let f=e+a;const m=a/c;for(let e=0;e<c;e++)f-=m*Math.random(),t.push(...i(f).toArray()),l.setHSL(e/c,s,.9),o.push(l.r,l.g,l.b);return[new Float32Array(t),new Float32Array(o),new Float32Array(n)]}),[c,a,u,e,s]);t.useFrame((e=>m.current&&(m.current.uniforms.time.value=e.clock.getElapsedTime())));const[h]=o.useState((()=>new n));return o.createElement("points",{ref:f},o.createElement("bufferGeometry",{attach:"geometry"},o.createElement("bufferAttribute",{attach:"attributes-position",args:[d,3]}),o.createElement("bufferAttribute",{attach:"attributes-color",args:[v,3]}),o.createElement("bufferAttribute",{attach:"attributes-size",args:[p,1]})),o.createElement("primitive",{dispose:void 0,ref:m,object:h,attach:"material",blending:r.AdditiveBlending,"uniforms-fade-value":l,transparent:!0,vertexColors:!0}))}));exports.Stars=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("three");function n(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 a=n(e);class o extends r.ShaderMaterial{constructor(){super({uniforms:{time:{value:0},fade:{value:1}},vertexShader:"\n      uniform float time;\n      attribute float size;\n      varying vec3 vColor;\n      void main() {\n        vColor = color;\n        vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);\n        gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(mvPosition.x + 2.0 * time + 100.0));\n        gl_Position = projectionMatrix * mvPosition;\n      }",fragmentShader:"\n      uniform sampler2D pointTexture;\n      uniform float fade;\n      varying vec3 vColor;\n      void main() {\n        float opacity = 1.0;\n        if (fade == 1.0) {\n          float d = distance(gl_PointCoord, vec2(0.5, 0.5));\n          opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));\n        }\n        gl_FragColor = vec4(vColor, opacity);\n\n        #include <tonemapping_fragment>\n\t      #include <encodings_fragment>\n      }"})}}const i=e=>(new r.Vector3).setFromSpherical(new r.Spherical(e,Math.acos(1-2*Math.random()),2*Math.random()*Math.PI)),c=a.forwardRef((({radius:e=100,depth:n=50,count:c=5e3,saturation:s=0,factor:u=4,fade:l=!1},f)=>{const m=a.useRef(),[d,v,p]=a.useMemo((()=>{const t=[],a=[],o=Array.from({length:c},(()=>(.5+.5*Math.random())*u)),l=new r.Color;let f=e+n;const m=n/c;for(let e=0;e<c;e++)f-=m*Math.random(),t.push(...i(f).toArray()),l.setHSL(e/c,s,.9),a.push(l.r,l.g,l.b);return[new Float32Array(t),new Float32Array(a),new Float32Array(o)]}),[c,n,u,e,s]);t.useFrame((e=>m.current&&(m.current.uniforms.time.value=e.clock.getElapsedTime())));const[g]=a.useState((()=>new o));return a.createElement("points",{ref:f},a.createElement("bufferGeometry",{attach:"geometry"},a.createElement("bufferAttribute",{attach:"attributes-position",args:[d,3]}),a.createElement("bufferAttribute",{attach:"attributes-color",args:[v,3]}),a.createElement("bufferAttribute",{attach:"attributes-size",args:[p,1]})),a.createElement("primitive",{dispose:void 0,ref:m,object:g,attach:"material",blending:r.AdditiveBlending,"uniforms-fade-value":l,transparent:!0,vertexColors:!0}))}));exports.Stars=c;

package/core/Stars.js

@@ -38,6 +38,9 @@ class StarfieldMaterial extends ShaderMaterial {
           opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));
         }
         gl_FragColor = vec4(vColor, opacity);
+
+        #include <tonemapping_fragment>
+	      #include <encodings_fragment>
       }`
     });
   }

package/core/Stats.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("three/examples/js/libs/stats.min"),n=require("../helpers/useEffectfulState.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function f(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 c=f(e),a=u(r);exports.Stats=function({showPanel:e=0,className:r,parent:u}){const f=n.useEffectfulState((()=>new a.default),[]);return c.useEffect((()=>{if(f){const n=u&&u.current||document.body;f.showPanel(e),null==n||n.appendChild(f.dom),r&&f.dom.classList.add(r);const c=t.addEffect((()=>f.begin())),a=t.addAfterEffect((()=>f.end()));return()=>{null==n||n.removeChild(f.dom),c(),a()}}}),[u,f,r,e]),null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("stats.js"),n=require("../helpers/useEffectfulState.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function f(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 c=f(e),a=u(r);exports.Stats=function({showPanel:e=0,className:r,parent:u}){const f=n.useEffectfulState((()=>new a.default),[]);return c.useEffect((()=>{if(f){const n=u&&u.current||document.body;f.showPanel(e),null==n||n.appendChild(f.dom),r&&f.dom.classList.add(...r.split(" ").filter((e=>e)));const c=t.addEffect((()=>f.begin())),a=t.addAfterEffect((()=>f.end()));return()=>{null==n||n.removeChild(f.dom),c(),a()}}}),[u,f,r,e]),null};

package/core/Stats.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { addEffect, addAfterEffect } from '@react-three/fiber';
-import StatsImpl from 'three/examples/js/libs/stats.min';
+import StatsImpl from 'stats.js';
 import { useEffectfulState } from '../helpers/useEffectfulState.js';
 
 function Stats({
@@ -14,7 +14,7 @@ function Stats({
       const node = parent && parent.current || document.body;
       stats.showPanel(showPanel);
       node == null ? void 0 : node.appendChild(stats.dom);
-      if (className) stats.dom.classList.add(className);
+      if (className) stats.dom.classList.add(...className.split(' ').filter(cls => cls));
       const begin = addEffect(() => stats.begin());
       const end = addAfterEffect(() => stats.end());
       return () => {

package/core/Text.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("troika-three-text"),n=require("@react-three/fiber");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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=u(e),a=c(t);const i=a.forwardRef((({anchorX:e="center",anchorY:t="middle",children:u,onSync:c,...i},f)=>{const s=n.useThree((({invalidate:e})=>e)),[l]=a.useState((()=>new r.Text)),[d,b]=a.useMemo((()=>{const e=[];let t="";return a.Children.forEach(u,(r=>{"string"==typeof r||"number"==typeof r?t+=r:e.push(r)})),[e,t]}),[u]);return a.useLayoutEffect((()=>{l.sync((()=>{s(),c&&c(l)}))})),a.useEffect((()=>()=>l.dispose()),[l]),a.createElement("primitive",o.default({object:l,ref:f,text:b,anchorX:e,anchorY:t},i),d)}));exports.Text=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("troika-three-text"),n=require("@react-three/fiber"),o=require("suspend-react");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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 a=c(e),i=u(t);const f=i.forwardRef((({anchorX:e="center",anchorY:t="middle",font:c,children:u,characters:f,onSync:s,...d},l)=>{const p=n.useThree((({invalidate:e})=>e)),[h]=i.useState((()=>new r.Text)),[b,y]=i.useMemo((()=>{const e=[];let t="";return i.Children.forEach(u,(r=>{"string"==typeof r||"number"==typeof r?t+=r:e.push(r)})),[e,t]}),[u]);return o.suspend((()=>new Promise((e=>r.preloadFont({font:c,characters:f},e)))),["troika-text",c,f]),i.useLayoutEffect((()=>{h.sync((()=>{p(),s&&s(h)}))})),i.useEffect((()=>()=>h.dispose()),[h]),i.createElement("primitive",a.default({object:h,ref:l,font:c,text:y,anchorX:e,anchorY:t},d),b)}));exports.Text=f;

package/core/Text.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactThreeFiber } from '@react-three/fiber';
-export declare const Text: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeFiber.Node<import("three").Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>, typeof import("three").Mesh>, ReactThreeFiber.NonFunctionKeys<{
+export declare const Text: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<import("three").Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>, ReactThreeFiber.NodeProps<import("three").Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>, typeof import("three").Mesh>>>, ReactThreeFiber.NonFunctionKeys<{
     position?: ReactThreeFiber.Vector3 | undefined;
     up?: ReactThreeFiber.Vector3 | undefined;
     scale?: ReactThreeFiber.Vector3 | undefined;
@@ -20,6 +20,7 @@ export declare const Text: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeF
     dispose?: (() => void) | null | undefined;
 } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     children: React.ReactNode;
+    characters?: string | undefined;
     color?: ReactThreeFiber.Color | undefined;
     fontSize?: number | undefined;
     maxWidth?: number | undefined;
@@ -46,4 +47,4 @@ export declare const Text: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeF
     fillOpacity?: number | undefined;
     debugSDF?: boolean | undefined;
     onSync?: ((troika: TextMeshImpl) => void) | undefined;
-}, "visible" | "attach" | "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 | "font" | "material" | "direction" | "fontSize" | "letterSpacing" | "lineHeight" | "maxWidth" | "outlineColor" | "outlineWidth" | "overflowWrap" | "textAlign" | "whiteSpace" | "fillOpacity" | "strokeOpacity" | "strokeWidth" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "anchorX" | "anchorY" | "onSync" | "clipRect" | "depthOffset" | "outlineOffsetX" | "outlineOffsetY" | "outlineBlur" | "outlineOpacity" | "strokeColor" | "debugSDF"> & React.RefAttributes<unknown>>;
+}, "visible" | "attach" | "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 | "font" | "material" | "direction" | "fontSize" | "letterSpacing" | "lineHeight" | "maxWidth" | "outlineColor" | "outlineWidth" | "overflowWrap" | "textAlign" | "whiteSpace" | "fillOpacity" | "strokeOpacity" | "strokeWidth" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "anchorX" | "anchorY" | "characters" | "onSync" | "clipRect" | "depthOffset" | "outlineOffsetX" | "outlineOffsetY" | "outlineBlur" | "outlineOpacity" | "strokeColor" | "debugSDF"> & React.RefAttributes<unknown>>;

package/core/Text.js

@@ -1,13 +1,16 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { Text as Text$1 } from 'troika-three-text';
+import { Text as Text$1, preloadFont } from 'troika-three-text';
 import { useThree } from '@react-three/fiber';
+import { suspend } from 'suspend-react';
 
 // eslint-disable-next-line prettier/prettier
 const Text = /*#__PURE__*/React.forwardRef(({
   anchorX = 'center',
   anchorY = 'middle',
+  font,
   children,
+  characters,
   onSync,
   ...props
 }, ref) => {
@@ -27,6 +30,10 @@ const Text = /*#__PURE__*/React.forwardRef(({
     });
     return [n, t];
   }, [children]);
+  suspend(() => new Promise(res => preloadFont({
+    font,
+    characters
+  }, res)), ['troika-text', font, characters]);
   React.useLayoutEffect(() => void troikaMesh.sync(() => {
     invalidate();
     if (onSync) onSync(troikaMesh);
@@ -37,6 +44,7 @@ const Text = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React.createElement("primitive", _extends({
     object: troikaMesh,
     ref: ref,
+    font: font,
     text: text,
     anchorX: anchorX,
     anchorY: anchorY

package/core/TrackballControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function o(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 s=o(e),c=a(r);const u=c.forwardRef((({makeDefault:e,camera:r,domElement:o,regress:a,onChange:u,onStart:i,onEnd:l,...d},f)=>{const{invalidate:v,camera:b,gl:m,events:p,set:E,get:g,performance:h,viewport:j}=t.useThree(),O=r||b,y=o||("boolean"!=typeof p.connected?p.connected:m.domElement),L=c.useMemo((()=>new n.TrackballControls(O)),[O]);return t.useFrame((()=>{L.enabled&&L.update()})),c.useEffect((()=>{const e=e=>{v(),a&&h.regress(),u&&u(e)};return L.connect(y),L.addEventListener("change",e),i&&L.addEventListener("start",i),l&&L.addEventListener("end",l),()=>{L.removeEventListener("change",e),i&&L.removeEventListener("start",i),l&&L.removeEventListener("end",l),L.dispose()}}),[y,u,i,l,a,L,v]),c.useEffect((()=>{L.handleResize()}),[j]),c.useEffect((()=>{if(e){const e=g().controls;return E({controls:L}),()=>E({controls:e})}}),[e,L]),c.createElement("primitive",s.default({ref:f,object:L},d))}));exports.TrackballControls=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function o(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 s=o(e),c=a(r);const u=c.forwardRef((({makeDefault:e,camera:r,domElement:o,regress:a,onChange:u,onStart:i,onEnd:f,...l},d)=>{const{invalidate:v,camera:m,gl:b,events:E,set:p,get:g,performance:h,viewport:j}=t.useThree(),O=r||m,L=o||E.connected||b.domElement,y=c.useMemo((()=>new n.TrackballControls(O)),[O]);return t.useFrame((()=>{y.enabled&&y.update()})),c.useEffect((()=>(y.connect(L),()=>{y.dispose()})),[L,a,y,v]),c.useEffect((()=>{const e=e=>{v(),a&&h.regress(),u&&u(e)};return y.addEventListener("change",e),i&&y.addEventListener("start",i),f&&y.addEventListener("end",f),()=>{i&&y.removeEventListener("start",i),f&&y.removeEventListener("end",f),y.removeEventListener("change",e)}}),[u,i,f]),c.useEffect((()=>{y.handleResize()}),[j]),c.useEffect((()=>{if(e){const e=g().controls;return p({controls:y}),()=>p({controls:e})}}),[e,y]),c.createElement("primitive",s.default({ref:d,object:y},l))}));exports.TrackballControls=u;

package/core/TrackballControls.js

@@ -24,11 +24,15 @@ const TrackballControls = /*#__PURE__*/React.forwardRef(({
     viewport
   } = useThree();
   const explCamera = camera || defaultCamera;
-  const explDomElement = domElement || (typeof events.connected !== 'boolean' ? events.connected : gl.domElement);
+  const explDomElement = domElement || events.connected || gl.domElement;
   const controls = React.useMemo(() => new TrackballControls$1(explCamera), [explCamera]);
   useFrame(() => {
     if (controls.enabled) controls.update();
   });
+  React.useEffect(() => {
+    controls.connect(explDomElement);
+    return () => void controls.dispose();
+  }, [explDomElement, regress, controls, invalidate]);
   React.useEffect(() => {
     const callback = e => {
       invalidate();
@@ -36,17 +40,15 @@ const TrackballControls = /*#__PURE__*/React.forwardRef(({
       if (onChange) onChange(e);
     };
 
-    controls.connect(explDomElement);
     controls.addEventListener('change', callback);
     if (onStart) controls.addEventListener('start', onStart);
     if (onEnd) controls.addEventListener('end', onEnd);
     return () => {
-      controls.removeEventListener('change', callback);
       if (onStart) controls.removeEventListener('start', onStart);
       if (onEnd) controls.removeEventListener('end', onEnd);
-      controls.dispose();
+      controls.removeEventListener('change', callback);
     };
-  }, [explDomElement, onChange, onStart, onEnd, regress, controls, invalidate]);
+  }, [onChange, onStart, onEnd]);
   React.useEffect(() => {
     controls.handleResize();
   }, [viewport]);

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:10*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=1*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(u)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,21 @@
+import * as React from 'react';
+import { ColorRepresentation, Object3D } from 'three';
+import { MeshLine as MeshLineImpl } 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 type MeshLine = THREE.Mesh & MeshLineImpl;
+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,160 @@
+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 * 10 * 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 = 1 * 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 (children) {
+      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/TransformControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("@react-three/fiber"),t=require("lodash.omit"),r=require("lodash.pick"),l=require("react"),o=require("three"),u=require("three-stdlib");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var i=a(e),c=a(t),d=a(r),v=s(l),f=s(o);const m=v.forwardRef((({children:e,domElement:t,onChange:r,onMouseDown:l,onMouseUp:o,onObjectChange:a,object:s,...m},E)=>{const h=["enabled","axis","mode","translationSnap","rotationSnap","scaleSnap","space","size","showX","showY","showZ"],{camera:b,...g}=m,p=d.default(g,h),L=c.default(g,h),j=n.useThree((e=>e.controls)),w=n.useThree((({gl:e})=>e)),O=n.useThree((({camera:e})=>e)),q=n.useThree((({invalidate:e})=>e)),y=b||O,C=v.useMemo((()=>new u.TransformControls(y,t||w.domElement)),[y,t,w.domElement]),T=v.useRef();return v.useLayoutEffect((()=>{s?null==C||C.attach(s instanceof f.Object3D?s:s.current):null==C||C.attach(T.current)}),[s,e,C]),v.useEffect((()=>{if(j){const e=e=>j.enabled=!e.value;return C.addEventListener("dragging-changed",e),()=>C.removeEventListener("dragging-changed",e)}}),[C,j]),v.useEffect((()=>{const e=e=>{q(),r&&r(e)};return null==C||null==C.addEventListener||C.addEventListener("change",e),l&&(null==C||null==C.addEventListener||C.addEventListener("mouseDown",l)),o&&(null==C||null==C.addEventListener||C.addEventListener("mouseUp",o)),a&&(null==C||null==C.addEventListener||C.addEventListener("objectChange",a)),()=>{null==C||null==C.removeEventListener||C.removeEventListener("change",e),l&&(null==C||null==C.removeEventListener||C.removeEventListener("mouseDown",l)),o&&(null==C||null==C.removeEventListener||C.removeEventListener("mouseUp",o)),a&&(null==C||null==C.removeEventListener||C.removeEventListener("objectChange",a))}}),[r,l,o,a,C,q]),C?v.createElement(v.Fragment,null,v.createElement("primitive",i.default({ref:E,dispose:void 0,object:C},p)),v.createElement("group",i.default({ref:T},L),e)):null}));exports.TransformControls=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("@react-three/fiber"),t=require("lodash.omit"),r=require("lodash.pick"),o=require("react"),a=require("three"),u=require("three-stdlib");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var i=l(e),c=l(t),d=l(r),v=s(o),f=s(a);const m=v.forwardRef((({children:e,domElement:t,onChange:r,onMouseDown:o,onMouseUp:a,onObjectChange:l,object:s,...m},h)=>{const E=["enabled","axis","mode","translationSnap","rotationSnap","scaleSnap","space","size","showX","showY","showZ"],{camera:b,...g}=m,p=d.default(g,E),L=c.default(g,E),j=n.useThree((e=>e.controls)),O=n.useThree((e=>e.gl)),w=n.useThree((e=>e.events)),q=n.useThree((e=>e.camera)),T=n.useThree((e=>e.invalidate)),y=b||q,C=t||w.connected||O.domElement,D=v.useMemo((()=>new u.TransformControls(y,C)),[y,C]),M=v.useRef();return v.useLayoutEffect((()=>(s?D.attach(s instanceof f.Object3D?s:s.current):M.current instanceof f.Object3D&&D.attach(M.current),()=>{D.detach()})),[s,e,D]),v.useEffect((()=>{if(j){const e=e=>j.enabled=!e.value;return D.addEventListener("dragging-changed",e),()=>D.removeEventListener("dragging-changed",e)}}),[D,j]),v.useEffect((()=>{const e=e=>{T(),r&&r(e)};return null==D||null==D.addEventListener||D.addEventListener("change",e),o&&(null==D||null==D.addEventListener||D.addEventListener("mouseDown",o)),a&&(null==D||null==D.addEventListener||D.addEventListener("mouseUp",a)),l&&(null==D||null==D.addEventListener||D.addEventListener("objectChange",l)),()=>{null==D||null==D.removeEventListener||D.removeEventListener("change",e),o&&(null==D||null==D.removeEventListener||D.removeEventListener("mouseDown",o)),a&&(null==D||null==D.removeEventListener||D.removeEventListener("mouseUp",a)),l&&(null==D||null==D.removeEventListener||D.removeEventListener("objectChange",l))}}),[r,o,a,l,D,T]),D?v.createElement(v.Fragment,null,v.createElement("primitive",i.default({ref:h,dispose:void 0,object:D},p)),v.createElement("group",i.default({ref:M},L),e)):null}));exports.TransformControls=m;

package/core/TransformControls.d.ts

@@ -23,4 +23,4 @@ export declare type TransformControlsProps = ReactThreeFiber.Object3DNode<Transf
     onMouseUp?: (e?: THREE.Event) => void;
     onObjectChange?: (e?: THREE.Event) => void;
 };
-export declare const TransformControls: React.ForwardRefExoticComponent<Pick<TransformControlsProps, "object" | "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "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" | "onChange" | "onMouseDown" | "onMouseUp" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "size" | "space" | "enabled" | "update" | "axis" | "setSize" | "domElement" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setScaleSnap" | "setSpace" | "onObjectChange" | "mode" | "translationSnap" | "rotationSnap" | "scaleSnap" | "showX" | "showY" | "showZ"> & React.RefAttributes<TransformControlsImpl<THREE.Camera>>>;
+export declare const TransformControls: React.ForwardRefExoticComponent<Pick<TransformControlsProps, "object" | "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "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" | "onChange" | "onMouseDown" | "onMouseUp" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "size" | "space" | "enabled" | "update" | "axis" | "connect" | "setSize" | "domElement" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setScaleSnap" | "setSpace" | "onObjectChange" | "mode" | "translationSnap" | "rotationSnap" | "scaleSnap" | "showX" | "showY" | "showZ"> & React.RefAttributes<TransformControlsImpl<THREE.Camera>>>;

package/core/TransformControls.js

@@ -25,20 +25,22 @@ const TransformControls = /*#__PURE__*/React.forwardRef(({
   const objectProps = omit(rest, transformOnlyPropNames); // @ts-expect-error new in @react-three/fiber@7.0.5
 
   const defaultControls = useThree(state => state.controls);
-  const gl = useThree(({
-    gl
-  }) => gl);
-  const defaultCamera = useThree(({
-    camera
-  }) => camera);
-  const invalidate = useThree(({
-    invalidate
-  }) => invalidate);
+  const gl = useThree(state => state.gl);
+  const events = useThree(state => state.events);
+  const defaultCamera = useThree(state => state.camera);
+  const invalidate = useThree(state => state.invalidate);
   const explCamera = camera || defaultCamera;
-  const controls = React.useMemo(() => new TransformControls$1(explCamera, domElement || gl.domElement), [explCamera, domElement, gl.domElement]);
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const controls = React.useMemo(() => new TransformControls$1(explCamera, explDomElement), [explCamera, explDomElement]);
   const group = React.useRef();
   React.useLayoutEffect(() => {
-    if (object) controls == null ? void 0 : controls.attach(object instanceof THREE.Object3D ? object : object.current);else controls == null ? void 0 : controls.attach(group.current);
+    if (object) {
+      controls.attach(object instanceof THREE.Object3D ? object : object.current);
+    } else if (group.current instanceof THREE.Object3D) {
+      controls.attach(group.current);
+    }
+
+    return () => void controls.detach();
   }, [object, children, controls]);
   React.useEffect(() => {
     if (defaultControls) {