@react-three/drei 9.103.0 → 9.103.1

package/package.json

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

package/web/ScrollControls.d.ts

@@ -29,14 +29,16 @@ export type ScrollControlsState = {
 };
 export declare function useScroll(): ScrollControlsState;
 export declare function ScrollControls({ eps, enabled, infinite, horizontal, pages, distance, damping, maxSpeed, style, children, }: ScrollControlsProps): React.JSX.Element;
-type ScrollProps = {
+interface ScrollPropsWithFalseHtml {
     children?: React.ReactNode;
-} & ({
     html?: false;
     style?: never;
-} | {
+}
+interface ScrollPropsWithTrueHtml {
+    children?: React.ReactNode;
     html: true;
     style?: React.CSSProperties;
-});
+}
+type ScrollProps = ScrollPropsWithFalseHtml | ScrollPropsWithTrueHtml;
 export declare const Scroll: ForwardRefComponent<ScrollProps, THREE.Group & HTMLDivElement>;
 export {};

package/web/View.d.ts

@@ -30,7 +30,7 @@ export type ViewProps = {
     track?: React.MutableRefObject<HTMLElement>;
 };
 export type ViewportProps = {
-    Port: () => React.ReactNode;
+    Port: () => JSX.Element;
 } & React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<HTMLElement | THREE.Group>>;
 export declare const View: ViewportProps;
 export {};

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

package/web/pivotControls/AxisArrow.js

@@ -167,6 +167,7 @@ const AxisArrow = ({
     depthTest: depthTest,
     points: [0, 0, 0, 0, cylinderLength, 0],
     lineWidth: lineWidth,
+    side: THREE.DoubleSide,
     color: color_,
     opacity: opacity,
     polygonOffset: true,

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

package/web/pivotControls/AxisRotator.js

@@ -208,6 +208,7 @@ const AxisRotator = ({
     depthTest: depthTest,
     points: arc,
     lineWidth: lineWidth,
+    side: THREE.DoubleSide,
     color: isHovered ? hoveredColor : axisColors[axis],
     opacity: opacity,
     polygonOffset: true,