@react-three/drei 7.22.5 → 7.22.9

package/core/Bounds.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");function o(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)}var a=o(e),n=o(t);const c=e=>e&&e.isOrthographicCamera,i=a.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:o,clip:s,margin:m=1.2,eps:u=.01}){const f=a.useRef(null),x=r.useThree((e=>e.camera)),p=r.useThree((e=>e.controls)),l=r.useThree((e=>e.invalidate));function y(e,t){return Math.abs(e.x-t.x)<u&&Math.abs(e.y-t.y)<u&&Math.abs(e.z-t.z)<u}function z(e,t,r,o){e.x=n.MathUtils.damp(e.x,t.x,r,o),e.y=n.MathUtils.damp(e.y,t.y,r,o),e.z=n.MathUtils.damp(e.z,t.z,r,o)}const[h]=a.useState((()=>({animating:!1,focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[d]=a.useState((()=>({focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),M=a.useMemo((()=>{const e=new n.Box3;function r(){const t=e.getSize(new n.Vector3),r=e.getCenter(new n.Vector3),o=Math.max(t.x,t.y,t.z),a=c(x)?4*o:o/(2*Math.atan(Math.PI*x.fov/360)),i=c(x)?4*o:a/x.aspect;return{size:t,center:r,distance:m*Math.max(a,i)}}return{getSize:r,refresh(t){var r;if((r=t)&&r.isObject3D?e.setFromObject(t):(e=>e&&e.isBox3)(t)?e.copy(t):e.setFromObject(f.current),e.isEmpty()){const t=x.position.length()||10;e.setFromCenterAndSize(new n.Vector3,new n.Vector3(t,t,t))}return this},clip(){const{distance:e}=r();return p&&(p.maxDistance=10*e),x.near=e/100,x.far=100*e,x.updateProjectionMatrix(),p&&p.update(),this},fit(){h.camera.copy(x.position),p&&h.focus.copy(p.target);const{center:o,distance:a}=r(),i=o.clone().sub(x.position).normalize().multiplyScalar(a);if(d.camera.copy(o).sub(i),d.focus.copy(o),c(x)){h.zoom=x.zoom;let r=0,a=0;const c=[new n.Vector3(e.min.x,e.min.y,e.min.z),new n.Vector3(e.min.x,e.max.y,e.min.z),new n.Vector3(e.min.x,e.min.y,e.max.z),new n.Vector3(e.min.x,e.max.y,e.max.z),new n.Vector3(e.max.x,e.max.y,e.max.z),new n.Vector3(e.max.x,e.max.y,e.min.z),new n.Vector3(e.max.x,e.min.y,e.max.z),new n.Vector3(e.max.x,e.min.y,e.min.z)];o.applyMatrix4(x.matrixWorldInverse);for(const e of c)e.applyMatrix4(x.matrixWorldInverse),r=Math.max(r,Math.abs(e.y-o.y)),a=Math.max(a,Math.abs(e.x-o.x));r*=2,a*=2;const i=(x.top-x.bottom)/r,s=(x.right-x.left)/a;d.zoom=Math.min(i,s)/m,t||(x.zoom=d.zoom,x.updateProjectionMatrix())}return t?h.animating=!0:(x.position.copy(d.camera),x.lookAt(d.focus),p&&(p.target.copy(d.focus),p.update()),l()),this}}}),[x,p,m,t,l]);return a.useLayoutEffect((()=>{if(M.refresh(),o&&M.fit(),s&&M.clip(),p){const e=e=>h.animating=!1;return p.addEventListener("start",e),()=>p.removeEventListener("start",e)}}),[M,o,p]),r.useFrame(((e,r)=>{if(h.animating){if(z(h.focus,d.focus,t,r),z(h.camera,d.camera,t,r),h.zoom=n.MathUtils.damp(h.zoom,d.zoom,t,r),x.position.copy(h.camera),c(x)&&(x.zoom=h.zoom,x.updateProjectionMatrix()),p?(p.target.copy(h.focus),p.update()):x.lookAt(h.focus),l(),c(x)&&!(Math.abs(h.zoom-d.zoom)<u))return;if(!c(x)&&!y(h.camera,d.camera))return;if(p&&!y(h.focus,d.focus))return;h.animating=!1}})),a.createElement("group",{ref:f},a.createElement(i.Provider,{value:M},e))},exports.useBounds=function(){return a.useContext(i)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");function o(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)}var a=o(e),n=o(t);const i=e=>e&&e.isOrthographicCamera,c=a.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:o,clip:s,margin:m=1.2,eps:u=.01,onFit:f}){const x=a.useRef(null),p=r.useThree((e=>e.camera)),l=r.useThree((e=>e.controls)),z=r.useThree((e=>e.invalidate));function h(e,t){return Math.abs(e.x-t.x)<u&&Math.abs(e.y-t.y)<u&&Math.abs(e.z-t.z)<u}function y(e,t,r,o){e.x=n.MathUtils.damp(e.x,t.x,r,o),e.y=n.MathUtils.damp(e.y,t.y,r,o),e.z=n.MathUtils.damp(e.z,t.z,r,o)}const[d]=a.useState((()=>({animating:!1,focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[M]=a.useState((()=>({focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[b]=a.useState((()=>new n.Box3)),g=a.useMemo((()=>{function e(){const e=b.getSize(new n.Vector3),t=b.getCenter(new n.Vector3),r=Math.max(e.x,e.y,e.z),o=i(p)?4*r:r/(2*Math.atan(Math.PI*p.fov/360)),a=i(p)?4*r:o/p.aspect,c=m*Math.max(o,a);return{box:b,size:e,center:t,distance:c}}return{getSize:e,refresh(e){var t;if((t=e)&&t.isObject3D?b.setFromObject(e):(e=>e&&e.isBox3)(e)?b.copy(e):b.setFromObject(x.current),b.isEmpty()){const e=p.position.length()||10;b.setFromCenterAndSize(new n.Vector3,new n.Vector3(e,e,e))}return this},clip(){const{distance:t}=e();return l&&(l.maxDistance=10*t),p.near=t/100,p.far=100*t,p.updateProjectionMatrix(),l&&l.update(),this},fit(){d.camera.copy(p.position),l&&d.focus.copy(l.target);const{center:r,distance:o}=e(),a=r.clone().sub(p.position).normalize().multiplyScalar(o);if(M.camera.copy(r).sub(a),M.focus.copy(r),i(p)){d.zoom=p.zoom;let e=0,o=0;const a=[new n.Vector3(b.min.x,b.min.y,b.min.z),new n.Vector3(b.min.x,b.max.y,b.min.z),new n.Vector3(b.min.x,b.min.y,b.max.z),new n.Vector3(b.min.x,b.max.y,b.max.z),new n.Vector3(b.max.x,b.max.y,b.max.z),new n.Vector3(b.max.x,b.max.y,b.min.z),new n.Vector3(b.max.x,b.min.y,b.max.z),new n.Vector3(b.max.x,b.min.y,b.min.z)];r.applyMatrix4(p.matrixWorldInverse);for(const t of a)t.applyMatrix4(p.matrixWorldInverse),e=Math.max(e,Math.abs(t.y-r.y)),o=Math.max(o,Math.abs(t.x-r.x));e*=2,o*=2;const i=(p.top-p.bottom)/e,c=(p.right-p.left)/o;M.zoom=Math.min(i,c)/m,t||(p.zoom=M.zoom,p.updateProjectionMatrix())}return t?d.animating=!0:(p.position.copy(M.camera),p.lookAt(M.focus),l&&(l.target.copy(M.focus),l.update()),z()),f&&f(this.getSize()),this}}}),[b,p,l,m,t,z,f]);return a.useLayoutEffect((()=>{if(g.refresh(),o&&g.fit(),s&&g.clip(),l){const e=e=>d.animating=!1;return l.addEventListener("start",e),()=>l.removeEventListener("start",e)}}),[g,o,l]),r.useFrame(((e,r)=>{if(d.animating){if(y(d.focus,M.focus,t,r),y(d.camera,M.camera,t,r),d.zoom=n.MathUtils.damp(d.zoom,M.zoom,t,r),p.position.copy(d.camera),i(p)&&(p.zoom=d.zoom,p.updateProjectionMatrix()),l?(l.target.copy(d.focus),l.update()):p.lookAt(d.focus),z(),i(p)&&!(Math.abs(d.zoom-M.zoom)<u))return;if(!i(p)&&!h(d.camera,M.camera))return;if(l&&!h(d.focus,M.focus))return;d.animating=!1}})),a.createElement("group",{ref:x},a.createElement(c.Provider,{value:g},e))},exports.useBounds=function(){return a.useContext(c)};

package/core/Bounds.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import * as THREE from 'three';
+export declare type SizeProps = {
+    box: THREE.Box3;
+    size: THREE.Vector3;
+    center: THREE.Vector3;
+    distance: number;
+};
 export declare type BoundsApi = {
-    getSize: () => {
-        size: THREE.Vector3;
-        center: THREE.Vector3;
-        distance: number;
-    };
+    getSize: () => SizeProps;
     refresh(object?: THREE.Object3D | THREE.Box3): any;
     clip(): any;
     fit(): any;
@@ -16,6 +18,7 @@ export declare type BoundsProps = JSX.IntrinsicElements['group'] & {
     clip?: boolean;
     margin?: number;
     eps?: number;
+    onFit?: (data: SizeProps) => void;
 };
-export declare function Bounds({ children, damping, fit, clip, margin, eps }: BoundsProps): JSX.Element;
+export declare function Bounds({ children, damping, fit, clip, margin, eps, onFit }: BoundsProps): JSX.Element;
 export declare function useBounds(): BoundsApi;

package/core/Bounds.js

@@ -15,7 +15,8 @@ function Bounds({
   fit,
   clip,
   margin = 1.2,
-  eps = 0.01
+  eps = 0.01,
+  onFit
 }) {
   const ref = React.useRef(null);
   const camera = useThree(state => state.camera); // @ts-expect-error new in @react-three/fiber@7.0.5
@@ -44,9 +45,8 @@ function Bounds({
     camera: new THREE.Vector3(),
     zoom: 1
   }));
+  const [box] = React.useState(() => new THREE.Box3());
   const api = React.useMemo(() => {
-    const box = new THREE.Box3();
-
     function getSize() {
       const size = box.getSize(new THREE.Vector3());
       const center = box.getCenter(new THREE.Vector3());
@@ -55,6 +55,7 @@ function Bounds({
       const fitWidthDistance = isOrthographic(camera) ? maxSize * 4 : fitHeightDistance / camera.aspect;
       const distance = margin * Math.max(fitHeightDistance, fitWidthDistance);
       return {
+        box,
         size,
         center,
         distance
@@ -138,11 +139,12 @@ function Bounds({
           invalidate();
         }
 
+        if (onFit) onFit(this.getSize());
         return this;
       }
 
     };
-  }, [camera, controls, margin, damping, invalidate]);
+  }, [box, camera, controls, margin, damping, invalidate, onFit]);
   React.useLayoutEffect(() => {
     api.refresh();
     if (fit) api.fit();

package/core/Cloud.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./Billboard.cjs.js"),a=require("./useTexture.cjs.js"),n=require("../assets/cloud.base64.cjs.js");function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("three");var o=s(e);exports.Cloud=function({opacity:e=.5,speed:s=.4,width:i=10,length:c=1.5,segments:u=20,dir:l=1,...d}){const m=o.useRef(),h=a.useTexture(n),p=o.useMemo((()=>[...new Array(u)].map(((e,r)=>({x:i/2-Math.random()*i,y:i/2-Math.random()*i,scale:.4+Math.sin((r+1)/u*Math.PI)*(10*(.2+Math.random())),density:Math.max(.2,Math.random()),rotation:Math.max(.002,.005*Math.random())*s})))),[i,u,s]);return r.useFrame((e=>{var r;return null==(r=m.current)?void 0:r.children.forEach(((r,t)=>{r.rotation.z+=p[t].rotation*l,r.scale.setScalar(p[t].scale+(1+Math.sin(e.clock.getElapsedTime()/10))/2*t/10)}))})),o.createElement("group",d,o.createElement("group",{position:[0,0,u/2*c],ref:m},p.map((({x:r,y:a,scale:n,density:s},i)=>o.createElement(t.Billboard,{key:i,scale:[n,n,n],position:[r,a,-i*c],lockZ:!0},o.createElement("meshStandardMaterial",{map:h,transparent:!0,opacity:n/6*s*e,depthTest:!1}))))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./Billboard.cjs.js"),a=require("./shapes.cjs.js"),n=require("./useTexture.cjs.js"),s=require("../assets/cloud.base64.cjs.js");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 a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("three");var c=i(e);exports.Cloud=function({opacity:e=.5,speed:i=.4,width:o=10,length:u=1.5,segments:l=20,dir:d=1,...h}){const m=c.useRef(),p=n.useTexture(s),f=c.useMemo((()=>[...new Array(l)].map(((e,r)=>({x:o/2-Math.random()*o,y:o/2-Math.random()*o,scale:.4+Math.sin((r+1)/l*Math.PI)*(10*(.2+Math.random())),density:Math.max(.2,Math.random()),rotation:Math.max(.002,.005*Math.random())*i})))),[o,l,i]);return r.useFrame((e=>{var r;return null==(r=m.current)?void 0:r.children.forEach(((r,t)=>{r.children[0].rotation.z+=f[t].rotation*d,r.children[0].scale.setScalar(f[t].scale+(1+Math.sin(e.clock.getElapsedTime()/10))/2*t/10)}))})),c.createElement("group",h,c.createElement("group",{position:[0,0,l/2*u],ref:m},f.map((({x:r,y:n,scale:s,density:i},o)=>c.createElement(t.Billboard,{key:o,position:[r,n,-o*u]},c.createElement(a.Plane,{scale:s,rotation:[0,0,0]},c.createElement("meshStandardMaterial",{map:p,transparent:!0,opacity:s/6*i*e,depthTest:!1})))))))};

package/core/Cloud.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useFrame } from '@react-three/fiber';
 import { Billboard } from './Billboard.js';
+import { Plane } from './shapes.js';
 import { useTexture } from './useTexture.js';
 import CloudImage from '../assets/cloud.base64.js';
 
@@ -26,8 +27,8 @@ function Cloud({
     var _group$current;
 
     return (_group$current = group.current) == null ? void 0 : _group$current.children.forEach((cloud, index) => {
-      cloud.rotation.z += clouds[index].rotation * dir;
-      cloud.scale.setScalar(clouds[index].scale + (1 + Math.sin(state.clock.getElapsedTime() / 10)) / 2 * index / 10);
+      cloud.children[0].rotation.z += clouds[index].rotation * dir;
+      cloud.children[0].scale.setScalar(clouds[index].scale + (1 + Math.sin(state.clock.getElapsedTime() / 10)) / 2 * index / 10);
     });
   });
   return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement("group", {
@@ -40,15 +41,16 @@ function Cloud({
     density
   }, index) => /*#__PURE__*/React.createElement(Billboard, {
     key: index,
-    scale: [scale, scale, scale],
-    position: [x, y, -index * length],
-    lockZ: true
+    position: [x, y, -index * length]
+  }, /*#__PURE__*/React.createElement(Plane, {
+    scale: scale,
+    rotation: [0, 0, 0]
   }, /*#__PURE__*/React.createElement("meshStandardMaterial", {
     map: texture,
     transparent: true,
     opacity: scale / 6 * density * opacity,
     depthTest: false
-  })))));
+  }))))));
 }
 
 export { Cloud };

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

package/core/Image.d.ts

@@ -49,5 +49,5 @@ export declare const Image: React.ForwardRefExoticComponent<Pick<Omit<import("@r
     zoom?: number | undefined;
     grayscale?: number | undefined;
     url: string;
-}, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "zoom" | "material" | "url" | "segments" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "grayscale"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+}, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "zoom" | "material" | "url" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "segments" | "grayscale"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
 export {};

package/core/Line.d.ts

@@ -6,4 +6,4 @@ export declare type LineProps = {
     points: Array<Vector3 | [number, number, number]>;
     vertexColors?: Array<Color | [number, number, number]>;
 } & LineMaterialParameters & Omit<ReactThreeFiber.Object3DNode<Line2, typeof Line2>, 'args'> & Omit<ReactThreeFiber.Object3DNode<LineMaterial, [LineMaterialParameters]>, 'color' | 'vertexColors' | 'resolution' | 'args'>;
-export declare const Line: React.ForwardRefExoticComponent<Pick<LineProps, "attach" | "attachArray" | "attachObject" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "dashed" | "points" | "material" | "isMaterial" | "needsUpdate" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "isLine2" | "computeLineDistances" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "lineWidth" | "dashScale" | "dashOffset" | "dashSize" | "resolution" | "derivatives" | "defaultAttributeValues" | "index0AttributeName" | "uniformsNeedUpdate" | "isShaderMaterial" | "gapSize" | keyof import("three").ShaderMaterialParameters> & React.RefAttributes<Line2>>;
+export declare const Line: React.ForwardRefExoticComponent<Pick<LineProps, "attach" | "attachArray" | "attachObject" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "dashed" | "points" | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "isMaterial" | "needsUpdate" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "isLine2" | "computeLineDistances" | "lineWidth" | "dashScale" | "dashOffset" | "dashSize" | "resolution" | "derivatives" | "defaultAttributeValues" | "index0AttributeName" | "uniformsNeedUpdate" | "isShaderMaterial" | "gapSize" | keyof import("three").ShaderMaterialParameters> & React.RefAttributes<Line2>>;

package/core/Shadow.d.ts

@@ -23,4 +23,4 @@ export declare const Shadow: React.ForwardRefExoticComponent<Pick<Omit<import("@
     fog?: boolean | undefined;
     color?: string | number | Color | undefined;
     opacity?: number | undefined;
-}, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "fog" | "opacity" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "colorStop"> & React.RefAttributes<unknown>>;
+}, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "fog" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "opacity" | "colorStop"> & React.RefAttributes<unknown>>;