@react-three/drei 9.88.17 → 9.89.1

package/core/Bounds.cjs.js

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

package/core/Bounds.d.ts

@@ -9,21 +9,27 @@ export type SizeProps = {
 export type BoundsApi = {
     getSize: () => SizeProps;
     refresh(object?: THREE.Object3D | THREE.Box3): any;
-    clip(): any;
-    fit(): any;
-    to: ({ position, target }: {
+    reset(): any;
+    moveTo(position: THREE.Vector3 | [number, number, number]): any;
+    lookAt({ target, up, }: {
+        target?: THREE.Vector3 | [number, number, number];
+        up?: THREE.Vector3 | [number, number, number];
+    }): any;
+    to({ position, target }: {
         position: [number, number, number];
-        target?: [number, number, number];
-    }) => any;
+        target: [number, number, number];
+    }): any;
+    fit(): any;
+    clip(): any;
 };
 export type BoundsProps = JSX.IntrinsicElements['group'] & {
-    damping?: number;
+    maxDuration?: number;
+    margin?: number;
+    observe?: boolean;
     fit?: boolean;
     clip?: boolean;
-    observe?: boolean;
-    margin?: number;
-    eps?: number;
+    interpolateFunc?: (t: number) => number;
     onFit?: (data: SizeProps) => void;
 };
-export declare function Bounds({ children, damping, fit, clip, observe, margin, eps, onFit }: BoundsProps): React.JSX.Element;
+export declare function Bounds({ children, maxDuration, margin, observe, fit, clip, interpolateFunc, onFit, }: BoundsProps): React.JSX.Element;
 export declare function useBounds(): BoundsApi;

package/core/Bounds.js

@@ -2,60 +2,66 @@ import * as React from 'react';
 import * as THREE from 'three';
 import { useThree, useFrame } from '@react-three/fiber';
 
+// eslint-disable-next-line no-shadow
+var AnimationState = /*#__PURE__*/function (AnimationState) {
+  AnimationState[AnimationState["NONE"] = 0] = "NONE";
+  AnimationState[AnimationState["START"] = 1] = "START";
+  AnimationState[AnimationState["ACTIVE"] = 2] = "ACTIVE";
+  return AnimationState;
+}(AnimationState || {});
 const isOrthographic = def => def && def.isOrthographicCamera;
 const isBox3 = def => def && def.isBox3;
-const context = /* @__PURE__ */React.createContext(null);
+const interpolateFuncDefault = t => {
+  // Imitates the previously used THREE.MathUtils.damp
+  return 1 - Math.exp(-5 * t) + 0.007 * t;
+};
+const context = /*#__PURE__*/React.createContext(null);
 function Bounds({
   children,
-  damping = 6,
+  maxDuration = 1.0,
+  margin = 1.2,
+  observe,
   fit,
   clip,
-  observe,
-  margin = 1.2,
-  eps = 0.01,
+  interpolateFunc = interpolateFuncDefault,
   onFit
 }) {
   const ref = React.useRef(null);
   const {
     camera,
-    invalidate,
     size,
-    controls: controlsImpl
+    invalidate
   } = useThree();
-  const controls = controlsImpl;
+  const controls = useThree(state => state.controls);
   const onFitRef = React.useRef(onFit);
   onFitRef.current = onFit;
-  function equals(a, b) {
-    return Math.abs(a.x - b.x) < eps && Math.abs(a.y - b.y) < eps && Math.abs(a.z - b.z) < eps;
-  }
-  function damp(v, t, lambda, delta) {
-    v.x = THREE.MathUtils.damp(v.x, t.x, lambda, delta);
-    v.y = THREE.MathUtils.damp(v.y, t.y, lambda, delta);
-    v.z = THREE.MathUtils.damp(v.z, t.z, lambda, delta);
-  }
-  const [current] = React.useState(() => ({
-    animating: false,
-    focus: new THREE.Vector3(),
-    camera: new THREE.Vector3(),
-    zoom: 1
-  }));
-  const [goal] = React.useState(() => ({
-    focus: new THREE.Vector3(),
-    camera: new THREE.Vector3(),
-    zoom: 1
-  }));
+  const origin = React.useRef({
+    camPos: new THREE.Vector3(),
+    camRot: new THREE.Quaternion(),
+    camZoom: 1
+  });
+  const goal = React.useRef({
+    camPos: undefined,
+    camRot: undefined,
+    camZoom: undefined,
+    camUp: undefined,
+    target: undefined
+  });
+  const animationState = React.useRef(AnimationState.NONE);
+  const t = React.useRef(0); // represent animation state from 0 to 1
+
   const [box] = React.useState(() => new THREE.Box3());
   const api = React.useMemo(() => {
     function getSize() {
-      const size = box.getSize(new THREE.Vector3());
+      const boxSize = box.getSize(new THREE.Vector3());
       const center = box.getCenter(new THREE.Vector3());
-      const maxSize = Math.max(size.x, size.y, size.z);
+      const maxSize = Math.max(boxSize.x, boxSize.y, boxSize.z);
       const fitHeightDistance = isOrthographic(camera) ? maxSize * 4 : maxSize / (2 * Math.atan(Math.PI * camera.fov / 360));
       const fitWidthDistance = isOrthographic(camera) ? maxSize * 4 : fitHeightDistance / camera.aspect;
       const distance = margin * Math.max(fitHeightDistance, fitWidthDistance);
       return {
         box,
-        size,
+        size: boxSize,
         center,
         distance
       };
@@ -73,102 +79,122 @@ function Bounds({
           const max = camera.position.length() || 10;
           box.setFromCenterAndSize(new THREE.Vector3(), new THREE.Vector3(max, max, max));
         }
-        if ((controls == null ? void 0 : controls.constructor.name) === 'OrthographicTrackballControls') {
-          // Put camera on a sphere along which it should move
-          const {
-            distance
-          } = getSize();
-          const direction = camera.position.clone().sub(controls.target).normalize().multiplyScalar(distance);
-          const newPos = controls.target.clone().add(direction);
-          camera.position.copy(newPos);
-        }
+        origin.current.camPos.copy(camera.position);
+        origin.current.camRot.copy(camera.quaternion);
+        isOrthographic(camera) && (origin.current.camZoom = camera.zoom);
+        goal.current.camPos = undefined;
+        goal.current.camRot = undefined;
+        goal.current.camZoom = undefined;
+        goal.current.camUp = undefined;
+        goal.current.target = undefined;
         return this;
       },
-      clip() {
+      reset() {
         const {
+          center,
           distance
         } = getSize();
-        if (controls) controls.maxDistance = distance * 10;
-        camera.near = distance / 100;
-        camera.far = distance * 100;
-        camera.updateProjectionMatrix();
-        if (controls) controls.update();
-        invalidate();
+        const direction = camera.position.clone().sub(center).normalize();
+        goal.current.camPos = center.clone().addScaledVector(direction, distance);
+        goal.current.target = center.clone();
+        const mCamRot = new THREE.Matrix4().lookAt(goal.current.camPos, goal.current.target, camera.up);
+        goal.current.camRot = new THREE.Quaternion().setFromRotationMatrix(mCamRot);
+        animationState.current = AnimationState.START;
+        t.current = 0;
+        return this;
+      },
+      moveTo(position) {
+        goal.current.camPos = Array.isArray(position) ? new THREE.Vector3(...position) : position.clone();
+        animationState.current = AnimationState.START;
+        t.current = 0;
+        return this;
+      },
+      lookAt({
+        target,
+        up
+      }) {
+        goal.current.target = Array.isArray(target) ? new THREE.Vector3(...target) : target.clone();
+        if (up) {
+          goal.current.camUp = Array.isArray(up) ? new THREE.Vector3(...up) : up.clone();
+        } else {
+          goal.current.camUp = camera.up.clone();
+        }
+        const mCamRot = new THREE.Matrix4().lookAt(goal.current.camPos || camera.position, goal.current.target, goal.current.camUp);
+        goal.current.camRot = new THREE.Quaternion().setFromRotationMatrix(mCamRot);
+        animationState.current = AnimationState.START;
+        t.current = 0;
         return this;
       },
+      /**
+       * @deprecated Use moveTo and lookAt instead
+       */
       to({
         position,
         target
       }) {
-        current.camera.copy(camera.position);
-        const {
-          center
-        } = getSize();
-        goal.camera.set(...position);
-        if (target) {
-          goal.focus.set(...target);
-        } else {
-          goal.focus.copy(center);
+        return this.moveTo(position).lookAt({
+          target
+        });
+      },
+      fit() {
+        if (!isOrthographic(camera)) {
+          // Fit should only modify zoom now. Thus avoid executing it if the camera isn't orthographic
+          return this;
         }
-        if (damping) {
-          current.animating = true;
-        } else {
-          camera.position.set(...position);
+        let maxHeight = 0,
+          maxWidth = 0;
+        const vertices = [new THREE.Vector3(box.min.x, box.min.y, box.min.z), new THREE.Vector3(box.min.x, box.max.y, box.min.z), new THREE.Vector3(box.min.x, box.min.y, box.max.z), new THREE.Vector3(box.min.x, box.max.y, box.max.z), new THREE.Vector3(box.max.x, box.max.y, box.max.z), new THREE.Vector3(box.max.x, box.max.y, box.min.z), new THREE.Vector3(box.max.x, box.min.y, box.max.z), new THREE.Vector3(box.max.x, box.min.y, box.min.z)];
+
+        // Transform the center and each corner to camera space
+        const pos = goal.current.camPos || camera.position;
+        const target = goal.current.target || (controls == null ? void 0 : controls.target);
+        const up = goal.current.camUp || camera.up;
+        const mCamWInv = target ? new THREE.Matrix4().lookAt(pos, target, up).setPosition(pos).invert() : camera.matrixWorldInverse;
+        for (const v of vertices) {
+          v.applyMatrix4(mCamWInv);
+          maxHeight = Math.max(maxHeight, Math.abs(v.y));
+          maxWidth = Math.max(maxWidth, Math.abs(v.x));
         }
+        maxHeight *= 2;
+        maxWidth *= 2;
+        const zoomForHeight = (camera.top - camera.bottom) / maxHeight;
+        const zoomForWidth = (camera.right - camera.left) / maxWidth;
+        goal.current.camZoom = Math.min(zoomForHeight, zoomForWidth) / margin;
+        animationState.current = AnimationState.START;
+        t.current = 0;
+        onFitRef.current && onFitRef.current(this.getSize());
         return this;
       },
-      fit() {
-        current.camera.copy(camera.position);
-        if (controls) current.focus.copy(controls.target);
+      clip() {
         const {
-          center,
           distance
         } = getSize();
-        const direction = center.clone().sub(camera.position).normalize().multiplyScalar(distance);
-        goal.camera.copy(center).sub(direction);
-        goal.focus.copy(center);
-        if (isOrthographic(camera)) {
-          current.zoom = camera.zoom;
-          let maxHeight = 0,
-            maxWidth = 0;
-          const vertices = [new THREE.Vector3(box.min.x, box.min.y, box.min.z), new THREE.Vector3(box.min.x, box.max.y, box.min.z), new THREE.Vector3(box.min.x, box.min.y, box.max.z), new THREE.Vector3(box.min.x, box.max.y, box.max.z), new THREE.Vector3(box.max.x, box.max.y, box.max.z), new THREE.Vector3(box.max.x, box.max.y, box.min.z), new THREE.Vector3(box.max.x, box.min.y, box.max.z), new THREE.Vector3(box.max.x, box.min.y, box.min.z)];
-          // Transform the center and each corner to camera space
-          center.applyMatrix4(camera.matrixWorldInverse);
-          for (const v of vertices) {
-            v.applyMatrix4(camera.matrixWorldInverse);
-            maxHeight = Math.max(maxHeight, Math.abs(v.y - center.y));
-            maxWidth = Math.max(maxWidth, Math.abs(v.x - center.x));
-          }
-          maxHeight *= 2;
-          maxWidth *= 2;
-          const zoomForHeight = (camera.top - camera.bottom) / maxHeight;
-          const zoomForWidth = (camera.right - camera.left) / maxWidth;
-          goal.zoom = Math.min(zoomForHeight, zoomForWidth) / margin;
-          if (!damping) {
-            camera.zoom = goal.zoom;
-            camera.updateProjectionMatrix();
-          }
-        }
-        if (damping) {
-          current.animating = true;
-        } else {
-          camera.position.copy(goal.camera);
-          camera.lookAt(goal.focus);
-          if (controls) {
-            controls.target.copy(goal.focus);
-            controls.update();
-          }
+        camera.near = distance / 100;
+        camera.far = distance * 100;
+        camera.updateProjectionMatrix();
+        if (controls) {
+          controls.maxDistance = distance * 10;
+          controls.update();
         }
-        if (onFitRef.current) onFitRef.current(this.getSize());
         invalidate();
         return this;
       }
     };
-  }, [box, camera, controls, margin, damping, invalidate]);
+  }, [box, camera, controls, margin, invalidate]);
   React.useLayoutEffect(() => {
     if (controls) {
       // Try to prevent drag hijacking
-      const callback = () => current.animating = false;
+      const callback = () => {
+        if (controls && goal.current.target && animationState.current !== AnimationState.NONE) {
+          const front = new THREE.Vector3().setFromMatrixColumn(camera.matrix, 2);
+          const d0 = origin.current.camPos.distanceTo(controls.target);
+          const d1 = (goal.current.camPos || origin.current.camPos).distanceTo(goal.current.target);
+          const d = (1 - t.current) * d0 + t.current * d1;
+          controls.target.copy(camera.position).addScaledVector(front, -d);
+          controls.update();
+        }
+        animationState.current = AnimationState.NONE;
+      };
       controls.addEventListener('start', callback);
       return () => controls.removeEventListener('start', callback);
     }
@@ -184,26 +210,33 @@ function Bounds({
     }
   }, [size, clip, fit, observe, camera, controls]);
   useFrame((state, delta) => {
-    if (current.animating) {
-      damp(current.focus, goal.focus, damping, delta);
-      damp(current.camera, goal.camera, damping, delta);
-      current.zoom = THREE.MathUtils.damp(current.zoom, goal.zoom, damping, delta);
-      camera.position.copy(current.camera);
-      if (isOrthographic(camera)) {
-        camera.zoom = current.zoom;
+    // This [additional animation step START] is needed to guarantee that delta used in animation isn't absurdly high (2-3 seconds) which is actually possible if rendering happens on demand...
+    if (animationState.current === AnimationState.START) {
+      animationState.current = AnimationState.ACTIVE;
+      invalidate();
+    } else if (animationState.current === AnimationState.ACTIVE) {
+      t.current += delta / maxDuration;
+      if (t.current >= 1) {
+        goal.current.camPos && camera.position.copy(goal.current.camPos);
+        goal.current.camRot && camera.quaternion.copy(goal.current.camRot);
+        goal.current.camUp && camera.up.copy(goal.current.camUp);
+        goal.current.camZoom && isOrthographic(camera) && (camera.zoom = goal.current.camZoom);
+        camera.updateMatrixWorld();
         camera.updateProjectionMatrix();
-      }
-      if (!controls) {
-        camera.lookAt(current.focus);
+        if (controls && goal.current.target) {
+          controls.target.copy(goal.current.target);
+          controls.update();
+        }
+        animationState.current = AnimationState.NONE;
       } else {
-        controls.target.copy(current.focus);
-        controls.update();
+        const k = interpolateFunc(t.current);
+        goal.current.camPos && camera.position.lerpVectors(origin.current.camPos, goal.current.camPos, k);
+        goal.current.camRot && camera.quaternion.slerpQuaternions(origin.current.camRot, goal.current.camRot, k);
+        goal.current.camZoom && isOrthographic(camera) && (camera.zoom = (1 - k) * origin.current.camZoom + k * goal.current.camZoom);
+        camera.updateMatrixWorld();
+        camera.updateProjectionMatrix();
       }
       invalidate();
-      if (isOrthographic(camera) && !(Math.abs(current.zoom - goal.zoom) < eps)) return;
-      if (!isOrthographic(camera) && !equals(current.camera, goal.camera)) return;
-      if (controls && !equals(current.focus, goal.focus)) return;
-      current.animating = false;
     }
   });
   return /*#__PURE__*/React.createElement("group", {

package/core/Outlines.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),t=require("react"),r=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib"),c=require("../helpers/constants.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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 l=s(e),u=a(n),d=a(t);const f=r.shaderMaterial({screenspace:!1,color:new u.Color("black"),opacity:1,thickness:.05,size:new u.Vector2},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   uniform float thickness;\n   uniform float screenspace;\n   uniform vec2 size;\n   void main() {\n     #if defined (USE_SKINNING)\n\t     #include <beginnormal_vertex>\n       #include <morphnormal_vertex>\n       #include <skinbase_vertex>\n       #include <skinnormal_vertex>\n       #include <defaultnormal_vertex>\n     #endif\n     #include <begin_vertex>\n\t   #include <morphtarget_vertex>\n\t   #include <skinning_vertex>\n     #include <project_vertex>\n     vec4 tNormal = vec4(normal, 0.0);\n     vec4 tPosition = vec4(transformed, 1.0);\n     #ifdef USE_INSTANCING\n       tNormal = instanceMatrix * tNormal;\n       tPosition = instanceMatrix * tPosition;\n     #endif\n     if (screenspace == 0.0) {\n       vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;\n       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n     } else {\n       vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;\n       vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;\n       vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;\n       clipPosition.xy += offset;\n       gl_Position = clipPosition;\n     }\n   }",`uniform vec3 color;\n   uniform float opacity;\n   void main(){\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:t=!1,screenspace:r=!1,toneMapped:c=!0,polygonOffset:s=!1,polygonOffsetFactor:a=0,renderOrder:p=0,thickness:m=.05,angle:g=Math.PI,...v}){const x=d.useRef(null),[y]=d.useState((()=>new f({side:u.BackSide}))),{gl:h}=i.useThree(),_=h.getDrawingBufferSize(new u.Vector2);d.useMemo((()=>i.extend({OutlinesMaterial:f})),[]);const M=d.useRef(0),b=d.useRef(null);return d.useLayoutEffect((()=>{const e=x.current,n=e.parent;if(n&&n.geometry&&(M.current!==g||b.current!==n.geometry)){M.current=g,b.current=n.geometry;let t=e.children[0];t&&(g&&t.geometry.dispose(),e.remove(t)),n.skeleton?(t=new u.SkinnedMesh,t.material=y,t.bind(n.skeleton,n.bindMatrix),e.add(t)):n.isInstancedMesh?(t=new u.InstancedMesh(n.geometry,y,n.count),t.instanceMatrix=n.instanceMatrix,e.add(t)):(t=new u.Mesh,t.material=y,e.add(t)),t.geometry=g?o.toCreasedNormals(n.geometry,g):n.geometry}})),d.useLayoutEffect((()=>{const o=x.current.children[0];o&&(o.renderOrder=p,i.applyProps(o.material,{transparent:t,thickness:m,color:e,opacity:n,size:_,screenspace:r,toneMapped:c,polygonOffset:s,polygonOffsetFactor:a}))})),d.useEffect((()=>()=>{const e=x.current;let n=e.children[0];n&&(g&&n.geometry.dispose(),e.remove(n))}),[]),d.createElement("group",l.default({ref:x},v))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),t=require("react"),r=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib"),c=require("../helpers/constants.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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 l=s(e),u=a(n),d=a(t);const f=r.shaderMaterial({screenspace:!1,color:new u.Color("black"),opacity:1,thickness:.05,size:new u.Vector2},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   uniform float thickness;\n   uniform float screenspace;\n   uniform vec2 size;\n   void main() {\n     #if defined (USE_SKINNING)\n\t     #include <beginnormal_vertex>\n       #include <morphnormal_vertex>\n       #include <skinbase_vertex>\n       #include <skinnormal_vertex>\n       #include <defaultnormal_vertex>\n     #endif\n     #include <begin_vertex>\n\t   #include <morphtarget_vertex>\n\t   #include <skinning_vertex>\n     #include <project_vertex>\n     vec4 tNormal = vec4(normal, 0.0);\n     vec4 tPosition = vec4(transformed, 1.0);\n     #ifdef USE_INSTANCING\n       tNormal = instanceMatrix * tNormal;\n       tPosition = instanceMatrix * tPosition;\n     #endif\n     if (screenspace == 0.0) {\n       vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;\n       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n     } else {\n       vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;\n       vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;\n       vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;\n       clipPosition.xy += offset;\n       gl_Position = clipPosition;\n     }\n   }",`uniform vec3 color;\n   uniform float opacity;\n   void main(){\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:t=!1,screenspace:r=!1,toneMapped:c=!0,polygonOffset:s=!1,polygonOffsetFactor:a=0,renderOrder:p=0,thickness:m=.05,angle:g=Math.PI,...v}){const x=d.useRef(),[y]=d.useState((()=>new f({side:u.BackSide}))),{gl:h}=i.useThree(),_=h.getDrawingBufferSize(new u.Vector2);d.useMemo((()=>i.extend({OutlinesMaterial:f})),[]);const M=d.useRef(0),b=d.useRef();return d.useLayoutEffect((()=>{const e=x.current;if(!e)return;const n=e.parent;if(n&&n.geometry&&(M.current!==g||b.current!==n.geometry)){M.current=g,b.current=n.geometry;let t=e.children[0];t&&(g&&t.geometry.dispose(),e.remove(t)),n.skeleton?(t=new u.SkinnedMesh,t.material=y,t.bind(n.skeleton,n.bindMatrix),e.add(t)):n.isInstancedMesh?(t=new u.InstancedMesh(n.geometry,y,n.count),t.instanceMatrix=n.instanceMatrix,e.add(t)):(t=new u.Mesh,t.material=y,e.add(t)),t.geometry=g?o.toCreasedNormals(n.geometry,g):n.geometry}})),d.useLayoutEffect((()=>{const o=x.current;if(!o)return;const l=o.children[0];l&&(l.renderOrder=p,i.applyProps(l.material,{transparent:t,thickness:m,color:e,opacity:n,size:_,screenspace:r,toneMapped:c,polygonOffset:s,polygonOffsetFactor:a}))})),d.useEffect((()=>()=>{const e=x.current;if(!e)return;const n=e.children[0];n&&(g&&n.geometry.dispose(),e.remove(n))}),[]),d.createElement("group",l.default({ref:x},v))};

package/core/Outlines.js

@@ -66,7 +66,7 @@ function Outlines({
   angle = Math.PI,
   ...props
 }) {
-  const ref = React.useRef(null);
+  const ref = React.useRef();
   const [material] = React.useState(() => new OutlinesMaterial({
     side: THREE.BackSide
   }));
@@ -78,9 +78,10 @@ function Outlines({
     OutlinesMaterial
   }), []);
   const oldAngle = React.useRef(0);
-  const oldGeometry = React.useRef(null);
+  const oldGeometry = React.useRef();
   React.useLayoutEffect(() => {
     const group = ref.current;
+    if (!group) return;
     const parent = group.parent;
     if (parent && parent.geometry) {
       if (oldAngle.current !== angle || oldGeometry.current !== parent.geometry) {
@@ -113,6 +114,7 @@ function Outlines({
   });
   React.useLayoutEffect(() => {
     const group = ref.current;
+    if (!group) return;
     const mesh = group.children[0];
     if (mesh) {
       mesh.renderOrder = renderOrder;
@@ -133,7 +135,8 @@ function Outlines({
     return () => {
       // Dispose everything on unmount
       const group = ref.current;
-      let mesh = group.children[0];
+      if (!group) return;
+      const mesh = group.children[0];
       if (mesh) {
         if (angle) mesh.geometry.dispose();
         group.remove(mesh);

package/core/useGLTF.d.ts

@@ -1,5 +1,6 @@
-import { GLTFLoader } from 'three-stdlib';
-export declare function useGLTF<T extends string | string[]>(path: T, useDraco?: boolean | string, useMeshOpt?: boolean, extendLoader?: (loader: GLTFLoader) => void): T extends any[] ? import("three-stdlib").GLTF[] : import("three-stdlib").GLTF;
+import { type GLTF, GLTFLoader } from 'three-stdlib';
+import { type ObjectMap } from '@react-three/fiber';
+export declare function useGLTF<T extends string | string[]>(path: T, useDraco?: boolean | string, useMeshOpt?: boolean, extendLoader?: (loader: GLTFLoader) => void): T extends any[] ? (GLTF & ObjectMap)[] : GLTF & ObjectMap;
 export declare namespace useGLTF {
     var preload: (path: string | string[], useDraco?: string | boolean, useMeshOpt?: boolean, extendLoader?: ((loader: GLTFLoader) => void) | undefined) => undefined;
     var clear: (input: string | string[]) => void;

package/core/useGLTF.js

@@ -1,7 +1,6 @@
 import { GLTFLoader, DRACOLoader, MeshoptDecoder } from 'three-stdlib';
 import { useLoader } from '@react-three/fiber';
 
-// @ts-ignore
 let dracoLoader = null;
 let decoderPath = 'https://www.gstatic.com/draco/versioned/decoders/1.5.5/';
 function extensions(useDraco, useMeshopt, extendLoader) {
@@ -22,8 +21,7 @@ function extensions(useDraco, useMeshopt, extendLoader) {
   };
 }
 function useGLTF(path, useDraco = true, useMeshOpt = true, extendLoader) {
-  const gltf = useLoader(GLTFLoader, path, extensions(useDraco, useMeshOpt, extendLoader));
-  return gltf;
+  return useLoader(GLTFLoader, path, extensions(useDraco, useMeshOpt, extendLoader));
 }
 useGLTF.preload = (path, useDraco = true, useMeshOpt = true, extendLoader) => useLoader.preload(GLTFLoader, path, extensions(useDraco, useMeshOpt, extendLoader));
 useGLTF.clear = input => useLoader.clear(GLTFLoader, input);