@react-three/drei 9.0.0-beta.3 → 9.0.0

package/core/Points.d.ts

@@ -5,12 +5,12 @@ declare type PointsInstancesProps = JSX.IntrinsicElements['points'] & {
     limit?: number;
 };
 export declare const Point: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
-declare type PointsBuffersProps = Omit<JSX.IntrinsicElements['points'], 'position'> & {
+declare type PointsBuffersProps = JSX.IntrinsicElements['points'] & {
     positions: Float32Array;
     colors?: Float32Array;
     sizes?: Float32Array;
     stride?: 2 | 3;
 };
-export declare const PointsBuffer: React.ForwardRefExoticComponent<Pick<PointsBuffersProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "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 Points: React.ForwardRefExoticComponent<Pick<PointsInstancesProps | PointsBuffersProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "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 declare const PointsBuffer: React.ForwardRefExoticComponent<Pick<PointsBuffersProps, "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" | 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, "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" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "range" | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "updateMorphTargets" | "isPoints" | "limit"> | Pick<PointsBuffersProps, "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" | 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 {};

package/core/Points.js

@@ -9,7 +9,7 @@ let i, positionRef;
 const context = /*#__PURE__*/React.createContext(null);
 const parentMatrix = new THREE.Matrix4();
 const position = new THREE.Vector3();
-const color = new THREE.Color();
+new THREE.Color();
 /**
  * Instance implementation, relies on react + context to update the attributes based on the children of this component
  */
@@ -41,23 +41,13 @@ const PointsInstances = /*#__PURE__*/React.forwardRef(({
 
     for (i = 0; i < refs.length; i++) {
       positionRef = refs[i].current;
-      positionRef.getWorldPosition(position).applyMatrix4(parentMatrix);
-
-      if (position.x !== positions[i * 3] || position.y !== positions[i * 3 + 1] || position.z !== positions[i * 3 + 2]) {
-        position.toArray(positions, i * 3);
-        parentRef.current.geometry.attributes.position.needsUpdate = true;
-        positionRef.matrixWorldNeedsUpdate = true;
-      }
-
-      if (!positionRef.color.equals(color.fromArray(colors, i * 3))) {
-        positionRef.color.toArray(colors, i * 3);
-        parentRef.current.geometry.attributes.color.needsUpdate = true;
-      }
-
-      if (positionRef.size !== sizes[i]) {
-        sizes.set([positionRef.size], i);
-        parentRef.current.geometry.attributes.size.needsUpdate = true;
-      }
+      position.toArray(positions, i * 3);
+      parentRef.current.geometry.attributes.position.needsUpdate = true;
+      positionRef.matrixWorldNeedsUpdate = true;
+      positionRef.color.toArray(colors, i * 3);
+      parentRef.current.geometry.attributes.color.needsUpdate = true;
+      sizes.set([positionRef.size], i);
+      parentRef.current.geometry.attributes.size.needsUpdate = true;
     }
   });
   const events = React.useMemo(() => {
@@ -143,17 +133,10 @@ const PointsBuffer = /*#__PURE__*/React.forwardRef(({
   useFrame(() => {
     const attr = pointsRef.current.geometry.attributes;
     attr.position.needsUpdate = true;
-
-    if (colors) {
-      attr.color.needsUpdate = true;
-    }
-
-    if (sizes) {
-      attr.size.needsUpdate = true;
-    }
+    if (colors) attr.color.needsUpdate = true;
+    if (sizes) attr.size.needsUpdate = true;
   });
   return /*#__PURE__*/React.createElement("points", _extends({
-    matrixAutoUpdate: false,
     ref: mergeRefs([forwardedRef, pointsRef])
   }, props), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
     attach: "attributes-position",
@@ -180,9 +163,7 @@ const Points = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     return /*#__PURE__*/React.createElement(PointsBuffer, _extends({}, props, {
       ref: forwardedRef
     }));
-  }
-
-  return /*#__PURE__*/React.createElement(PointsInstances, _extends({}, props, {
+  } else return /*#__PURE__*/React.createElement(PointsInstances, _extends({}, props, {
     ref: forwardedRef
   }));
 });

package/core/PositionalAudio.d.ts

@@ -22,4 +22,4 @@ export declare const PositionalAudio: React.ForwardRefExoticComponent<Pick<Omit<
     url: string;
     distance?: number | undefined;
     loop?: boolean | 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" | "onEnded" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "source" | "stop" | "url" | "load" | "pause" | "play" | "distance" | "offset" | "loop" | "duration" | "panner" | "getOutput" | "setRefDistance" | "getRefDistance" | "setRolloffFactor" | "getRolloffFactor" | "setDistanceModel" | "getDistanceModel" | "setMaxDistance" | "getMaxDistance" | "setDirectionalCone" | "listener" | "context" | "gain" | "autoplay" | "buffer" | "detune" | "loopStart" | "loopEnd" | "playbackRate" | "isPlaying" | "hasPlaybackControl" | "sourceType" | "filters" | "setNodeSource" | "setMediaElementSource" | "setMediaStreamSource" | "setBuffer" | "connect" | "disconnect" | "setDetune" | "getDetune" | "getFilters" | "setFilters" | "getFilter" | "setFilter" | "setPlaybackRate" | "getPlaybackRate" | "getLoop" | "setLoop" | "setLoopStart" | "setLoopEnd" | "getVolume" | "setVolume"> & 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" | "onEnded" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "source" | "stop" | "url" | "connect" | "disconnect" | "load" | "pause" | "play" | "distance" | "offset" | "loop" | "duration" | "panner" | "getOutput" | "setRefDistance" | "getRefDistance" | "setRolloffFactor" | "getRolloffFactor" | "setDistanceModel" | "getDistanceModel" | "setMaxDistance" | "getMaxDistance" | "setDirectionalCone" | "listener" | "context" | "gain" | "autoplay" | "buffer" | "detune" | "loopStart" | "loopEnd" | "playbackRate" | "isPlaying" | "hasPlaybackControl" | "sourceType" | "filters" | "setNodeSource" | "setMediaElementSource" | "setMediaStreamSource" | "setBuffer" | "setDetune" | "getDetune" | "getFilters" | "setFilters" | "getFilter" | "setFilter" | "setPlaybackRate" | "getPlaybackRate" | "getLoop" | "setLoop" | "setLoopStart" | "setLoopEnd" | "getVolume" | "setVolume"> & React.RefAttributes<unknown>>;

package/core/Reflector.d.ts

@@ -26,4 +26,4 @@ declare global {
         }
     }
 }
-export declare const Reflector: React.ForwardRefExoticComponent<Pick<ReflectorProps, "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" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "blur" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "resolution" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "debug" | "distortion" | "mixContrast" | "distortionMap"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;
+export declare const Reflector: React.ForwardRefExoticComponent<Pick<ReflectorProps, "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" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "blur" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "resolution" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "distortion" | "mixContrast" | "distortionMap" | "debug"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;

package/core/Sampler.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three-stdlib"),n=require("three");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=u(e),l=c(r);exports.Sampler=({children:e,weight:r,transform:u,instances:c,mesh:o,...a})=>{const s=l.useRef(null),d=l.useRef(null),f=l.useRef(null);return l.useEffect((()=>{var e,r;d.current=null!==(e=null==c?void 0:c.current)&&void 0!==e?e:s.current.children.find((e=>e.hasOwnProperty("instanceMatrix"))),f.current=null!==(r=null==o?void 0:o.current)&&void 0!==r?r:s.current.children.find((e=>"Mesh"===e.type))}),[e,null==o?void 0:o.current,null==c?void 0:c.current]),l.useEffect((()=>{if(void 0===f.current)return;if(void 0===d.current)return;const e=new t.MeshSurfaceSampler(f.current);r&&e.setWeightAttribute(r),e.build();const c=new n.Vector3,i=new n.Vector3,l=new n.Color,o=new n.Object3D;f.current.updateMatrixWorld(!0);for(let r=0;r<d.current.count;r++)e.sample(c,i,l),"function"==typeof u?u({dummy:o,sampledMesh:f.current,position:c,normal:i,color:l},r):o.position.copy(c),o.updateMatrix(),d.current.setMatrixAt(r,o.matrix);d.current.instanceMatrix.needsUpdate=!0}),[e,null==o?void 0:o.current,null==c?void 0:c.current]),l.createElement("group",i.default({ref:s},a),e)};

package/core/Sampler.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Color, InstancedMesh, Mesh, Object3D, Vector3 } from 'three';
+import { GroupProps } from '@react-three/fiber';
+declare type SamplePayload = {
+    position: Vector3;
+    normal: Vector3;
+    color: Color;
+};
+export declare type TransformFn = (payload: TransformPayload, i: number) => void;
+declare type TransformPayload = SamplePayload & {
+    dummy: Object3D;
+    sampledMesh: Mesh;
+};
+declare type Props = {
+    mesh?: React.RefObject<Mesh>;
+    instances?: React.RefObject<InstancedMesh>;
+    weight?: string;
+    transform?: TransformFn;
+};
+export declare const Sampler: ({ children, weight, transform, instances, mesh, ...props }: React.PropsWithChildren<Props & GroupProps>) => JSX.Element;
+export {};

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/SpotLight.d.ts

@@ -26,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 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: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(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({width:2*x,height: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":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.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("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);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

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

@@ -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

@@ -10,6 +10,7 @@ const Text = /*#__PURE__*/React.forwardRef(({
   anchorY = 'middle',
   font,
   children,
+  characters,
   onSync,
   ...props
 }, ref) => {
@@ -31,8 +32,8 @@ const Text = /*#__PURE__*/React.forwardRef(({
   }, [children]);
   suspend(() => new Promise(res => preloadFont({
     font,
-    characters: text
-  }, res)), ['troika-text', font, text]);
+    characters
+  }, res)), ['troika-text', font, characters]);
   React.useLayoutEffect(() => void troikaMesh.sync(() => {
     invalidate();
     if (onSync) onSync(troikaMesh);

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.d.ts

@@ -12,4 +12,4 @@ export declare type TrackballControlsProps = ReactThreeFiber.Overwrite<ReactThre
     onStart?: (e?: THREE.Event) => void;
     onEnd?: (e?: THREE.Event) => void;
 }>;
-export declare const TrackballControls: React.ForwardRefExoticComponent<Pick<TrackballControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "screen" | "reset" | "enabled" | "update" | "onStart" | "keys" | "target" | "connect" | "makeDefault" | "domElement" | "minDistance" | "maxDistance" | "zoomSpeed" | "rotateSpeed" | "panSpeed" | "mouseButtons" | "onEnd" | "regress" | "noRotate" | "noZoom" | "noPan" | "staticMoving" | "dynamicDampingFactor" | "cursorZoom" | "handleResize"> & React.RefAttributes<TrackballControlsImpl>>;
+export declare const TrackballControls: React.ForwardRefExoticComponent<Pick<TrackballControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "screen" | "reset" | "enabled" | "connect" | "update" | "onStart" | "keys" | "target" | "makeDefault" | "domElement" | "minDistance" | "maxDistance" | "zoomSpeed" | "rotateSpeed" | "panSpeed" | "mouseButtons" | "onEnd" | "regress" | "noRotate" | "noZoom" | "noPan" | "staticMoving" | "dynamicDampingFactor" | "cursorZoom" | "handleResize"> & React.RefAttributes<TrackballControlsImpl>>;

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 {};