@react-three/drei 9.30.2 → 9.31.0

package/README.md

@@ -1165,18 +1165,48 @@ This material makes your geometry distort following simplex noise.
   <a href="https://codesandbox.io/s/zqrreo"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/zqrreo/screenshot.png" alt="Demo"/></a>
 </p>
 
-A convincing Glass/Diamond refraction material. Best pair it with a cube-camera!
+A convincing Glass/Diamond refraction material.
+
+```tsx
+type MeshRefractionMaterialProps = JSX.IntrinsicElements['shaderMaterial'] & {
+  /** Environment map */
+  envMap: THREE.CubeTexture | THREE.Texture
+  /** Number of ray-cast bounces, it can be expensive to have too many, 2 */
+  bounces?: number
+  /** Refraction index, 2.4 */
+  ior?: number
+  /** Fresnel (strip light), 0 */
+  fresnel?: number
+  /** RGB shift intensity, can be expensive, 0 */
+  aberrationStrength?: number
+  /** Color, white */
+  color?: ReactThreeFiber.Color
+  /** If this is on it uses fewer ray casts for the RGB shift sacrificing physical accuracy, true */
+  fastChroma?: boolean
+}
+```
+
+If you want it to reflect other objects in the scene you best pair it with a cube-camera.
 
 ```jsx
 <CubeCamera>
   {(texture) => (
     <mesh geometry={diamondGeometry} {...props}>
-      <RefractionMaterial envMap={texture} toneMapped={false} />
+      <RefractionMaterial envMap={texture} />
     </mesh>
   )}
 </CubeCamera>
 ```
 
+Otherwise just pass it an environment map.
+
+```jsx
+const texture = useLoader(RGBELoader, "/textures/royal_esplanade_1k.hdr")
+return (
+  <mesh geometry={diamondGeometry} {...props}>
+    <RefractionMaterial envMap={texture} />
+```
+
 #### PointMaterial
 
 <p>

package/core/MeshRefractionMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),a=require("three-mesh-bvh"),n=require("../materials/MeshRefractionMaterial.cjs.js");function i(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 a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three"),require("./shaderMaterial.cjs.js");var o=i(e),s=u(r);exports.MeshRefractionMaterial=function({frames:e=1,resolution:i=256,near:u=.1,far:l=1e3,aberrationStrength:f=0,envMap:c,...h}){t.extend({MeshRefractionMaterial:n.MeshRefractionMaterial});const M=r.useRef(),{size:d}=t.useThree(),b=r.useMemo((()=>{const e={};if(c){var r,t;const n=(a=c)&&a.isCubeTexture,i=(null!==(r=n?null==(t=c.image[0])?void 0:t.width:c.image.width)&&void 0!==r?r:1024)/4,u=Math.floor(Math.log2(i)),o=Math.pow(2,u),s=3*Math.max(o,112),l=4*o;n&&(e.ENVMAP_TYPE_CUBEM=""),e.CUBEUV_TEXEL_WIDTH=""+1/s,e.CUBEUV_TEXEL_HEIGHT=""+1/l,e.CUBEUV_MAX_MIP=`${u}.0`}var a;return f>0&&(e.CHROMATIC_ABERRATIONS=""),e}),[f]);return r.useLayoutEffect((()=>{var e,r,t;const n=null==(e=M.current)||null==(r=e.__r3f)||null==(t=r.parent)?void 0:t.geometry;n&&M.current.bvh.updateFrom(new a.MeshBVH(n.toNonIndexed(),{lazyGeneration:!1,strategy:a.SAH}))}),[]),s.createElement("meshRefractionMaterial",o.default({key:JSON.stringify(!!f),defines:b,ref:M,resolution:[d.width,d.height],aberrationStrength:f,envMap:c},h))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),a=require("three-mesh-bvh"),n=require("../materials/MeshRefractionMaterial.cjs.js");function i(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 a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three"),require("./shaderMaterial.cjs.js");var o=i(e),s=u(r);exports.MeshRefractionMaterial=function({aberrationStrength:e=0,fastChroma:i=!0,envMap:u,...l}){t.extend({MeshRefractionMaterial:n.MeshRefractionMaterial});const c=r.useRef(),{size:f}=t.useThree(),h=r.useMemo((()=>{var r,t;const a={},n=(o=u)&&o.isCubeTexture;var o;const s=(null!==(r=n?null==(t=u.image[0])?void 0:t.width:u.image.width)&&void 0!==r?r:1024)/4,l=Math.floor(Math.log2(s)),c=Math.pow(2,l),f=3*Math.max(c,112),h=4*c;return n&&(a.ENVMAP_TYPE_CUBEM=""),a.CUBEUV_TEXEL_WIDTH=""+1/f,a.CUBEUV_TEXEL_HEIGHT=""+1/h,a.CUBEUV_MAX_MIP=`${l}.0`,e>0&&(a.CHROMATIC_ABERRATIONS=""),i&&(a.FAST_CHROMA=""),a}),[e,i]);return r.useLayoutEffect((()=>{var e,r,t;const n=null==(e=c.current)||null==(r=e.__r3f)||null==(t=r.parent)?void 0:t.geometry;n&&c.current.bvh.updateFrom(new a.MeshBVH(n.toNonIndexed(),{lazyGeneration:!1,strategy:a.SAH}))}),[]),s.createElement("meshRefractionMaterial",o.default({key:JSON.stringify(h),defines:h,ref:c,resolution:[f.width,f.height],aberrationStrength:e,envMap:u},l))};

package/core/MeshRefractionMaterial.d.ts

@@ -10,16 +10,13 @@ declare global {
     }
 }
 declare type MeshRefractionMaterialProps = JSX.IntrinsicElements['shaderMaterial'] & {
+    envMap: THREE.CubeTexture | THREE.Texture;
     bounces?: number;
     ior?: number;
     fresnel?: number;
     aberrationStrength?: number;
     color?: ReactThreeFiber.Color;
-    resolution?: ReactThreeFiber.Vector2;
-    envMap?: THREE.CubeTexture | THREE.Texture;
-    frames?: number;
-    near?: number;
-    far?: number;
+    fastChroma?: boolean;
 };
-export declare function MeshRefractionMaterial({ frames, resolution, near, far, aberrationStrength, envMap, ...props }: MeshRefractionMaterialProps): JSX.Element;
+export declare function MeshRefractionMaterial({ aberrationStrength, fastChroma, envMap, ...props }: MeshRefractionMaterialProps): JSX.Element;
 export {};

package/core/MeshRefractionMaterial.js

@@ -8,11 +8,8 @@ import { MeshRefractionMaterial as MeshRefractionMaterial$1 } from '../materials
 const isCubeTexture = def => def && def.isCubeTexture;
 
 function MeshRefractionMaterial({
-  frames = 1,
-  resolution = 256,
-  near = 0.1,
-  far = 1000,
   aberrationStrength = 0,
+  fastChroma = true,
   envMap,
   ...props
 }) {
@@ -24,34 +21,35 @@ function MeshRefractionMaterial({
     size
   } = useThree();
   const defines = useMemo(() => {
-    const temp = {};
+    var _ref, _envMap$image$;
 
-    if (envMap) {
-      var _ref, _envMap$image$;
+    const temp = {}; // Sampler2D and SamplerCube need different defines
 
-      const isCubeMap = isCubeTexture(envMap);
-      const w = (_ref = isCubeMap ? (_envMap$image$ = envMap.image[0]) == null ? void 0 : _envMap$image$.width : envMap.image.width) !== null && _ref !== void 0 ? _ref : 1024;
-      const cubeSize = w / 4;
+    const isCubeMap = isCubeTexture(envMap);
+    const w = (_ref = isCubeMap ? (_envMap$image$ = envMap.image[0]) == null ? void 0 : _envMap$image$.width : envMap.image.width) !== null && _ref !== void 0 ? _ref : 1024;
+    const cubeSize = w / 4;
 
-      const _lodMax = Math.floor(Math.log2(cubeSize));
+    const _lodMax = Math.floor(Math.log2(cubeSize));
 
-      const _cubeSize = Math.pow(2, _lodMax);
+    const _cubeSize = Math.pow(2, _lodMax);
 
-      const width = 3 * Math.max(_cubeSize, 16 * 7);
-      const height = 4 * _cubeSize;
-      if (isCubeMap) temp.ENVMAP_TYPE_CUBEM = '';
-      temp.CUBEUV_TEXEL_WIDTH = `${1.0 / width}`;
-      temp.CUBEUV_TEXEL_HEIGHT = `${1.0 / height}`;
-      temp.CUBEUV_MAX_MIP = `${_lodMax}.0`;
-    }
+    const width = 3 * Math.max(_cubeSize, 16 * 7);
+    const height = 4 * _cubeSize;
+    if (isCubeMap) temp.ENVMAP_TYPE_CUBEM = '';
+    temp.CUBEUV_TEXEL_WIDTH = `${1.0 / width}`;
+    temp.CUBEUV_TEXEL_HEIGHT = `${1.0 / height}`;
+    temp.CUBEUV_MAX_MIP = `${_lodMax}.0`; // Add defines from chromatic aberration
 
     if (aberrationStrength > 0) temp.CHROMATIC_ABERRATIONS = '';
+    if (fastChroma) temp.FAST_CHROMA = '';
     return temp;
-  }, [aberrationStrength]);
+  }, [aberrationStrength, fastChroma]);
   useLayoutEffect(() => {
     var _material$current, _material$current$__r, _material$current$__r2;
 
-    const geometry = (_material$current = material.current) == null ? void 0 : (_material$current$__r = _material$current.__r3f) == null ? void 0 : (_material$current$__r2 = _material$current$__r.parent) == null ? void 0 : _material$current$__r2.geometry;
+    // Get the geometry of this materials parent
+    const geometry = (_material$current = material.current) == null ? void 0 : (_material$current$__r = _material$current.__r3f) == null ? void 0 : (_material$current$__r2 = _material$current$__r.parent) == null ? void 0 : _material$current$__r2.geometry; // Update the BVH
+
     if (geometry) material.current.bvh.updateFrom(new MeshBVH(geometry.toNonIndexed(), {
       lazyGeneration: false,
       strategy: SAH
@@ -59,7 +57,7 @@ function MeshRefractionMaterial({
   }, []);
   return /*#__PURE__*/React.createElement("meshRefractionMaterial", _extends({
     // @ts-ignore
-    key: JSON.stringify(!!aberrationStrength) // @ts-ignore
+    key: JSON.stringify(defines) // @ts-ignore
     ,
     defines: defines,
     ref: material,

package/core/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./CatmullRomLine.cjs.js"),o=require("./Line.cjs.js"),i=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),a=require("./Text3D.cjs.js"),c=require("./Effects.cjs.js"),n=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),x=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),d=require("./Clone.cjs.js"),m=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),h=require("./OrthographicCamera.cjs.js"),M=require("./PerspectiveCamera.cjs.js"),S=require("./CubeCamera.cjs.js"),b=require("./DeviceOrientationControls.cjs.js"),P=require("./FlyControls.cjs.js"),B=require("./MapControls.cjs.js"),f=require("./OrbitControls.cjs.js"),T=require("./TrackballControls.cjs.js"),v=require("./ArcballControls.cjs.js"),g=require("./TransformControls.cjs.js"),A=require("./PointerLockControls.cjs.js"),L=require("./FirstPersonControls.cjs.js"),k=require("./pivotControls/index.cjs.js"),D=require("./GizmoHelper.cjs.js"),E=require("./GizmoViewcube.cjs.js"),R=require("./GizmoViewport.cjs.js"),w=require("./useCubeTexture.cjs.js"),F=require("./useFBX.cjs.js"),G=require("./useGLTF.cjs.js"),z=require("./useKTX2.cjs.js"),O=require("./useProgress.cjs.js"),I=require("./useTexture.cjs.js"),V=require("./useVideoTexture.cjs.js"),y=require("./Stats.cjs.js"),H=require("./useDepthBuffer.cjs.js"),Q=require("./useAspect.cjs.js"),X=require("./useCamera.cjs.js"),K=require("./useDetectGPU.cjs.js"),W=require("./useHelper.cjs.js"),N=require("./useBVH.cjs.js"),U=require("./useContextBridge.cjs.js"),_=require("./useAnimations.cjs.js"),J=require("./useFBO.cjs.js"),Y=require("./useIntersect.cjs.js"),Z=require("./useBoxProjectedEnv.cjs.js"),$=require("./BBAnchor.cjs.js"),ee=require("./CurveModifier.cjs.js"),re=require("./MeshDistortMaterial.cjs.js"),se=require("./MeshWobbleMaterial.cjs.js"),te=require("./MeshReflectorMaterial.cjs.js"),oe=require("./MeshRefractionMaterial.cjs.js"),ie=require("./PointMaterial.cjs.js"),ue=require("./shaderMaterial.cjs.js"),ae=require("./softShadows.cjs.js"),ce=require("./shapes.cjs.js"),ne=require("./RoundedBox.cjs.js"),je=require("./ScreenQuad.cjs.js"),pe=require("./Center.cjs.js"),le=require("./Bounds.cjs.js"),xe=require("./CameraShake.cjs.js"),qe=require("./Float.cjs.js"),de=require("./Stage.cjs.js"),me=require("./Backdrop.cjs.js"),Ce=require("./Shadow.cjs.js"),he=require("./ContactShadows.cjs.js"),Me=require("./AccumulativeShadows.cjs.js"),Se=require("./Reflector.cjs.js"),be=require("./SpotLight.cjs.js"),Pe=require("./Environment.cjs.js"),Be=require("./Lightformer.cjs.js"),fe=require("./Sky.cjs.js"),Te=require("./Stars.cjs.js"),ve=require("./Cloud.cjs.js"),ge=require("./Sparkles.cjs.js"),Ae=require("./useMatcapTexture.cjs.js"),Le=require("./useNormalTexture.cjs.js"),ke=require("./Points.cjs.js"),De=require("./Instances.cjs.js"),Ee=require("./Segments.cjs.js"),Re=require("./Detailed.cjs.js"),we=require("./Preload.cjs.js"),Fe=require("./BakeShadows.cjs.js"),Ge=require("./meshBounds.cjs.js"),ze=require("./AdaptiveDpr.cjs.js"),Oe=require("./AdaptiveEvents.cjs.js"),Ie=require("./PerformanceMonitor.cjs.js"),Ve=require("./RenderTexture.cjs.js"),ye=require("./Mask.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("./pivotControls/AxisArrow.cjs.js"),require("./pivotControls/context.cjs.js"),require("./pivotControls/PlaneSlider.cjs.js"),require("./pivotControls/AxisRotator.cjs.js"),require("../web/Html.cjs.js"),require("react-dom/client"),require("lodash.clamp"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.CatmullRomLine=t.CatmullRomLine,exports.Line=o.Line,exports.PositionalAudio=i.PositionalAudio,exports.Text=u.Text,exports.Text3D=a.Text3D,exports.Effects=c.Effects,exports.isWebGL2Available=c.isWebGL2Available,exports.GradientTexture=n.GradientTexture,exports.Image=j.Image,exports.Edges=p.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=x.Sampler,exports.useSurfaceSampler=x.useSurfaceSampler,exports.ComputedAttribute=q.ComputedAttribute,exports.Clone=d.Clone,exports.MarchingCube=m.MarchingCube,exports.MarchingCubes=m.MarchingCubes,exports.MarchingPlane=m.MarchingPlane,exports.Decal=C.Decal,exports.OrthographicCamera=h.OrthographicCamera,exports.PerspectiveCamera=M.PerspectiveCamera,exports.CubeCamera=S.CubeCamera,exports.DeviceOrientationControls=b.DeviceOrientationControls,exports.FlyControls=P.FlyControls,exports.MapControls=B.MapControls,exports.OrbitControls=f.OrbitControls,exports.TrackballControls=T.TrackballControls,exports.ArcballControls=v.ArcballControls,exports.TransformControls=g.TransformControls,exports.PointerLockControls=A.PointerLockControls,exports.FirstPersonControls=L.FirstPersonControls,exports.PivotControls=k.PivotControls,exports.calculateScaleFactor=k.calculateScaleFactor,exports.GizmoHelper=D.GizmoHelper,exports.useGizmoContext=D.useGizmoContext,exports.GizmoViewcube=E.GizmoViewcube,exports.GizmoViewport=R.GizmoViewport,exports.useCubeTexture=w.useCubeTexture,exports.useFBX=F.useFBX,exports.useGLTF=G.useGLTF,exports.useKTX2=z.useKTX2,exports.useProgress=O.useProgress,exports.IsObject=I.IsObject,exports.useTexture=I.useTexture,exports.useVideoTexture=V.useVideoTexture,exports.Stats=y.Stats,exports.useDepthBuffer=H.useDepthBuffer,exports.useAspect=Q.useAspect,exports.useCamera=X.useCamera,exports.useDetectGPU=K.useDetectGPU,exports.useHelper=W.useHelper,exports.useBVH=N.useBVH,exports.useContextBridge=U.useContextBridge,exports.useAnimations=_.useAnimations,exports.useFBO=J.useFBO,exports.useIntersect=Y.useIntersect,exports.useBoxProjectedEnv=Z.useBoxProjectedEnv,exports.BBAnchor=$.BBAnchor,exports.CurveModifier=ee.CurveModifier,exports.MeshDistortMaterial=re.MeshDistortMaterial,exports.MeshWobbleMaterial=se.MeshWobbleMaterial,exports.MeshReflectorMaterial=te.MeshReflectorMaterial,exports.MeshRefractionMaterial=oe.MeshRefractionMaterial,exports.PointMaterial=ie.PointMaterial,exports.PointMaterialImpl=ie.PointMaterialImpl,exports.shaderMaterial=ue.shaderMaterial,exports.softShadows=ae.softShadows,exports.Box=ce.Box,exports.Capsule=ce.Capsule,exports.Circle=ce.Circle,exports.Cone=ce.Cone,exports.Cylinder=ce.Cylinder,exports.Dodecahedron=ce.Dodecahedron,exports.Extrude=ce.Extrude,exports.Icosahedron=ce.Icosahedron,exports.Lathe=ce.Lathe,exports.Octahedron=ce.Octahedron,exports.Plane=ce.Plane,exports.Polyhedron=ce.Polyhedron,exports.Ring=ce.Ring,exports.Sphere=ce.Sphere,exports.Tetrahedron=ce.Tetrahedron,exports.Torus=ce.Torus,exports.TorusKnot=ce.TorusKnot,exports.Tube=ce.Tube,exports.RoundedBox=ne.RoundedBox,exports.ScreenQuad=je.ScreenQuad,exports.Center=pe.Center,exports.Bounds=le.Bounds,exports.useBounds=le.useBounds,exports.CameraShake=xe.CameraShake,exports.Float=qe.Float,exports.Stage=de.Stage,exports.Backdrop=me.Backdrop,exports.Shadow=Ce.Shadow,exports.ContactShadows=he.ContactShadows,exports.AccumulativeShadows=Me.AccumulativeShadows,exports.RandomizedLight=Me.RandomizedLight,exports.accumulativeContext=Me.accumulativeContext,exports.Reflector=Se.Reflector,exports.SpotLight=be.SpotLight,exports.Environment=Pe.Environment,exports.EnvironmentCube=Pe.EnvironmentCube,exports.EnvironmentMap=Pe.EnvironmentMap,exports.EnvironmentPortal=Pe.EnvironmentPortal,exports.useEnvironment=Pe.useEnvironment,exports.Lightformer=Be.Lightformer,exports.Sky=fe.Sky,exports.calcPosFromAngles=fe.calcPosFromAngles,exports.Stars=Te.Stars,exports.Cloud=ve.Cloud,exports.Sparkles=ge.Sparkles,exports.useMatcapTexture=Ae.useMatcapTexture,exports.useNormalTexture=Le.useNormalTexture,exports.Point=ke.Point,exports.Points=ke.Points,exports.PointsBuffer=ke.PointsBuffer,exports.Instance=De.Instance,exports.Instances=De.Instances,exports.Merged=De.Merged,exports.Segment=Ee.Segment,exports.SegmentObject=Ee.SegmentObject,exports.Segments=Ee.Segments,exports.Detailed=Re.Detailed,exports.Preload=we.Preload,exports.BakeShadows=Fe.BakeShadows,exports.meshBounds=Ge.meshBounds,exports.AdaptiveDpr=ze.AdaptiveDpr,exports.AdaptiveEvents=Oe.AdaptiveEvents,exports.PerformanceMonitor=Ie.PerformanceMonitor,exports.usePerformanceMonitor=Ie.usePerformanceMonitor,exports.RenderTexture=Ve.RenderTexture,exports.Mask=ye.Mask,exports.useMask=ye.useMask;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./CatmullRomLine.cjs.js"),o=require("./Line.cjs.js"),i=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),a=require("./Text3D.cjs.js"),c=require("./Effects.cjs.js"),n=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),x=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),d=require("./Clone.cjs.js"),m=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),h=require("./OrthographicCamera.cjs.js"),M=require("./PerspectiveCamera.cjs.js"),S=require("./CubeCamera.cjs.js"),b=require("./DeviceOrientationControls.cjs.js"),P=require("./FlyControls.cjs.js"),B=require("./MapControls.cjs.js"),f=require("./OrbitControls.cjs.js"),T=require("./TrackballControls.cjs.js"),v=require("./ArcballControls.cjs.js"),g=require("./TransformControls.cjs.js"),A=require("./PointerLockControls.cjs.js"),L=require("./FirstPersonControls.cjs.js"),k=require("./pivotControls/index.cjs.js"),D=require("./GizmoHelper.cjs.js"),E=require("./GizmoViewcube.cjs.js"),R=require("./GizmoViewport.cjs.js"),w=require("./useCubeTexture.cjs.js"),F=require("./useFBX.cjs.js"),G=require("./useGLTF.cjs.js"),z=require("./useKTX2.cjs.js"),O=require("./useProgress.cjs.js"),I=require("./useTexture.cjs.js"),V=require("./useVideoTexture.cjs.js"),y=require("./Stats.cjs.js"),H=require("./useDepthBuffer.cjs.js"),Q=require("./useAspect.cjs.js"),X=require("./useCamera.cjs.js"),K=require("./useDetectGPU.cjs.js"),W=require("./useHelper.cjs.js"),N=require("./useBVH.cjs.js"),U=require("./useContextBridge.cjs.js"),_=require("./useAnimations.cjs.js"),J=require("./useFBO.cjs.js"),Y=require("./useIntersect.cjs.js"),Z=require("./useBoxProjectedEnv.cjs.js"),$=require("./BBAnchor.cjs.js"),ee=require("./CurveModifier.cjs.js"),re=require("./MeshDistortMaterial.cjs.js"),se=require("./MeshWobbleMaterial.cjs.js"),te=require("./MeshReflectorMaterial.cjs.js"),oe=require("./MeshRefractionMaterial.cjs.js"),ie=require("./PointMaterial.cjs.js"),ue=require("./shaderMaterial.cjs.js"),ae=require("./softShadows.cjs.js"),ce=require("./shapes.cjs.js"),ne=require("./RoundedBox.cjs.js"),je=require("./ScreenQuad.cjs.js"),pe=require("./Center.cjs.js"),le=require("./Bounds.cjs.js"),xe=require("./CameraShake.cjs.js"),qe=require("./Float.cjs.js"),de=require("./Stage.cjs.js"),me=require("./Backdrop.cjs.js"),Ce=require("./Shadow.cjs.js"),he=require("./ContactShadows.cjs.js"),Me=require("./AccumulativeShadows.cjs.js"),Se=require("./Reflector.cjs.js"),be=require("./SpotLight.cjs.js"),Pe=require("./Environment.cjs.js"),Be=require("./Lightformer.cjs.js"),fe=require("./Sky.cjs.js"),Te=require("./Stars.cjs.js"),ve=require("./Cloud.cjs.js"),ge=require("./Sparkles.cjs.js"),Ae=require("./useMatcapTexture.cjs.js"),Le=require("./useNormalTexture.cjs.js"),ke=require("./Points.cjs.js"),De=require("./Instances.cjs.js"),Ee=require("./Segments.cjs.js"),Re=require("./Detailed.cjs.js"),we=require("./Preload.cjs.js"),Fe=require("./BakeShadows.cjs.js"),Ge=require("./meshBounds.cjs.js"),ze=require("./AdaptiveDpr.cjs.js"),Oe=require("./AdaptiveEvents.cjs.js"),Ie=require("./PerformanceMonitor.cjs.js"),Ve=require("./RenderTexture.cjs.js"),ye=require("./Mask.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("./pivotControls/AxisArrow.cjs.js"),require("../web/Html.cjs.js"),require("react-dom/client"),require("./pivotControls/context.cjs.js"),require("./pivotControls/PlaneSlider.cjs.js"),require("./pivotControls/AxisRotator.cjs.js"),require("lodash.clamp"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.CatmullRomLine=t.CatmullRomLine,exports.Line=o.Line,exports.PositionalAudio=i.PositionalAudio,exports.Text=u.Text,exports.Text3D=a.Text3D,exports.Effects=c.Effects,exports.isWebGL2Available=c.isWebGL2Available,exports.GradientTexture=n.GradientTexture,exports.Image=j.Image,exports.Edges=p.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=x.Sampler,exports.useSurfaceSampler=x.useSurfaceSampler,exports.ComputedAttribute=q.ComputedAttribute,exports.Clone=d.Clone,exports.MarchingCube=m.MarchingCube,exports.MarchingCubes=m.MarchingCubes,exports.MarchingPlane=m.MarchingPlane,exports.Decal=C.Decal,exports.OrthographicCamera=h.OrthographicCamera,exports.PerspectiveCamera=M.PerspectiveCamera,exports.CubeCamera=S.CubeCamera,exports.DeviceOrientationControls=b.DeviceOrientationControls,exports.FlyControls=P.FlyControls,exports.MapControls=B.MapControls,exports.OrbitControls=f.OrbitControls,exports.TrackballControls=T.TrackballControls,exports.ArcballControls=v.ArcballControls,exports.TransformControls=g.TransformControls,exports.PointerLockControls=A.PointerLockControls,exports.FirstPersonControls=L.FirstPersonControls,exports.PivotControls=k.PivotControls,exports.calculateScaleFactor=k.calculateScaleFactor,exports.GizmoHelper=D.GizmoHelper,exports.useGizmoContext=D.useGizmoContext,exports.GizmoViewcube=E.GizmoViewcube,exports.GizmoViewport=R.GizmoViewport,exports.useCubeTexture=w.useCubeTexture,exports.useFBX=F.useFBX,exports.useGLTF=G.useGLTF,exports.useKTX2=z.useKTX2,exports.useProgress=O.useProgress,exports.IsObject=I.IsObject,exports.useTexture=I.useTexture,exports.useVideoTexture=V.useVideoTexture,exports.Stats=y.Stats,exports.useDepthBuffer=H.useDepthBuffer,exports.useAspect=Q.useAspect,exports.useCamera=X.useCamera,exports.useDetectGPU=K.useDetectGPU,exports.useHelper=W.useHelper,exports.useBVH=N.useBVH,exports.useContextBridge=U.useContextBridge,exports.useAnimations=_.useAnimations,exports.useFBO=J.useFBO,exports.useIntersect=Y.useIntersect,exports.useBoxProjectedEnv=Z.useBoxProjectedEnv,exports.BBAnchor=$.BBAnchor,exports.CurveModifier=ee.CurveModifier,exports.MeshDistortMaterial=re.MeshDistortMaterial,exports.MeshWobbleMaterial=se.MeshWobbleMaterial,exports.MeshReflectorMaterial=te.MeshReflectorMaterial,exports.MeshRefractionMaterial=oe.MeshRefractionMaterial,exports.PointMaterial=ie.PointMaterial,exports.PointMaterialImpl=ie.PointMaterialImpl,exports.shaderMaterial=ue.shaderMaterial,exports.softShadows=ae.softShadows,exports.Box=ce.Box,exports.Capsule=ce.Capsule,exports.Circle=ce.Circle,exports.Cone=ce.Cone,exports.Cylinder=ce.Cylinder,exports.Dodecahedron=ce.Dodecahedron,exports.Extrude=ce.Extrude,exports.Icosahedron=ce.Icosahedron,exports.Lathe=ce.Lathe,exports.Octahedron=ce.Octahedron,exports.Plane=ce.Plane,exports.Polyhedron=ce.Polyhedron,exports.Ring=ce.Ring,exports.Sphere=ce.Sphere,exports.Tetrahedron=ce.Tetrahedron,exports.Torus=ce.Torus,exports.TorusKnot=ce.TorusKnot,exports.Tube=ce.Tube,exports.RoundedBox=ne.RoundedBox,exports.ScreenQuad=je.ScreenQuad,exports.Center=pe.Center,exports.Bounds=le.Bounds,exports.useBounds=le.useBounds,exports.CameraShake=xe.CameraShake,exports.Float=qe.Float,exports.Stage=de.Stage,exports.Backdrop=me.Backdrop,exports.Shadow=Ce.Shadow,exports.ContactShadows=he.ContactShadows,exports.AccumulativeShadows=Me.AccumulativeShadows,exports.RandomizedLight=Me.RandomizedLight,exports.accumulativeContext=Me.accumulativeContext,exports.Reflector=Se.Reflector,exports.SpotLight=be.SpotLight,exports.Environment=Pe.Environment,exports.EnvironmentCube=Pe.EnvironmentCube,exports.EnvironmentMap=Pe.EnvironmentMap,exports.EnvironmentPortal=Pe.EnvironmentPortal,exports.useEnvironment=Pe.useEnvironment,exports.Lightformer=Be.Lightformer,exports.Sky=fe.Sky,exports.calcPosFromAngles=fe.calcPosFromAngles,exports.Stars=Te.Stars,exports.Cloud=ve.Cloud,exports.Sparkles=ge.Sparkles,exports.useMatcapTexture=Ae.useMatcapTexture,exports.useNormalTexture=Le.useNormalTexture,exports.Point=ke.Point,exports.Points=ke.Points,exports.PointsBuffer=ke.PointsBuffer,exports.Instance=De.Instance,exports.Instances=De.Instances,exports.Merged=De.Merged,exports.Segment=Ee.Segment,exports.SegmentObject=Ee.SegmentObject,exports.Segments=Ee.Segments,exports.Detailed=Re.Detailed,exports.Preload=we.Preload,exports.BakeShadows=Fe.BakeShadows,exports.meshBounds=Ge.meshBounds,exports.AdaptiveDpr=ze.AdaptiveDpr,exports.AdaptiveEvents=Oe.AdaptiveEvents,exports.PerformanceMonitor=Ie.PerformanceMonitor,exports.usePerformanceMonitor=Ie.usePerformanceMonitor,exports.RenderTexture=Ve.RenderTexture,exports.Mask=ye.Mask,exports.useMask=ye.useMask;

package/core/index.js

@@ -106,11 +106,11 @@ import 'meshline';
 import 'lodash.pick';
 import 'lodash.omit';
 import './pivotControls/AxisArrow.js';
+import '../web/Html.js';
+import 'react-dom/client';
 import './pivotControls/context.js';
 import './pivotControls/PlaneSlider.js';
 import './pivotControls/AxisRotator.js';
-import '../web/Html.js';
-import 'react-dom/client';
 import 'lodash.clamp';
 import 'zustand';
 import 'stats.js';

package/core/pivotControls/AxisArrow.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../Line.cjs.js"),o=require("./context.cjs.js");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)}require("@babel/runtime/helpers/extends"),require("three-stdlib");var i=a(e),c=a(t);const l=new c.Vector3,s=new c.Vector3,u=(e,t,r,n)=>{const o=t.dot(t),a=t.dot(e)-t.dot(r),i=t.dot(n);if(0===i)return-a/o;l.copy(n).multiplyScalar(o/i).sub(t),s.copy(n).multiplyScalar(a/i).add(r).sub(e);return-l.dot(s)/l.dot(l)},p=new c.Vector3(0,1,0),d=new c.Matrix4;exports.AxisArrow=({direction:e,axis:t})=>{const{depthTest:a,scale:l,lineWidth:s,fixed:m,axisColors:f,hoveredColor:y,opacity:g,onDragStart:x,onDrag:h,onDragEnd:b,userData:O}=i.useContext(o.context),P=r.useThree((e=>e.controls)),j=i.useRef(null),w=i.useRef(null),[E,k]=i.useState(!1),C=i.useCallback((t=>{t.stopPropagation();const r=(new c.Matrix4).extractRotation(j.current.matrixWorld),n=t.point.clone(),o=e.clone().applyMatrix4(r).normalize();w.current={clickPoint:n,dir:o},x(),P&&(P.enabled=!1),t.target.setPointerCapture(t.pointerId)}),[e,P,x]),M=i.useCallback((e=>{if(e.stopPropagation(),E||k(!0),w.current){const{clickPoint:t,dir:r}=w.current,n=u(t,r,e.ray.origin,e.ray.direction);d.makeTranslation(r.x*n,r.y*n,r.z*n),h(d)}}),[h,E]),v=i.useCallback((e=>{e.stopPropagation(),w.current=null,b(),P&&(P.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[P,b]),L=i.useCallback((e=>{e.stopPropagation(),k(!1)}),[]),{cylinderLength:q,coneWidth:D,coneLength:T,matrixL:W}=i.useMemo((()=>{const t=m?s/l*1.6:l/20,r=m?.2:l/5,n=m?1-r:l-r,o=(new c.Quaternion).setFromUnitVectors(p,e.clone().normalize());return{cylinderLength:n,coneWidth:t,coneLength:r,matrixL:(new c.Matrix4).makeRotationFromQuaternion(o)}}),[e,l,s,m]),z=E?y:f[t];return i.createElement("group",{ref:j},i.createElement("group",{matrix:W,matrixAutoUpdate:!1,onPointerDown:C,onPointerMove:M,onPointerUp:v,onPointerOut:L},i.createElement("mesh",{visible:!1,position:[0,(q+T)/2,0],userData:O},i.createElement("cylinderGeometry",{args:[1.4*D,1.4*D,q+T,8,1]})),i.createElement(n.Line,{transparent:!0,raycast:()=>null,depthTest:a,points:[0,0,0,0,q,0],lineWidth:s,color:z,opacity:g,polygonOffset:!0,renderOrder:1,polygonOffsetFactor:-10}),i.createElement("mesh",{raycast:()=>null,position:[0,q+T/2,0],renderOrder:500},i.createElement("coneGeometry",{args:[D,T,24,1]}),i.createElement("meshBasicMaterial",{transparent:!0,depthTest:a,color:z,opacity:g,polygonOffset:!0,polygonOffsetFactor:-10}))))},exports.calculateOffset=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../Line.cjs.js"),o=require("../../web/Html.cjs.js"),a=require("./context.cjs.js");function i(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("@babel/runtime/helpers/extends"),require("three-stdlib"),require("react-dom/client");var c=i(e),l=i(t);const s=new l.Vector3,u=new l.Vector3,d=(e,t,r,n)=>{const o=t.dot(t),a=t.dot(e)-t.dot(r),i=t.dot(n);if(0===i)return-a/o;s.copy(n).multiplyScalar(o/i).sub(t),u.copy(n).multiplyScalar(a/i).add(r).sub(e);return-s.dot(u)/s.dot(s)},p=new l.Vector3(0,1,0),m=new l.Matrix4;exports.AxisArrow=({direction:e,axis:t})=>{const{translation:i,translationLimits:s,annotationsClass:u,depthTest:y,scale:f,lineWidth:x,fixed:g,axisColors:h,hoveredColor:b,displayValues:O,opacity:P,onDragStart:v,onDrag:w,onDragEnd:j,userData:E}=c.useContext(a.context),k=r.useThree((e=>e.controls)),M=c.useRef(null),C=c.useRef(null),q=c.useRef(null),L=c.useRef(0),[D,R]=c.useState(!1),T=c.useCallback((r=>{O&&(M.current.innerText=`${i.current[t].toFixed(2)}`,M.current.style.display="block"),r.stopPropagation();const n=(new l.Matrix4).extractRotation(C.current.matrixWorld),o=r.point.clone(),a=e.clone().applyMatrix4(n).normalize();q.current={clickPoint:o,dir:a},L.current=i.current[t],v(),k&&(k.enabled=!1),r.target.setPointerCapture(r.pointerId)}),[e,k,v,i,t]),F=c.useCallback((e=>{if(e.stopPropagation(),D||R(!0),q.current){const{clickPoint:r,dir:n}=q.current,[o,a]=(null==s?void 0:s[t])||[void 0,void 0];let c=d(r,n,e.ray.origin,e.ray.direction);void 0!==o&&(c=Math.max(c,o-L.current)),void 0!==a&&(c=Math.min(c,a-L.current)),i.current[t]=L.current+c,O&&(M.current.innerText=`${i.current[t].toFixed(2)}`),m.makeTranslation(n.x*c,n.y*c,n.z*c),w(m)}}),[w,D,i,s,t]),S=c.useCallback((e=>{O&&(M.current.style.display="none"),e.stopPropagation(),q.current=null,j(),k&&(k.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[k,j]),V=c.useCallback((e=>{e.stopPropagation(),R(!1)}),[]),{cylinderLength:W,coneWidth:z,coneLength:_,matrixL:A}=c.useMemo((()=>{const t=g?x/f*1.6:f/20,r=g?.2:f/5,n=g?1-r:f-r,o=(new l.Quaternion).setFromUnitVectors(p,e.clone().normalize());return{cylinderLength:n,coneWidth:t,coneLength:r,matrixL:(new l.Matrix4).makeRotationFromQuaternion(o)}}),[e,f,x,g]),U=D?b:h[t];return c.createElement("group",{ref:C},c.createElement("group",{matrix:A,matrixAutoUpdate:!1,onPointerDown:T,onPointerMove:F,onPointerUp:S,onPointerOut:V},c.createElement(o.Html,{position:[0,-_,0]},c.createElement("div",{style:{display:"none",background:"#151520",color:"white",padding:"6px 8px",borderRadius:7,whiteSpace:"nowrap"},className:u,ref:M})),c.createElement("mesh",{visible:!1,position:[0,(W+_)/2,0],userData:E},c.createElement("cylinderGeometry",{args:[1.4*z,1.4*z,W+_,8,1]})),c.createElement(n.Line,{transparent:!0,raycast:()=>null,depthTest:y,points:[0,0,0,0,W,0],lineWidth:x,color:U,opacity:P,polygonOffset:!0,renderOrder:1,polygonOffsetFactor:-10}),c.createElement("mesh",{raycast:()=>null,position:[0,W+_/2,0],renderOrder:500},c.createElement("coneGeometry",{args:[z,_,24,1]}),c.createElement("meshBasicMaterial",{transparent:!0,depthTest:y,color:U,opacity:P,polygonOffset:!0,polygonOffsetFactor:-10}))))},exports.calculateOffset=d;

package/core/pivotControls/AxisArrow.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as THREE from 'three';
 import { useThree } from '@react-three/fiber';
 import { Line } from '../Line.js';
+import { Html } from '../../web/Html.js';
 import { context } from './context.js';
 
 const vec1 = new THREE.Vector3();
@@ -27,12 +28,16 @@ const AxisArrow = ({
   axis
 }) => {
   const {
+    translation,
+    translationLimits,
+    annotationsClass,
     depthTest,
     scale,
     lineWidth,
     fixed,
     axisColors,
     hoveredColor,
+    displayValues,
     opacity,
     onDragStart,
     onDrag,
@@ -41,10 +46,17 @@ const AxisArrow = ({
   } = React.useContext(context); // @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 clickInfo = React.useRef(null);
+  const offset0 = React.useRef(0);
   const [isHovered, setIsHovered] = React.useState(false);
   const onPointerDown = React.useCallback(e => {
+    if (displayValues) {
+      divRef.current.innerText = `${translation.current[axis].toFixed(2)}`;
+      divRef.current.style.display = 'block';
+    }
+
     e.stopPropagation();
     const rotation = new THREE.Matrix4().extractRotation(objRef.current.matrixWorld);
     const clickPoint = e.point.clone();
@@ -53,11 +65,12 @@ const AxisArrow = ({
       clickPoint,
       dir
     };
+    offset0.current = translation.current[axis];
     onDragStart();
     camControls && (camControls.enabled = false); // @ts-ignore - setPointerCapture is not in the type definition
 
     e.target.setPointerCapture(e.pointerId);
-  }, [direction, camControls, onDragStart]);
+  }, [direction, camControls, onDragStart, translation, axis]);
   const onPointerMove = React.useCallback(e => {
     e.stopPropagation();
     if (!isHovered) setIsHovered(true);
@@ -67,12 +80,32 @@ const AxisArrow = ({
         clickPoint,
         dir
       } = clickInfo.current;
-      const offset = calculateOffset(clickPoint, dir, e.ray.origin, e.ray.direction);
+      const [min, max] = (translationLimits == null ? void 0 : translationLimits[axis]) || [undefined, undefined];
+      let offset = calculateOffset(clickPoint, dir, e.ray.origin, e.ray.direction);
+
+      if (min !== undefined) {
+        offset = Math.max(offset, min - offset0.current);
+      }
+
+      if (max !== undefined) {
+        offset = Math.min(offset, max - offset0.current);
+      }
+
+      translation.current[axis] = offset0.current + offset;
+
+      if (displayValues) {
+        divRef.current.innerText = `${translation.current[axis].toFixed(2)}`;
+      }
+
       offsetMatrix.makeTranslation(dir.x * offset, dir.y * offset, dir.z * offset);
       onDrag(offsetMatrix);
     }
-  }, [onDrag, isHovered]);
+  }, [onDrag, isHovered, translation, translationLimits, axis]);
   const onPointerUp = React.useCallback(e => {
+    if (displayValues) {
+      divRef.current.style.display = 'none';
+    }
+
     e.stopPropagation();
     clickInfo.current = null;
     onDragEnd();
@@ -112,7 +145,20 @@ const AxisArrow = ({
     onPointerMove: onPointerMove,
     onPointerUp: onPointerUp,
     onPointerOut: onPointerOut
-  }, /*#__PURE__*/React.createElement("mesh", {
+  }, /*#__PURE__*/React.createElement(Html, {
+    position: [0, -coneLength, 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", {
     visible: false,
     position: [0, (cylinderLength + coneLength) / 2.0, 0],
     userData: userData

package/core/pivotControls/AxisRotator.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../Line.cjs.js"),o=require("../../web/Html.cjs.js"),a=require("lodash.clamp"),i=require("./context.cjs.js");function l(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)}require("@babel/runtime/helpers/extends"),require("three-stdlib"),require("react-dom/client");var s=c(e),u=c(t),d=l(a);const p=new u.Vector3,m=new u.Vector3,f=e=>180*e/Math.PI,h=e=>{let t=((e,t)=>{let r=Math.floor(e/t);return r=r<0?r+1:r,e-r*t})(e,2*Math.PI);return Math.abs(t)<1e-6?0:(t<0&&(t+=2*Math.PI),t)},x=new u.Matrix4,P=new u.Vector3,b=new u.Ray,M=new u.Vector3;exports.AxisRotator=({dir1:e,dir2:t,axis:a})=>{const{rotationLimits:l,annotationsClass:c,depthTest:y,scale:g,lineWidth:w,fixed:v,axisColors:C,hoveredColor:j,opacity:k,onDragStart:q,onDrag:O,onDragEnd:I,userData:R}=s.useContext(i.context),V=r.useThree((e=>e.controls)),F=s.useRef(null),D=s.useRef(null),E=s.useRef(0),W=s.useRef(0),z=s.useRef(null),[T,A]=s.useState(!1),L=s.useCallback((e=>{F.current.innerText=`${f(W.current).toFixed(0)}º`,F.current.style.display="block",e.stopPropagation();const t=e.point.clone(),r=(new u.Vector3).setFromMatrixPosition(D.current.matrixWorld),n=(new u.Vector3).setFromMatrixColumn(D.current.matrixWorld,0).normalize(),o=(new u.Vector3).setFromMatrixColumn(D.current.matrixWorld,1).normalize(),a=(new u.Vector3).setFromMatrixColumn(D.current.matrixWorld,2).normalize(),i=(new u.Plane).setFromNormalAndCoplanarPoint(a,r);z.current={clickPoint:t,origin:r,e1:n,e2:o,normal:a,plane:i},q(),V&&(V.enabled=!1),e.target.setPointerCapture(e.pointerId)}),[V,q]),_=s.useCallback((e=>{if(e.stopPropagation(),T||A(!0),z.current){const{clickPoint:t,origin:r,e1:n,e2:o,normal:i,plane:c}=z.current,[s,u]=(null==l?void 0:l[a])||[void 0,void 0];b.copy(e.ray),b.intersectPlane(c,M),b.direction.negate(),b.intersectPlane(c,M);let y=((e,t,r,n,o)=>{p.copy(e).sub(r),m.copy(t).sub(r);const a=n.dot(n),i=o.dot(o),l=p.dot(n)/a,c=p.dot(o)/i,s=m.dot(n)/a,u=m.dot(o)/i,d=Math.atan2(c,l);return Math.atan2(u,s)-d})(t,M,r,n,o),g=f(y);e.shiftKey&&(g=10*Math.round(g/10),y=(e=>e*Math.PI/180)(g)),void 0!==s&&void 0!==u&&(y=h(y),y=y>Math.PI?y-2*Math.PI:y,y=d.default(y,s-E.current,u-E.current),W.current=E.current+y,g=f(W.current)),F.current.innerText=`${g.toFixed(0)} º`,x.makeRotationAxis(i,y),P.copy(r).applyMatrix4(x).sub(r).negate(),x.setPosition(P),O(x)}}),[O,T,l,a]),S=s.useCallback((e=>{F.current.style.display="none",e.stopPropagation(),E.current=W.current,z.current=null,I(),V&&(V.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[V,I]),H=s.useCallback((e=>{e.stopPropagation(),A(!1)}),[]),N=s.useMemo((()=>{const r=e.clone().normalize(),n=t.clone().normalize();return(new u.Matrix4).makeBasis(r,n,r.clone().cross(n))}),[e,t]),U=v?.65:.65*g,$=s.useMemo((()=>{const e=[];for(let t=0;t<=32;t++){const r=t*(Math.PI/2)/32;e.push(new u.Vector3(Math.cos(r)*U,Math.sin(r)*U,0))}return e}),[U]);return s.createElement("group",{ref:D,onPointerDown:L,onPointerMove:_,onPointerUp:S,onPointerOut:H,matrix:N,matrixAutoUpdate:!1},s.createElement(o.Html,{position:[U,U,0]},s.createElement("div",{style:{display:"none",background:"#151520",color:"white",padding:"6px 8px",borderRadius:7,whiteSpace:"nowrap"},className:c,ref:F})),s.createElement(n.Line,{points:$,lineWidth:4*w,visible:!1,userData:R}),s.createElement(n.Line,{transparent:!0,raycast:()=>null,depthTest:y,points:$,lineWidth:w,color:T?j:C[a],opacity:k,polygonOffset:!0,polygonOffsetFactor:-10}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../Line.cjs.js"),o=require("../../web/Html.cjs.js"),a=require("lodash.clamp"),i=require("./context.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(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("@babel/runtime/helpers/extends"),require("three-stdlib"),require("react-dom/client");var s=l(e),u=l(t),d=c(a);const p=new u.Vector3,m=new u.Vector3,h=e=>180*e/Math.PI,f=e=>{let t=((e,t)=>{let r=Math.floor(e/t);return r=r<0?r+1:r,e-r*t})(e,2*Math.PI);return Math.abs(t)<1e-6?0:(t<0&&(t+=2*Math.PI),t)},P=new u.Matrix4,x=new u.Vector3,M=new u.Ray,b=new u.Vector3;exports.AxisRotator=({dir1:e,dir2:t,axis:a})=>{const{rotationLimits:c,annotationsClass:l,depthTest:y,scale:g,lineWidth:w,fixed:v,axisColors:C,hoveredColor:j,displayValues:I,opacity:k,onDragStart:q,onDrag:O,onDragEnd:V,userData:R}=s.useContext(i.context),F=r.useThree((e=>e.controls)),D=s.useRef(null),E=s.useRef(null),W=s.useRef(0),z=s.useRef(0),T=s.useRef(null),[A,L]=s.useState(!1),_=s.useCallback((e=>{I&&(D.current.innerText=`${h(z.current).toFixed(0)}º`,D.current.style.display="block"),e.stopPropagation();const t=e.point.clone(),r=(new u.Vector3).setFromMatrixPosition(E.current.matrixWorld),n=(new u.Vector3).setFromMatrixColumn(E.current.matrixWorld,0).normalize(),o=(new u.Vector3).setFromMatrixColumn(E.current.matrixWorld,1).normalize(),a=(new u.Vector3).setFromMatrixColumn(E.current.matrixWorld,2).normalize(),i=(new u.Plane).setFromNormalAndCoplanarPoint(a,r);T.current={clickPoint:t,origin:r,e1:n,e2:o,normal:a,plane:i},q(),F&&(F.enabled=!1),e.target.setPointerCapture(e.pointerId)}),[F,q]),S=s.useCallback((e=>{if(e.stopPropagation(),A||L(!0),T.current){const{clickPoint:t,origin:r,e1:n,e2:o,normal:i,plane:l}=T.current,[s,u]=(null==c?void 0:c[a])||[void 0,void 0];M.copy(e.ray),M.intersectPlane(l,b),M.direction.negate(),M.intersectPlane(l,b);let y=((e,t,r,n,o)=>{p.copy(e).sub(r),m.copy(t).sub(r);const a=n.dot(n),i=o.dot(o),c=p.dot(n)/a,l=p.dot(o)/i,s=m.dot(n)/a,u=m.dot(o)/i,d=Math.atan2(l,c);return Math.atan2(u,s)-d})(t,b,r,n,o),g=h(y);e.shiftKey&&(g=10*Math.round(g/10),y=(e=>e*Math.PI/180)(g)),void 0!==s&&void 0!==u&&u-s<2*Math.PI?(y=f(y),y=y>Math.PI?y-2*Math.PI:y,y=d.default(y,s-W.current,u-W.current),z.current=W.current+y):(z.current=f(W.current+y),z.current=z.current>Math.PI?z.current-2*Math.PI:z.current),I&&(g=h(z.current),D.current.innerText=`${g.toFixed(0)}º`),P.makeRotationAxis(i,y),x.copy(r).applyMatrix4(P).sub(r).negate(),P.setPosition(x),O(P)}}),[O,A,c,a]),H=s.useCallback((e=>{I&&(D.current.style.display="none"),e.stopPropagation(),W.current=z.current,T.current=null,V(),F&&(F.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[F,V]),N=s.useCallback((e=>{e.stopPropagation(),L(!1)}),[]),U=s.useMemo((()=>{const r=e.clone().normalize(),n=t.clone().normalize();return(new u.Matrix4).makeBasis(r,n,r.clone().cross(n))}),[e,t]),$=v?.65:.65*g,B=s.useMemo((()=>{const e=[];for(let t=0;t<=32;t++){const r=t*(Math.PI/2)/32;e.push(new u.Vector3(Math.cos(r)*$,Math.sin(r)*$,0))}return e}),[$]);return s.createElement("group",{ref:E,onPointerDown:_,onPointerMove:S,onPointerUp:H,onPointerOut:N,matrix:U,matrixAutoUpdate:!1},s.createElement(o.Html,{position:[$,$,0]},s.createElement("div",{style:{display:"none",background:"#151520",color:"white",padding:"6px 8px",borderRadius:7,whiteSpace:"nowrap"},className:l,ref:D})),s.createElement(n.Line,{points:B,lineWidth:4*w,visible:!1,userData:R}),s.createElement(n.Line,{transparent:!0,raycast:()=>null,depthTest:y,points:B,lineWidth:w,color:A?j:C[a],opacity:k,polygonOffset:!0,polygonOffsetFactor:-10}))};

package/core/pivotControls/AxisRotator.js

@@ -65,6 +65,7 @@ const AxisRotator = ({
     fixed,
     axisColors,
     hoveredColor,
+    displayValues,
     opacity,
     onDragStart,
     onDrag,
@@ -80,8 +81,11 @@ const AxisRotator = ({
   const clickInfo = React.useRef(null);
   const [isHovered, setIsHovered] = React.useState(false);
   const onPointerDown = React.useCallback(e => {
-    divRef.current.innerText = `${toDegrees(angle.current).toFixed(0)}º`;
-    divRef.current.style.display = 'block';
+    if (displayValues) {
+      divRef.current.innerText = `${toDegrees(angle.current).toFixed(0)}º`;
+      divRef.current.style.display = 'block';
+    }
+
     e.stopPropagation();
     const clickPoint = e.point.clone();
     const origin = new THREE.Vector3().setFromMatrixPosition(objRef.current.matrixWorld);
@@ -128,15 +132,21 @@ const AxisRotator = ({
         deltaAngle = toRadians(degrees);
       }
 
-      if (min !== undefined && max !== undefined) {
+      if (min !== undefined && max !== undefined && max - min < 2 * Math.PI) {
         deltaAngle = minimizeAngle(deltaAngle);
         deltaAngle = deltaAngle > Math.PI ? deltaAngle - 2 * Math.PI : deltaAngle;
         deltaAngle = clamp(deltaAngle, min - angle0.current, max - angle0.current);
         angle.current = angle0.current + deltaAngle;
+      } else {
+        angle.current = minimizeAngle(angle0.current + deltaAngle);
+        angle.current = angle.current > Math.PI ? angle.current - 2 * Math.PI : angle.current;
+      }
+
+      if (displayValues) {
         degrees = toDegrees(angle.current);
+        divRef.current.innerText = `${degrees.toFixed(0)}º`;
       }
 
-      divRef.current.innerText = `${degrees.toFixed(0)} º`;
       rotMatrix.makeRotationAxis(normal, deltaAngle);
       posNew.copy(origin).applyMatrix4(rotMatrix).sub(origin).negate();
       rotMatrix.setPosition(posNew);
@@ -144,7 +154,10 @@ const AxisRotator = ({
     }
   }, [onDrag, isHovered, rotationLimits, axis]);
   const onPointerUp = React.useCallback(e => {
-    divRef.current.style.display = 'none';
+    if (displayValues) {
+      divRef.current.style.display = 'none';
+    }
+
     e.stopPropagation();
     angle0.current = angle.current;
     clickInfo.current = null;

package/core/pivotControls/PlaneSlider.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../Line.cjs.js"),o=require("./context.cjs.js");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)}require("@babel/runtime/helpers/extends"),require("three-stdlib");var i=a(e),l=a(t);const s=new l.Ray,c=new l.Vector3,u=new l.Matrix4;exports.PlaneSlider=({dir1:e,dir2:t,axis:a})=>{const{depthTest:p,scale:d,lineWidth:m,fixed:f,axisColors:P,hoveredColor:b,opacity:g,onDragStart:x,onDrag:y,onDragEnd:h,userData:w}=i.useContext(o.context),O=r.useThree((e=>e.controls)),C=i.useRef(null),j=i.useRef(null),[M,k]=i.useState(!1),D=i.useCallback((e=>{e.stopPropagation();const t=e.point.clone(),r=(new l.Vector3).setFromMatrixPosition(C.current.matrixWorld),n=(new l.Vector3).setFromMatrixColumn(C.current.matrixWorld,2).normalize(),o=(new l.Plane).setFromNormalAndCoplanarPoint(n,r);j.current={clickPoint:t,plane:o},x(),O&&(O.enabled=!1),e.target.setPointerCapture(e.pointerId)}),[O,x]),v=i.useCallback((e=>{if(e.stopPropagation(),M||k(!0),j.current){const{clickPoint:t,plane:r}=j.current;s.copy(e.ray),s.intersectPlane(r,c),s.direction.negate(),s.intersectPlane(r,c),c.sub(t),u.makeTranslation(c.x,c.y,c.z),y(u)}}),[y,M]),E=i.useCallback((e=>{e.stopPropagation(),j.current=null,h(),O&&(O.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[O,h]),V=i.useCallback((e=>{e.stopPropagation(),k(!1)}),[]),q=i.useMemo((()=>{const r=e.clone().normalize(),n=t.clone().normalize();return(new l.Matrix4).makeBasis(r,n,r.clone().cross(n))}),[e,t]),z=f?1/7:d/7,F=f?.225:.225*d,T=M?b:P[a],S=i.useMemo((()=>[new l.Vector3(0,0,0),new l.Vector3(0,F,0),new l.Vector3(F,F,0),new l.Vector3(F,0,0),new l.Vector3(0,0,0)]),[F]);return i.createElement("group",{ref:C,matrix:q,matrixAutoUpdate:!1},i.createElement("group",{position:[1.7*z,1.7*z,0]},i.createElement("mesh",{visible:!0,onPointerDown:D,onPointerMove:v,onPointerUp:E,onPointerOut:V,scale:F,userData:w},i.createElement("planeGeometry",null),i.createElement("meshBasicMaterial",{transparent:!0,depthTest:p,color:T,polygonOffset:!0,polygonOffsetFactor:-10,side:l.DoubleSide})),i.createElement(n.Line,{position:[-F/2,-F/2,0],transparent:!0,depthTest:p,points:S,lineWidth:m,color:T,opacity:g,polygonOffset:!0,polygonOffsetFactor:-10,userData:w})))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../Line.cjs.js"),o=require("../../web/Html.cjs.js"),a=require("./context.cjs.js");function i(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("@babel/runtime/helpers/extends"),require("three-stdlib"),require("react-dom/client");var s=i(e),l=i(t);const c=new l.Ray,u=new l.Vector3,p=new l.Matrix4;exports.PlaneSlider=({dir1:e,dir2:t,axis:i})=>{const{translation:d,translationLimits:m,annotationsClass:x,depthTest:b,scale:h,lineWidth:f,fixed:g,axisColors:y,hoveredColor:M,displayValues:C,opacity:P,onDragStart:w,onDrag:v,onDragEnd:j,userData:O}=s.useContext(a.context),k=r.useThree((e=>e.controls)),F=s.useRef(null),V=s.useRef(null),z=s.useRef(null),E=s.useRef(0),q=s.useRef(0),[D,R]=s.useState(!1),T=s.useCallback((e=>{C&&(F.current.innerText=`${d.current[(i+1)%3].toFixed(2)}, ${d.current[(i+2)%3].toFixed(2)}`,F.current.style.display="block"),e.stopPropagation();const t=e.point.clone(),r=(new l.Vector3).setFromMatrixPosition(V.current.matrixWorld),n=(new l.Vector3).setFromMatrixColumn(V.current.matrixWorld,0).normalize(),o=(new l.Vector3).setFromMatrixColumn(V.current.matrixWorld,1).normalize(),a=(new l.Vector3).setFromMatrixColumn(V.current.matrixWorld,2).normalize(),s=(new l.Plane).setFromNormalAndCoplanarPoint(a,r);z.current={clickPoint:t,e1:n,e2:o,plane:s},E.current=d.current[(i+1)%3],q.current=d.current[(i+2)%3],w(),k&&(k.enabled=!1),e.target.setPointerCapture(e.pointerId)}),[k,w]),W=s.useCallback((e=>{if(e.stopPropagation(),D||R(!0),z.current){const{clickPoint:t,e1:r,e2:n,plane:o}=z.current,[a,s]=(null==m?void 0:m[(i+1)%3])||[void 0,void 0],[l,x]=(null==m?void 0:m[(i+2)%3])||[void 0,void 0];c.copy(e.ray),c.intersectPlane(o,u),c.direction.negate(),c.intersectPlane(o,u),u.sub(t);let[b,h]=((e,t,r)=>{const n=Math.abs(e.x)>=Math.abs(e.y)&&Math.abs(e.x)>=Math.abs(e.z)?0:Math.abs(e.y)>=Math.abs(e.x)&&Math.abs(e.y)>=Math.abs(e.z)?1:2,o=[0,1,2].sort(((e,r)=>Math.abs(t.getComponent(r))-Math.abs(t.getComponent(e)))),a=n===o[0]?o[1]:o[0],i=e.getComponent(n),s=e.getComponent(a),l=t.getComponent(n),c=t.getComponent(a),u=r.getComponent(n),p=(r.getComponent(a)-u*(s/i))/(c-l*(s/i));return[(u-p*l)/i,p]})(r,n,u);void 0!==a&&(b=Math.max(b,a-E.current)),void 0!==s&&(b=Math.min(b,s-E.current)),void 0!==l&&(h=Math.max(h,l-q.current)),void 0!==x&&(h=Math.min(h,x-q.current)),d.current[(i+1)%3]=E.current+b,d.current[(i+2)%3]=q.current+h,C&&(F.current.innerText=`${d.current[(i+1)%3].toFixed(2)}, ${d.current[(i+2)%3].toFixed(2)}`),p.makeTranslation(b*r.x+h*n.x,b*r.y+h*n.y,b*r.z+h*n.z),v(p)}}),[v,D,d,m,i]),S=s.useCallback((e=>{C&&(F.current.style.display="none"),e.stopPropagation(),z.current=null,j(),k&&(k.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[k,j]),$=s.useCallback((e=>{e.stopPropagation(),R(!1)}),[]),_=s.useMemo((()=>{const r=e.clone().normalize(),n=t.clone().normalize();return(new l.Matrix4).makeBasis(r,n,r.clone().cross(n))}),[e,t]),L=g?1/7:h/7,A=g?.225:.225*h,B=D?M:y[i],H=s.useMemo((()=>[new l.Vector3(0,0,0),new l.Vector3(0,A,0),new l.Vector3(A,A,0),new l.Vector3(A,0,0),new l.Vector3(0,0,0)]),[A]);return s.createElement("group",{ref:V,matrix:_,matrixAutoUpdate:!1},s.createElement(o.Html,{position:[0,0,0]},s.createElement("div",{style:{display:"none",background:"#151520",color:"white",padding:"6px 8px",borderRadius:7,whiteSpace:"nowrap"},className:x,ref:F})),s.createElement("group",{position:[1.7*L,1.7*L,0]},s.createElement("mesh",{visible:!0,onPointerDown:T,onPointerMove:W,onPointerUp:S,onPointerOut:$,scale:A,userData:O},s.createElement("planeGeometry",null),s.createElement("meshBasicMaterial",{transparent:!0,depthTest:b,color:B,polygonOffset:!0,polygonOffsetFactor:-10,side:l.DoubleSide})),s.createElement(n.Line,{position:[-A/2,-A/2,0],transparent:!0,depthTest:b,points:H,lineWidth:f,color:B,opacity:P,polygonOffset:!0,polygonOffsetFactor:-10,userData:O})))};

package/core/pivotControls/PlaneSlider.js

@@ -2,8 +2,24 @@ import * as React from 'react';
 import * as THREE from 'three';
 import { useThree } from '@react-three/fiber';
 import { Line } from '../Line.js';
+import { Html } from '../../web/Html.js';
 import { context } from './context.js';
 
+const decomposeIntoBasis = (e1, e2, offset) => {
+  const i1 = Math.abs(e1.x) >= Math.abs(e1.y) && Math.abs(e1.x) >= Math.abs(e1.z) ? 0 : Math.abs(e1.y) >= Math.abs(e1.x) && Math.abs(e1.y) >= Math.abs(e1.z) ? 1 : 2;
+  const e2DegrowthOrder = [0, 1, 2].sort((a, b) => Math.abs(e2.getComponent(b)) - Math.abs(e2.getComponent(a)));
+  const i2 = i1 === e2DegrowthOrder[0] ? e2DegrowthOrder[1] : e2DegrowthOrder[0];
+  const a1 = e1.getComponent(i1);
+  const a2 = e1.getComponent(i2);
+  const b1 = e2.getComponent(i1);
+  const b2 = e2.getComponent(i2);
+  const c1 = offset.getComponent(i1);
+  const c2 = offset.getComponent(i2);
+  const y = (c2 - c1 * (a2 / a1)) / (b2 - b1 * (a2 / a1));
+  const x = (c1 - y * b1) / a1;
+  return [x, y];
+};
+
 const ray = new THREE.Ray();
 const intersection = new THREE.Vector3();
 const offsetMatrix = new THREE.Matrix4();
@@ -13,12 +29,16 @@ const PlaneSlider = ({
   axis
 }) => {
   const {
+    translation,
+    translationLimits,
+    annotationsClass,
     depthTest,
     scale,
     lineWidth,
     fixed,
     axisColors,
     hoveredColor,
+    displayValues,
     opacity,
     onDragStart,
     onDrag,
@@ -27,19 +47,33 @@ const PlaneSlider = ({
   } = React.useContext(context); // @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 clickInfo = React.useRef(null);
+  const offsetX0 = React.useRef(0);
+  const offsetY0 = React.useRef(0);
   const [isHovered, setIsHovered] = React.useState(false);
   const onPointerDown = React.useCallback(e => {
+    if (displayValues) {
+      divRef.current.innerText = `${translation.current[(axis + 1) % 3].toFixed(2)}, ${translation.current[(axis + 2) % 3].toFixed(2)}`;
+      divRef.current.style.display = 'block';
+    }
+
     e.stopPropagation();
     const clickPoint = e.point.clone();
     const origin = new THREE.Vector3().setFromMatrixPosition(objRef.current.matrixWorld);
+    const e1 = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 0).normalize();
+    const e2 = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 1).normalize();
     const normal = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 2).normalize();
     const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(normal, origin);
     clickInfo.current = {
       clickPoint,
+      e1,
+      e2,
       plane
     };
+    offsetX0.current = translation.current[(axis + 1) % 3];
+    offsetY0.current = translation.current[(axis + 2) % 3];
     onDragStart();
     camControls && (camControls.enabled = false); // @ts-ignore
 
@@ -52,18 +86,53 @@ const PlaneSlider = ({
     if (clickInfo.current) {
       const {
         clickPoint,
+        e1,
+        e2,
         plane
       } = clickInfo.current;
+      const [minX, maxX] = (translationLimits == null ? void 0 : translationLimits[(axis + 1) % 3]) || [undefined, undefined];
+      const [minY, maxY] = (translationLimits == null ? void 0 : translationLimits[(axis + 2) % 3]) || [undefined, undefined];
       ray.copy(e.ray);
       ray.intersectPlane(plane, intersection);
       ray.direction.negate();
       ray.intersectPlane(plane, intersection);
       intersection.sub(clickPoint);
-      offsetMatrix.makeTranslation(intersection.x, intersection.y, intersection.z);
+      let [offsetX, offsetY] = decomposeIntoBasis(e1, e2, intersection);
+      /* let offsetY = (intersection.y - (intersection.x * e1.y) / e1.x) / (e2.y - (e2.x * e1.y) / e1.x)
+      let offsetX = (intersection.x - offsetY * e2.x) / e1.x */
+
+      if (minX !== undefined) {
+        offsetX = Math.max(offsetX, minX - offsetX0.current);
+      }
+
+      if (maxX !== undefined) {
+        offsetX = Math.min(offsetX, maxX - offsetX0.current);
+      }
+
+      if (minY !== undefined) {
+        offsetY = Math.max(offsetY, minY - offsetY0.current);
+      }
+
+      if (maxY !== undefined) {
+        offsetY = Math.min(offsetY, maxY - offsetY0.current);
+      }
+
+      translation.current[(axis + 1) % 3] = offsetX0.current + offsetX;
+      translation.current[(axis + 2) % 3] = offsetY0.current + offsetY;
+
+      if (displayValues) {
+        divRef.current.innerText = `${translation.current[(axis + 1) % 3].toFixed(2)}, ${translation.current[(axis + 2) % 3].toFixed(2)}`;
+      }
+
+      offsetMatrix.makeTranslation(offsetX * e1.x + offsetY * e2.x, offsetX * e1.y + offsetY * e2.y, offsetX * e1.z + offsetY * e2.z);
       onDrag(offsetMatrix);
     }
-  }, [onDrag, isHovered]);
+  }, [onDrag, isHovered, translation, translationLimits, axis]);
   const onPointerUp = React.useCallback(e => {
+    if (displayValues) {
+      divRef.current.style.display = 'none';
+    }
+
     e.stopPropagation();
     clickInfo.current = null;
     onDragEnd();
@@ -88,7 +157,20 @@ const PlaneSlider = ({
     ref: objRef,
     matrix: matrixL,
     matrixAutoUpdate: false
-  }, /*#__PURE__*/React.createElement("group", {
+  }, /*#__PURE__*/React.createElement(Html, {
+    position: [0, 0, 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("group", {
     position: [pos1 * 1.7, pos1 * 1.7, 0]
   }, /*#__PURE__*/React.createElement("mesh", {
     visible: true,

package/core/pivotControls/context.d.ts

@@ -4,6 +4,10 @@ export declare type PivotContext = {
     onDragStart: () => void;
     onDrag: (mdW: THREE.Matrix4) => void;
     onDragEnd: () => void;
+    translation: {
+        current: [number, number, number];
+    };
+    translationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
     rotationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
     axisColors: [string | number, string | number, string | number];
     hoveredColor: string | number;
@@ -11,6 +15,7 @@ export declare type PivotContext = {
     scale: number;
     lineWidth: number;
     fixed: boolean;
+    displayValues: boolean;
     depthTest: boolean;
     userData?: {
         [key: string]: any;