@react-three/drei 9.99.7 → 9.100.0

package/materials/BlurPass.js

@@ -25,6 +25,7 @@ class BlurPass {
     this.convolutionMaterial.setTexelSize(1.0 / width, 1.0 / height);
     this.convolutionMaterial.setResolution(new Vector2(width, height));
     this.scene = new Scene();
+    // @ts-expect-error fixed in r154
     this.camera = new Camera();
     this.convolutionMaterial.uniforms.minDepthThreshold.value = minDepthThreshold;
     this.convolutionMaterial.uniforms.maxDepthThreshold.value = maxDepthThreshold;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "9.99.7",
+  "version": "9.100.0",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [

package/web/DragControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("@use-gesture/react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c=o(e),u=i(r),s=i(t);const l=new s.Vector3,m=new s.Vector2,d=new s.Vector3,f=new s.Vector3,x=new s.Vector3,p=new s.Plane,y=u.forwardRef((({autoTransform:e=!0,matrix:r,axisLock:t,dragLimits:o,onHover:i,onDragStart:y,onDrag:h,onDragEnd:g,children:b,...v},w)=>{const D=n.useThree((e=>e.controls)),{camera:M,size:z,raycaster:P,invalidate:j}=n.useThree(),O=u.useRef(null),V=a.useGesture({onHover:({hovering:e})=>i&&i(null!=e&&e),onDragStart:({event:e})=>{D&&(D.enabled=!1);const{point:r}=e;O.current.matrix.decompose(l,new s.Quaternion,new s.Vector3),d.copy(r),f.copy(d).sub(l),y&&y(l),j()},onDrag:({xy:[r,n],intentional:a})=>{if(!a)return;const i=(r-z.left)/z.width*2-1,c=-(n-z.top)/z.height*2+1;if(m.set(i,c),P.setFromCamera(m,M),t)switch(t){case"x":x.set(1,0,0);break;case"y":x.set(0,1,0);break;case"z":x.set(0,0,1)}else M.getWorldDirection(x).negate();p.setFromNormalAndCoplanarPoint(x,d),P.ray.intersectPlane(p,d);const u=O.current.matrix.clone(),l=O.current.matrixWorld.clone(),y=new s.Vector3(d.x-f.x,d.y-f.y,d.z-f.z);if(o&&(y.x=o[0]?Math.max(Math.min(y.x,o[0][1]),o[0][0]):y.x,y.y=o[1]?Math.max(Math.min(y.y,o[1][1]),o[1][0]):y.y,y.z=o[2]?Math.max(Math.min(y.z,o[2][1]),o[2][0]):y.z),e){O.current.matrix.setPosition(y);const e=O.current.matrix.clone().multiply(u.invert()),r=O.current.matrix.clone().multiply(l.invert());h&&h(O.current.matrix,e,O.current.matrixWorld,r)}else{const e=(new s.Matrix4).copy(O.current.matrix);e.setPosition(y);const r=e.clone().multiply(u.invert()),t=e.clone().multiply(l.invert());h&&h(e,r,O.current.matrixWorld,t)}j()},onDragEnd:()=>{D&&(D.enabled=!0),g&&g(),j()}},{drag:{filterTaps:!0,threshold:1}});return u.useImperativeHandle(w,(()=>O.current),[]),u.useLayoutEffect((()=>{r&&(O.current.matrix=r)}),[r]),u.createElement("group",c.default({ref:O},V(),{matrix:r,matrixAutoUpdate:!1},v),b)}));exports.DragControls=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("@use-gesture/react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c=o(e),u=i(r),s=i(t);const l=new s.Vector3,m=new s.Vector2,f=new s.Vector3,d=new s.Vector3,x=new s.Vector3,p=new s.Plane,y=u.forwardRef((({autoTransform:e=!0,matrix:r,axisLock:t,dragLimits:o,onHover:i,onDragStart:y,onDrag:g,onDragEnd:h,children:b,dragConfig:v,...w},D)=>{const M=n.useThree((e=>e.controls)),{camera:j,size:z,raycaster:P,invalidate:O}=n.useThree(),V=u.useRef(null),q=a.useGesture({onHover:({hovering:e})=>i&&i(null!=e&&e),onDragStart:({event:e})=>{M&&(M.enabled=!1);const{point:r}=e;V.current.matrix.decompose(l,new s.Quaternion,new s.Vector3),f.copy(r),d.copy(f).sub(l),y&&y(l),O()},onDrag:({xy:[r,n],intentional:a})=>{if(!a)return;const i=(r-z.left)/z.width*2-1,c=-(n-z.top)/z.height*2+1;if(m.set(i,c),P.setFromCamera(m,j),t)switch(t){case"x":x.set(1,0,0);break;case"y":x.set(0,1,0);break;case"z":x.set(0,0,1)}else j.getWorldDirection(x).negate();p.setFromNormalAndCoplanarPoint(x,f),P.ray.intersectPlane(p,f);const u=V.current.matrix.clone(),l=V.current.matrixWorld.clone(),y=new s.Vector3(f.x-d.x,f.y-d.y,f.z-d.z);if(o&&(y.x=o[0]?Math.max(Math.min(y.x,o[0][1]),o[0][0]):y.x,y.y=o[1]?Math.max(Math.min(y.y,o[1][1]),o[1][0]):y.y,y.z=o[2]?Math.max(Math.min(y.z,o[2][1]),o[2][0]):y.z),e){V.current.matrix.setPosition(y);const e=V.current.matrix.clone().multiply(u.invert()),r=V.current.matrix.clone().multiply(l.invert());g&&g(V.current.matrix,e,V.current.matrixWorld,r)}else{const e=(new s.Matrix4).copy(V.current.matrix);e.setPosition(y);const r=e.clone().multiply(u.invert()),t=e.clone().multiply(l.invert());g&&g(e,r,V.current.matrixWorld,t)}O()},onDragEnd:()=>{M&&(M.enabled=!0),h&&h(),O()}},{drag:{filterTaps:!0,threshold:1,..."object"==typeof v?v:{}}});return u.useImperativeHandle(D,(()=>V.current),[]),u.useLayoutEffect((()=>{r&&(V.current.matrix=r)}),[r]),u.createElement("group",c.default({ref:V},q(),{matrix:r,matrixAutoUpdate:!1},w),b)}));exports.DragControls=y;

package/web/DragControls.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as THREE from 'three';
+import { DragConfig } from '@use-gesture/react';
 import { ForwardRefComponent } from '../helpers/ts-utils';
 export type DragControlsProps = {
     autoTransform?: boolean;
@@ -11,5 +12,6 @@ export type DragControlsProps = {
     onDrag?: (localMatrix: THREE.Matrix4, deltaLocalMatrix: THREE.Matrix4, worldMatrix: THREE.Matrix4, deltaWorldMatrix: THREE.Matrix4) => void;
     onDragEnd?: () => void;
     children: React.ReactNode;
+    dragConfig?: DragConfig;
 };
 export declare const DragControls: ForwardRefComponent<DragControlsProps, THREE.Group>;

package/web/DragControls.js

@@ -20,6 +20,7 @@ const DragControls = /*#__PURE__*/React.forwardRef(({
   onDrag,
   onDragEnd,
   children,
+  dragConfig,
   ...props
 }, fRef) => {
   const defaultControls = useThree(state => state.controls);
@@ -103,7 +104,8 @@ const DragControls = /*#__PURE__*/React.forwardRef(({
   }, {
     drag: {
       filterTaps: true,
-      threshold: 1
+      threshold: 1,
+      ...(typeof dragConfig === 'object' ? dragConfig : {})
     }
   });
   React.useImperativeHandle(fRef, () => ref.current, []);

package/web/Html.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("react-dom/client"),n=require("three"),o=require("@react-three/fiber");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=i(e),c=s(t),l=s(r);const u=new n.Vector3,d=new n.Vector3,m=new n.Vector3;function f(e,t,r){const n=u.setFromMatrixPosition(e.matrixWorld);n.project(t);const o=r.width/2,i=r.height/2;return[n.x*o+o,-n.y*i+i]}const h=e=>Math.abs(e)<1e-10?0:e;function p(e,t,r=""){let n="matrix3d(";for(let r=0;16!==r;r++)n+=h(t[r]*e.elements[r])+(15!==r?",":")");return r+n}const x=(v=[1,-1,1,1,1,-1,1,1,1,-1,1,1,1,-1,1,1],e=>p(e,v));var v;const y=(e,t)=>{return p(e,[1/(r=t),1/r,1/r,1,-1/r,-1/r,-1/r,-1,1/r,1/r,1/r,1,1,1,1,1],"translate(-50%,-50%)");var r};const g=c.forwardRef((({children:e,eps:t=.001,style:r,className:i,prepend:s,center:p,fullscreen:v,portal:g,distanceFactor:M,sprite:b=!1,transform:P=!1,occlude:w,onOcclude:E,castShadow:W,receiveShadow:S,material:$,geometry:j,zIndexRange:z=[16777271,0],calculatePosition:O=f,as:R="div",wrapperClass:F,pointerEvents:C="auto",...T},I)=>{const{gl:A,camera:k,scene:H,size:N,raycaster:_,events:q,viewport:V}=o.useThree(),[L]=c.useState((()=>document.createElement(R))),D=c.useRef(),G=c.useRef(null),Z=c.useRef(0),B=c.useRef([0,0]),J=c.useRef(null),K=c.useRef(null),Q=(null==g?void 0:g.current)||q.connected||A.domElement.parentNode,U=c.useRef(null),X=c.useRef(!1),Y=c.useMemo((()=>w&&"blending"!==w||Array.isArray(w)&&w.length&&function(e){return e&&"object"==typeof e&&"current"in e}(w[0])),[w]);c.useLayoutEffect((()=>{const e=A.domElement;w&&"blending"===w?(e.style.zIndex=`${Math.floor(z[0]/2)}`,e.style.position="absolute",e.style.pointerEvents="none"):(e.style.zIndex=null,e.style.position=null,e.style.pointerEvents=null)}),[w]),c.useLayoutEffect((()=>{if(G.current){const e=D.current=l.createRoot(L);if(H.updateMatrixWorld(),P)L.style.cssText="position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";else{const e=O(G.current,k,N);L.style.cssText=`position:absolute;top:0;left:0;transform:translate3d(${e[0]}px,${e[1]}px,0);transform-origin:0 0;`}return Q&&(s?Q.prepend(L):Q.appendChild(L)),()=>{Q&&Q.removeChild(L),e.unmount()}}}),[Q,P]),c.useLayoutEffect((()=>{F&&(L.className=F)}),[F]);const ee=c.useMemo((()=>P?{position:"absolute",top:0,left:0,width:N.width,height:N.height,transformStyle:"preserve-3d",pointerEvents:"none"}:{position:"absolute",transform:p?"translate3d(-50%,-50%,0)":"none",...v&&{top:-N.height/2,left:-N.width/2,width:N.width,height:N.height},...r}),[r,p,v,N,P]),te=c.useMemo((()=>({position:"absolute",pointerEvents:C})),[C]);c.useLayoutEffect((()=>{var t,n;(X.current=!1,P)?null==(t=D.current)||t.render(c.createElement("div",{ref:J,style:ee},c.createElement("div",{ref:K,style:te},c.createElement("div",{ref:I,className:i,style:r,children:e})))):null==(n=D.current)||n.render(c.createElement("div",{ref:I,style:ee,className:i,children:e}))}));const re=c.useRef(!0);o.useFrame((e=>{if(G.current){k.updateMatrixWorld(),G.current.updateWorldMatrix(!0,!1);const e=P?B.current:O(G.current,k,N);if(P||Math.abs(Z.current-k.zoom)>t||Math.abs(B.current[0]-e[0])>t||Math.abs(B.current[1]-e[1])>t){const t=function(e,t){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=r.sub(n),i=t.getWorldDirection(m);return o.angleTo(i)>Math.PI/2}(G.current,k);let r=!1;Y&&(Array.isArray(w)?r=w.map((e=>e.current)):"blending"!==w&&(r=[H]));const o=re.current;if(r){const e=function(e,t,r,n){const o=u.setFromMatrixPosition(e.matrixWorld),i=o.clone();i.project(t),r.setFromCamera(i,t);const s=r.intersectObjects(n,!0);if(s.length){const e=s[0].distance;return o.distanceTo(r.ray.origin)<e}return!0}(G.current,k,_,r);re.current=e&&!t}else re.current=!t;o!==re.current&&(E?E(!re.current):L.style.display=re.current?"block":"none");const i=Math.floor(z[0]/2),s=w?Y?[z[0],i]:[i-1,0]:z;if(L.style.zIndex=`${function(e,t,r){if(t instanceof n.PerspectiveCamera||t instanceof n.OrthographicCamera){const n=u.setFromMatrixPosition(e.matrixWorld),o=d.setFromMatrixPosition(t.matrixWorld),i=n.distanceTo(o),s=(r[1]-r[0])/(t.far-t.near),a=r[1]-s*t.far;return Math.round(s*i+a)}}(G.current,k,s)}`,P){const[e,t]=[N.width/2,N.height/2],r=k.projectionMatrix.elements[5]*t,{isOrthographicCamera:n,top:o,left:i,bottom:s,right:a}=k,c=x(k.matrixWorldInverse),l=n?`scale(${r})translate(${h(-(a+i)/2)}px,${h((o+s)/2)}px)`:`translateZ(${r}px)`;let u=G.current.matrixWorld;b&&(u=k.matrixWorldInverse.clone().transpose().copyPosition(u).scale(G.current.scale),u.elements[3]=u.elements[7]=u.elements[11]=0,u.elements[15]=1),L.style.width=N.width+"px",L.style.height=N.height+"px",L.style.perspective=n?"":`${r}px`,J.current&&K.current&&(J.current.style.transform=`${l}${c}translate(${e}px,${t}px)`,K.current.style.transform=y(u,1/((M||10)/400)))}else{const t=void 0===M?1:function(e,t){if(t instanceof n.OrthographicCamera)return t.zoom;if(t instanceof n.PerspectiveCamera){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=t.fov*Math.PI/180,i=r.distanceTo(n);return 1/(2*Math.tan(o/2)*i)}return 1}(G.current,k)*M;L.style.transform=`translate3d(${e[0]}px,${e[1]}px,0) scale(${t})`}B.current=e,Z.current=k.zoom}}if(!Y&&U.current&&!X.current)if(P){if(J.current){const e=J.current.children[0];if(null!=e&&e.clientWidth&&null!=e&&e.clientHeight){const{isOrthographicCamera:t}=k;if(t||j)T.scale&&(Array.isArray(T.scale)?T.scale instanceof n.Vector3?U.current.scale.copy(T.scale.clone().divideScalar(1)):U.current.scale.set(1/T.scale[0],1/T.scale[1],1/T.scale[2]):U.current.scale.setScalar(1/T.scale));else{const t=(M||10)/400,r=e.clientWidth*t,n=e.clientHeight*t;U.current.scale.set(r,n,1)}X.current=!0}}}else{const t=L.children[0];if(null!=t&&t.clientWidth&&null!=t&&t.clientHeight){const e=1/V.factor,r=t.clientWidth*e,n=t.clientHeight*e;U.current.scale.set(r,n,1),X.current=!0}U.current.lookAt(e.camera.position)}}));const ne=c.useMemo((()=>({vertexShader:P?void 0:'\n          /*\n            This shader is from the THREE\'s SpriteMaterial.\n            We need to turn the backing plane into a Sprite\n            (make it always face the camera) if "transfrom" \n            is false. \n          */\n          #include <common>\n\n          void main() {\n            vec2 center = vec2(0., 1.);\n            float rotation = 0.0;\n            \n            // This is somewhat arbitrary, but it seems to work well\n            // Need to figure out how to derive this dynamically if it even matters\n            float size = 0.03;\n\n            vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );\n            vec2 scale;\n            scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );\n            scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );\n\n            bool isPerspective = isPerspectiveMatrix( projectionMatrix );\n            if ( isPerspective ) scale *= - mvPosition.z;\n\n            vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;\n            vec2 rotatedPosition;\n            rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;\n            rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;\n            mvPosition.xy += rotatedPosition;\n\n            gl_Position = projectionMatrix * mvPosition;\n          }\n      ',fragmentShader:"\n        void main() {\n          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\n        }\n      "})),[P]);return c.createElement("group",a.default({},T,{ref:G}),w&&!Y&&c.createElement("mesh",{castShadow:W,receiveShadow:S,ref:U},j||c.createElement("planeGeometry",null),$||c.createElement("shaderMaterial",{side:n.DoubleSide,vertexShader:ne.vertexShader,fragmentShader:ne.fragmentShader})))}));exports.Html=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("react-dom/client"),n=require("three"),o=require("@react-three/fiber");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=i(e),c=s(t),l=s(r);const u=new n.Vector3,d=new n.Vector3,m=new n.Vector3,f=new n.Vector2;function h(e,t,r){const n=u.setFromMatrixPosition(e.matrixWorld);n.project(t);const o=r.width/2,i=r.height/2;return[n.x*o+o,-n.y*i+i]}const p=e=>Math.abs(e)<1e-10?0:e;function x(e,t,r=""){let n="matrix3d(";for(let r=0;16!==r;r++)n+=p(t[r]*e.elements[r])+(15!==r?",":")");return r+n}const v=(y=[1,-1,1,1,1,-1,1,1,1,-1,1,1,1,-1,1,1],e=>x(e,y));var y;const g=(e,t)=>{return x(e,[1/(r=t),1/r,1/r,1,-1/r,-1/r,-1/r,-1,1/r,1/r,1/r,1,1,1,1,1],"translate(-50%,-50%)");var r};const M=c.forwardRef((({children:e,eps:t=.001,style:r,className:i,prepend:s,center:x,fullscreen:y,portal:M,distanceFactor:b,sprite:P=!1,transform:w=!1,occlude:E,onOcclude:W,castShadow:S,receiveShadow:$,material:j,geometry:z,zIndexRange:O=[16777271,0],calculatePosition:R=h,as:F="div",wrapperClass:C,pointerEvents:T="auto",...I},A)=>{const{gl:k,camera:H,scene:N,size:V,raycaster:_,events:q,viewport:L}=o.useThree(),[D]=c.useState((()=>document.createElement(F))),G=c.useRef(),Z=c.useRef(null),B=c.useRef(0),J=c.useRef([0,0]),K=c.useRef(null),Q=c.useRef(null),U=(null==M?void 0:M.current)||q.connected||k.domElement.parentNode,X=c.useRef(null),Y=c.useRef(!1),ee=c.useMemo((()=>E&&"blending"!==E||Array.isArray(E)&&E.length&&function(e){return e&&"object"==typeof e&&"current"in e}(E[0])),[E]);c.useLayoutEffect((()=>{const e=k.domElement;E&&"blending"===E?(e.style.zIndex=`${Math.floor(O[0]/2)}`,e.style.position="absolute",e.style.pointerEvents="none"):(e.style.zIndex=null,e.style.position=null,e.style.pointerEvents=null)}),[E]),c.useLayoutEffect((()=>{if(Z.current){const e=G.current=l.createRoot(D);if(N.updateMatrixWorld(),w)D.style.cssText="position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";else{const e=R(Z.current,H,V);D.style.cssText=`position:absolute;top:0;left:0;transform:translate3d(${e[0]}px,${e[1]}px,0);transform-origin:0 0;`}return U&&(s?U.prepend(D):U.appendChild(D)),()=>{U&&U.removeChild(D),e.unmount()}}}),[U,w]),c.useLayoutEffect((()=>{C&&(D.className=C)}),[C]);const te=c.useMemo((()=>w?{position:"absolute",top:0,left:0,width:V.width,height:V.height,transformStyle:"preserve-3d",pointerEvents:"none"}:{position:"absolute",transform:x?"translate3d(-50%,-50%,0)":"none",...y&&{top:-V.height/2,left:-V.width/2,width:V.width,height:V.height},...r}),[r,x,y,V,w]),re=c.useMemo((()=>({position:"absolute",pointerEvents:T})),[T]);c.useLayoutEffect((()=>{var t,n;(Y.current=!1,w)?null==(t=G.current)||t.render(c.createElement("div",{ref:K,style:te},c.createElement("div",{ref:Q,style:re},c.createElement("div",{ref:A,className:i,style:r,children:e})))):null==(n=G.current)||n.render(c.createElement("div",{ref:A,style:te,className:i,children:e}))}));const ne=c.useRef(!0);o.useFrame((e=>{if(Z.current){H.updateMatrixWorld(),Z.current.updateWorldMatrix(!0,!1);const e=w?J.current:R(Z.current,H,V);if(w||Math.abs(B.current-H.zoom)>t||Math.abs(J.current[0]-e[0])>t||Math.abs(J.current[1]-e[1])>t){const t=function(e,t){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=r.sub(n),i=t.getWorldDirection(m);return o.angleTo(i)>Math.PI/2}(Z.current,H);let r=!1;ee&&(Array.isArray(E)?r=E.map((e=>e.current)):"blending"!==E&&(r=[N]));const o=ne.current;if(r){const e=function(e,t,r,n){const o=u.setFromMatrixPosition(e.matrixWorld),i=o.clone();i.project(t),f.set(i.x,i.y),r.setFromCamera(f,t);const s=r.intersectObjects(n,!0);if(s.length){const e=s[0].distance;return o.distanceTo(r.ray.origin)<e}return!0}(Z.current,H,_,r);ne.current=e&&!t}else ne.current=!t;o!==ne.current&&(W?W(!ne.current):D.style.display=ne.current?"block":"none");const i=Math.floor(O[0]/2),s=E?ee?[O[0],i]:[i-1,0]:O;if(D.style.zIndex=`${function(e,t,r){if(t instanceof n.PerspectiveCamera||t instanceof n.OrthographicCamera){const n=u.setFromMatrixPosition(e.matrixWorld),o=d.setFromMatrixPosition(t.matrixWorld),i=n.distanceTo(o),s=(r[1]-r[0])/(t.far-t.near),a=r[1]-s*t.far;return Math.round(s*i+a)}}(Z.current,H,s)}`,w){const[e,t]=[V.width/2,V.height/2],r=H.projectionMatrix.elements[5]*t,{isOrthographicCamera:n,top:o,left:i,bottom:s,right:a}=H,c=v(H.matrixWorldInverse),l=n?`scale(${r})translate(${p(-(a+i)/2)}px,${p((o+s)/2)}px)`:`translateZ(${r}px)`;let u=Z.current.matrixWorld;P&&(u=H.matrixWorldInverse.clone().transpose().copyPosition(u).scale(Z.current.scale),u.elements[3]=u.elements[7]=u.elements[11]=0,u.elements[15]=1),D.style.width=V.width+"px",D.style.height=V.height+"px",D.style.perspective=n?"":`${r}px`,K.current&&Q.current&&(K.current.style.transform=`${l}${c}translate(${e}px,${t}px)`,Q.current.style.transform=g(u,1/((b||10)/400)))}else{const t=void 0===b?1:function(e,t){if(t instanceof n.OrthographicCamera)return t.zoom;if(t instanceof n.PerspectiveCamera){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=t.fov*Math.PI/180,i=r.distanceTo(n);return 1/(2*Math.tan(o/2)*i)}return 1}(Z.current,H)*b;D.style.transform=`translate3d(${e[0]}px,${e[1]}px,0) scale(${t})`}J.current=e,B.current=H.zoom}}if(!ee&&X.current&&!Y.current)if(w){if(K.current){const e=K.current.children[0];if(null!=e&&e.clientWidth&&null!=e&&e.clientHeight){const{isOrthographicCamera:t}=H;if(t||z)I.scale&&(Array.isArray(I.scale)?I.scale instanceof n.Vector3?X.current.scale.copy(I.scale.clone().divideScalar(1)):X.current.scale.set(1/I.scale[0],1/I.scale[1],1/I.scale[2]):X.current.scale.setScalar(1/I.scale));else{const t=(b||10)/400,r=e.clientWidth*t,n=e.clientHeight*t;X.current.scale.set(r,n,1)}Y.current=!0}}}else{const t=D.children[0];if(null!=t&&t.clientWidth&&null!=t&&t.clientHeight){const e=1/L.factor,r=t.clientWidth*e,n=t.clientHeight*e;X.current.scale.set(r,n,1),Y.current=!0}X.current.lookAt(e.camera.position)}}));const oe=c.useMemo((()=>({vertexShader:w?void 0:'\n          /*\n            This shader is from the THREE\'s SpriteMaterial.\n            We need to turn the backing plane into a Sprite\n            (make it always face the camera) if "transfrom"\n            is false.\n          */\n          #include <common>\n\n          void main() {\n            vec2 center = vec2(0., 1.);\n            float rotation = 0.0;\n\n            // This is somewhat arbitrary, but it seems to work well\n            // Need to figure out how to derive this dynamically if it even matters\n            float size = 0.03;\n\n            vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );\n            vec2 scale;\n            scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );\n            scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );\n\n            bool isPerspective = isPerspectiveMatrix( projectionMatrix );\n            if ( isPerspective ) scale *= - mvPosition.z;\n\n            vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;\n            vec2 rotatedPosition;\n            rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;\n            rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;\n            mvPosition.xy += rotatedPosition;\n\n            gl_Position = projectionMatrix * mvPosition;\n          }\n      ',fragmentShader:"\n        void main() {\n          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\n        }\n      "})),[w]);return c.createElement("group",a.default({},I,{ref:Z}),E&&!ee&&c.createElement("mesh",{castShadow:S,receiveShadow:$,ref:X},z||c.createElement("planeGeometry",null),j||c.createElement("shaderMaterial",{side:n.DoubleSide,vertexShader:oe.vertexShader,fragmentShader:oe.fragmentShader})))}));exports.Html=M;

package/web/Html.d.ts

@@ -24,7 +24,7 @@ export interface HtmlProps extends Omit<Assign<React.HTMLAttributes<HTMLDivEleme
     wrapperClass?: string;
     pointerEvents?: PointerEventsProperties;
     occlude?: React.RefObject<Object3D>[] | boolean | 'raycast' | 'blending';
-    onOcclude?: (visible: boolean) => null;
+    onOcclude?: (visible: boolean) => void;
     material?: React.ReactNode;
     geometry?: React.ReactNode;
     castShadow?: boolean;

package/web/Html.js

@@ -1,12 +1,13 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { Vector3, DoubleSide, OrthographicCamera, PerspectiveCamera } from 'three';
+import { Vector3, DoubleSide, OrthographicCamera, PerspectiveCamera, Vector2 } from 'three';
 import { useThree, useFrame } from '@react-three/fiber';
 
 const v1 = /* @__PURE__ */new Vector3();
 const v2 = /* @__PURE__ */new Vector3();
 const v3 = /* @__PURE__ */new Vector3();
+const v4 = /* @__PURE__ */new Vector2();
 function defaultCalculatePosition(el, camera, size) {
   const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
   objectPos.project(camera);
@@ -25,7 +26,8 @@ function isObjectVisible(el, camera, raycaster, occlude) {
   const elPos = v1.setFromMatrixPosition(el.matrixWorld);
   const screenPos = elPos.clone();
   screenPos.project(camera);
-  raycaster.setFromCamera(screenPos, camera);
+  v4.set(screenPos.x, screenPos.y);
+  raycaster.setFromCamera(v4, camera);
   const intersects = raycaster.intersectObjects(occlude, true);
   if (intersects.length) {
     const intersectionDistance = intersects[0].distance;
@@ -321,15 +323,15 @@ const Html = /* @__PURE__ */React.forwardRef(({
           /*
             This shader is from the THREE's SpriteMaterial.
             We need to turn the backing plane into a Sprite
-            (make it always face the camera) if "transfrom" 
-            is false. 
+            (make it always face the camera) if "transfrom"
+            is false.
           */
           #include <common>
 
           void main() {
             vec2 center = vec2(0., 1.);
             float rotation = 0.0;
-            
+
             // This is somewhat arbitrary, but it seems to work well
             // Need to figure out how to derive this dynamically if it even matters
             float size = 0.03;

package/web/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Html.cjs.js"),r=require("./CycleRaycast.cjs.js"),s=require("./useCursor.cjs.js"),o=require("./Loader.cjs.js"),t=require("./ScrollControls.cjs.js"),i=require("./PresentationControls.cjs.js"),c=require("./KeyboardControls.cjs.js"),a=require("./Select.cjs.js"),u=require("./View.cjs.js"),n=require("./pivotControls/index.cjs.js"),j=require("./FaceControls.cjs.js"),p=require("./DragControls.cjs.js"),l=require("./FaceLandmarker.cjs.js"),x=require("./Facemesh.cjs.js"),q=require("../core/Billboard.cjs.js"),d=require("../core/ScreenSpace.cjs.js"),C=require("../core/ScreenSizer.cjs.js"),m=require("../core/QuadraticBezierLine.cjs.js"),h=require("../core/CubicBezierLine.cjs.js"),S=require("../core/CatmullRomLine.cjs.js"),M=require("../core/Line.cjs.js"),P=require("../core/PositionalAudio.cjs.js"),b=require("../core/Text.cjs.js"),T=require("../core/Text3D.cjs.js"),f=require("../core/Effects.cjs.js"),g=require("../core/GradientTexture.cjs.js"),v=require("../core/Image.cjs.js"),B=require("../core/Edges.cjs.js"),F=require("../core/Outlines.cjs.js"),A=require("../core/Trail.cjs.js"),L=require("../core/Sampler.cjs.js"),D=require("../core/ComputedAttribute.cjs.js"),R=require("../core/Clone.cjs.js"),E=require("../core/MarchingCubes.cjs.js"),k=require("../core/Decal.cjs.js"),G=require("../core/Svg.cjs.js"),w=require("../core/Gltf.cjs.js"),y=require("../core/AsciiRenderer.cjs.js"),z=require("../core/Splat.cjs.js"),O=require("../core/OrthographicCamera.cjs.js"),I=require("../core/PerspectiveCamera.cjs.js"),H=require("../core/CubeCamera.cjs.js"),V=require("../core/DeviceOrientationControls.cjs.js"),K=require("../core/FlyControls.cjs.js"),W=require("../core/MapControls.cjs.js"),Q=require("../core/OrbitControls.cjs.js"),X=require("../core/TrackballControls.cjs.js"),N=require("../core/ArcballControls.cjs.js"),U=require("../core/TransformControls.cjs.js"),_=require("../core/PointerLockControls.cjs.js"),J=require("../core/FirstPersonControls.cjs.js"),Y=require("../core/CameraControls.cjs.js"),Z=require("../core/MotionPathControls.cjs.js"),$=require("../core/GizmoHelper.cjs.js"),ee=require("../core/GizmoViewcube.cjs.js"),re=require("../core/GizmoViewport.cjs.js"),se=require("../core/Grid.cjs.js"),oe=require("../core/useCubeTexture.cjs.js"),te=require("../core/useFBX.cjs.js"),ie=require("../core/useGLTF.cjs.js"),ce=require("../core/useKTX2.cjs.js"),ae=require("../core/useProgress.cjs.js"),ue=require("../core/useTexture.cjs.js"),ne=require("../core/useVideoTexture.cjs.js"),je=require("../core/useFont.cjs.js"),pe=require("../core/useSpriteLoader.cjs.js"),le=require("../core/Stats.cjs.js"),xe=require("../core/StatsGl.cjs.js"),qe=require("../core/useDepthBuffer.cjs.js"),de=require("../core/useAspect.cjs.js"),Ce=require("../core/useCamera.cjs.js"),me=require("../core/useDetectGPU.cjs.js"),he=require("../core/useHelper.cjs.js"),Se=require("../core/useBVH.cjs.js"),Me=require("../core/useContextBridge.cjs.js"),Pe=require("../core/useAnimations.cjs.js"),be=require("../core/useFBO.cjs.js"),Te=require("../core/useIntersect.cjs.js"),fe=require("../core/useBoxProjectedEnv.cjs.js"),ge=require("../core/BBAnchor.cjs.js"),ve=require("../core/useTrailTexture.cjs.js"),Be=require("../core/useCubeCamera.cjs.js"),Fe=require("../core/Example.cjs.js"),Ae=require("../core/SpriteAnimator.cjs.js"),Le=require("../core/CurveModifier.cjs.js"),De=require("../core/MeshDistortMaterial.cjs.js"),Re=require("../core/MeshWobbleMaterial.cjs.js"),Ee=require("../core/MeshReflectorMaterial.cjs.js"),ke=require("../core/MeshRefractionMaterial.cjs.js"),Ge=require("../core/MeshTransmissionMaterial.cjs.js"),we=require("../core/MeshDiscardMaterial.cjs.js"),ye=require("../core/PointMaterial.cjs.js"),ze=require("../core/shaderMaterial.cjs.js"),Oe=require("../core/softShadows.cjs.js"),Ie=require("../core/shapes.cjs.js"),He=require("../core/RoundedBox.cjs.js"),Ve=require("../core/ScreenQuad.cjs.js"),Ke=require("../core/Center.cjs.js"),We=require("../core/Resize.cjs.js"),Qe=require("../core/Bounds.cjs.js"),Xe=require("../core/CameraShake.cjs.js"),Ne=require("../core/Float.cjs.js"),Ue=require("../core/Stage.cjs.js"),_e=require("../core/Backdrop.cjs.js"),Je=require("../core/Shadow.cjs.js"),Ye=require("../core/Caustics.cjs.js"),Ze=require("../core/ContactShadows.cjs.js"),$e=require("../core/AccumulativeShadows.cjs.js"),er=require("../core/Reflector.cjs.js"),rr=require("../core/SpotLight.cjs.js"),sr=require("../core/Environment.cjs.js"),or=require("../core/Lightformer.cjs.js"),tr=require("../core/Sky.cjs.js"),ir=require("../core/Stars.cjs.js"),cr=require("../core/Cloud.cjs.js"),ar=require("../core/Sparkles.cjs.js"),ur=require("../core/useEnvironment.cjs.js"),nr=require("../core/useMatcapTexture.cjs.js"),jr=require("../core/useNormalTexture.cjs.js"),pr=require("../core/Wireframe.cjs.js"),lr=require("../core/ShadowAlpha.cjs.js"),xr=require("../core/Points.cjs.js"),qr=require("../core/Instances.cjs.js"),dr=require("../core/Segments.cjs.js"),Cr=require("../core/Detailed.cjs.js"),mr=require("../core/Preload.cjs.js"),hr=require("../core/BakeShadows.cjs.js"),Sr=require("../core/meshBounds.cjs.js"),Mr=require("../core/AdaptiveDpr.cjs.js"),Pr=require("../core/AdaptiveEvents.cjs.js"),br=require("../core/PerformanceMonitor.cjs.js"),Tr=require("../core/RenderTexture.cjs.js"),fr=require("../core/RenderCubeTexture.cjs.js"),gr=require("../core/Mask.cjs.js"),vr=require("../core/Hud.cjs.js"),Br=require("../core/Fisheye.cjs.js"),Fr=require("../core/MeshPortalMaterial.cjs.js"),Ar=require("../core/calculateScaleFactor.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("react-dom/client"),require("three"),require("@react-three/fiber"),require("zustand"),require("maath"),require("@react-spring/three"),require("@use-gesture/react"),require("zustand/middleware"),require("three-stdlib"),require("zustand/shallow"),require("tunnel-rat"),require("./pivotControls/AxisArrow.cjs.js"),require("./pivotControls/context.cjs.js"),require("./pivotControls/AxisRotator.cjs.js"),require("./pivotControls/PlaneSlider.cjs.js"),require("suspend-react"),require("../helpers/constants.cjs.js"),require("meshline"),require("camera-controls"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("stats-gl"),require("detect-gpu"),require("three-mesh-bvh"),require("react-composer"),require("../helpers/deprecated.cjs.js"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("uuid"),require("../materials/WireframeMaterial.cjs.js"),exports.Html=e.Html,exports.CycleRaycast=r.CycleRaycast,exports.useCursor=s.useCursor,exports.Loader=o.Loader,exports.Scroll=t.Scroll,exports.ScrollControls=t.ScrollControls,exports.useScroll=t.useScroll,exports.PresentationControls=i.PresentationControls,exports.KeyboardControls=c.KeyboardControls,exports.useKeyboardControls=c.useKeyboardControls,exports.Select=a.Select,exports.useSelect=a.useSelect,exports.View=u.View,exports.PivotControls=n.PivotControls,exports.FaceControls=j.FaceControls,exports.useFaceControls=j.useFaceControls,exports.DragControls=p.DragControls,exports.FaceLandmarker=l.FaceLandmarker,exports.FaceLandmarkerDefaults=l.FaceLandmarkerDefaults,exports.useFaceLandmarker=l.useFaceLandmarker,exports.Facemesh=x.Facemesh,exports.FacemeshDatas=x.FacemeshDatas,exports.FacemeshEye=x.FacemeshEye,exports.FacemeshEyeDefaults=x.FacemeshEyeDefaults,exports.Billboard=q.Billboard,exports.ScreenSpace=d.ScreenSpace,exports.ScreenSizer=C.ScreenSizer,exports.QuadraticBezierLine=m.QuadraticBezierLine,exports.CubicBezierLine=h.CubicBezierLine,exports.CatmullRomLine=S.CatmullRomLine,exports.Line=M.Line,exports.PositionalAudio=P.PositionalAudio,exports.Text=b.Text,exports.Text3D=T.Text3D,exports.Effects=f.Effects,exports.isWebGL2Available=f.isWebGL2Available,exports.GradientTexture=g.GradientTexture,exports.GradientType=g.GradientType,exports.Image=v.Image,exports.Edges=B.Edges,exports.Outlines=F.Outlines,exports.Trail=A.Trail,exports.useTrail=A.useTrail,exports.Sampler=L.Sampler,exports.useSurfaceSampler=L.useSurfaceSampler,exports.ComputedAttribute=D.ComputedAttribute,exports.Clone=R.Clone,exports.MarchingCube=E.MarchingCube,exports.MarchingCubes=E.MarchingCubes,exports.MarchingPlane=E.MarchingPlane,exports.Decal=k.Decal,exports.Svg=G.Svg,exports.Gltf=w.Gltf,exports.AsciiRenderer=y.AsciiRenderer,exports.Splat=z.Splat,exports.OrthographicCamera=O.OrthographicCamera,exports.PerspectiveCamera=I.PerspectiveCamera,exports.CubeCamera=H.CubeCamera,exports.DeviceOrientationControls=V.DeviceOrientationControls,exports.FlyControls=K.FlyControls,exports.MapControls=W.MapControls,exports.OrbitControls=Q.OrbitControls,exports.TrackballControls=X.TrackballControls,exports.ArcballControls=N.ArcballControls,exports.TransformControls=U.TransformControls,exports.PointerLockControls=_.PointerLockControls,exports.FirstPersonControls=J.FirstPersonControls,exports.CameraControls=Y.CameraControls,exports.MotionPathControls=Z.MotionPathControls,exports.useMotion=Z.useMotion,exports.GizmoHelper=$.GizmoHelper,exports.useGizmoContext=$.useGizmoContext,exports.GizmoViewcube=ee.GizmoViewcube,exports.GizmoViewport=re.GizmoViewport,exports.Grid=se.Grid,exports.useCubeTexture=oe.useCubeTexture,exports.useFBX=te.useFBX,exports.useGLTF=ie.useGLTF,exports.useKTX2=ce.useKTX2,exports.useProgress=ae.useProgress,exports.IsObject=ue.IsObject,exports.useTexture=ue.useTexture,exports.useVideoTexture=ne.useVideoTexture,exports.useFont=je.useFont,exports.calculateAspectRatio=pe.calculateAspectRatio,exports.getFirstItem=pe.getFirstItem,exports.useSpriteLoader=pe.useSpriteLoader,exports.Stats=le.Stats,exports.StatsGl=xe.StatsGl,exports.useDepthBuffer=qe.useDepthBuffer,exports.useAspect=de.useAspect,exports.useCamera=Ce.useCamera,exports.useDetectGPU=me.useDetectGPU,exports.useHelper=he.useHelper,exports.Bvh=Se.Bvh,exports.useBVH=Se.useBVH,exports.useContextBridge=Me.useContextBridge,exports.useAnimations=Pe.useAnimations,exports.useFBO=be.useFBO,exports.useIntersect=Te.useIntersect,exports.useBoxProjectedEnv=fe.useBoxProjectedEnv,exports.BBAnchor=ge.BBAnchor,exports.useTrailTexture=ve.useTrailTexture,exports.useCubeCamera=Be.useCubeCamera,exports.Example=Fe.Example,exports.SpriteAnimator=Ae.SpriteAnimator,exports.useSpriteAnimator=Ae.useSpriteAnimator,exports.CurveModifier=Le.CurveModifier,exports.MeshDistortMaterial=De.MeshDistortMaterial,exports.MeshWobbleMaterial=Re.MeshWobbleMaterial,exports.MeshReflectorMaterial=Ee.MeshReflectorMaterial,exports.MeshRefractionMaterial=ke.MeshRefractionMaterial,exports.MeshTransmissionMaterial=Ge.MeshTransmissionMaterial,exports.MeshDiscardMaterial=we.MeshDiscardMaterial,exports.PointMaterial=ye.PointMaterial,exports.PointMaterialImpl=ye.PointMaterialImpl,exports.shaderMaterial=ze.shaderMaterial,exports.SoftShadows=Oe.SoftShadows,exports.Box=Ie.Box,exports.Capsule=Ie.Capsule,exports.Circle=Ie.Circle,exports.Cone=Ie.Cone,exports.Cylinder=Ie.Cylinder,exports.Dodecahedron=Ie.Dodecahedron,exports.Extrude=Ie.Extrude,exports.Icosahedron=Ie.Icosahedron,exports.Lathe=Ie.Lathe,exports.Octahedron=Ie.Octahedron,exports.Plane=Ie.Plane,exports.Polyhedron=Ie.Polyhedron,exports.Ring=Ie.Ring,exports.Shape=Ie.Shape,exports.Sphere=Ie.Sphere,exports.Tetrahedron=Ie.Tetrahedron,exports.Torus=Ie.Torus,exports.TorusKnot=Ie.TorusKnot,exports.Tube=Ie.Tube,exports.RoundedBox=He.RoundedBox,exports.ScreenQuad=Ve.ScreenQuad,exports.Center=Ke.Center,exports.Resize=We.Resize,exports.Bounds=Qe.Bounds,exports.useBounds=Qe.useBounds,exports.CameraShake=Xe.CameraShake,exports.Float=Ne.Float,exports.Stage=Ue.Stage,exports.Backdrop=_e.Backdrop,exports.Shadow=Je.Shadow,exports.Caustics=Ye.Caustics,exports.ContactShadows=Ze.ContactShadows,exports.AccumulativeShadows=$e.AccumulativeShadows,exports.RandomizedLight=$e.RandomizedLight,exports.accumulativeContext=$e.accumulativeContext,exports.Reflector=er.Reflector,exports.SpotLight=rr.SpotLight,exports.SpotLightShadow=rr.SpotLightShadow,exports.Environment=sr.Environment,exports.EnvironmentCube=sr.EnvironmentCube,exports.EnvironmentMap=sr.EnvironmentMap,exports.EnvironmentPortal=sr.EnvironmentPortal,exports.Lightformer=or.Lightformer,exports.Sky=tr.Sky,exports.calcPosFromAngles=tr.calcPosFromAngles,exports.Stars=ir.Stars,exports.Cloud=cr.Cloud,exports.CloudInstance=cr.CloudInstance,exports.Clouds=cr.Clouds,exports.Sparkles=ar.Sparkles,exports.useEnvironment=ur.useEnvironment,exports.useMatcapTexture=nr.useMatcapTexture,exports.useNormalTexture=jr.useNormalTexture,exports.Wireframe=pr.Wireframe,exports.ShadowAlpha=lr.ShadowAlpha,exports.Point=xr.Point,exports.Points=xr.Points,exports.PointsBuffer=xr.PointsBuffer,exports.PositionPoint=xr.PositionPoint,exports.Instance=qr.Instance,exports.Instances=qr.Instances,exports.Merged=qr.Merged,exports.Segment=dr.Segment,exports.SegmentObject=dr.SegmentObject,exports.Segments=dr.Segments,exports.Detailed=Cr.Detailed,exports.Preload=mr.Preload,exports.BakeShadows=hr.BakeShadows,exports.meshBounds=Sr.meshBounds,exports.AdaptiveDpr=Mr.AdaptiveDpr,exports.AdaptiveEvents=Pr.AdaptiveEvents,exports.PerformanceMonitor=br.PerformanceMonitor,exports.usePerformanceMonitor=br.usePerformanceMonitor,exports.RenderTexture=Tr.RenderTexture,exports.RenderCubeTexture=fr.RenderCubeTexture,exports.Mask=gr.Mask,exports.useMask=gr.useMask,exports.Hud=vr.Hud,exports.Fisheye=Br.Fisheye,exports.MeshPortalMaterial=Fr.MeshPortalMaterial,exports.calculateScaleFactor=Ar.calculateScaleFactor;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Html.cjs.js"),r=require("./CycleRaycast.cjs.js"),s=require("./useCursor.cjs.js"),o=require("./Loader.cjs.js"),t=require("./ScrollControls.cjs.js"),i=require("./PresentationControls.cjs.js"),c=require("./KeyboardControls.cjs.js"),a=require("./Select.cjs.js"),u=require("./View.cjs.js"),n=require("./pivotControls/index.cjs.js"),j=require("./FaceControls.cjs.js"),p=require("./DragControls.cjs.js"),l=require("./FaceLandmarker.cjs.js"),x=require("./Facemesh.cjs.js"),q=require("../core/Billboard.cjs.js"),d=require("../core/ScreenSpace.cjs.js"),C=require("../core/ScreenSizer.cjs.js"),m=require("../core/QuadraticBezierLine.cjs.js"),h=require("../core/CubicBezierLine.cjs.js"),S=require("../core/CatmullRomLine.cjs.js"),M=require("../core/Line.cjs.js"),P=require("../core/PositionalAudio.cjs.js"),b=require("../core/Text.cjs.js"),T=require("../core/Text3D.cjs.js"),f=require("../core/Effects.cjs.js"),g=require("../core/GradientTexture.cjs.js"),v=require("../core/Image.cjs.js"),B=require("../core/Edges.cjs.js"),F=require("../core/Outlines.cjs.js"),A=require("../core/Trail.cjs.js"),L=require("../core/Sampler.cjs.js"),D=require("../core/ComputedAttribute.cjs.js"),R=require("../core/Clone.cjs.js"),E=require("../core/MarchingCubes.cjs.js"),k=require("../core/Decal.cjs.js"),G=require("../core/Svg.cjs.js"),w=require("../core/Gltf.cjs.js"),y=require("../core/AsciiRenderer.cjs.js"),z=require("../core/Splat.cjs.js"),O=require("../core/OrthographicCamera.cjs.js"),I=require("../core/PerspectiveCamera.cjs.js"),H=require("../core/CubeCamera.cjs.js"),V=require("../core/DeviceOrientationControls.cjs.js"),K=require("../core/FlyControls.cjs.js"),W=require("../core/MapControls.cjs.js"),Q=require("../core/OrbitControls.cjs.js"),X=require("../core/TrackballControls.cjs.js"),N=require("../core/ArcballControls.cjs.js"),U=require("../core/TransformControls.cjs.js"),_=require("../core/PointerLockControls.cjs.js"),J=require("../core/FirstPersonControls.cjs.js"),Y=require("../core/CameraControls.cjs.js"),Z=require("../core/MotionPathControls.cjs.js"),$=require("../core/GizmoHelper.cjs.js"),ee=require("../core/GizmoViewcube.cjs.js"),re=require("../core/GizmoViewport.cjs.js"),se=require("../core/Grid.cjs.js"),oe=require("../core/useCubeTexture.cjs.js"),te=require("../core/useFBX.cjs.js"),ie=require("../core/useGLTF.cjs.js"),ce=require("../core/useKTX2.cjs.js"),ae=require("../core/useProgress.cjs.js"),ue=require("../core/useTexture.cjs.js"),ne=require("../core/useVideoTexture.cjs.js"),je=require("../core/useFont.cjs.js"),pe=require("../core/useSpriteLoader.cjs.js"),le=require("../core/Stats.cjs.js"),xe=require("../core/StatsGl.cjs.js"),qe=require("../core/useDepthBuffer.cjs.js"),de=require("../core/useAspect.cjs.js"),Ce=require("../core/useCamera.cjs.js"),me=require("../core/useDetectGPU.cjs.js"),he=require("../core/useHelper.cjs.js"),Se=require("../core/useBVH.cjs.js"),Me=require("../core/useContextBridge.cjs.js"),Pe=require("../core/useAnimations.cjs.js"),be=require("../core/useFBO.cjs.js"),Te=require("../core/useIntersect.cjs.js"),fe=require("../core/useBoxProjectedEnv.cjs.js"),ge=require("../core/BBAnchor.cjs.js"),ve=require("../core/useTrailTexture.cjs.js"),Be=require("../core/useCubeCamera.cjs.js"),Fe=require("../core/Example.cjs.js"),Ae=require("../core/SpriteAnimator.cjs.js"),Le=require("../core/CurveModifier.cjs.js"),De=require("../core/MeshDistortMaterial.cjs.js"),Re=require("../core/MeshWobbleMaterial.cjs.js"),Ee=require("../core/MeshReflectorMaterial.cjs.js"),ke=require("../core/MeshRefractionMaterial.cjs.js"),Ge=require("../core/MeshTransmissionMaterial.cjs.js"),we=require("../core/MeshDiscardMaterial.cjs.js"),ye=require("../core/PointMaterial.cjs.js"),ze=require("../core/shaderMaterial.cjs.js"),Oe=require("../core/softShadows.cjs.js"),Ie=require("../core/shapes.cjs.js"),He=require("../core/RoundedBox.cjs.js"),Ve=require("../core/ScreenQuad.cjs.js"),Ke=require("../core/Center.cjs.js"),We=require("../core/Resize.cjs.js"),Qe=require("../core/Bounds.cjs.js"),Xe=require("../core/CameraShake.cjs.js"),Ne=require("../core/Float.cjs.js"),Ue=require("../core/Stage.cjs.js"),_e=require("../core/Backdrop.cjs.js"),Je=require("../core/Shadow.cjs.js"),Ye=require("../core/Caustics.cjs.js"),Ze=require("../core/ContactShadows.cjs.js"),$e=require("../core/AccumulativeShadows.cjs.js"),er=require("../core/Reflector.cjs.js"),rr=require("../core/SpotLight.cjs.js"),sr=require("../core/Environment.cjs.js"),or=require("../core/Lightformer.cjs.js"),tr=require("../core/Sky.cjs.js"),ir=require("../core/Stars.cjs.js"),cr=require("../core/Cloud.cjs.js"),ar=require("../core/Sparkles.cjs.js"),ur=require("../core/useEnvironment.cjs.js"),nr=require("../core/useMatcapTexture.cjs.js"),jr=require("../core/useNormalTexture.cjs.js"),pr=require("../core/Wireframe.cjs.js"),lr=require("../core/ShadowAlpha.cjs.js"),xr=require("../core/Points.cjs.js"),qr=require("../core/Instances.cjs.js"),dr=require("../core/Segments.cjs.js"),Cr=require("../core/Detailed.cjs.js"),mr=require("../core/Preload.cjs.js"),hr=require("../core/BakeShadows.cjs.js"),Sr=require("../core/meshBounds.cjs.js"),Mr=require("../core/AdaptiveDpr.cjs.js"),Pr=require("../core/AdaptiveEvents.cjs.js"),br=require("../core/PerformanceMonitor.cjs.js"),Tr=require("../core/RenderTexture.cjs.js"),fr=require("../core/RenderCubeTexture.cjs.js"),gr=require("../core/Mask.cjs.js"),vr=require("../core/Hud.cjs.js"),Br=require("../core/Fisheye.cjs.js"),Fr=require("../core/MeshPortalMaterial.cjs.js"),Ar=require("../core/calculateScaleFactor.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("react-dom/client"),require("three"),require("@react-three/fiber"),require("zustand"),require("maath"),require("@react-spring/three"),require("@use-gesture/react"),require("zustand/middleware"),require("three-stdlib"),require("zustand/shallow"),require("tunnel-rat"),require("./pivotControls/AxisArrow.cjs.js"),require("./pivotControls/context.cjs.js"),require("./pivotControls/AxisRotator.cjs.js"),require("./pivotControls/PlaneSlider.cjs.js"),require("./pivotControls/ScalingSphere.cjs.js"),require("suspend-react"),require("../helpers/constants.cjs.js"),require("meshline"),require("camera-controls"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("stats-gl"),require("detect-gpu"),require("three-mesh-bvh"),require("react-composer"),require("../helpers/deprecated.cjs.js"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("uuid"),require("../materials/WireframeMaterial.cjs.js"),exports.Html=e.Html,exports.CycleRaycast=r.CycleRaycast,exports.useCursor=s.useCursor,exports.Loader=o.Loader,exports.Scroll=t.Scroll,exports.ScrollControls=t.ScrollControls,exports.useScroll=t.useScroll,exports.PresentationControls=i.PresentationControls,exports.KeyboardControls=c.KeyboardControls,exports.useKeyboardControls=c.useKeyboardControls,exports.Select=a.Select,exports.useSelect=a.useSelect,exports.View=u.View,exports.PivotControls=n.PivotControls,exports.FaceControls=j.FaceControls,exports.useFaceControls=j.useFaceControls,exports.DragControls=p.DragControls,exports.FaceLandmarker=l.FaceLandmarker,exports.FaceLandmarkerDefaults=l.FaceLandmarkerDefaults,exports.useFaceLandmarker=l.useFaceLandmarker,exports.Facemesh=x.Facemesh,exports.FacemeshDatas=x.FacemeshDatas,exports.FacemeshEye=x.FacemeshEye,exports.FacemeshEyeDefaults=x.FacemeshEyeDefaults,exports.Billboard=q.Billboard,exports.ScreenSpace=d.ScreenSpace,exports.ScreenSizer=C.ScreenSizer,exports.QuadraticBezierLine=m.QuadraticBezierLine,exports.CubicBezierLine=h.CubicBezierLine,exports.CatmullRomLine=S.CatmullRomLine,exports.Line=M.Line,exports.PositionalAudio=P.PositionalAudio,exports.Text=b.Text,exports.Text3D=T.Text3D,exports.Effects=f.Effects,exports.isWebGL2Available=f.isWebGL2Available,exports.GradientTexture=g.GradientTexture,exports.GradientType=g.GradientType,exports.Image=v.Image,exports.Edges=B.Edges,exports.Outlines=F.Outlines,exports.Trail=A.Trail,exports.useTrail=A.useTrail,exports.Sampler=L.Sampler,exports.useSurfaceSampler=L.useSurfaceSampler,exports.ComputedAttribute=D.ComputedAttribute,exports.Clone=R.Clone,exports.MarchingCube=E.MarchingCube,exports.MarchingCubes=E.MarchingCubes,exports.MarchingPlane=E.MarchingPlane,exports.Decal=k.Decal,exports.Svg=G.Svg,exports.Gltf=w.Gltf,exports.AsciiRenderer=y.AsciiRenderer,exports.Splat=z.Splat,exports.OrthographicCamera=O.OrthographicCamera,exports.PerspectiveCamera=I.PerspectiveCamera,exports.CubeCamera=H.CubeCamera,exports.DeviceOrientationControls=V.DeviceOrientationControls,exports.FlyControls=K.FlyControls,exports.MapControls=W.MapControls,exports.OrbitControls=Q.OrbitControls,exports.TrackballControls=X.TrackballControls,exports.ArcballControls=N.ArcballControls,exports.TransformControls=U.TransformControls,exports.PointerLockControls=_.PointerLockControls,exports.FirstPersonControls=J.FirstPersonControls,exports.CameraControls=Y.CameraControls,exports.MotionPathControls=Z.MotionPathControls,exports.useMotion=Z.useMotion,exports.GizmoHelper=$.GizmoHelper,exports.useGizmoContext=$.useGizmoContext,exports.GizmoViewcube=ee.GizmoViewcube,exports.GizmoViewport=re.GizmoViewport,exports.Grid=se.Grid,exports.useCubeTexture=oe.useCubeTexture,exports.useFBX=te.useFBX,exports.useGLTF=ie.useGLTF,exports.useKTX2=ce.useKTX2,exports.useProgress=ae.useProgress,exports.IsObject=ue.IsObject,exports.useTexture=ue.useTexture,exports.useVideoTexture=ne.useVideoTexture,exports.useFont=je.useFont,exports.calculateAspectRatio=pe.calculateAspectRatio,exports.getFirstItem=pe.getFirstItem,exports.useSpriteLoader=pe.useSpriteLoader,exports.Stats=le.Stats,exports.StatsGl=xe.StatsGl,exports.useDepthBuffer=qe.useDepthBuffer,exports.useAspect=de.useAspect,exports.useCamera=Ce.useCamera,exports.useDetectGPU=me.useDetectGPU,exports.useHelper=he.useHelper,exports.Bvh=Se.Bvh,exports.useBVH=Se.useBVH,exports.useContextBridge=Me.useContextBridge,exports.useAnimations=Pe.useAnimations,exports.useFBO=be.useFBO,exports.useIntersect=Te.useIntersect,exports.useBoxProjectedEnv=fe.useBoxProjectedEnv,exports.BBAnchor=ge.BBAnchor,exports.useTrailTexture=ve.useTrailTexture,exports.useCubeCamera=Be.useCubeCamera,exports.Example=Fe.Example,exports.SpriteAnimator=Ae.SpriteAnimator,exports.useSpriteAnimator=Ae.useSpriteAnimator,exports.CurveModifier=Le.CurveModifier,exports.MeshDistortMaterial=De.MeshDistortMaterial,exports.MeshWobbleMaterial=Re.MeshWobbleMaterial,exports.MeshReflectorMaterial=Ee.MeshReflectorMaterial,exports.MeshRefractionMaterial=ke.MeshRefractionMaterial,exports.MeshTransmissionMaterial=Ge.MeshTransmissionMaterial,exports.MeshDiscardMaterial=we.MeshDiscardMaterial,exports.PointMaterial=ye.PointMaterial,exports.PointMaterialImpl=ye.PointMaterialImpl,exports.shaderMaterial=ze.shaderMaterial,exports.SoftShadows=Oe.SoftShadows,exports.Box=Ie.Box,exports.Capsule=Ie.Capsule,exports.Circle=Ie.Circle,exports.Cone=Ie.Cone,exports.Cylinder=Ie.Cylinder,exports.Dodecahedron=Ie.Dodecahedron,exports.Extrude=Ie.Extrude,exports.Icosahedron=Ie.Icosahedron,exports.Lathe=Ie.Lathe,exports.Octahedron=Ie.Octahedron,exports.Plane=Ie.Plane,exports.Polyhedron=Ie.Polyhedron,exports.Ring=Ie.Ring,exports.Shape=Ie.Shape,exports.Sphere=Ie.Sphere,exports.Tetrahedron=Ie.Tetrahedron,exports.Torus=Ie.Torus,exports.TorusKnot=Ie.TorusKnot,exports.Tube=Ie.Tube,exports.RoundedBox=He.RoundedBox,exports.ScreenQuad=Ve.ScreenQuad,exports.Center=Ke.Center,exports.Resize=We.Resize,exports.Bounds=Qe.Bounds,exports.useBounds=Qe.useBounds,exports.CameraShake=Xe.CameraShake,exports.Float=Ne.Float,exports.Stage=Ue.Stage,exports.Backdrop=_e.Backdrop,exports.Shadow=Je.Shadow,exports.Caustics=Ye.Caustics,exports.ContactShadows=Ze.ContactShadows,exports.AccumulativeShadows=$e.AccumulativeShadows,exports.RandomizedLight=$e.RandomizedLight,exports.accumulativeContext=$e.accumulativeContext,exports.Reflector=er.Reflector,exports.SpotLight=rr.SpotLight,exports.SpotLightShadow=rr.SpotLightShadow,exports.Environment=sr.Environment,exports.EnvironmentCube=sr.EnvironmentCube,exports.EnvironmentMap=sr.EnvironmentMap,exports.EnvironmentPortal=sr.EnvironmentPortal,exports.Lightformer=or.Lightformer,exports.Sky=tr.Sky,exports.calcPosFromAngles=tr.calcPosFromAngles,exports.Stars=ir.Stars,exports.Cloud=cr.Cloud,exports.CloudInstance=cr.CloudInstance,exports.Clouds=cr.Clouds,exports.Sparkles=ar.Sparkles,exports.useEnvironment=ur.useEnvironment,exports.useMatcapTexture=nr.useMatcapTexture,exports.useNormalTexture=jr.useNormalTexture,exports.Wireframe=pr.Wireframe,exports.ShadowAlpha=lr.ShadowAlpha,exports.Point=xr.Point,exports.Points=xr.Points,exports.PointsBuffer=xr.PointsBuffer,exports.PositionPoint=xr.PositionPoint,exports.Instance=qr.Instance,exports.Instances=qr.Instances,exports.Merged=qr.Merged,exports.Segment=dr.Segment,exports.SegmentObject=dr.SegmentObject,exports.Segments=dr.Segments,exports.Detailed=Cr.Detailed,exports.Preload=mr.Preload,exports.BakeShadows=hr.BakeShadows,exports.meshBounds=Sr.meshBounds,exports.AdaptiveDpr=Mr.AdaptiveDpr,exports.AdaptiveEvents=Pr.AdaptiveEvents,exports.PerformanceMonitor=br.PerformanceMonitor,exports.usePerformanceMonitor=br.usePerformanceMonitor,exports.RenderTexture=Tr.RenderTexture,exports.RenderCubeTexture=fr.RenderCubeTexture,exports.Mask=gr.Mask,exports.useMask=gr.useMask,exports.Hud=vr.Hud,exports.Fisheye=Br.Fisheye,exports.MeshPortalMaterial=Fr.MeshPortalMaterial,exports.calculateScaleFactor=Ar.calculateScaleFactor;

package/web/index.js

@@ -153,6 +153,7 @@ import './pivotControls/AxisArrow.js';
 import './pivotControls/context.js';
 import './pivotControls/AxisRotator.js';
 import './pivotControls/PlaneSlider.js';
+import './pivotControls/ScalingSphere.js';
 import 'suspend-react';
 import '../helpers/constants.js';
 import 'meshline';

package/web/pivotControls/ScalingSphere.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../Html.cjs.js"),o=require("./context.cjs.js"),a=require("../../core/calculateScaleFactor.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("react-dom/client");var c=i(e),l=i(t);const s=new l.Vector3,u=new l.Vector3,p=(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)},d=new l.Vector3(0,1,0),m=new l.Vector3,f=new l.Matrix4;exports.ScalingSphere=({direction:e,axis:t})=>{const{scaleLimits:i,annotations:u,annotationsClass:x,depthTest:y,scale:g,lineWidth:h,fixed:b,axisColors:P,hoveredColor:M,opacity:w,onDragStart:v,onDrag:j,onDragEnd:O,userData:k}=c.useContext(o.context),C=r.useThree((e=>e.size)),S=r.useThree((e=>e.controls)),E=c.useRef(null),R=c.useRef(null),q=c.useRef(null),F=c.useRef(1),D=c.useRef(1),L=c.useRef(null),[T,V]=c.useState(!1),z=b?1.2:1.2*g,G=c.useCallback((r=>{u&&(E.current.innerText=`${D.current.toFixed(2)}`,E.current.style.display="block"),r.stopPropagation();const n=(new l.Matrix4).extractRotation(R.current.matrixWorld),o=r.point.clone(),i=(new l.Vector3).setFromMatrixPosition(R.current.matrixWorld),c=e.clone().applyMatrix4(n).normalize(),p=R.current.matrixWorld.clone(),d=p.clone().invert(),m=b?1/a.calculateScaleFactor(R.current.getWorldPosition(s),g,r.camera,C):1;L.current={clickPoint:o,dir:c,mPLG:p,mPLGInv:d,offsetMultiplier:m},v({component:"Sphere",axis:t,origin:i,directions:[c]}),S&&(S.enabled=!1),r.target.setPointerCapture(r.pointerId)}),[u,S,e,v,t,b,g,C]),W=c.useCallback((e=>{if(e.stopPropagation(),T||V(!0),L.current){const{clickPoint:r,dir:n,mPLG:o,mPLGInv:a,offsetMultiplier:c}=L.current,[l,s]=(null==i?void 0:i[t])||[1e-5,void 0],d=p(r,n,e.ray.origin,e.ray.direction)*c,x=b?d:d/g;let y=Math.pow(2,.2*x);e.shiftKey&&(y=Math.round(10*y)/10),y=Math.max(y,l/F.current),void 0!==s&&(y=Math.min(y,s/F.current)),D.current=F.current*y,q.current.position.set(0,z+d,0),u&&(E.current.innerText=`${D.current.toFixed(2)}`),m.set(1,1,1),m.setComponent(t,y),f.makeScale(m.x,m.y,m.z).premultiply(o).multiply(a),j(f)}}),[u,z,j,T,i,t]),I=c.useCallback((e=>{u&&(E.current.style.display="none"),e.stopPropagation(),F.current=D.current,L.current=null,q.current.position.set(0,z,0),O(),S&&(S.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[u,S,O,z]),_=c.useCallback((e=>{e.stopPropagation(),V(!1)}),[]),{radius:U,matrixL:H}=c.useMemo((()=>{const t=b?h/g*1.8:g/22.5,r=(new l.Quaternion).setFromUnitVectors(d,e.clone().normalize());return{radius:t,matrixL:(new l.Matrix4).makeRotationFromQuaternion(r)}}),[e,g,h,b]),Q=T?M:P[t];return c.createElement("group",{ref:R},c.createElement("group",{matrix:H,matrixAutoUpdate:!1,onPointerDown:G,onPointerMove:W,onPointerUp:I,onPointerOut:_},u&&c.createElement(n.Html,{position:[0,z/2,0]},c.createElement("div",{style:{display:"none",background:"#151520",color:"white",padding:"6px 8px",borderRadius:7,whiteSpace:"nowrap"},className:x,ref:E})),c.createElement("mesh",{ref:q,position:[0,z,0],renderOrder:500,userData:k},c.createElement("sphereGeometry",{args:[U,12,12]}),c.createElement("meshBasicMaterial",{transparent:!0,depthTest:y,color:Q,opacity:w,polygonOffset:!0,polygonOffsetFactor:-10}))))},exports.calculateOffset=p;

package/web/pivotControls/ScalingSphere.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as THREE from 'three';
+export declare const calculateOffset: (clickPoint: THREE.Vector3, normal: THREE.Vector3, rayStart: THREE.Vector3, rayDir: THREE.Vector3) => number;
+export declare const ScalingSphere: React.FC<{
+    direction: THREE.Vector3;
+    axis: 0 | 1 | 2;
+}>;

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;