@react-three/drei 7.22.0 → 7.22.1

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 z(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 h(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[y]=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){if(e.setFromObject(t||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(){y.camera.copy(x.position),p&&y.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)){y.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?y.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=>y.animating=!1;return p.addEventListener("start",e),()=>p.removeEventListener("start",e)}}),[M,o,p]),r.useFrame(((e,r)=>{if(y.animating){if(h(y.focus,d.focus,t,r),h(y.camera,d.camera,t,r),y.zoom=n.MathUtils.damp(y.zoom,d.zoom,t,r),x.position.copy(y.camera),c(x)&&(x.zoom=y.zoom,x.updateProjectionMatrix()),p?(p.target.copy(y.focus),p.update()):x.lookAt(y.focus),l(),c(x)&&!(Math.abs(y.zoom-d.zoom)<u))return;if(!c(x)&&!z(y.camera,d.camera))return;if(p&&!z(y.focus,d.focus))return;y.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 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)};

package/core/Bounds.js

@@ -4,6 +4,10 @@ import { useThree, useFrame } from '@react-three/fiber';
 
 const isOrthographic = def => def && def.isOrthographicCamera;
 
+const isObject3D = def => def && def.isObject3D;
+
+const isBox3 = def => def && def.isBox3;
+
 const context = /*#__PURE__*/React.createContext(null);
 function Bounds({
   children,
@@ -61,7 +65,7 @@ function Bounds({
       getSize,
 
       refresh(object) {
-        box.setFromObject(object || ref.current);
+        if (isObject3D(object)) box.setFromObject(object);else if (isBox3(object)) box.copy(object);else box.setFromObject(ref.current);
 
         if (box.isEmpty()) {
           const max = camera.position.length() || 10;

package/core/useNormalTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("./useTexture.cjs.js"),t=require("three"),s=require("../helpers/normal-assets.cjs.js");function a(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,s.get?s:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@react-three/fiber");var n=a(e);const o=s.normalsList[0];exports.useNormalTexture=function(e=0,a={}){const{repeat:c=[1,1],anisotropy:u=1,offset:f=[0,0]}=a,i=n.useMemo((()=>Object.keys(s.normalsList).length),[]),p=`https://rawcdn.githack.com/emmelleppi/normal-maps/f24c810fc1d86b5b1e5dfea914b668f70b5f2923/normals/${s.normalsList[e]||o}`,l=r.useTexture(p);return n.useEffect((()=>{l&&(l.wrapS=l.wrapT=t.RepeatWrapping,l.repeat=new t.Vector2(c[0],c[1]),l.offset=new t.Vector2(f[0],f[1]),l.anisotropy=u)}),[l,u,c,f]),[l,p,i]};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("./useTexture.cjs.js"),t=require("three"),s=require("../helpers/normal-assets.cjs.js");function a(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,s.get?s:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@react-three/fiber");var o=a(e);const n=s.normalsList[0];exports.useNormalTexture=function(e=0,a={}){const{repeat:u=[1,1],anisotropy:c=1,offset:f=[0,0]}=a,i=o.useMemo((()=>Object.keys(s.normalsList).length),[]),p=`https://rawcdn.githack.com/emmelleppi/normal-maps/f24c810fc1d86b5b1e5dfea914b668f70b5f2923/normals/${s.normalsList[e]||n}`,l=r.useTexture(p);return o.useLayoutEffect((()=>{l&&(l.wrapS=l.wrapT=t.RepeatWrapping,l.repeat=new t.Vector2(u[0],u[1]),l.offset=new t.Vector2(f[0],f[1]),l.anisotropy=c)}),[l,c,u,f]),[l,p,i]};

package/core/useNormalTexture.js

@@ -15,7 +15,7 @@ function useNormalTexture(id = 0, settings = {}) {
   const imageName = normalsList[id] || DEFAULT_NORMAL;
   const url = `${NORMAL_ROOT}/normals/${imageName}`;
   const normalTexture = useTexture(url);
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (!normalTexture) return;
     normalTexture.wrapS = normalTexture.wrapT = RepeatWrapping;
     normalTexture.repeat = new Vector2(repeat[0], repeat[1]);

package/core/useTexture.js

@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 const IsObject = url => url === Object(url) && !Array.isArray(url) && typeof url !== 'function';
 function useTexture(input) {
   const gl = useThree(state => state.gl);
-  const textures = useLoader(TextureLoader, IsObject(input) ? Object.values(input) : input); // https://github.com/mrdoob/three.js/issues/2269
+  const textures = useLoader(TextureLoader, IsObject(input) ? Object.values(input) : input); // https://github.com/mrdoob/three.js/issues/22696
   // Upload the texture to the GPU immediately instead of waiting for the first render
 
   useEffect(() => {