@react-three/drei 9.51.7 → 9.51.9

package/README.md

@@ -1490,13 +1490,13 @@ type MeshTransmissionMaterialProps = {
   roughness?: number
   /** RGB color shift, default: 0.3 */
   rgbShift?: number
-  /** RGB shift noise, default: 0.03 */
+  /** Noise, default: 0.03 */
   noise?: number
   /** Color saturation, default: 1 */
   saturation?: number
   /** Color contrast, default: 1 */
   contrast?: number
-  /** Resolution of the local buffer, default: undefined (full canvas width/height) */
+  /** Resolution of the local buffer, default: 1024 */
   resolution?: number
   /** Refraction samples, default: 10 */
   samples?: number

package/core/GizmoHelper.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three"),n=require("./OrthographicCamera.cjs.js"),u=require("./useCamera.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 n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("./useFBO.cjs.js");var o=a(e);const c=o.createContext({}),i=2*Math.PI,s=new t.Object3D,l=new t.Matrix4,[p,d]=[new t.Quaternion,new t.Quaternion],f=new t.Vector3,h=new t.Vector3;exports.GizmoHelper=({alignment:e="bottom-right",margin:a=[80,80],renderPriority:m=0,autoClear:g=!0,onUpdate:b,onTarget:y,children:w})=>{const j=r.useThree((({size:e})=>e)),C=r.useThree((({camera:e})=>e)),q=r.useThree((({controls:e})=>e)),v=r.useThree((({gl:e})=>e)),O=r.useThree((({scene:e})=>e)),x=r.useThree((({invalidate:e})=>e)),T=o.useRef(),k=o.useRef(),P=o.useRef(null),[R]=o.useState((()=>new t.Scene)),E=o.useRef(!1),M=o.useRef(0),z=o.useRef(new t.Vector3(0,0,0)),Q=o.useRef(new t.Vector3(0,0,0));o.useEffect((()=>{Q.current.copy(C.up)}),[C]);const S=o.useCallback((e=>{E.current=!0,(q||y)&&(z.current=(null==q?void 0:q.target)||(null==y?void 0:y())),M.current=C.position.distanceTo(f),p.copy(C.quaternion),h.copy(e).multiplyScalar(M.current).add(f),s.lookAt(h),d.copy(s.quaternion),x()}),[q,C,y,x]);o.useEffect((()=>(O.background&&(T.current=O.background,O.background=null,R.background=T.current),()=>{T.current&&(O.background=T.current)})),[]),r.useFrame(((e,r)=>{if(P.current&&k.current){var t;if(E.current)if(p.angleTo(d)<.01)E.current=!1,"minPolarAngle"in q&&C.up.copy(Q.current);else{const e=r*i;p.rotateTowards(d,e),C.position.set(0,0,1).applyQuaternion(p).multiplyScalar(M.current).add(z.current),C.up.set(0,1,0).applyQuaternion(p).normalize(),C.quaternion.copy(p),b?b():q&&q.update(),x()}l.copy(C.matrix).invert(),null==(t=k.current)||t.quaternion.setFromRotationMatrix(l);const e=v.autoClear;g&&(v.autoClear=!1),v.clearDepth(),v.render(R,P.current),v.autoClear=e}}),m);const V=u.useCamera(P),W=o.useMemo((()=>({tweenCamera:S,raycast:V})),[S]),[_,D]=a,F=e.endsWith("-center")?0:e.endsWith("-left")?-j.width/2+_:j.width/2-_,A=e.startsWith("center-")?0:e.startsWith("top-")?j.height/2-D:-j.height/2+D;return r.createPortal(o.createElement(c.Provider,{value:W},o.createElement(n.OrthographicCamera,{ref:P,position:[0,0,200]}),o.createElement("group",{ref:k,position:[F,A,0]},w)),R)},exports.useGizmoContext=()=>o.useContext(c);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three"),n=require("./OrthographicCamera.cjs.js"),o=require("./Hud.cjs.js");function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("./useFBO.cjs.js");var i=u(e);const a=i.createContext({}),c=2*Math.PI,s=new t.Object3D,l=new t.Matrix4,[p,d]=[new t.Quaternion,new t.Quaternion],f=new t.Vector3,h=new t.Vector3;exports.GizmoHelper=({alignment:e="bottom-right",margin:u=[80,80],renderPriority:m=1,onUpdate:y,onTarget:g,children:b})=>{const j=r.useThree((e=>e.size)),w=r.useThree((e=>e.camera)),q=r.useThree((e=>e.controls)),v=r.useThree((e=>e.invalidate)),O=i.useRef(),x=i.useRef(null),P=i.useRef(!1),T=i.useRef(0),C=i.useRef(new t.Vector3(0,0,0)),R=i.useRef(new t.Vector3(0,0,0));i.useEffect((()=>{R.current.copy(w.up)}),[w]);const E=i.useCallback((e=>{P.current=!0,(q||g)&&(C.current=(null==q?void 0:q.target)||(null==g?void 0:g())),T.current=w.position.distanceTo(f),p.copy(w.quaternion),h.copy(e).multiplyScalar(T.current).add(f),s.lookAt(h),d.copy(s.quaternion),v()}),[q,w,g,v]);r.useFrame(((e,r)=>{if(x.current&&O.current){var t;if(P.current)if(p.angleTo(d)<.01)P.current=!1,"minPolarAngle"in q&&w.up.copy(R.current);else{const e=r*c;p.rotateTowards(d,e),w.position.set(0,0,1).applyQuaternion(p).multiplyScalar(T.current).add(C.current),w.up.set(0,1,0).applyQuaternion(p).normalize(),w.quaternion.copy(p),y?y():q&&q.update(),v()}l.copy(w.matrix).invert(),null==(t=O.current)||t.quaternion.setFromRotationMatrix(l)}}));const M=i.useMemo((()=>({tweenCamera:E})),[E]),[z,k]=u,Q=e.endsWith("-center")?0:e.endsWith("-left")?-j.width/2+z:j.width/2-z,V=e.startsWith("center-")?0:e.startsWith("top-")?j.height/2-k:-j.height/2+k;return i.createElement(o.Hud,{renderPriority:m},i.createElement(a.Provider,{value:M},i.createElement(n.OrthographicCamera,{makeDefault:!0,ref:x,position:[0,0,200]}),i.createElement("group",{ref:O,position:[Q,V,0]},b)))},exports.useGizmoContext=()=>i.useContext(a);

package/core/GizmoHelper.d.ts

@@ -1,7 +1,6 @@
-import { Intersection, Raycaster, Vector3 } from 'three';
+import { Vector3 } from 'three';
 declare type GizmoHelperContext = {
     tweenCamera: (direction: Vector3) => void;
-    raycast: (raycaster: Raycaster, intersects: Intersection[]) => void;
 };
 export declare const useGizmoContext: () => GizmoHelperContext;
 export declare type GizmoHelperProps = JSX.IntrinsicElements['group'] & {
@@ -12,5 +11,5 @@ export declare type GizmoHelperProps = JSX.IntrinsicElements['group'] & {
     onUpdate?: () => void;
     onTarget?: () => Vector3;
 };
-export declare const GizmoHelper: ({ alignment, margin, renderPriority, autoClear, onUpdate, onTarget, children: GizmoHelperComponent, }: GizmoHelperProps) => any;
+export declare const GizmoHelper: ({ alignment, margin, renderPriority, onUpdate, onTarget, children, }: GizmoHelperProps) => any;
 export {};

package/core/GizmoHelper.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { useThree, useFrame, createPortal } from '@react-three/fiber';
-import { Object3D, Matrix4, Quaternion, Vector3, Scene } from 'three';
+import { useThree, useFrame } from '@react-three/fiber';
+import { Object3D, Matrix4, Quaternion, Vector3 } from 'three';
 import { OrthographicCamera } from './OrthographicCamera.js';
-import { useCamera } from './useCamera.js';
+import { Hud } from './Hud.js';
 
 const Context = /*#__PURE__*/React.createContext({});
 const useGizmoContext = () => {
@@ -23,35 +23,18 @@ const isOrbitControls = controls => {
 const GizmoHelper = ({
   alignment = 'bottom-right',
   margin = [80, 80],
-  renderPriority = 0,
-  autoClear = true,
+  renderPriority = 1,
   onUpdate,
   onTarget,
-  children: GizmoHelperComponent
+  children
 }) => {
-  const size = useThree(({
-    size
-  }) => size);
-  const mainCamera = useThree(({
-    camera
-  }) => camera); // @ts-expect-error new in @react-three/fiber@7.0.5
+  const size = useThree(state => state.size);
+  const mainCamera = useThree(state => state.camera); // @ts-ignore
 
-  const defaultControls = useThree(({
-    controls
-  }) => controls);
-  const gl = useThree(({
-    gl
-  }) => gl);
-  const scene = useThree(({
-    scene
-  }) => scene);
-  const invalidate = useThree(({
-    invalidate
-  }) => invalidate);
-  const backgroundRef = React.useRef();
+  const defaultControls = useThree(state => state.controls);
+  const invalidate = useThree(state => state.invalidate);
   const gizmoRef = React.useRef();
   const virtualCam = React.useRef(null);
-  const [virtualScene] = React.useState(() => new Scene());
   const animating = React.useRef(false);
   const radius = React.useRef(0);
   const focusPoint = React.useRef(new Vector3(0, 0, 0));
@@ -71,19 +54,6 @@ const GizmoHelper = ({
     q2.copy(dummy.quaternion);
     invalidate();
   }, [defaultControls, mainCamera, onTarget, invalidate]);
-  React.useEffect(() => {
-    if (scene.background) {
-      //Interchange the actual scene background with the virtual scene
-      backgroundRef.current = scene.background;
-      scene.background = null;
-      virtualScene.background = backgroundRef.current;
-    }
-
-    return () => {
-      // reset on unmount
-      if (backgroundRef.current) scene.background = backgroundRef.current;
-    };
-  }, []);
   useFrame((_, delta) => {
     if (virtualCam.current && gizmoRef.current) {
       var _gizmoRef$current;
@@ -113,33 +83,28 @@ const GizmoHelper = ({
 
 
       matrix.copy(mainCamera.matrix).invert();
-      (_gizmoRef$current = gizmoRef.current) == null ? void 0 : _gizmoRef$current.quaternion.setFromRotationMatrix(matrix); // Render virtual camera
-
-      const oldClear = gl.autoClear;
-      if (autoClear) gl.autoClear = false;
-      gl.clearDepth();
-      gl.render(virtualScene, virtualCam.current);
-      gl.autoClear = oldClear;
+      (_gizmoRef$current = gizmoRef.current) == null ? void 0 : _gizmoRef$current.quaternion.setFromRotationMatrix(matrix);
     }
-  }, renderPriority);
-  const raycast = useCamera(virtualCam);
+  });
   const gizmoHelperContext = React.useMemo(() => ({
-    tweenCamera,
-    raycast
+    tweenCamera
   }), [tweenCamera]); // Position gizmo component within scene
 
   const [marginX, marginY] = margin;
   const x = alignment.endsWith('-center') ? 0 : alignment.endsWith('-left') ? -size.width / 2 + marginX : size.width / 2 - marginX;
   const y = alignment.startsWith('center-') ? 0 : alignment.startsWith('top-') ? size.height / 2 - marginY : -size.height / 2 + marginY;
-  return createPortal( /*#__PURE__*/React.createElement(Context.Provider, {
+  return /*#__PURE__*/React.createElement(Hud, {
+    renderPriority: renderPriority
+  }, /*#__PURE__*/React.createElement(Context.Provider, {
     value: gizmoHelperContext
   }, /*#__PURE__*/React.createElement(OrthographicCamera, {
+    makeDefault: true,
     ref: virtualCam,
     position: [0, 0, 200]
   }), /*#__PURE__*/React.createElement("group", {
     ref: gizmoRef,
     position: [x, y, 0]
-  }, GizmoHelperComponent)), virtualScene);
+  }, children)));
 };
 
 export { GizmoHelper, useGizmoContext };

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("@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("./useFBO.cjs.js"),require("./useCamera.cjs.js");var s=n(e),c=i(t);const l="#f0f0f0",u="#999",p="black",m="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=u,textColor:h=p,strokeColor:y=m,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,n,o,i,h,y]);return c.createElement("meshLambertMaterial",{map:b,"map-encoding":g.outputEncoding,"map-anisotropy":g.capabilities.getMaxAnisotropy()||1,attach:`material-${t}`,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))},E=({onClick:e,dimensions:t,position:r,hoverColor:a=u})=>{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(E,s.default({key:r,position:t,dimensions:b[r]},e)))),y.map(((t,r)=>c.createElement(E,s.default({key:r,position:t,dimensions:d},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"),n=require("three");function a(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("./useFBO.cjs.js"),require("./Hud.cjs.js");var l=a(e),s=i(t);const c="#f0f0f0",u="#999",p="black",m="black",f=["Right","Left","Top","Bottom","Front","Back"],h=e=>new n.Vector3(...e).multiplyScalar(.38),d=[[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),g=[.25,.25,.25],y=[[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=y.map((e=>e.toArray().map((e=>0==e?.5:.25)))),x=({hover:e,index:t,font:o="20px Inter var, Arial, sans-serif",faces:a=f,color:i=c,hoverColor:l=u,textColor:h=p,strokeColor:d=m,opacity:g=1})=>{const y=r.useThree((e=>e.gl)),b=s.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=d,r.strokeRect(0,0,e.width,e.height),r.font=o,r.textAlign="center",r.fillStyle=h,r.fillText(a[t].toUpperCase(),64,76),new n.CanvasTexture(e)}),[t,a,o,i,h,d]);return s.createElement("meshLambertMaterial",{map:b,"map-encoding":y.outputEncoding,"map-anisotropy":y.capabilities.getMaxAnisotropy()||1,attach:`material-${t}`,color:e?l:"white",transparent:!0,opacity:g})},C=e=>{const{tweenCamera:t}=o.useGizmoContext(),[r,n]=s.useState(null);return s.createElement("mesh",{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,o)=>s.createElement(x,l.default({key:o,index:o,hover:r===o},e)))),s.createElement("boxGeometry",null))},E=({onClick:e,dimensions:t,position:r,hoverColor:n=u})=>{const{tweenCamera:a}=o.useGizmoContext(),[i,l]=s.useState(!1);return s.createElement("mesh",{scale:1.01,position:r,onPointerOver:e=>{e.stopPropagation(),l(!0)},onPointerOut:e=>{e.stopPropagation(),l(!1)},onClick:e||(e=>{e.stopPropagation(),a(r)})},s.createElement("meshBasicMaterial",{color:i?n:"white",transparent:!0,opacity:.6,visible:i}),s.createElement("boxGeometry",{args:t}))};exports.GizmoViewcube=e=>s.createElement("group",{scale:[60,60,60]},s.createElement(C,e),y.map(((t,r)=>s.createElement(E,l.default({key:r,position:t,dimensions:b[r]},e)))),d.map(((t,r)=>s.createElement(E,l.default({key:r,position:t,dimensions:g},e)))),s.createElement("ambientLight",{intensity:.5}),s.createElement("pointLight",{position:[10,10,10],intensity:.5}));

package/core/GizmoViewcube.js

@@ -59,8 +59,7 @@ const FaceMaterial = ({
 
 const FaceCube = props => {
   const {
-    tweenCamera,
-    raycast
+    tweenCamera
   } = useGizmoContext();
   const [hover, setHover] = React.useState(null);
 
@@ -80,7 +79,6 @@ const FaceCube = props => {
   };
 
   return /*#__PURE__*/React.createElement("mesh", {
-    raycast: raycast,
     onPointerOut: handlePointerOut,
     onPointerMove: handlePointerMove,
     onClick: props.onClick || handleClick
@@ -98,8 +96,7 @@ const EdgeCube = ({
   hoverColor = colors.hover
 }) => {
   const {
-    tweenCamera,
-    raycast
+    tweenCamera
   } = useGizmoContext();
   const [hover, setHover] = React.useState(false);
 
@@ -121,7 +118,6 @@ const EdgeCube = ({
   return /*#__PURE__*/React.createElement("mesh", {
     scale: 1.01,
     position: position,
-    raycast: raycast,
     onPointerOver: handlePointerOver,
     onPointerOut: handlePointerOut,
     onClick: onClick || handleClick

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("@react-three/fiber"),a=require("three"),o=require("./GizmoHelper.cjs.js");function n(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("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useFBO.cjs.js"),require("./useCamera.cjs.js");var i=n(e),c=l(t);function s({scale:e=[.8,.05,.05],color:t,rotation:r}){return c.createElement("group",{rotation:r},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:n,label:l,labelColor:s,axisHeadScale:u=1,...p}){const f=r.useThree((e=>e.gl)),m=c.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=n,r.fill(),l&&(r.font=t,r.textAlign="center",r.fillStyle=s,r.fillText(l,32,41)),new a.CanvasTexture(e)}),[n,l,s,t]),[d,b]=c.useState(!1),g=(l?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-encoding":f.outputEncoding,"map-anisotropy":f.capabilities.getMaxAnisotropy()||1,alphaTest:.3,opacity:l?1:.75,toneMapped:!1}))}exports.GizmoViewport=({hideNegativeAxes:e,hideAxisHeads:t,disabled:r,font:a="18px Inter var, Arial, sans-serif",axisColors:n=["#ff2060","#20df80","#2080ff"],axisHeadScale:l=1,axisScale:p,labels:f=["X","Y","Z"],labelColor:m="#000",onClick:d,...b})=>{const[g,E,h]=n,{tweenCamera:y,raycast:x}=o.useGizmoContext(),j={font:a,disabled:r,labelColor:m,raycast:x,onClick:d,axisHeadScale:l,onPointerDown:r?void 0:e=>{y(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:E,rotation:[0,0,Math.PI/2],scale:p}),c.createElement(s,{color:h,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:E,position:[0,1,0],label:f[1]},j)),c.createElement(u,i.default({arcStyle:h,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:E,position:[0,-1,0]},j)),c.createElement(u,i.default({arcStyle:h,position:[0,0,-1]},j)))),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"),a=require("three"),o=require("./GizmoHelper.cjs.js");function n(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("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useFBO.cjs.js"),require("./Hud.cjs.js");var i=n(e),c=l(t);function s({scale:e=[.8,.05,.05],color:t,rotation:r}){return c.createElement("group",{rotation:r},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:n,label:l,labelColor:s,axisHeadScale:u=1,...p}){const d=r.useThree((e=>e.gl)),f=c.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=n,r.fill(),l&&(r.font=t,r.textAlign="center",r.fillStyle=s,r.fillText(l,32,41)),new a.CanvasTexture(e)}),[n,l,s,t]),[m,b]=c.useState(!1),g=(l?1:.75)*(m?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:f,"map-encoding":d.outputEncoding,"map-anisotropy":d.capabilities.getMaxAnisotropy()||1,alphaTest:.3,opacity:l?1:.75,toneMapped:!1}))}exports.GizmoViewport=({hideNegativeAxes:e,hideAxisHeads:t,disabled:r,font:a="18px Inter var, Arial, sans-serif",axisColors:n=["#ff2060","#20df80","#2080ff"],axisHeadScale:l=1,axisScale:p,labels:d=["X","Y","Z"],labelColor:f="#000",onClick:m,...b})=>{const[g,E,h]=n,{tweenCamera:y}=o.useGizmoContext(),x={font:a,disabled:r,labelColor:f,onClick:m,axisHeadScale:l,onPointerDown:r?void 0:e=>{y(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:E,rotation:[0,0,Math.PI/2],scale:p}),c.createElement(s,{color:h,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:d[0]},x)),c.createElement(u,i.default({arcStyle:E,position:[0,1,0],label:d[1]},x)),c.createElement(u,i.default({arcStyle:h,position:[0,0,1],label:d[2]},x)),!e&&c.createElement(c.Fragment,null,c.createElement(u,i.default({arcStyle:g,position:[-1,0,0]},x)),c.createElement(u,i.default({arcStyle:E,position:[0,-1,0]},x)),c.createElement(u,i.default({arcStyle:h,position:[0,0,-1]},x)))),c.createElement("ambientLight",{intensity:.5}),c.createElement("pointLight",{position:[10,10,10],intensity:.5}))};

package/core/GizmoViewport.js

@@ -94,14 +94,12 @@ const GizmoViewport = ({
 }) => {
   const [colorX, colorY, colorZ] = axisColors;
   const {
-    tweenCamera,
-    raycast
+    tweenCamera
   } = useGizmoContext();
   const axisHeadProps = {
     font,
     disabled,
     labelColor,
-    raycast,
     onClick,
     axisHeadScale,
     onPointerDown: !disabled ? e => {

package/core/Hud.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber");function n(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=n(e),u=n(r);function c({defaultScene:e,defaultCamera:r,renderPriority:n=1}){const{gl:a,scene:c,camera:l}=t.useThree();return t.useFrame((()=>{1===n&&(a.autoClear=!0,a.render(e,r)),a.autoClear=!1,a.clearDepth(),a.render(c,l)}),n),u.createElement(u.Fragment,null)}exports.Hud=function({children:e,renderPriority:r=1}){const{scene:n,camera:l}=t.useThree(),[i]=u.useState((()=>new a.Scene));return u.createElement(u.Fragment,null,t.createPortal(u.createElement(u.Fragment,null,e,u.createElement(c,{defaultScene:n,defaultCamera:l,renderPriority:r})),i,{events:{priority:r+1}}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber");function n(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=n(e),u=n(r);function c({defaultScene:e,defaultCamera:r,renderPriority:n=1}){const{gl:a,scene:c,camera:l}=t.useThree();let o;return t.useFrame((()=>{o=a.autoClear,1===n&&(a.autoClear=!0,a.render(e,r)),a.autoClear=!1,a.clearDepth(),a.render(c,l),a.autoClear=o}),n),u.createElement(u.Fragment,null)}exports.Hud=function({children:e,renderPriority:r=1}){const{scene:n,camera:l}=t.useThree(),[o]=u.useState((()=>new a.Scene));return u.createElement(u.Fragment,null,t.createPortal(u.createElement(u.Fragment,null,e,u.createElement(c,{defaultScene:n,defaultCamera:l,renderPriority:r})),o,{events:{priority:r+1}}))};

package/core/Hud.js

@@ -12,7 +12,10 @@ function RenderHud({
     scene,
     camera
   } = useThree();
+  let oldCLear;
   useFrame(() => {
+    oldCLear = gl.autoClear;
+
     if (renderPriority === 1) {
       // Clear scene and render the default scene
       gl.autoClear = true;
@@ -22,7 +25,9 @@ function RenderHud({
 
     gl.autoClear = false;
     gl.clearDepth();
-    gl.render(scene, camera);
+    gl.render(scene, camera); // Restore default
+
+    gl.autoClear = oldCLear;
   }, renderPriority);
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 }

package/core/MeshTransmissionMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),a=require("./useFBO.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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 n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=o(e),u=s(r),l=s(t);class f extends u.MeshPhysicalMaterial{constructor({samples:e=5,...r}={}){super(r),this.uniforms={refraction:{value:0},rgbShift:{value:.3},noise:{value:.03},saturation:{value:1},contrast:{value:1},buffer:{value:null},resolution:{value:new u.Vector2}},this.onBeforeCompile=r=>{r.uniforms={...r.uniforms,...this.uniforms},r.fragmentShader="uniform float rgbShift;\n      uniform vec2 resolution;\n      uniform vec3 refractionColor;\n      uniform float refraction;\n      uniform float noise;\n      uniform float saturation;\n      uniform float contrast;\n      uniform sampler2D buffer;\n      \n      vec3 sat(vec3 rgb, float adjustment) {\n        const vec3 W = vec3(0.2125, 0.7154, 0.0721);\n        vec3 intensity = vec3(dot(rgb, W));\n        return mix(intensity, rgb, adjustment);\n      }\n"+r.fragmentShader,r.fragmentShader=r.fragmentShader.replace("#include <transmission_pars_fragment>",""),r.fragmentShader=r.fragmentShader.replace("#include <transmission_fragment>",""),r.fragmentShader=r.fragmentShader.replace("vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;",`vec2 uv = gl_FragCoord.xy / resolution.xy;\n        vec2 refractNormal = vNormal.xy * (1.0 - vNormal.z * 0.85);\n        vec3 refractCol = vec3(0.0);        \n        float randomCoords = rand(uv);\n        vec2 randomCoords2;\n        float roughBlur = roughness * roughness;\n        float slide;\n        #pragma unroll_loop_start\n        for (int i = 0; i < ${e}; i ++) {\n          slide = float(UNROLLED_LOOP_INDEX) / float(${e}) * 0.1 + randomCoords * noise;\n          randomCoords2 = vec2(rand(uv + randomCoords + 0.1 * float(UNROLLED_LOOP_INDEX)), rand(uv - randomCoords - 0.1 * float(UNROLLED_LOOP_INDEX))) - 0.5;\n          randomCoords2 = normalize(randomCoords2) * sqrt(rand(uv + 0.12 * float(UNROLLED_LOOP_INDEX)));\n          refractCol.r += texture2D(buffer, uv - refractNormal * (refraction + slide * 1.0) * rgbShift + randomCoords2 * roughBlur).r;\n          refractCol.g += texture2D(buffer, uv - refractNormal * (refraction + slide * 2.0) * rgbShift + randomCoords2 * roughBlur).g;\n          refractCol.b += texture2D(buffer, uv - refractNormal * (refraction + slide * 3.0) * rgbShift + randomCoords2 * roughBlur).b;\n          refractCol = sat(refractCol, saturation);\n        }\n        #pragma unroll_loop_end\n        refractCol /= float(${e});\n        vec3 outgoingLight = (refractCol * totalDiffuse * contrast) + totalSpecular + totalEmissiveRadiance;`)},Object.keys(this.uniforms).forEach((e=>Object.defineProperty(this,e,{get:()=>this.uniforms[e].value,set:r=>this.uniforms[e].value=r})))}}const c=l.forwardRef((({buffer:e,samples:r=10,resolution:t,background:o,...s},u)=>{n.extend({MeshTransmissionMaterial:f});const c=l.useRef(null),{size:d,viewport:m}=n.useThree(),g=a.useFBO(t,t,{samples:0}),v=l.useMemo((()=>({samples:r})),[r]);let h,b,p;return n.useFrame((r=>{e||(p=c.current.__r3f.parent,p&&(b=p.visible,p.visible=!1,r.gl.setRenderTarget(g),h=r.scene.background,o&&(r.scene.background=o),r.gl.render(r.scene,r.camera),r.scene.background=h,r.gl.setRenderTarget(null),p.visible=b))})),l.useImperativeHandle(u,(()=>c.current),[]),l.createElement("meshTransmissionMaterial",i.default({args:[v],ref:c,buffer:e||g.texture,resolution:[d.width*m.dpr,d.height*m.dpr]},s))}));exports.MeshTransmissionMaterial=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),o=require("./useFBO.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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 n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=a(e),u=s(r),l=s(t);class f extends u.MeshPhysicalMaterial{constructor({samples:e=5,...r}={}){super(r),this.uniforms={refraction:{value:0},rgbShift:{value:.3},noise:{value:.03},saturation:{value:1},contrast:{value:1},buffer:{value:null},resolution:{value:new u.Vector2}},this.onBeforeCompile=r=>{r.uniforms={...r.uniforms,...this.uniforms},r.fragmentShader="uniform float rgbShift;\n      uniform vec2 resolution;\n      uniform vec3 refractionColor;\n      uniform float refraction;\n      uniform float noise;\n      uniform float saturation;\n      uniform float contrast;\n      uniform sampler2D buffer;\n      \n      vec3 sat(vec3 rgb, float adjustment) {\n        const vec3 W = vec3(0.2125, 0.7154, 0.0721);\n        vec3 intensity = vec3(dot(rgb, W));\n        return mix(intensity, rgb, adjustment);\n      }\n"+r.fragmentShader,r.fragmentShader=r.fragmentShader.replace("#include <transmission_pars_fragment>",""),r.fragmentShader=r.fragmentShader.replace("#include <transmission_fragment>",""),r.fragmentShader=r.fragmentShader.replace("vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;",`vec2 uv = gl_FragCoord.xy / resolution.xy;\n        vec2 refractNormal = vNormal.xy * (1.0 - vNormal.z * 0.85);\n        vec3 refractCol = vec3(0.0);        \n        float randomCoords = rand(uv);\n        vec2 randomCoords2;\n        float roughBlur = roughness * roughness;\n        float slide;\n        #pragma unroll_loop_start\n        for (int i = 0; i < ${e}; i ++) {\n          slide = float(UNROLLED_LOOP_INDEX) / float(${e}) * 0.1 + randomCoords * noise;\n          randomCoords2 = vec2(rand(uv + randomCoords + 0.1 * float(UNROLLED_LOOP_INDEX)), rand(uv - randomCoords - 0.1 * float(UNROLLED_LOOP_INDEX))) - 0.5;\n          randomCoords2 = normalize(randomCoords2) * sqrt(rand(uv + 0.12 * float(UNROLLED_LOOP_INDEX)));\n          refractCol.r += texture2D(buffer, uv - refractNormal * (refraction + slide * 1.0) * rgbShift + randomCoords2 * roughBlur).r;\n          refractCol.g += texture2D(buffer, uv - refractNormal * (refraction + slide * 2.0) * rgbShift + randomCoords2 * roughBlur).g;\n          refractCol.b += texture2D(buffer, uv - refractNormal * (refraction + slide * 3.0) * rgbShift + randomCoords2 * roughBlur).b;\n          refractCol = sat(refractCol, saturation);\n        }\n        #pragma unroll_loop_end\n        refractCol /= float(${e});\n        vec3 outgoingLight = (refractCol * totalDiffuse * contrast) + totalSpecular + totalEmissiveRadiance;`)},Object.keys(this.uniforms).forEach((e=>Object.defineProperty(this,e,{get:()=>this.uniforms[e].value,set:r=>this.uniforms[e].value=r})))}}const c=l.forwardRef((({buffer:e,samples:r=10,resolution:t=1024,background:a,...s},u)=>{n.extend({MeshTransmissionMaterial:f});const c=l.useRef(null),{size:d,viewport:m}=n.useThree(),g=o.useFBO(t),v=l.useMemo((()=>({samples:r})),[r]);let h,b,p;return n.useFrame((r=>{e||(p=c.current.__r3f.parent,p&&(b=p.visible,p.visible=!1,r.gl.setRenderTarget(g),h=r.scene.background,a&&(r.scene.background=a),r.gl.render(r.scene,r.camera),r.scene.background=h,r.gl.setRenderTarget(null),p.visible=b))})),l.useImperativeHandle(u,(()=>c.current),[]),l.createElement("meshTransmissionMaterial",i.default({args:[v],ref:c,buffer:e||g.texture,resolution:[d.width*m.dpr,d.height*m.dpr]},s))}));exports.MeshTransmissionMaterial=c;

package/core/MeshTransmissionMaterial.d.ts

@@ -8,7 +8,7 @@ declare type MeshTransmissionMaterialType = Omit<JSX.IntrinsicElements['meshPhys
     noise?: number;
     saturation?: number;
     contrast?: number;
-    resolution?: ReactThreeFiber.Vector2 | null;
+    resolution?: ReactThreeFiber.Vector2;
     buffer?: THREE.Texture;
     args?: [{
         samples: number;

package/core/MeshTransmissionMaterial.js

@@ -90,7 +90,7 @@ class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
 const MeshTransmissionMaterial = /*#__PURE__*/React.forwardRef(({
   buffer,
   samples = 10,
-  resolution,
+  resolution = 1024,
   background,
   ...props
 }, fref) => {
@@ -102,9 +102,7 @@ const MeshTransmissionMaterial = /*#__PURE__*/React.forwardRef(({
     size,
     viewport
   } = useThree();
-  const fbo = useFBO(resolution, resolution, {
-    samples: 0
-  });
+  const fbo = useFBO(resolution);
   const config = React.useMemo(() => ({
     samples
   }), [samples]);