@react-three/drei 9.99.6 → 9.100.0

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))));