@react-three/drei 8.18.9 → 9.0.0-beta.2

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

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();
-new THREE.Color();
+const color = new THREE.Color();
 /**
  * Instance implementation, relies on react + context to update the attributes based on the children of this component
  */
@@ -41,13 +41,23 @@ const PointsInstances = /*#__PURE__*/React.forwardRef(({
 
     for (i = 0; i < refs.length; i++) {
       positionRef = refs[i].current;
-      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;
+      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;
+      }
     }
   });
   const events = React.useMemo(() => {
@@ -80,19 +90,19 @@ const PointsInstances = /*#__PURE__*/React.forwardRef(({
     matrixAutoUpdate: false,
     ref: mergeRefs([ref, parentRef])
   }, events, props), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
-    attachObject: ['attributes', 'position'],
+    attach: "attributes-position",
     count: positions.length / 3,
     array: positions,
     itemSize: 3,
     usage: THREE.DynamicDrawUsage
   }), /*#__PURE__*/React.createElement("bufferAttribute", {
-    attachObject: ['attributes', 'color'],
+    attach: "attributes-color",
     count: colors.length / 3,
     array: colors,
     itemSize: 3,
     usage: THREE.DynamicDrawUsage
   }), /*#__PURE__*/React.createElement("bufferAttribute", {
-    attachObject: ['attributes', 'size'],
+    attach: "attributes-size",
     count: sizes.length,
     array: sizes,
     itemSize: 1,
@@ -133,25 +143,32 @@ 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", {
-    attachObject: ['attributes', 'position'],
+    attach: "attributes-position",
     count: positions.length / stride,
     array: positions,
     itemSize: stride,
     usage: THREE.DynamicDrawUsage
   }), colors && /*#__PURE__*/React.createElement("bufferAttribute", {
-    attachObject: ['attributes', 'color'],
+    attach: "attributes-color",
     count: colors.length / stride,
     array: colors,
     itemSize: 3,
     usage: THREE.DynamicDrawUsage
   }), sizes && /*#__PURE__*/React.createElement("bufferAttribute", {
-    attachObject: ['attributes', 'size'],
+    attach: "attributes-size",
     count: sizes.length / stride,
     array: sizes,
     itemSize: 1,
@@ -163,7 +180,9 @@ const Points = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     return /*#__PURE__*/React.createElement(PointsBuffer, _extends({}, props, {
       ref: forwardedRef
     }));
-  } else return /*#__PURE__*/React.createElement(PointsInstances, _extends({}, props, {
+  }
+
+  return /*#__PURE__*/React.createElement(PointsInstances, _extends({}, props, {
     ref: forwardedRef
   }));
 });

package/core/PositionalAudio.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PositionalAudio as PositionalAudioImpl } from 'three';
-export declare const PositionalAudio: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").Node<PositionalAudioImpl, typeof PositionalAudioImpl>, import("@react-three/fiber").NonFunctionKeys<{
+export declare const PositionalAudio: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<PositionalAudioImpl>, import("@react-three/fiber").NodeProps<PositionalAudioImpl, typeof PositionalAudioImpl>>>, 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;
@@ -22,4 +22,4 @@ export declare const PositionalAudio: React.ForwardRefExoticComponent<Pick<Omit<
     url: string;
     distance?: number | undefined;
     loop?: boolean | undefined;
-}, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "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" | "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>>;

package/core/Reflector.d.ts

@@ -26,4 +26,4 @@ declare global {
         }
     }
 }
-export declare const Reflector: React.ForwardRefExoticComponent<Pick<ReflectorProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "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[]>>>;
+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[]>>>;

package/core/RoundedBox.d.ts

@@ -7,5 +7,5 @@ declare type Props = {
     smoothness?: number;
     steps?: number;
 } & Omit<JSX.IntrinsicElements['mesh'], 'args'>;
-export declare const RoundedBox: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "radius" | "steps" | "smoothness"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;
+export declare const RoundedBox: React.ForwardRefExoticComponent<Pick<Props, "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" | "isMesh" | "updateMorphTargets" | "radius" | "steps" | "smoothness"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;
 export {};

package/core/ScreenQuad.d.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
 import * as React from 'react';
 declare type Props = Omit<JSX.IntrinsicElements['mesh'], 'args'>;
-export declare const ScreenQuad: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "attachArray" | "attachObject" | "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" | "isMesh" | "updateMorphTargets"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+export declare const ScreenQuad: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "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" | "isMesh" | "updateMorphTargets"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
 export {};

package/core/Segments.d.ts

@@ -27,5 +27,5 @@ declare class SegmentObject {
     end: THREE.Vector3;
     constructor();
 }
-declare const Segment: React.ForwardRefExoticComponent<Pick<SegmentProps, "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "color" | "onClick" | "onContextMenu" | "onDoubleClick" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOut" | "onWheel" | "onPointerMissed" | "end" | "start"> & React.RefAttributes<Segment>>;
+declare const Segment: React.ForwardRefExoticComponent<Pick<SegmentProps, "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "color" | "onClick" | "onContextMenu" | "onDoubleClick" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOut" | "onWheel" | "onPointerMissed" | "end" | "start"> & React.RefAttributes<Segment>>;
 export { Segments, Segment };

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;
@@ -23,4 +23,4 @@ export declare const Shadow: React.ForwardRefExoticComponent<Pick<Omit<import("@
     fog?: boolean | undefined;
     color?: string | number | Color | undefined;
     opacity?: number | undefined;
-}, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "fog" | "opacity" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "colorStop"> & 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 | "material" | "fog" | "opacity" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "colorStop"> & React.RefAttributes<unknown>>;

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

package/core/Stage.js

@@ -91,7 +91,8 @@ function Stage({
   }, /*#__PURE__*/React.createElement("group", {
     ref: inner
   }, children)), contactShadow && /*#__PURE__*/React.createElement(ContactShadows, _extends({
-    scale: radius * 2,
+    width: radius * 2,
+    height: 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 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[b]=a.useState((()=>new o));return a.createElement("points",{ref:f},a.createElement("bufferGeometry",{attach:"geometry"},a.createElement("bufferAttribute",{attachObject:["attributes","position"],args:[d,3]}),a.createElement("bufferAttribute",{attachObject:["attributes","color"],args:[v,3]}),a.createElement("bufferAttribute",{attachObject:["attributes","size"],args:[p,1]})),a.createElement("primitive",{dispose:void 0,ref:m,object:b,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 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;

package/core/Stars.js

@@ -38,9 +38,6 @@ 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>
       }`
     });
   }
@@ -86,13 +83,13 @@ const Stars = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.createElement("bufferGeometry", {
     attach: "geometry"
   }, /*#__PURE__*/React.createElement("bufferAttribute", {
-    attachObject: ['attributes', 'position'],
+    attach: "attributes-position",
     args: [position, 3]
   }), /*#__PURE__*/React.createElement("bufferAttribute", {
-    attachObject: ['attributes', 'color'],
+    attach: "attributes-color",
     args: [color, 3]
   }), /*#__PURE__*/React.createElement("bufferAttribute", {
-    attachObject: ['attributes', 'size'],
+    attach: "attributes-size",
     args: [size, 1]
   })), /*#__PURE__*/React.createElement("primitive", {
     dispose: undefined,

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 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;
+"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;

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,7 +20,6 @@ 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;
@@ -47,4 +46,4 @@ export declare const Text: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeF
     fillOpacity?: number | undefined;
     debugSDF?: boolean | undefined;
     onSync?: ((troika: TextMeshImpl) => void) | undefined;
-}, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "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>>;
+}, "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>>;

package/core/Text.js

@@ -10,7 +10,6 @@ const Text = /*#__PURE__*/React.forwardRef(({
   anchorY = 'middle',
   font,
   children,
-  characters,
   onSync,
   ...props
 }, ref) => {
@@ -32,8 +31,8 @@ const Text = /*#__PURE__*/React.forwardRef(({
   }, [children]);
   suspend(() => new Promise(res => preloadFont({
     font,
-    characters
-  }, res)), ['troika-text', font, characters]);
+    characters: text
+  }, res)), ['troika-text', font, text]);
   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:f,...l},d)=>{const{invalidate:v,camera:b,gl:m,events:E,set:p,get:g,performance:h,viewport:j}=t.useThree(),O=r||b,y=o||("boolean"!=typeof E.connected?E.connected:m.domElement),L=c.useMemo((()=>new n.TrackballControls(O)),[O]);return t.useFrame((()=>{L.enabled&&L.update()})),c.useEffect((()=>(L.connect(y),()=>{L.dispose()})),[y,a,L,v]),c.useEffect((()=>{const e=e=>{v(),a&&h.regress(),u&&u(e)};return L.addEventListener("change",e),i&&L.addEventListener("start",i),f&&L.addEventListener("end",f),()=>{i&&L.removeEventListener("start",i),f&&L.removeEventListener("end",f),L.removeEventListener("change",e)}}),[u,i,f]),c.useEffect((()=>{L.handleResize()}),[j]),c.useEffect((()=>{if(e){const e=g().controls;return p({controls:L}),()=>p({controls:e})}}),[e,L]),c.createElement("primitive",s.default({ref:d,object:L},l))}));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: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;

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" | "attachArray" | "attachObject" | "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" | "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>>;

package/core/TrackballControls.js

@@ -29,10 +29,6 @@ const TrackballControls = /*#__PURE__*/React.forwardRef(({
   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();
@@ -40,27 +36,26 @@ 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.removeEventListener('change', callback);
+      controls.dispose();
     };
-  }, [onChange, onStart, onEnd]);
+  }, [explDomElement, onChange, onStart, onEnd, regress, controls, invalidate]);
   React.useEffect(() => {
     controls.handleResize();
   }, [viewport]);
   React.useEffect(() => {
     if (makeDefault) {
-      // @ts-expect-error new in @react-three/fiber@7.0.5
-      const old = get().controls; // @ts-expect-error new in @react-three/fiber@7.0.5
-
+      const old = get().controls;
       set({
         controls
-      }); // @ts-expect-error new in @react-three/fiber@7.0.5
-
+      });
       return () => set({
         controls: old
       });

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"),o=require("react"),a=require("three"),l=require("three-stdlib");function u(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=u(e),c=u(t),d=u(r),f=s(o),v=s(a);const m=f.forwardRef((({children:e,domElement:t,onChange:r,onMouseDown:o,onMouseUp:a,onObjectChange:u,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)),O=n.useThree((e=>e.gl)),w=n.useThree((e=>e.camera)),q=n.useThree((e=>e.invalidate)),y=b||w,C=f.useMemo((()=>new l.TransformControls(y,t||O.domElement)),[y,t,O.domElement]),D=f.useRef();return f.useLayoutEffect((()=>(s?C.attach(s instanceof v.Object3D?s:s.current):D.current instanceof v.Object3D&&C.attach(D.current),()=>{C.detach()})),[s,e,C]),f.useEffect((()=>{if(j){const e=e=>j.enabled=!e.value;return C.addEventListener("dragging-changed",e),()=>C.removeEventListener("dragging-changed",e)}}),[C,j]),f.useEffect((()=>{const e=e=>{q(),r&&r(e)};return null==C||null==C.addEventListener||C.addEventListener("change",e),o&&(null==C||null==C.addEventListener||C.addEventListener("mouseDown",o)),a&&(null==C||null==C.addEventListener||C.addEventListener("mouseUp",a)),u&&(null==C||null==C.addEventListener||C.addEventListener("objectChange",u)),()=>{null==C||null==C.removeEventListener||C.removeEventListener("change",e),o&&(null==C||null==C.removeEventListener||C.removeEventListener("mouseDown",o)),a&&(null==C||null==C.removeEventListener||C.removeEventListener("mouseUp",a)),u&&(null==C||null==C.removeEventListener||C.removeEventListener("objectChange",u))}}),[r,o,a,u,C,q]),C?f.createElement(f.Fragment,null,f.createElement("primitive",i.default({ref:E,dispose:void 0,object:C},p)),f.createElement("group",i.default({ref:D},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"),l=require("three-stdlib");function u(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=u(e),c=u(t),d=u(r),f=s(o),v=s(a);const m=f.forwardRef((({children:e,domElement:t,onChange:r,onMouseDown:o,onMouseUp:a,onObjectChange:u,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)),O=n.useThree((({gl:e})=>e)),w=n.useThree((({camera:e})=>e)),q=n.useThree((({invalidate:e})=>e)),y=b||w,C=f.useMemo((()=>new l.TransformControls(y,t||O.domElement)),[y,t,O.domElement]),D=f.useRef();return f.useLayoutEffect((()=>(s?C.attach(s instanceof v.Object3D?s:s.current):D.current instanceof v.Object3D&&C.attach(D.current),()=>{C.detach()})),[s,e,C]),f.useEffect((()=>{if(j){const e=e=>j.enabled=!e.value;return C.addEventListener("dragging-changed",e),()=>C.removeEventListener("dragging-changed",e)}}),[C,j]),f.useEffect((()=>{const e=e=>{q(),r&&r(e)};return null==C||null==C.addEventListener||C.addEventListener("change",e),o&&(null==C||null==C.addEventListener||C.addEventListener("mouseDown",o)),a&&(null==C||null==C.addEventListener||C.addEventListener("mouseUp",a)),u&&(null==C||null==C.addEventListener||C.addEventListener("objectChange",u)),()=>{null==C||null==C.removeEventListener||C.removeEventListener("change",e),o&&(null==C||null==C.removeEventListener||C.removeEventListener("mouseDown",o)),a&&(null==C||null==C.removeEventListener||C.removeEventListener("mouseUp",a)),u&&(null==C||null==C.removeEventListener||C.removeEventListener("objectChange",u))}}),[r,o,a,u,C,q]),C?f.createElement(f.Fragment,null,f.createElement("primitive",i.default({ref:E,dispose:void 0,object:C},p)),f.createElement("group",i.default({ref:D},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" | "attachArray" | "attachObject" | "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>>>;
+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,9 +25,15 @@ 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(state => state.gl);
-  const defaultCamera = useThree(state => state.camera);
-  const invalidate = useThree(state => state.invalidate);
+  const gl = useThree(({
+    gl
+  }) => gl);
+  const defaultCamera = useThree(({
+    camera
+  }) => camera);
+  const invalidate = useThree(({
+    invalidate
+  }) => invalidate);
   const explCamera = camera || defaultCamera;
   const controls = React.useMemo(() => new TransformControls$1(explCamera, domElement || gl.domElement), [explCamera, domElement, gl.domElement]);
   const group = React.useRef();
@@ -38,7 +44,9 @@ const TransformControls = /*#__PURE__*/React.forwardRef(({
       controls.attach(group.current);
     }
 
-    return () => void controls.detach();
+    return () => {
+      controls.detach();
+    };
   }, [object, children, controls]);
   React.useEffect(() => {
     if (defaultControls) {