@react-three/drei 9.99.7 → 9.101.0

package/web/pivotControls/ScalingSphere.js

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import * as THREE from 'three';
+import { useThree } from '@react-three/fiber';
+import { Html } from '../Html.js';
+import { context } from './context.js';
+import { calculateScaleFactor } from '../../core/calculateScaleFactor.js';
+
+const vec1 = /* @__PURE__ */new THREE.Vector3();
+const vec2 = /* @__PURE__ */new THREE.Vector3();
+const calculateOffset = (clickPoint, normal, rayStart, rayDir) => {
+  const e1 = normal.dot(normal);
+  const e2 = normal.dot(clickPoint) - normal.dot(rayStart);
+  const e3 = normal.dot(rayDir);
+  if (e3 === 0) {
+    return -e2 / e1;
+  }
+  vec1.copy(rayDir).multiplyScalar(e1 / e3).sub(normal);
+  vec2.copy(rayDir).multiplyScalar(e2 / e3).add(rayStart).sub(clickPoint);
+  const offset = -vec1.dot(vec2) / vec1.dot(vec1);
+  return offset;
+};
+const upV = /* @__PURE__ */new THREE.Vector3(0, 1, 0);
+const scaleV = /* @__PURE__ */new THREE.Vector3();
+const scaleMatrix = /* @__PURE__ */new THREE.Matrix4();
+const ScalingSphere = ({
+  direction,
+  axis
+}) => {
+  const {
+    scaleLimits,
+    annotations,
+    annotationsClass,
+    depthTest,
+    scale,
+    lineWidth,
+    fixed,
+    axisColors,
+    hoveredColor,
+    opacity,
+    onDragStart,
+    onDrag,
+    onDragEnd,
+    userData
+  } = React.useContext(context);
+  const size = useThree(state => state.size);
+  // @ts-expect-error new in @react-three/fiber@7.0.5
+  const camControls = useThree(state => state.controls);
+  const divRef = React.useRef(null);
+  const objRef = React.useRef(null);
+  const meshRef = React.useRef(null);
+  const scale0 = React.useRef(1);
+  const scaleCur = React.useRef(1);
+  const clickInfo = React.useRef(null);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const position = fixed ? 1.2 : 1.2 * scale;
+  const onPointerDown = React.useCallback(e => {
+    if (annotations) {
+      divRef.current.innerText = `${scaleCur.current.toFixed(2)}`;
+      divRef.current.style.display = 'block';
+    }
+    e.stopPropagation();
+    const rotation = new THREE.Matrix4().extractRotation(objRef.current.matrixWorld);
+    const clickPoint = e.point.clone();
+    const origin = new THREE.Vector3().setFromMatrixPosition(objRef.current.matrixWorld);
+    const dir = direction.clone().applyMatrix4(rotation).normalize();
+    const mPLG = objRef.current.matrixWorld.clone();
+    const mPLGInv = mPLG.clone().invert();
+    const offsetMultiplier = fixed ? 1 / calculateScaleFactor(objRef.current.getWorldPosition(vec1), scale, e.camera, size) : 1;
+    clickInfo.current = {
+      clickPoint,
+      dir,
+      mPLG,
+      mPLGInv,
+      offsetMultiplier
+    };
+    onDragStart({
+      component: 'Sphere',
+      axis,
+      origin,
+      directions: [dir]
+    });
+    camControls && (camControls.enabled = false);
+    // @ts-ignore - setPointerCapture is not in the type definition
+    e.target.setPointerCapture(e.pointerId);
+  }, [annotations, camControls, direction, onDragStart, axis, fixed, scale, size]);
+  const onPointerMove = React.useCallback(e => {
+    e.stopPropagation();
+    if (!isHovered) setIsHovered(true);
+    if (clickInfo.current) {
+      const {
+        clickPoint,
+        dir,
+        mPLG,
+        mPLGInv,
+        offsetMultiplier
+      } = clickInfo.current;
+      const [min, max] = (scaleLimits == null ? void 0 : scaleLimits[axis]) || [1e-5, undefined]; // always limit the minimal value, since setting it very low might break the transform
+
+      const offsetW = calculateOffset(clickPoint, dir, e.ray.origin, e.ray.direction);
+      const offsetL = offsetW * offsetMultiplier;
+      const offsetH = fixed ? offsetL : offsetL / scale;
+      let upscale = Math.pow(2, offsetH * 0.2);
+
+      // @ts-ignore
+      if (e.shiftKey) {
+        upscale = Math.round(upscale * 10) / 10;
+      }
+      upscale = Math.max(upscale, min / scale0.current);
+      if (max !== undefined) {
+        upscale = Math.min(upscale, max / scale0.current);
+      }
+      scaleCur.current = scale0.current * upscale;
+      meshRef.current.position.set(0, position + offsetL, 0);
+      if (annotations) {
+        divRef.current.innerText = `${scaleCur.current.toFixed(2)}`;
+      }
+      scaleV.set(1, 1, 1);
+      scaleV.setComponent(axis, upscale);
+      scaleMatrix.makeScale(scaleV.x, scaleV.y, scaleV.z).premultiply(mPLG).multiply(mPLGInv);
+      onDrag(scaleMatrix);
+    }
+  }, [annotations, position, onDrag, isHovered, scaleLimits, axis]);
+  const onPointerUp = React.useCallback(e => {
+    if (annotations) {
+      divRef.current.style.display = 'none';
+    }
+    e.stopPropagation();
+    scale0.current = scaleCur.current;
+    clickInfo.current = null;
+    meshRef.current.position.set(0, position, 0);
+    onDragEnd();
+    camControls && (camControls.enabled = true);
+    // @ts-ignore - releasePointerCapture & PointerEvent#pointerId is not in the type definition
+    e.target.releasePointerCapture(e.pointerId);
+  }, [annotations, camControls, onDragEnd, position]);
+  const onPointerOut = React.useCallback(e => {
+    e.stopPropagation();
+    setIsHovered(false);
+  }, []);
+  const {
+    radius,
+    matrixL
+  } = React.useMemo(() => {
+    const radius = fixed ? lineWidth / scale * 1.8 : scale / 22.5;
+    const quaternion = new THREE.Quaternion().setFromUnitVectors(upV, direction.clone().normalize());
+    const matrixL = new THREE.Matrix4().makeRotationFromQuaternion(quaternion);
+    return {
+      radius,
+      matrixL
+    };
+  }, [direction, scale, lineWidth, fixed]);
+  const color = isHovered ? hoveredColor : axisColors[axis];
+  return /*#__PURE__*/React.createElement("group", {
+    ref: objRef
+  }, /*#__PURE__*/React.createElement("group", {
+    matrix: matrixL,
+    matrixAutoUpdate: false,
+    onPointerDown: onPointerDown,
+    onPointerMove: onPointerMove,
+    onPointerUp: onPointerUp,
+    onPointerOut: onPointerOut
+  }, annotations && /*#__PURE__*/React.createElement(Html, {
+    position: [0, position / 2, 0]
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'none',
+      background: '#151520',
+      color: 'white',
+      padding: '6px 8px',
+      borderRadius: 7,
+      whiteSpace: 'nowrap'
+    },
+    className: annotationsClass,
+    ref: divRef
+  })), /*#__PURE__*/React.createElement("mesh", {
+    ref: meshRef,
+    position: [0, position, 0],
+    renderOrder: 500,
+    userData: userData
+  }, /*#__PURE__*/React.createElement("sphereGeometry", {
+    args: [radius, 12, 12]
+  }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    transparent: true,
+    depthTest: depthTest,
+    color: color,
+    opacity: opacity,
+    polygonOffset: true,
+    polygonOffsetFactor: -10
+  }))));
+};
+
+export { ScalingSphere, calculateOffset };

package/web/pivotControls/context.d.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import * as React from 'react';
 export type OnDragStartProps = {
-    component: 'Arrow' | 'Slider' | 'Rotator';
+    component: 'Arrow' | 'Slider' | 'Rotator' | 'Sphere';
     axis: 0 | 1 | 2;
     origin: THREE.Vector3;
     directions: THREE.Vector3[];
@@ -15,6 +15,7 @@ export type PivotContext = {
     };
     translationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
     rotationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
+    scaleLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
     axisColors: [string | number, string | number, string | number];
     hoveredColor: string | number;
     opacity: number;

package/web/pivotControls/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@react-three/fiber"),t=require("react"),i=require("three"),a=require("./AxisArrow.cjs.js"),o=require("./AxisRotator.cjs.js"),n=require("./PlaneSlider.cjs.js"),c=require("./context.cjs.js"),l=require("../../core/calculateScaleFactor.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("../../core/Line.cjs.js"),require("three-stdlib"),require("../Html.cjs.js"),require("react-dom/client");var d=s(e),x=u(t),m=u(i);const p=new m.Matrix4,f=new m.Matrix4,y=new m.Matrix4,w=new m.Matrix4,v=new m.Matrix4,g=new m.Matrix4,j=new m.Matrix4,b=new m.Matrix4,E=new m.Box3,A=new m.Box3,h=new m.Vector3,M=new m.Vector3,q=new m.Vector3,S=new m.Vector3,R=new m.Vector3(1,0,0),P=new m.Vector3(0,1,0),D=new m.Vector3(0,0,1),V=x.forwardRef((({matrix:e,onDragStart:t,onDrag:i,onDragEnd:s,autoTransform:u=!0,anchor:V,disableAxes:W=!1,disableSliders:C=!1,disableRotations:L=!1,activeAxes:O=[!0,!0,!0],offset:B=[0,0,0],rotation:T=[0,0,0],scale:_=1,lineWidth:z=4,fixed:F=!1,translationLimits:k,rotationLimits:H,depthTest:I=!0,axisColors:U=["#ff2060","#20df80","#2080ff"],hoveredColor:G="#ffff40",annotations:J=!1,annotationsClass:K,opacity:N=1,visible:Q=!0,userData:X,children:Y,...Z},$)=>{const ee=r.useThree((e=>e.invalidate)),re=x.useRef(null),te=x.useRef(null),ie=x.useRef(null),ae=x.useRef(null),oe=x.useRef([0,0,0]);x.useLayoutEffect((()=>{V&&(ae.current.updateWorldMatrix(!0,!0),w.copy(ae.current.matrixWorld).invert(),E.makeEmpty(),ae.current.traverse((e=>{e.geometry&&(e.geometry.boundingBox||e.geometry.computeBoundingBox(),g.copy(e.matrixWorld).premultiply(w),A.copy(e.geometry.boundingBox),A.applyMatrix4(g),E.union(A))})),h.copy(E.max).add(E.min).multiplyScalar(.5),M.copy(E.max).sub(E.min).multiplyScalar(.5),q.copy(M).multiply(new m.Vector3(...V)).add(h),S.set(...B).add(q),ie.current.position.copy(S),ee())}));const ne=x.useMemo((()=>({onDragStart:e=>{p.copy(te.current.matrix),f.copy(te.current.matrixWorld),t&&t(e),ee()},onDrag:e=>{y.copy(re.current.matrixWorld),w.copy(y).invert(),v.copy(f).premultiply(e),g.copy(v).premultiply(w),j.copy(p).invert(),b.copy(g).multiply(j),u&&te.current.matrix.copy(g),i&&i(g,b,v,e),ee()},onDragEnd:()=>{s&&s(),ee()},translation:oe,translationLimits:k,rotationLimits:H,axisColors:U,hoveredColor:G,opacity:N,scale:_,lineWidth:z,fixed:F,depthTest:I,userData:X,annotations:J,annotationsClass:K})),[t,i,s,oe,k,H,I,_,z,F,...U,G,N,X,u,J,K]),ce=new m.Vector3;return r.useFrame((e=>{if(F){const a=l.calculateScaleFactor(ie.current.getWorldPosition(ce),_,e.camera,e.size);var r,t,i;if(ie.current)(null==(r=ie.current)?void 0:r.scale.x)===a&&(null==(t=ie.current)?void 0:t.scale.y)===a&&(null==(i=ie.current)?void 0:i.scale.z)===a||(ie.current.scale.setScalar(a),e.invalidate())}})),x.useImperativeHandle($,(()=>te.current),[]),x.useLayoutEffect((()=>{e&&e instanceof m.Matrix4&&(te.current.matrix=e)}),[e]),x.createElement(c.context.Provider,{value:ne},x.createElement("group",{ref:re},x.createElement("group",d.default({ref:te,matrix:e,matrixAutoUpdate:!1},Z),x.createElement("group",{visible:Q,ref:ie,position:B,rotation:T},!W&&O[0]&&x.createElement(a.AxisArrow,{axis:0,direction:R}),!W&&O[1]&&x.createElement(a.AxisArrow,{axis:1,direction:P}),!W&&O[2]&&x.createElement(a.AxisArrow,{axis:2,direction:D}),!C&&O[0]&&O[1]&&x.createElement(n.PlaneSlider,{axis:2,dir1:R,dir2:P}),!C&&O[0]&&O[2]&&x.createElement(n.PlaneSlider,{axis:1,dir1:D,dir2:R}),!C&&O[2]&&O[1]&&x.createElement(n.PlaneSlider,{axis:0,dir1:P,dir2:D}),!L&&O[0]&&O[1]&&x.createElement(o.AxisRotator,{axis:2,dir1:R,dir2:P}),!L&&O[0]&&O[2]&&x.createElement(o.AxisRotator,{axis:1,dir1:D,dir2:R}),!L&&O[2]&&O[1]&&x.createElement(o.AxisRotator,{axis:0,dir1:P,dir2:D})),x.createElement("group",{ref:ae},Y))))}));exports.PivotControls=V;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@react-three/fiber"),t=require("react"),i=require("three"),a=require("./AxisArrow.cjs.js"),n=require("./AxisRotator.cjs.js"),o=require("./PlaneSlider.cjs.js"),c=require("./ScalingSphere.cjs.js"),s=require("./context.cjs.js"),l=require("../../core/calculateScaleFactor.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function d(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("../../core/Line.cjs.js"),require("three-stdlib"),require("../Html.cjs.js"),require("react-dom/client");var x=u(e),m=d(t),p=d(i);const f=new p.Matrix4,y=new p.Matrix4,w=new p.Matrix4,g=new p.Matrix4,b=new p.Matrix4,j=new p.Matrix4,E=new p.Matrix4,S=new p.Matrix4,h=new p.Matrix4,v=new p.Box3,M=new p.Box3,A=new p.Vector3,q=new p.Vector3,R=new p.Vector3,V=new p.Vector3,P=new p.Vector3,W=new p.Vector3(1,0,0),D=new p.Vector3(0,1,0),C=new p.Vector3(0,0,1),L=m.forwardRef((({matrix:e,onDragStart:t,onDrag:i,onDragEnd:u,autoTransform:d=!0,anchor:L,disableAxes:O=!1,disableSliders:B=!1,disableRotations:F=!1,disableScaling:z=!1,activeAxes:T=[!0,!0,!0],offset:_=[0,0,0],rotation:k=[0,0,0],scale:H=1,lineWidth:I=4,fixed:U=!1,translationLimits:G,rotationLimits:J,scaleLimits:K,depthTest:N=!0,axisColors:Q=["#ff2060","#20df80","#2080ff"],hoveredColor:X="#ffff40",annotations:Y=!1,annotationsClass:Z,opacity:$=1,visible:ee=!0,userData:re,children:te,...ie},ae)=>{const ne=r.useThree((e=>e.invalidate)),oe=m.useRef(null),ce=m.useRef(null),se=m.useRef(null),le=m.useRef(null),ue=m.useRef([0,0,0]),de=m.useRef(new p.Vector3(1,1,1)),xe=m.useRef(new p.Vector3(1,1,1));m.useLayoutEffect((()=>{L&&(le.current.updateWorldMatrix(!0,!0),g.copy(le.current.matrixWorld).invert(),v.makeEmpty(),le.current.traverse((e=>{e.geometry&&(e.geometry.boundingBox||e.geometry.computeBoundingBox(),j.copy(e.matrixWorld).premultiply(g),M.copy(e.geometry.boundingBox),M.applyMatrix4(j),v.union(M))})),A.copy(v.max).add(v.min).multiplyScalar(.5),q.copy(v.max).sub(v.min).multiplyScalar(.5),R.copy(q).multiply(new p.Vector3(...L)).add(A),V.set(..._).add(R),se.current.position.copy(V),ne())}));const me=m.useMemo((()=>({onDragStart:e=>{f.copy(ce.current.matrix),y.copy(ce.current.matrixWorld),t&&t(e),ne()},onDrag:e=>{w.copy(oe.current.matrixWorld),g.copy(w).invert(),b.copy(y).premultiply(e),j.copy(b).premultiply(g),E.copy(f).invert(),S.copy(j).multiply(E),d&&ce.current.matrix.copy(j),i&&i(j,S,b,e),ne()},onDragEnd:()=>{u&&u(),ne()},translation:ue,translationLimits:G,rotationLimits:J,axisColors:Q,hoveredColor:X,opacity:$,scale:H,lineWidth:I,fixed:U,depthTest:N,userData:re,annotations:Y,annotationsClass:Z})),[t,i,u,ue,G,J,K,N,H,I,U,...Q,X,$,re,d,Y,Z]),pe=new p.Vector3;return r.useFrame((r=>{if(U){const e=l.calculateScaleFactor(se.current.getWorldPosition(pe),H,r.camera,r.size);de.current.setScalar(e)}e&&e instanceof p.Matrix4&&(ce.current.matrix=e),ce.current.updateWorldMatrix(!0,!0),h.makeRotationFromEuler(se.current.rotation).setPosition(se.current.position).premultiply(ce.current.matrixWorld),xe.current.setFromMatrixScale(h),P.copy(de.current).divide(xe.current),(Math.abs(se.current.scale.x-P.x)>1e-4||Math.abs(se.current.scale.y-P.y)>1e-4||Math.abs(se.current.scale.z-P.z)>1e-4)&&(se.current.scale.copy(P),r.invalidate())})),m.useImperativeHandle(ae,(()=>ce.current),[]),m.createElement(s.context.Provider,{value:me},m.createElement("group",{ref:oe},m.createElement("group",x.default({ref:ce,matrix:e,matrixAutoUpdate:!1},ie),m.createElement("group",{visible:ee,ref:se,position:_,rotation:k},!O&&T[0]&&m.createElement(a.AxisArrow,{axis:0,direction:W}),!O&&T[1]&&m.createElement(a.AxisArrow,{axis:1,direction:D}),!O&&T[2]&&m.createElement(a.AxisArrow,{axis:2,direction:C}),!B&&T[0]&&T[1]&&m.createElement(o.PlaneSlider,{axis:2,dir1:W,dir2:D}),!B&&T[0]&&T[2]&&m.createElement(o.PlaneSlider,{axis:1,dir1:C,dir2:W}),!B&&T[2]&&T[1]&&m.createElement(o.PlaneSlider,{axis:0,dir1:D,dir2:C}),!F&&T[0]&&T[1]&&m.createElement(n.AxisRotator,{axis:2,dir1:W,dir2:D}),!F&&T[0]&&T[2]&&m.createElement(n.AxisRotator,{axis:1,dir1:C,dir2:W}),!F&&T[2]&&T[1]&&m.createElement(n.AxisRotator,{axis:0,dir1:D,dir2:C}),!z&&T[0]&&m.createElement(c.ScalingSphere,{axis:0,direction:W}),!z&&T[1]&&m.createElement(c.ScalingSphere,{axis:1,direction:D}),!z&&T[2]&&m.createElement(c.ScalingSphere,{axis:2,direction:C})),m.createElement("group",{ref:le},te))))}));exports.PivotControls=L;

package/web/pivotControls/index.d.ts

@@ -15,8 +15,10 @@ type PivotControlsProps = {
     disableAxes?: boolean;
     disableSliders?: boolean;
     disableRotations?: boolean;
+    disableScaling?: boolean;
     translationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
     rotationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
+    scaleLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
     axisColors?: [string | number, string | number, string | number];
     hoveredColor?: string | number;
     annotations?: boolean;

package/web/pivotControls/index.js

@@ -5,6 +5,7 @@ import * as THREE from 'three';
 import { AxisArrow } from './AxisArrow.js';
 import { AxisRotator } from './AxisRotator.js';
 import { PlaneSlider } from './PlaneSlider.js';
+import { ScalingSphere } from './ScalingSphere.js';
 import { context } from './context.js';
 import { calculateScaleFactor } from '../../core/calculateScaleFactor.js';
 
@@ -16,12 +17,14 @@ const mW = /* @__PURE__ */new THREE.Matrix4();
 const mL = /* @__PURE__ */new THREE.Matrix4();
 const mL0Inv = /* @__PURE__ */new THREE.Matrix4();
 const mdL = /* @__PURE__ */new THREE.Matrix4();
+const mG = /* @__PURE__ */new THREE.Matrix4();
 const bb = /* @__PURE__ */new THREE.Box3();
 const bbObj = /* @__PURE__ */new THREE.Box3();
 const vCenter = /* @__PURE__ */new THREE.Vector3();
 const vSize = /* @__PURE__ */new THREE.Vector3();
 const vAnchorOffset = /* @__PURE__ */new THREE.Vector3();
 const vPosition = /* @__PURE__ */new THREE.Vector3();
+const vScale = /* @__PURE__ */new THREE.Vector3();
 const xDir = /* @__PURE__ */new THREE.Vector3(1, 0, 0);
 const yDir = /* @__PURE__ */new THREE.Vector3(0, 1, 0);
 const zDir = /* @__PURE__ */new THREE.Vector3(0, 0, 1);
@@ -35,6 +38,7 @@ const PivotControls = /* @__PURE__ */React.forwardRef(({
   disableAxes = false,
   disableSliders = false,
   disableRotations = false,
+  disableScaling = false,
   activeAxes = [true, true, true],
   offset = [0, 0, 0],
   rotation = [0, 0, 0],
@@ -43,6 +47,7 @@ const PivotControls = /* @__PURE__ */React.forwardRef(({
   fixed = false,
   translationLimits,
   rotationLimits,
+  scaleLimits,
   depthTest = true,
   axisColors = ['#ff2060', '#20df80', '#2080ff'],
   hoveredColor = '#ffff40',
@@ -60,6 +65,8 @@ const PivotControls = /* @__PURE__ */React.forwardRef(({
   const gizmoRef = React.useRef(null);
   const childrenRef = React.useRef(null);
   const translation = React.useRef([0, 0, 0]);
+  const cameraScale = React.useRef(new THREE.Vector3(1, 1, 1));
+  const gizmoScale = React.useRef(new THREE.Vector3(1, 1, 1));
   React.useLayoutEffect(() => {
     if (!anchor) return;
     childrenRef.current.updateWorldMatrix(true, true);
@@ -95,7 +102,9 @@ const PivotControls = /* @__PURE__ */React.forwardRef(({
       mL.copy(mW).premultiply(mPInv);
       mL0Inv.copy(mL0).invert();
       mdL.copy(mL).multiply(mL0Inv);
-      if (autoTransform) ref.current.matrix.copy(mL);
+      if (autoTransform) {
+        ref.current.matrix.copy(mL);
+      }
       onDrag && onDrag(mL, mdL, mW, mdW);
       invalidate();
     },
@@ -116,26 +125,28 @@ const PivotControls = /* @__PURE__ */React.forwardRef(({
     userData,
     annotations,
     annotationsClass
-  }), [onDragStart, onDrag, onDragEnd, translation, translationLimits, rotationLimits, depthTest, scale, lineWidth, fixed, ...axisColors, hoveredColor, opacity, userData, autoTransform, annotations, annotationsClass]);
+  }), [onDragStart, onDrag, onDragEnd, translation, translationLimits, rotationLimits, scaleLimits, depthTest, scale, lineWidth, fixed, ...axisColors, hoveredColor, opacity, userData, autoTransform, annotations, annotationsClass]);
   const vec = new THREE.Vector3();
   useFrame(state => {
     if (fixed) {
       const sf = calculateScaleFactor(gizmoRef.current.getWorldPosition(vec), scale, state.camera, state.size);
-      if (gizmoRef.current) {
-        var _gizmoRef$current, _gizmoRef$current2, _gizmoRef$current3;
-        if (((_gizmoRef$current = gizmoRef.current) == null ? void 0 : _gizmoRef$current.scale.x) !== sf || ((_gizmoRef$current2 = gizmoRef.current) == null ? void 0 : _gizmoRef$current2.scale.y) !== sf || ((_gizmoRef$current3 = gizmoRef.current) == null ? void 0 : _gizmoRef$current3.scale.z) !== sf) {
-          gizmoRef.current.scale.setScalar(sf);
-          state.invalidate();
-        }
-      }
+      cameraScale.current.setScalar(sf);
+    }
+    if (matrix && matrix instanceof THREE.Matrix4) {
+      ref.current.matrix = matrix;
+    }
+    // Update gizmo scale in accordance with matrix changes
+    // Without this, there might be noticable turbulences if scaling happens fast enough
+    ref.current.updateWorldMatrix(true, true);
+    mG.makeRotationFromEuler(gizmoRef.current.rotation).setPosition(gizmoRef.current.position).premultiply(ref.current.matrixWorld);
+    gizmoScale.current.setFromMatrixScale(mG);
+    vScale.copy(cameraScale.current).divide(gizmoScale.current);
+    if (Math.abs(gizmoRef.current.scale.x - vScale.x) > 1e-4 || Math.abs(gizmoRef.current.scale.y - vScale.y) > 1e-4 || Math.abs(gizmoRef.current.scale.z - vScale.z) > 1e-4) {
+      gizmoRef.current.scale.copy(vScale);
+      state.invalidate();
     }
   });
   React.useImperativeHandle(fRef, () => ref.current, []);
-  React.useLayoutEffect(() => {
-    // If the matrix is a real matrix4 it means that the user wants to control the gizmo
-    // In that case it should just be set, as a bare prop update would merely copy it
-    if (matrix && matrix instanceof THREE.Matrix4) ref.current.matrix = matrix;
-  }, [matrix]);
   return /*#__PURE__*/React.createElement(context.Provider, {
     value: config
   }, /*#__PURE__*/React.createElement("group", {
@@ -182,6 +193,15 @@ const PivotControls = /* @__PURE__ */React.forwardRef(({
     axis: 0,
     dir1: yDir,
     dir2: zDir
+  }), !disableScaling && activeAxes[0] && /*#__PURE__*/React.createElement(ScalingSphere, {
+    axis: 0,
+    direction: xDir
+  }), !disableScaling && activeAxes[1] && /*#__PURE__*/React.createElement(ScalingSphere, {
+    axis: 1,
+    direction: yDir
+  }), !disableScaling && activeAxes[2] && /*#__PURE__*/React.createElement(ScalingSphere, {
+    axis: 2,
+    direction: zDir
   })), /*#__PURE__*/React.createElement("group", {
     ref: childrenRef
   }, children))));