@react-three/drei 7.22.0 → 7.22.4

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.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/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/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,...s}){const u=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]),[f,p]=i.useState(!1),m=(n?1:.75)*(f?1.2:1);return i.createElement("sprite",l.default({scale:m,onPointerOver:a?void 0:e=>{e.stopPropagation(),p(!0)},onPointerOut:a?void 0:e||(e=>{e.stopPropagation(),p(!1)})},s),i.createElement("spriteMaterial",{map:u,alphaTest:.3,opacity:n?1:.75,toneMapped:!1}))}exports.GizmoViewport=({hideNegativeAxes:e,disabled:t,font:r="18px Inter var, Arial, sans-serif",axisColors:o=["#ff3653","#0adb50","#2c8fdf"],labelColor:n="#000",onClick:u,...f})=>{const[p,m,d]=o,{tweenCamera:b,raycast:E}=a.useGizmoContext(),h={font:r,disabled:t,labelColor:n,raycast:E,onClick:u,onPointerDown:t?void 0:e=>{b(e.object.position),e.stopPropagation()}};return i.createElement("group",l.default({scale:40},f),i.createElement(c,{color:p,rotation:[0,0,0]}),i.createElement(c,{color:m,rotation:[0,0,Math.PI/2]}),i.createElement(c,{color:d,rotation:[0,-Math.PI/2,0]}),i.createElement(s,l.default({arcStyle:p,position:[1,0,0],label:"X"},h)),i.createElement(s,l.default({arcStyle:m,position:[0,1,0],label:"Y"},h)),i.createElement(s,l.default({arcStyle:d,position:[0,0,1],label:"Z"},h)),!e&&i.createElement(i.Fragment,null,i.createElement(s,l.default({arcStyle:p,position:[-1,0,0]},h)),i.createElement(s,l.default({arcStyle:m,position:[0,-1,0]},h)),i.createElement(s,l.default({arcStyle:d,position:[0,0,-1]},h))),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"),r=require("three"),a=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(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 n=o(e),i=l(t);function c({scale:e=[.8,.05,.05],color:t,rotation:r}){return i.createElement("group",{rotation:r},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:a,arcStyle:o,label:l,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(),l&&(a.font=t,a.textAlign="center",a.fillStyle=c,a.fillText(l,32,41)),new r.CanvasTexture(e)}),[o,l,c,t]),[d,m]=i.useState(!1),p=(l?1:.75)*(d?1.2:1)*s;return i.createElement("sprite",n.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:l?1:.75,toneMapped:!1}))}exports.GizmoViewport=({hideNegativeAxes:e,hideAxisHeads:t,disabled:r,font:o="18px Inter var, Arial, sans-serif",axisColors:l=["#ff3653","#0adb50","#2c8fdf"],axisHeadScale:u=1,axisScale:f,labels:d=["X","Y","Z"],labelColor:m="#000",onClick:p,...b})=>{const[E,h,g]=l,{tweenCamera:y,raycast:x}=a.useGizmoContext(),j={font:o,disabled:r,labelColor:m,raycast:x,onClick:p,axisHeadScale:u,onPointerDown:r?void 0:e=>{y(e.object.position),e.stopPropagation()}};return i.createElement("group",n.default({scale:40},b),i.createElement(c,{color:E,rotation:[0,0,0],scale:f}),i.createElement(c,{color:h,rotation:[0,0,Math.PI/2],scale:f}),i.createElement(c,{color:g,rotation:[0,-Math.PI/2,0],scale:f}),!t&&i.createElement(i.Fragment,null,i.createElement(s,n.default({arcStyle:E,position:[1,0,0],label:d[0]},j)),i.createElement(s,n.default({arcStyle:h,position:[0,1,0],label:d[1]},j)),i.createElement(s,n.default({arcStyle:g,position:[0,0,1],label:d[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:g,position:[0,0,-1]},j)))),i.createElement("ambientLight",{intensity:.5}),i.createElement("pointLight",{position:[10,10,10],intensity:.5}))};

package/core/GizmoViewport.d.ts

@@ -2,11 +2,15 @@
 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;
     hideNegativeAxes?: boolean;
+    hideAxisHeads?: boolean;
     disabled?: boolean;
     font?: string;
     onClick?: (e: Event) => null;
 };
-export declare const GizmoViewport: ({ hideNegativeAxes, disabled, font, axisColors, 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

@@ -4,6 +4,7 @@ import { CanvasTexture } from 'three';
 import { useGizmoContext } from './GizmoHelper.js';
 
 function Axis({
+  scale = [0.8, 0.05, 0.05],
   color,
   rotation
 }) {
@@ -12,7 +13,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
@@ -26,6 +27,7 @@ function AxisHead({
   arcStyle,
   label,
   labelColor,
+  axisHeadScale = 1,
   ...props
 }) {
   const texture = React.useMemo(() => {
@@ -49,7 +51,7 @@ function AxisHead({
     return new CanvasTexture(canvas);
   }, [arcStyle, label, labelColor, font]);
   const [active, setActive] = React.useState(false);
-  const scale = (label ? 1 : 0.75) * (active ? 1.2 : 1);
+  const scale = (label ? 1 : 0.75) * (active ? 1.2 : 1) * axisHeadScale;
 
   const handlePointerOver = e => {
     e.stopPropagation();
@@ -75,9 +77,13 @@ function AxisHead({
 
 const GizmoViewport = ({
   hideNegativeAxes,
+  hideAxisHeads,
   disabled,
   font = '18px Inter var, Arial, sans-serif',
   axisColors = ['#ff3653', '#0adb50', '#2c8fdf'],
+  axisHeadScale = 1,
+  axisScale,
+  labels = ['X', 'Y', 'Z'],
   labelColor = '#000',
   onClick,
   ...props
@@ -93,6 +99,7 @@ const GizmoViewport = ({
     labelColor,
     raycast,
     onClick,
+    axisHeadScale,
     onPointerDown: !disabled ? e => {
       tweenCamera(e.object.position);
       e.stopPropagation();
@@ -102,25 +109,28 @@ 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]
-  }), /*#__PURE__*/React.createElement(AxisHead, _extends({
+    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],
-    label: "X"
+    label: labels[0]
   }, axisHeadProps)), /*#__PURE__*/React.createElement(AxisHead, _extends({
     arcStyle: colorY,
     position: [0, 1, 0],
-    label: "Y"
+    label: labels[1]
   }, axisHeadProps)), /*#__PURE__*/React.createElement(AxisHead, _extends({
     arcStyle: colorZ,
     position: [0, 0, 1],
-    label: "Z"
+    label: labels[2]
   }, axisHeadProps)), !hideNegativeAxes && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisHead, _extends({
     arcStyle: colorX,
     position: [-1, 0, 0]
@@ -130,7 +140,7 @@ const GizmoViewport = ({
   }, axisHeadProps)), /*#__PURE__*/React.createElement(AxisHead, _extends({
     arcStyle: colorZ,
     position: [0, 0, -1]
-  }, axisHeadProps))), /*#__PURE__*/React.createElement("ambientLight", {
+  }, axisHeadProps)))), /*#__PURE__*/React.createElement("ambientLight", {
     intensity: 0.5
   }), /*#__PURE__*/React.createElement("pointLight", {
     position: [10, 10, 10],

package/core/SpotLight.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("@react-three/fiber"),n=require("../materials/SpotLightMaterial.cjs.js");function o(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 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)}var u=o(e),l=i(t);const s=new r.Vector3,c=l.forwardRef((({depthBuffer:e,color:t="white",distance:o=5,angle:i=.15,attenuation:c=5,anglePower:f=5,...m},p)=>{const h=l.useRef(null),d=a.useThree((e=>e.size)),g=a.useThree((e=>e.camera)),v=a.useThree((e=>e.viewport.dpr)),[b]=l.useState((()=>new n.SpotLightMaterial));a.useFrame((()=>{b.uniforms.spotPosition.value.copy(h.current.getWorldPosition(s)),h.current.lookAt(h.current.parent.target.position)}));const w=l.useMemo((()=>{const e=new r.CylinderGeometry(.1,7*i,o,128,64,!0);return e.applyMatrix4((new r.Matrix4).makeTranslation(0,-o/2,0)),e.applyMatrix4((new r.Matrix4).makeRotationX(-Math.PI/2)),e}),[i,o]);return l.createElement("spotLight",u.default({ref:p,angle:i,color:t,distance:o},m),l.createElement("mesh",{ref:h,geometry:w},l.createElement("primitive",{object:b,attach:"material","uniforms-lightColor-value":t,"uniforms-attenuation-value":c,"uniforms-anglePower-value":f,"uniforms-depth-value":e,"uniforms-cameraNear-value":g.near,"uniforms-cameraFar-value":g.far,"uniforms-resolution-value":e?[d.width*v,d.height*v]:[0,0]})))}));exports.SpotLight=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("../materials/SpotLightMaterial.cjs.js");function o(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 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)}var u=o(e),l=i(t);const s=new r.Vector3,c=l.forwardRef((({depthBuffer:e,color:t="white",distance:o=5,angle:i=.15,attenuation:c=5,anglePower:f=5,...m},p)=>{const h=l.useRef(null),d=a.useThree((e=>e.size)),g=a.useThree((e=>e.camera)),v=a.useThree((e=>e.viewport.dpr)),[b]=l.useState((()=>new n.SpotLightMaterial));a.useFrame((()=>{b.uniforms.spotPosition.value.copy(h.current.getWorldPosition(s)),h.current.lookAt(h.current.parent.target.getWorldPosition(s))}));const w=l.useMemo((()=>{const e=new r.CylinderGeometry(.1,7*i,o,128,64,!0);return e.applyMatrix4((new r.Matrix4).makeTranslation(0,-o/2,0)),e.applyMatrix4((new r.Matrix4).makeRotationX(-Math.PI/2)),e}),[i,o]);return l.createElement("spotLight",u.default({ref:p,angle:i,color:t,distance:o},m),l.createElement("mesh",{ref:h,geometry:w},l.createElement("primitive",{object:b,attach:"material","uniforms-lightColor-value":t,"uniforms-attenuation-value":c,"uniforms-anglePower-value":f,"uniforms-depth-value":e,"uniforms-cameraNear-value":g.near,"uniforms-cameraFar-value":g.far,"uniforms-resolution-value":e?[d.width*v,d.height*v]:[0,0]})))}));exports.SpotLight=c;

package/core/SpotLight.js

@@ -21,7 +21,7 @@ const SpotLight = /*#__PURE__*/React.forwardRef(({
   const [material] = React.useState(() => new SpotLightMaterial());
   useFrame(() => {
     material.uniforms.spotPosition.value.copy(mesh.current.getWorldPosition(vec));
-    mesh.current.lookAt(mesh.current.parent.target.position);
+    mesh.current.lookAt(mesh.current.parent.target.getWorldPosition(vec));
   });
   const geom = React.useMemo(() => {
     const geometry = new CylinderGeometry(0.1, angle * 7, distance, 128, 64, true);

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(() => {