@react-three/drei 7.22.2 → 7.22.6

package/core/Bounds.d.ts

@@ -6,7 +6,7 @@ export declare type BoundsApi = {
         center: THREE.Vector3;
         distance: number;
     };
-    refresh(object?: THREE.Object3D): any;
+    refresh(object?: THREE.Object3D | THREE.Box3): any;
     clip(): any;
     fit(): any;
 };

package/core/GizmoViewcube.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("./GizmoHelper.cjs.js"),o=require("three");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("@react-three/fiber"),require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useCamera.cjs.js");var i=a(e),c=n(t);const l="#f0f0f0",s="#999",m="black",u="black",p=["Right","Left","Top","Bottom","Front","Back"],f=e=>new o.Vector3(...e).multiplyScalar(.38),h=[[1,1,1],[1,1,-1],[1,-1,1],[1,-1,-1],[-1,1,1],[-1,1,-1],[-1,-1,1],[-1,-1,-1]].map(f),y=[.25,.25,.25],d=[[1,1,0],[1,0,1],[1,0,-1],[1,-1,0],[0,1,1],[0,1,-1],[0,-1,1],[0,-1,-1],[-1,1,0],[-1,0,1],[-1,0,-1],[-1,-1,0]].map(f),g=d.map((e=>e.toArray().map((e=>0==e?.5:.25)))),b=({hover:e,index:t,font:r="20px Inter var, Arial, sans-serif",faces:a=p,color:n=l,hoverColor:i=s,textColor:f=m,strokeColor:h=u,opacity:y=1})=>{const d=c.useMemo((()=>{const e=document.createElement("canvas");e.width=128,e.height=128;const i=e.getContext("2d");return i.fillStyle=n,i.fillRect(0,0,e.width,e.height),i.strokeStyle=h,i.strokeRect(0,0,e.width,e.height),i.font=r,i.textAlign="center",i.fillStyle=f,i.fillText(a[t].toUpperCase(),64,76),new o.CanvasTexture(e)}),[t,r,n,f,h]);return c.createElement("meshLambertMaterial",{map:d,attachArray:"material",color:e?i:"white",transparent:!0,opacity:y})},C=e=>{const{tweenCamera:t,raycast:o}=r.useGizmoContext(),[a,n]=c.useState(null);return c.createElement("mesh",{raycast:o,onPointerOut:e=>{e.stopPropagation(),n(null)},onPointerMove:e=>{e.stopPropagation(),n(Math.floor(e.faceIndex/2))},onClick:e.onClick||(e=>{e.stopPropagation(),t(e.face.normal)})},[...Array(6)].map(((t,r)=>c.createElement(b,i.default({key:r,index:r,hover:a===r},e)))),c.createElement("boxGeometry",null))},x=({onClick:e,dimensions:t,position:o,hoverColor:a=s})=>{const{tweenCamera:n,raycast:i}=r.useGizmoContext(),[l,m]=c.useState(!1);return c.createElement("mesh",{scale:1.01,position:o,raycast:i,onPointerOver:e=>{e.stopPropagation(),m(!0)},onPointerOut:e=>{e.stopPropagation(),m(!1)},onClick:e||(e=>{e.stopPropagation(),n(o)})},c.createElement("meshBasicMaterial",{color:l?a:"white",transparent:!0,opacity:.6,visible:l}),c.createElement("boxGeometry",{args:t}))};exports.GizmoViewcube=e=>c.createElement("group",{scale:[60,60,60]},c.createElement(C,e),d.map(((t,r)=>c.createElement(x,i.default({key:r,position:t,dimensions:g[r]},e)))),h.map(((t,r)=>c.createElement(x,i.default({key:r,position:t,dimensions:y},e)))),c.createElement("ambientLight",{intensity:.5}),c.createElement("pointLight",{position:[10,10,10],intensity:.5}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber"),o=require("./GizmoHelper.cjs.js"),a=require("three");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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 o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useCamera.cjs.js");var s=n(e),c=i(t);const l="#f0f0f0",m="#999",p="black",u="black",f=["Right","Left","Top","Bottom","Front","Back"],h=e=>new a.Vector3(...e).multiplyScalar(.38),y=[[1,1,1],[1,1,-1],[1,-1,1],[1,-1,-1],[-1,1,1],[-1,1,-1],[-1,-1,1],[-1,-1,-1]].map(h),d=[.25,.25,.25],g=[[1,1,0],[1,0,1],[1,0,-1],[1,-1,0],[0,1,1],[0,1,-1],[0,-1,1],[0,-1,-1],[-1,1,0],[-1,0,1],[-1,0,-1],[-1,-1,0]].map(h),b=g.map((e=>e.toArray().map((e=>0==e?.5:.25)))),x=({hover:e,index:t,font:o="20px Inter var, Arial, sans-serif",faces:n=f,color:i=l,hoverColor:s=m,textColor:h=p,strokeColor:y=u,opacity:d=1})=>{const g=r.useThree((e=>e.gl)),b=c.useMemo((()=>{const e=document.createElement("canvas");e.width=128,e.height=128;const r=e.getContext("2d");return r.fillStyle=i,r.fillRect(0,0,e.width,e.height),r.strokeStyle=y,r.strokeRect(0,0,e.width,e.height),r.font=o,r.textAlign="center",r.fillStyle=h,r.fillText(n[t].toUpperCase(),64,76),new a.CanvasTexture(e)}),[t,o,i,h,y]);return c.createElement("meshLambertMaterial",{map:b,"map-anisotropy":g.capabilities.getMaxAnisotropy()||1,attachArray:"material",color:e?s:"white",transparent:!0,opacity:d})},C=e=>{const{tweenCamera:t,raycast:r}=o.useGizmoContext(),[a,n]=c.useState(null);return c.createElement("mesh",{raycast:r,onPointerOut:e=>{e.stopPropagation(),n(null)},onPointerMove:e=>{e.stopPropagation(),n(Math.floor(e.faceIndex/2))},onClick:e.onClick||(e=>{e.stopPropagation(),t(e.face.normal)})},[...Array(6)].map(((t,r)=>c.createElement(x,s.default({key:r,index:r,hover:a===r},e)))),c.createElement("boxGeometry",null))},v=({onClick:e,dimensions:t,position:r,hoverColor:a=m})=>{const{tweenCamera:n,raycast:i}=o.useGizmoContext(),[s,l]=c.useState(!1);return c.createElement("mesh",{scale:1.01,position:r,raycast:i,onPointerOver:e=>{e.stopPropagation(),l(!0)},onPointerOut:e=>{e.stopPropagation(),l(!1)},onClick:e||(e=>{e.stopPropagation(),n(r)})},c.createElement("meshBasicMaterial",{color:s?a:"white",transparent:!0,opacity:.6,visible:s}),c.createElement("boxGeometry",{args:t}))};exports.GizmoViewcube=e=>c.createElement("group",{scale:[60,60,60]},c.createElement(C,e),g.map(((t,r)=>c.createElement(v,s.default({key:r,position:t,dimensions:b[r]},e)))),y.map(((t,r)=>c.createElement(v,s.default({key:r,position:t,dimensions:d},e)))),c.createElement("ambientLight",{intensity:.5}),c.createElement("pointLight",{position:[10,10,10],intensity:.5}));

package/core/GizmoViewcube.js

@@ -1,5 +1,6 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
+import { useThree } from '@react-three/fiber';
 import { useGizmoContext } from './GizmoHelper.js';
 import { Vector3, CanvasTexture } from 'three';
 
@@ -29,6 +30,7 @@ const FaceMaterial = ({
   strokeColor = colors.stroke,
   opacity = 1
 }) => {
+  const gl = useThree(state => state.gl);
   const texture = React.useMemo(() => {
     const canvas = document.createElement('canvas');
     canvas.width = 128;
@@ -46,6 +48,7 @@ const FaceMaterial = ({
   }, [index, font, color, textColor, strokeColor]);
   return /*#__PURE__*/React.createElement("meshLambertMaterial", {
     map: texture,
+    "map-anisotropy": gl.capabilities.getMaxAnisotropy() || 1,
     attachArray: "material",
     color: hover ? hoverColor : 'white',
     transparent: true,

package/core/GizmoViewport.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("./GizmoHelper.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("@react-three/fiber"),require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useCamera.cjs.js");var l=o(e),i=n(t);function c({color:e,rotation:t}){return i.createElement("group",{rotation:t},i.createElement("mesh",{position:[.4,0,0]},i.createElement("boxGeometry",{args:[.8,.05,.05]}),i.createElement("meshBasicMaterial",{color:e,toneMapped:!1})))}function s({onClick:e,font:t,disabled:a,arcStyle:o,label:n,labelColor:c,axisHeadScale:s=1,...u}){const f=i.useMemo((()=>{const e=document.createElement("canvas");e.width=64,e.height=64;const a=e.getContext("2d");return a.beginPath(),a.arc(32,32,16,0,2*Math.PI),a.closePath(),a.fillStyle=o,a.fill(),n&&(a.font=t,a.textAlign="center",a.fillStyle=c,a.fillText(n,32,41)),new r.CanvasTexture(e)}),[o,n,c,t]),[d,m]=i.useState(!1),p=(n?1:.75)*(d?1.2:1)*s;return i.createElement("sprite",l.default({scale:p,onPointerOver:a?void 0:e=>{e.stopPropagation(),m(!0)},onPointerOut:a?void 0:e||(e=>{e.stopPropagation(),m(!1)})},u),i.createElement("spriteMaterial",{map:f,alphaTest:.3,opacity:n?1:.75,toneMapped:!1}))}exports.GizmoViewport=({hideNegativeAxes:e,hideAxisHeads:t,disabled:r,font:o="18px Inter var, Arial, sans-serif",axisColors:n=["#ff3653","#0adb50","#2c8fdf"],axisHeadScale:u=1,labels:f=["X","Y","Z"],labelColor:d="#000",onClick:m,...p})=>{const[b,E,h]=n,{tweenCamera:g,raycast:y}=a.useGizmoContext(),x={font:o,disabled:r,labelColor:d,raycast:y,onClick:m,axisHeadScale:u,onPointerDown:r?void 0:e=>{g(e.object.position),e.stopPropagation()}};return i.createElement("group",l.default({scale:40},p),i.createElement(c,{color:b,rotation:[0,0,0]}),i.createElement(c,{color:E,rotation:[0,0,Math.PI/2]}),i.createElement(c,{color:h,rotation:[0,-Math.PI/2,0]}),!t&&i.createElement(i.Fragment,null,i.createElement(s,l.default({arcStyle:b,position:[1,0,0],label:f[0]},x)),i.createElement(s,l.default({arcStyle:E,position:[0,1,0],label:f[1]},x)),i.createElement(s,l.default({arcStyle:h,position:[0,0,1],label:f[2]},x)),!e&&i.createElement(i.Fragment,null,i.createElement(s,l.default({arcStyle:b,position:[-1,0,0]},x)),i.createElement(s,l.default({arcStyle:E,position:[0,-1,0]},x)),i.createElement(s,l.default({arcStyle:h,position:[0,0,-1]},x)))),i.createElement("ambientLight",{intensity:.5}),i.createElement("pointLight",{position:[10,10,10],intensity:.5}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),a=require("@react-three/fiber"),r=require("three"),o=require("./GizmoHelper.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useCamera.cjs.js");var i=l(e),c=n(t);function s({scale:e=[.8,.05,.05],color:t,rotation:a}){return c.createElement("group",{rotation:a},c.createElement("mesh",{position:[.4,0,0]},c.createElement("boxGeometry",{args:e}),c.createElement("meshBasicMaterial",{color:t,toneMapped:!1})))}function u({onClick:e,font:t,disabled:o,arcStyle:l,label:n,labelColor:s,axisHeadScale:u=1,...p}){const f=a.useThree((e=>e.gl)),m=c.useMemo((()=>{const e=document.createElement("canvas");e.width=64,e.height=64;const a=e.getContext("2d");return a.beginPath(),a.arc(32,32,16,0,2*Math.PI),a.closePath(),a.fillStyle=l,a.fill(),n&&(a.font=t,a.textAlign="center",a.fillStyle=s,a.fillText(n,32,41)),new r.CanvasTexture(e)}),[l,n,s,t]),[d,b]=c.useState(!1),g=(n?1:.75)*(d?1.2:1)*u;return c.createElement("sprite",i.default({scale:g,onPointerOver:o?void 0:e=>{e.stopPropagation(),b(!0)},onPointerOut:o?void 0:e||(e=>{e.stopPropagation(),b(!1)})},p),c.createElement("spriteMaterial",{map:m,"map-anisotropy":f.capabilities.getMaxAnisotropy()||1,alphaTest:.3,opacity:n?1:.75,toneMapped:!1}))}exports.GizmoViewport=({hideNegativeAxes:e,hideAxisHeads:t,disabled:a,font:r="18px Inter var, Arial, sans-serif",axisColors:l=["#ff3653","#0adb50","#2c8fdf"],axisHeadScale:n=1,axisScale:p,labels:f=["X","Y","Z"],labelColor:m="#000",onClick:d,...b})=>{const[g,h,y]=l,{tweenCamera:E,raycast:x}=o.useGizmoContext(),j={font:r,disabled:a,labelColor:m,raycast:x,onClick:d,axisHeadScale:n,onPointerDown:a?void 0:e=>{E(e.object.position),e.stopPropagation()}};return c.createElement("group",i.default({scale:40},b),c.createElement(s,{color:g,rotation:[0,0,0],scale:p}),c.createElement(s,{color:h,rotation:[0,0,Math.PI/2],scale:p}),c.createElement(s,{color:y,rotation:[0,-Math.PI/2,0],scale:p}),!t&&c.createElement(c.Fragment,null,c.createElement(u,i.default({arcStyle:g,position:[1,0,0],label:f[0]},j)),c.createElement(u,i.default({arcStyle:h,position:[0,1,0],label:f[1]},j)),c.createElement(u,i.default({arcStyle:y,position:[0,0,1],label:f[2]},j)),!e&&c.createElement(c.Fragment,null,c.createElement(u,i.default({arcStyle:g,position:[-1,0,0]},j)),c.createElement(u,i.default({arcStyle:h,position:[0,-1,0]},j)),c.createElement(u,i.default({arcStyle:y,position:[0,0,-1]},j)))),c.createElement("ambientLight",{intensity:.5}),c.createElement("pointLight",{position:[10,10,10],intensity:.5}))};

package/core/GizmoViewport.d.ts

@@ -2,6 +2,7 @@
 import { Event } from 'three';
 declare type GizmoViewportProps = JSX.IntrinsicElements['group'] & {
     axisColors?: [string, string, string];
+    axisScale?: [number, number, number];
     labels?: [string, string, string];
     axisHeadScale?: number;
     labelColor?: string;
@@ -11,5 +12,5 @@ declare type GizmoViewportProps = JSX.IntrinsicElements['group'] & {
     font?: string;
     onClick?: (e: Event) => null;
 };
-export declare const GizmoViewport: ({ hideNegativeAxes, hideAxisHeads, disabled, font, axisColors, axisHeadScale, labels, labelColor, onClick, ...props }: GizmoViewportProps) => JSX.Element;
+export declare const GizmoViewport: ({ hideNegativeAxes, hideAxisHeads, disabled, font, axisColors, axisHeadScale, axisScale, labels, labelColor, onClick, ...props }: GizmoViewportProps) => JSX.Element;
 export {};

package/core/GizmoViewport.js

@@ -1,9 +1,11 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
+import { useThree } from '@react-three/fiber';
 import { CanvasTexture } from 'three';
 import { useGizmoContext } from './GizmoHelper.js';
 
 function Axis({
+  scale = [0.8, 0.05, 0.05],
   color,
   rotation
 }) {
@@ -12,7 +14,7 @@ function Axis({
   }, /*#__PURE__*/React.createElement("mesh", {
     position: [0.4, 0, 0]
   }, /*#__PURE__*/React.createElement("boxGeometry", {
-    args: [0.8, 0.05, 0.05]
+    args: scale
   }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
     color: color,
     toneMapped: false
@@ -29,6 +31,7 @@ function AxisHead({
   axisHeadScale = 1,
   ...props
 }) {
+  const gl = useThree(state => state.gl);
   const texture = React.useMemo(() => {
     const canvas = document.createElement('canvas');
     canvas.width = 64;
@@ -68,6 +71,7 @@ function AxisHead({
     onPointerOut: !disabled ? onClick || handlePointerOut : undefined
   }, props), /*#__PURE__*/React.createElement("spriteMaterial", {
     map: texture,
+    "map-anisotropy": gl.capabilities.getMaxAnisotropy() || 1,
     alphaTest: 0.3,
     opacity: label ? 1 : 0.75,
     toneMapped: false
@@ -81,6 +85,7 @@ const GizmoViewport = ({
   font = '18px Inter var, Arial, sans-serif',
   axisColors = ['#ff3653', '#0adb50', '#2c8fdf'],
   axisHeadScale = 1,
+  axisScale,
   labels = ['X', 'Y', 'Z'],
   labelColor = '#000',
   onClick,
@@ -107,13 +112,16 @@ const GizmoViewport = ({
     scale: 40
   }, props), /*#__PURE__*/React.createElement(Axis, {
     color: colorX,
-    rotation: [0, 0, 0]
+    rotation: [0, 0, 0],
+    scale: axisScale
   }), /*#__PURE__*/React.createElement(Axis, {
     color: colorY,
-    rotation: [0, 0, Math.PI / 2]
+    rotation: [0, 0, Math.PI / 2],
+    scale: axisScale
   }), /*#__PURE__*/React.createElement(Axis, {
     color: colorZ,
-    rotation: [0, -Math.PI / 2, 0]
+    rotation: [0, -Math.PI / 2, 0],
+    scale: axisScale
   }), !hideAxisHeads && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisHead, _extends({
     arcStyle: colorX,
     position: [1, 0, 0],