@react-three/drei 8.2.1 → 8.5.0

package/README.md

@@ -64,6 +64,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#gizmohelper">GizmoHelper</a></li>
           <li><a href="#effects">Effects</a></li>
           <li><a href="#gradienttexture">GradientTexture</a></li>
+          <li><a href="#edges">Edges</a></li>
           <li><a href="#useanimations">useAnimations</a></li>
         </ul>
         <li><a href="#shaders">Shaders</a></li>
@@ -105,6 +106,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#usegltf">useGLTF</a></li>
           <li><a href="#usefbx">useFBX</a></li>
           <li><a href="#usetexture">useTexture</a></li>
+          <li><a href="#usektx2">useKTX2</a></li>
           <li><a href="#usecubetexture">useCubeTexture</a></li>
         </ul>
         <li><a href="#performance">Performance</a></li>
@@ -309,7 +311,7 @@ You can listen and react to scroll with the `useScroll` hook which gives you use
   </Scroll>
 </ScrollControls>
 
-function Foo() {
+function Foo(props) {
   const ref = useRef()
   const data = useScroll()
   useFrame(() => {
@@ -345,6 +347,7 @@ Semi-OrbitControls with spring-physics, polar zoom and snap-back, for presentati
 ```jsx
 <PresentationControls
   global={false} // Spin globally or by dragging the model
+  cursor={true} // Whether to toggle cursor style on drag
   snap={false} // Snap-back to center (can also be a spring config)
   speed={1} // Speed factor
   zoom={1} // Zoom factor when half the polar-max is reached
@@ -575,6 +578,22 @@ A declarative THREE.Texture which attaches to "map" by default. You can use this
 </mesh>
 ```
 
+#### Edges
+
+Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/index.html?q=EdgesGeometry#api/en/geometries/EdgesGeometry). It pulls the geometry automatically from its parent, optionally you can ungroup it and give it a `geometry` prop. You can give it children, for instance a custom material.
+
+```jsx
+<mesh>
+  <boxGeometry />
+  <meshBasicMaterial />
+  <Edges
+    scale={1.1}
+    threshold={15} // Display edges only when the angle between two faces exceeds this value (default=15 degrees)
+    color="white"
+  />
+</mesh>
+```
+
 #### useAnimations
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-useanimations--use-animations-st)
@@ -1093,6 +1112,19 @@ const props = useTexture({
 return <meshStandardMaterial {...props} />
 ```
 
+#### useKTX2
+
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-ktx2--use-ktx-2-scene-st)
+
+A convenience hook that uses `useLoader` and `KTX2Loader`
+
+```jsx
+const texture = useKTX2(url)
+const [texture1, texture2] = useKTX2([texture1, texture2])
+
+return <meshStandardMaterial map={texture} />
+```
+
 #### useCubeTexture
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-cubetexture)
@@ -1543,6 +1575,8 @@ Adds a blinking shader-based starfield to your scene.
 
 #### Cloud
 
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-cloud--cloud-st) ![](https://img.shields.io/badge/-suspense-brightgreen)
+
 Particle based cloud.
 
 ```jsx

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("./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 o=i(e);exports.Cloud=function({opacity:e=.5,speed:i=.4,width:c=10,depth:u=1.5,segments:l=20,...d}){const m=o.useRef(),h=n.useTexture(s.CloudImage),p=o.useMemo((()=>[...new Array(l)].map(((e,r)=>({x:c/2-Math.random()*c,y:c/2-Math.random()*c,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})))),[c,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+=p[t].rotation,r.children[0].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,l/2*u],ref:m},p.map((({x:r,y:n,scale:s,density:i},c)=>o.createElement(t.Billboard,{key:c,position:[r,n,-c*u]},o.createElement(a.Plane,{scale:s,rotation:[0,0,0]},o.createElement("meshStandardMaterial",{map:h,transparent:!0,opacity:s/6*i*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");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 c=s(e);exports.Cloud=function({opacity:e=.5,speed:s=.4,width:i=10,depth:o=1.5,segments:u=20,...l}){const d=c.useRef(),h=n.useTexture("https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png"),m=c.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=d.current)?void 0:r.children.forEach(((r,t)=>{r.children[0].rotation.z+=m[t].rotation,r.children[0].scale.setScalar(m[t].scale+(1+Math.sin(e.clock.getElapsedTime()/10))/2*t/10)}))})),c.createElement("group",l,c.createElement("group",{position:[0,0,u/2*o],ref:d},m.map((({x:r,y:n,scale:s,density:i},u)=>c.createElement(t.Billboard,{key:u,position:[r,n,-u*o]},c.createElement(a.Plane,{scale:s,rotation:[0,0,0]},c.createElement("meshStandardMaterial",{map:h,transparent:!0,opacity:s/6*i*e,depthTest:!1})))))))};

package/core/Cloud.js

@@ -3,8 +3,8 @@ 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';
 
+const CLOUD_URL = 'https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png';
 function Cloud({
   opacity = 0.5,
   speed = 0.4,
@@ -14,7 +14,7 @@ function Cloud({
   ...props
 }) {
   const group = React.useRef();
-  const texture = useTexture(CloudImage);
+  const texture = useTexture(CLOUD_URL);
   const clouds = React.useMemo(() => [...new Array(segments)].map((_, index) => ({
     x: width / 2 - Math.random() * width,
     y: width / 2 - Math.random() * width,

package/core/Edges.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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)}var c=n(e),a=u(r),o=u(t);exports.Edges=function({userData:e,children:r,geometry:t,threshold:n=15,color:u="black",...l}){const s=a.useRef(null);return a.useLayoutEffect((()=>{const e=s.current.parent;if(e){const r=t||e.geometry;r===s.current.userData.currentGeom&&n===s.current.userData.currentThreshold||(s.current.userData.currentGeom=r,s.current.userData.currentThreshold=n,s.current.geometry=new o.EdgesGeometry(r,n))}})),a.createElement("lineSegments",c.default({ref:s,raycast:()=>null},l),r||a.createElement("lineBasicMaterial",{color:u}))};

package/core/Edges.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ReactThreeFiber } from '@react-three/fiber';
+declare type Props = JSX.IntrinsicElements['lineSegments'] & {
+    threshold?: number;
+    color?: ReactThreeFiber.Color;
+};
+export declare function Edges({ userData, children, geometry, threshold, color, ...props }: Props): JSX.Element;
+export {};

package/core/Edges.js

@@ -0,0 +1,35 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import * as THREE from 'three';
+
+function Edges({
+  userData,
+  children,
+  geometry,
+  threshold = 15,
+  color = 'black',
+  ...props
+}) {
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const parent = ref.current.parent;
+
+    if (parent) {
+      const geom = geometry || parent.geometry;
+
+      if (geom !== ref.current.userData.currentGeom || threshold !== ref.current.userData.currentThreshold) {
+        ref.current.userData.currentGeom = geom;
+        ref.current.userData.currentThreshold = threshold;
+        ref.current.geometry = new THREE.EdgesGeometry(geom, threshold);
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement("lineSegments", _extends({
+    ref: ref,
+    raycast: () => null
+  }, props), children ? children : /*#__PURE__*/React.createElement("lineBasicMaterial", {
+    color: color
+  }));
+}
+
+export { Edges };

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("./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}));
+"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,n,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

@@ -45,7 +45,7 @@ const FaceMaterial = ({
     context.fillStyle = textColor;
     context.fillText(faces[index].toUpperCase(), 64, 76);
     return new CanvasTexture(canvas);
-  }, [index, font, color, textColor, strokeColor]);
+  }, [index, faces, font, color, textColor, strokeColor]);
   return /*#__PURE__*/React.createElement("meshLambertMaterial", {
     map: texture,
     "map-anisotropy": gl.capabilities.getMaxAnisotropy() || 1,

package/core/Instances.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),a=require("react-merge-refs"),c=require("react-composer"),u=require("../helpers/Position.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 t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=o(e),l=s(t),f=s(r),d=o(a),m=o(c);let y,p;const x=f.createContext(null),b=new l.Matrix4,h=new l.Matrix4,g=new l.Matrix4,M=new l.Color,v=new l.Vector3,w=new l.Quaternion,j=new l.Vector3,A=f.forwardRef((({context:e,children:t,...r},a)=>{f.useMemo((()=>n.extend({Position:u.Position})),[]);const c=f.useRef(),{subscribe:o}=f.useContext(e||x);return f.useLayoutEffect((()=>o(c)),[]),f.createElement("position",i.default({ref:d.default([a,c])},r),t)})),E=f.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...c},u)=>{const[{context:o,instance:s}]=f.useState((()=>{const e=f.createContext(null);return{context:e,instance:f.forwardRef(((t,r)=>f.createElement(A,i.default({context:e},t,{ref:r}))))}})),m=f.useRef(null),[E,O]=f.useState([]),[[q,P]]=f.useState((()=>{const e=new Float32Array(16*r);for(y=0;y<r;y++)g.identity().toArray(e,16*y);return[e,new Float32Array([...new Array(3*r)].map((()=>1)))]}));f.useLayoutEffect((()=>{m.current.count=m.current.instanceMatrix.updateRange.count=m.current.instanceColor.updateRange.count=Math.min(r,void 0!==t?t:r,E.length)}),[E,t]),f.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let _=0;n.useFrame((()=>{if(a===1/0||_<a){for(m.current.updateMatrix(),m.current.updateMatrixWorld(),b.copy(m.current.matrixWorld).invert(),y=0;y<E.length;y++)p=E[y].current,p.matrixWorld.decompose(v,w,j),h.compose(v,w,j).premultiply(b),h.equals(g.fromArray(q,16*y))||(h.toArray(q,16*y),m.current.instanceMatrix.needsUpdate=!0),p.color.equals(M.fromArray(P,3*y))||(p.color.toArray(P,3*y),m.current.instanceColor.needsUpdate=!0);_++}}));const C=f.useMemo((()=>{const e={};for(y=0;y<E.length;y++){var t;Object.assign(e,null==(t=E[y].current)?void 0:t.__r3f.handlers)}return Object.keys(e).reduce(((e,t)=>({...e,[t]:e=>{var r,n,a;const c=null==(r=E[e.instanceId])?void 0:r.current;return null==c||null==(n=c.__r3f)||null==(a=n.handlers)?void 0:a[t]({...e,object:c})}})),{})}),[e,E]),R=f.useMemo((()=>({subscribe:e=>(O((t=>[...t,e])),()=>O((t=>t.filter((t=>t.current!==e.current)))))})),[]);return f.createElement("instancedMesh",i.default({matrixAutoUpdate:!1,ref:d.default([u,m]),args:[null,null,0]},C,c),f.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:q.length/16,array:q,itemSize:16,usage:l.DynamicDrawUsage}),f.createElement("instancedBufferAttribute",{attach:"instanceColor",count:P.length/3,array:P,itemSize:3,usage:l.DynamicDrawUsage}),"function"==typeof e?f.createElement(o.Provider,{value:R},e(s)):f.createElement(x.Provider,{value:R},e))}));exports.Instance=A,exports.Instances=E,exports.Merged=function({meshes:e,children:t,...r}){const n=Array.isArray(e);if(!n)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return f.createElement(m.default,{components:(n?e:Object.values(e)).map((({geometry:e,material:t})=>f.createElement(E,i.default({key:e.uuid,geometry:e,material:t},r))))},(r=>n?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{}))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),a=require("react-merge-refs"),c=require("react-composer"),u=require("../helpers/Position.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 n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=o(e),l=i(t),f=i(r),d=o(a),m=o(c);let y,p;const x=f.createContext(null),g=new l.Matrix4,b=new l.Matrix4,h=new l.Matrix4,M=new l.Color,w=new l.Vector3,A=new l.Quaternion,E=new l.Vector3,j=f.forwardRef((({context:e,children:t,...r},a)=>{f.useMemo((()=>n.extend({Position:u.Position})),[]);const c=f.useRef(),{subscribe:o,getParent:i}=f.useContext(e||x);return f.useLayoutEffect((()=>o(c)),[]),f.createElement("position",s.default({instance:i(),instanceKey:c,ref:d.default([a,c])},r),t)})),v=f.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...c},u)=>{const[{context:o,instance:i}]=f.useState((()=>{const e=f.createContext(null);return{context:e,instance:f.forwardRef(((t,r)=>f.createElement(j,s.default({context:e},t,{ref:r}))))}})),m=f.useRef(null),[v,O]=f.useState([]),[[P,q]]=f.useState((()=>{const e=new Float32Array(16*r);for(y=0;y<r;y++)h.identity().toArray(e,16*y);return[e,new Float32Array([...new Array(3*r)].map((()=>1)))]}));f.useLayoutEffect((()=>{m.current.count=m.current.instanceMatrix.updateRange.count=m.current.instanceColor.updateRange.count=Math.min(r,void 0!==t?t:r,v.length)}),[v,t]),f.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let C=0;n.useFrame((()=>{if(a===1/0||C<a){for(m.current.updateMatrix(),m.current.updateMatrixWorld(),g.copy(m.current.matrixWorld).invert(),y=0;y<v.length;y++)p=v[y].current,p.matrixWorld.decompose(w,A,E),b.compose(w,A,E).premultiply(g),b.equals(h.fromArray(P,16*y))||(b.toArray(P,16*y),m.current.instanceMatrix.needsUpdate=!0),p.color.equals(M.fromArray(q,3*y))||(p.color.toArray(q,3*y),m.current.instanceColor.needsUpdate=!0);C++}}));const R=f.useMemo((()=>({getParent:()=>m,subscribe:e=>(O((t=>[...t,e])),()=>O((t=>t.filter((t=>t.current!==e.current)))))})),[]);return f.createElement("instancedMesh",s.default({userData:{instances:v},matrixAutoUpdate:!1,ref:d.default([u,m]),args:[null,null,0],raycast:()=>null},c),f.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:P.length/16,array:P,itemSize:16,usage:l.DynamicDrawUsage}),f.createElement("instancedBufferAttribute",{attach:"instanceColor",count:q.length/3,array:q,itemSize:3,usage:l.DynamicDrawUsage}),"function"==typeof e?f.createElement(o.Provider,{value:R},e(i)):f.createElement(x.Provider,{value:R},e))}));exports.Instance=j,exports.Instances=v,exports.Merged=function({meshes:e,children:t,...r}){const n=Array.isArray(e);if(!n)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return f.createElement(m.default,{components:(n?e:Object.values(e)).map((({geometry:e,material:t})=>f.createElement(v,s.default({key:e.uuid,geometry:e,material:t},r))))},(r=>n?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{}))))};

package/core/Instances.d.ts

@@ -2,8 +2,18 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { Position } from '../helpers/Position';
 declare type Api = {
+    getParent: () => React.MutableRefObject<InstancedMesh>;
     subscribe: (ref: any) => void;
 };
+declare type InstancesProps = JSX.IntrinsicElements['instancedMesh'] & {
+    range?: number;
+    limit?: number;
+    frames?: number;
+};
+declare type InstancedMesh = Omit<THREE.InstancedMesh, 'instanceMatrix' | 'instanceColor'> & {
+    instanceMatrix: THREE.InstancedBufferAttribute;
+    instanceColor: THREE.InstancedBufferAttribute;
+};
 declare const Instance: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").Node<Position, typeof Position>, import("@react-three/fiber").NonFunctionKeys<{
     position?: import("@react-three/fiber").Vector3 | undefined;
     up?: import("@react-three/fiber").Vector3 | undefined;
@@ -24,30 +34,8 @@ declare const Instance: React.ForwardRefExoticComponent<Pick<Omit<import("@react
     dispose?: (() => void) | null | undefined;
 } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     context?: React.Context<Api> | undefined;
-}, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "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" | "removeFromParent" | "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 | "context"> & React.RefAttributes<unknown>>;
-declare const Instances: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").Node<THREE.InstancedMesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>, typeof THREE.InstancedMesh>, import("@react-three/fiber").NonFunctionKeys<{
-    position?: import("@react-three/fiber").Vector3 | undefined;
-    up?: import("@react-three/fiber").Vector3 | undefined;
-    scale?: import("@react-three/fiber").Vector3 | undefined;
-    rotation?: import("@react-three/fiber").Euler | undefined;
-    matrix?: import("@react-three/fiber").Matrix4 | undefined;
-    quaternion?: import("@react-three/fiber").Quaternion | undefined;
-    layers?: import("@react-three/fiber").Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-}>> & {
-    position?: import("@react-three/fiber").Vector3 | undefined;
-    up?: import("@react-three/fiber").Vector3 | undefined;
-    scale?: import("@react-three/fiber").Vector3 | undefined;
-    rotation?: import("@react-three/fiber").Euler | undefined;
-    matrix?: import("@react-three/fiber").Matrix4 | undefined;
-    quaternion?: import("@react-three/fiber").Quaternion | undefined;
-    layers?: import("@react-three/fiber").Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
-    range?: number | undefined;
-    limit?: number | undefined;
-    frames?: 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" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "range" | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "frames" | "instanceMatrix" | "count" | "instanceColor" | "isInstancedMesh" | "getColorAt" | "getMatrixAt" | "setColorAt" | "setMatrixAt" | "limit"> & React.RefAttributes<THREE.InstancedMesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+}, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "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" | "removeFromParent" | "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 | "geometry" | "context" | "instance" | "instanceKey"> & React.RefAttributes<unknown>>;
+declare const Instances: React.ForwardRefExoticComponent<Pick<InstancesProps, "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" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "range" | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "instanceMatrix" | "frames" | "count" | "instanceColor" | "isInstancedMesh" | "getColorAt" | "getMatrixAt" | "setColorAt" | "setMatrixAt" | "limit"> & React.RefAttributes<InstancedMesh>>;
 declare function Merged({ meshes, children, ...props }: {
     [x: string]: any;
     meshes: any;

package/core/Instances.js

@@ -25,10 +25,13 @@ const Instance = /*#__PURE__*/React.forwardRef(({
   }), []);
   const group = React.useRef();
   const {
-    subscribe
+    subscribe,
+    getParent
   } = React.useContext(context || globalContext);
   React.useLayoutEffect(() => subscribe(group), []);
   return /*#__PURE__*/React.createElement("position", _extends({
+    instance: getParent(),
+    instanceKey: group,
     ref: mergeRefs([ref, group])
   }, props), children);
 });
@@ -97,37 +100,22 @@ const Instances = /*#__PURE__*/React.forwardRef(({
       count++;
     }
   });
-  const events = React.useMemo(() => {
-    const events = {};
-
-    for (i = 0; i < instances.length; i++) {
-      var _instances$i$current;
-
-      Object.assign(events, (_instances$i$current = instances[i].current) == null ? void 0 : _instances$i$current.__r3f.handlers);
-    }
-
-    return Object.keys(events).reduce((prev, key) => ({ ...prev,
-      [key]: event => {
-        var _instances$event$inst, _r3f, _r3f$handlers;
-
-        const object = (_instances$event$inst = instances[event.instanceId]) == null ? void 0 : _instances$event$inst.current;
-        return object == null ? void 0 : (_r3f = object.__r3f) == null ? void 0 : (_r3f$handlers = _r3f.handlers) == null ? void 0 : _r3f$handlers[key]({ ...event,
-          object
-        });
-      }
-    }), {});
-  }, [children, instances]);
   const api = React.useMemo(() => ({
+    getParent: () => parentRef,
     subscribe: ref => {
       setInstances(instances => [...instances, ref]);
       return () => setInstances(instances => instances.filter(item => item.current !== ref.current));
     }
   }), []);
   return /*#__PURE__*/React.createElement("instancedMesh", _extends({
+    userData: {
+      instances
+    },
     matrixAutoUpdate: false,
     ref: mergeRefs([ref, parentRef]),
-    args: [null, null, 0]
-  }, events, props), /*#__PURE__*/React.createElement("instancedBufferAttribute", {
+    args: [null, null, 0],
+    raycast: () => null
+  }, props), /*#__PURE__*/React.createElement("instancedBufferAttribute", {
     attach: "instanceMatrix",
     count: matrices.length / 16,
     array: matrices,

package/core/MeshReflectorMaterial.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("react-merge-refs"),i=require("../materials/BlurPass.cjs.js"),o=require("../materials/MeshReflectorMaterial.cjs.js");function s(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("../materials/ConvolutionMaterial.cjs.js");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterialImpl:o.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:n=256,blur:o=[0,0],minDepthThreshold:s=.9,maxDepthThreshold:l=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,debug:f=0,distortion:x=1,mixContrast:M=1,distortionMap:T,...S},b)=>{const y=a.useThree((({gl:e})=>e)),w=a.useThree((({camera:e})=>e)),g=a.useThree((({scene:e})=>e)),R=(o=Array.isArray(o)?o:[o,o])[0]+o[1]>0,v=d.useRef(null),[j]=d.useState((()=>new r.Plane)),[B]=d.useState((()=>new r.Vector3)),[D]=d.useState((()=>new r.Vector3)),[_]=d.useState((()=>new r.Vector3)),[P]=d.useState((()=>new r.Matrix4)),[U]=d.useState((()=>new r.Vector3(0,0,-1))),[E]=d.useState((()=>new r.Vector4)),[O]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Vector3)),[V]=d.useState((()=>new r.Vector4)),[W]=d.useState((()=>new r.Matrix4)),[q]=d.useState((()=>new r.PerspectiveCamera)),I=d.useCallback((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;if(D.setFromMatrixPosition(t.matrixWorld),_.setFromMatrixPosition(w.matrixWorld),P.extractRotation(t.matrixWorld),B.set(0,0,1),B.applyMatrix4(P),O.subVectors(D,_),O.dot(B)>0)return;O.reflect(B).negate(),O.add(D),P.extractRotation(w.matrixWorld),U.set(0,0,-1),U.applyMatrix4(P),U.add(_),F.subVectors(D,U),F.reflect(B).negate(),F.add(D),q.position.copy(O),q.up.set(0,1,0),q.up.applyMatrix4(P),q.up.reflect(B),q.lookAt(F),q.far=w.far,q.updateMatrixWorld(),q.projectionMatrix.copy(w.projectionMatrix),W.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),W.multiply(q.projectionMatrix),W.multiply(q.matrixWorldInverse),W.multiply(t.matrixWorld),j.setFromNormalAndCoplanarPoint(B,D),j.applyMatrix4(q.matrixWorldInverse),E.set(j.normal.x,j.normal.y,j.normal.z,j.constant);const r=q.projectionMatrix;V.x=(Math.sign(E.x)+r.elements[8])/r.elements[0],V.y=(Math.sign(E.y)+r.elements[9])/r.elements[5],V.z=-1,V.w=(1+r.elements[10])/r.elements[14],E.multiplyScalar(2/E.dot(V)),r.elements[2]=E.x,r.elements[6]=E.y,r.elements[10]=E.z+1,r.elements[14]=E.w}),[]),[C,k,L,z]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,format:r.RGBFormat,encoding:y.outputEncoding},u=new r.WebGLRenderTarget(n,n,a);u.depthBuffer=!0,u.depthTexture=new r.DepthTexture(n,n),u.depthTexture.format=r.DepthFormat,u.depthTexture.type=r.UnsignedShortType;const d=new r.WebGLRenderTarget(n,n,a);return[u,d,new i.BlurPass({gl:y,resolution:n,width:o[0],height:o[1],minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m}),{mirror:h,textureMatrix:W,mixBlur:e,tDiffuse:u.texture,tDepth:u.depthTexture,tDiffuseBlur:d.texture,hasBlur:R,mixStrength:t,minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m,transparent:!0,debug:f,distortion:x,distortionMap:T,mixContrast:M,"defines-USE_BLUR":R?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":T?"":void 0}]}),[y,o,W,n,h,R,e,t,s,l,p,m,f,x,T,M]);return a.useFrame((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=y.xr.enabled,a=y.shadowMap.autoUpdate;I(),y.xr.enabled=!1,y.shadowMap.autoUpdate=!1,y.setRenderTarget(C),y.state.buffers.depth.setMask(!0),y.autoClear||y.clear(),y.render(g,q),R&&L.render(y,C,k),y.xr.enabled=r,y.shadowMap.autoUpdate=a,t.visible=!0,y.setRenderTarget(null)})),d.createElement("meshReflectorMaterialImpl",u.default({attach:"material",key:"key"+z["defines-USE_BLUR"]+z["defines-USE_DEPTH"]+z["defines-USE_DISTORTION"],ref:c.default([v,b])},z,S))}));exports.MeshReflectorMaterial=p;
+"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("react-merge-refs"),i=require("../materials/BlurPass.cjs.js"),o=require("../materials/MeshReflectorMaterial.cjs.js");function s(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("../materials/ConvolutionMaterial.cjs.js");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterialImpl:o.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:n=256,blur:o=[0,0],minDepthThreshold:s=.9,maxDepthThreshold:l=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,debug:f=0,distortion:x=1,mixContrast:M=1,distortionMap:T,...S},b)=>{const y=a.useThree((({gl:e})=>e)),w=a.useThree((({camera:e})=>e)),g=a.useThree((({scene:e})=>e)),R=(o=Array.isArray(o)?o:[o,o])[0]+o[1]>0,v=d.useRef(null),[j]=d.useState((()=>new r.Plane)),[B]=d.useState((()=>new r.Vector3)),[D]=d.useState((()=>new r.Vector3)),[_]=d.useState((()=>new r.Vector3)),[P]=d.useState((()=>new r.Matrix4)),[U]=d.useState((()=>new r.Vector3(0,0,-1))),[E]=d.useState((()=>new r.Vector4)),[O]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Vector3)),[V]=d.useState((()=>new r.Vector4)),[W]=d.useState((()=>new r.Matrix4)),[q]=d.useState((()=>new r.PerspectiveCamera)),I=d.useCallback((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;if(D.setFromMatrixPosition(t.matrixWorld),_.setFromMatrixPosition(w.matrixWorld),P.extractRotation(t.matrixWorld),B.set(0,0,1),B.applyMatrix4(P),O.subVectors(D,_),O.dot(B)>0)return;O.reflect(B).negate(),O.add(D),P.extractRotation(w.matrixWorld),U.set(0,0,-1),U.applyMatrix4(P),U.add(_),F.subVectors(D,U),F.reflect(B).negate(),F.add(D),q.position.copy(O),q.up.set(0,1,0),q.up.applyMatrix4(P),q.up.reflect(B),q.lookAt(F),q.far=w.far,q.updateMatrixWorld(),q.projectionMatrix.copy(w.projectionMatrix),W.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),W.multiply(q.projectionMatrix),W.multiply(q.matrixWorldInverse),W.multiply(t.matrixWorld),j.setFromNormalAndCoplanarPoint(B,D),j.applyMatrix4(q.matrixWorldInverse),E.set(j.normal.x,j.normal.y,j.normal.z,j.constant);const r=q.projectionMatrix;V.x=(Math.sign(E.x)+r.elements[8])/r.elements[0],V.y=(Math.sign(E.y)+r.elements[9])/r.elements[5],V.z=-1,V.w=(1+r.elements[10])/r.elements[14],E.multiplyScalar(2/E.dot(V)),r.elements[2]=E.x,r.elements[6]=E.y,r.elements[10]=E.z+1,r.elements[14]=E.w}),[w]),[C,k,L,z]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,format:r.RGBFormat,encoding:y.outputEncoding},u=new r.WebGLRenderTarget(n,n,a);u.depthBuffer=!0,u.depthTexture=new r.DepthTexture(n,n),u.depthTexture.format=r.DepthFormat,u.depthTexture.type=r.UnsignedShortType;const d=new r.WebGLRenderTarget(n,n,a);return[u,d,new i.BlurPass({gl:y,resolution:n,width:o[0],height:o[1],minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m}),{mirror:h,textureMatrix:W,mixBlur:e,tDiffuse:u.texture,tDepth:u.depthTexture,tDiffuseBlur:d.texture,hasBlur:R,mixStrength:t,minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m,transparent:!0,debug:f,distortion:x,distortionMap:T,mixContrast:M,"defines-USE_BLUR":R?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":T?"":void 0}]}),[y,o,W,n,h,R,e,t,s,l,p,m,f,x,T,M]);return a.useFrame((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=y.xr.enabled,a=y.shadowMap.autoUpdate;I(),y.xr.enabled=!1,y.shadowMap.autoUpdate=!1,y.setRenderTarget(C),y.state.buffers.depth.setMask(!0),y.autoClear||y.clear(),y.render(g,q),R&&L.render(y,C,k),y.xr.enabled=r,y.shadowMap.autoUpdate=a,t.visible=!0,y.setRenderTarget(null)})),d.createElement("meshReflectorMaterialImpl",u.default({attach:"material",key:"key"+z["defines-USE_BLUR"]+z["defines-USE_DEPTH"]+z["defines-USE_DISTORTION"],ref:c.default([v,b])},z,S))}));exports.MeshReflectorMaterial=p;

package/core/MeshReflectorMaterial.js

@@ -103,7 +103,7 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
     projectionMatrix.elements[6] = clipPlane.y;
     projectionMatrix.elements[10] = clipPlane.z + 1.0;
     projectionMatrix.elements[14] = clipPlane.w;
-  }, []);
+  }, [camera]);
   const [fbo1, fbo2, blurpass, reflectorProps] = React.useMemo(() => {
     const parameters = {
       minFilter: LinearFilter,

package/core/TransformControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("@react-three/fiber"),t=require("lodash.omit"),r=require("lodash.pick"),l=require("react"),u=require("three"),a=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var i=o(e),c=o(t),d=o(r),v=s(l),f=s(u);const m=v.forwardRef((({children:e,onChange:t,onMouseDown:r,onMouseUp:l,onObjectChange:u,object:o,...s},m)=>{const E=["enabled","axis","mode","translationSnap","rotationSnap","scaleSnap","space","size","showX","showY","showZ"],{camera:h,...b}=s,g=d.default(b,E),p=c.default(b,E),L=n.useThree((e=>e.controls)),j=n.useThree((({gl:e})=>e)),w=n.useThree((({camera:e})=>e)),O=n.useThree((({invalidate:e})=>e)),q=h||w,[y]=v.useState((()=>new a.TransformControls(q,j.domElement))),C=v.useRef();return v.useLayoutEffect((()=>{o?null==y||y.attach(o instanceof f.Object3D?o:o.current):null==y||y.attach(C.current)}),[o,e,y]),v.useEffect((()=>{if(L){const e=e=>L.enabled=!e.value;return y.addEventListener("dragging-changed",e),()=>y.removeEventListener("dragging-changed",e)}}),[y,L]),v.useEffect((()=>{const e=e=>{O(),t&&t(e)};return null==y||null==y.addEventListener||y.addEventListener("change",e),r&&(null==y||null==y.addEventListener||y.addEventListener("mouseDown",r)),l&&(null==y||null==y.addEventListener||y.addEventListener("mouseUp",l)),u&&(null==y||null==y.addEventListener||y.addEventListener("objectChange",u)),()=>{null==y||null==y.removeEventListener||y.removeEventListener("change",e),r&&(null==y||null==y.removeEventListener||y.removeEventListener("mouseDown",r)),l&&(null==y||null==y.removeEventListener||y.removeEventListener("mouseUp",l)),u&&(null==y||null==y.removeEventListener||y.removeEventListener("objectChange",u))}}),[t,r,l,u,y,O]),y?v.createElement(v.Fragment,null,v.createElement("primitive",i.default({ref:m,dispose:void 0,object:y},g)),v.createElement("group",i.default({ref:C},p),e)):null}));exports.TransformControls=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("@react-three/fiber"),t=require("lodash.omit"),r=require("lodash.pick"),l=require("react"),o=require("three"),u=require("three-stdlib");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var i=a(e),c=a(t),d=a(r),v=s(l),f=s(o);const m=v.forwardRef((({children:e,domElement:t,onChange:r,onMouseDown:l,onMouseUp:o,onObjectChange:a,object:s,...m},E)=>{const h=["enabled","axis","mode","translationSnap","rotationSnap","scaleSnap","space","size","showX","showY","showZ"],{camera:b,...g}=m,p=d.default(g,h),L=c.default(g,h),j=n.useThree((e=>e.controls)),w=n.useThree((({gl:e})=>e)),O=n.useThree((({camera:e})=>e)),q=n.useThree((({invalidate:e})=>e)),y=b||O,C=v.useMemo((()=>new u.TransformControls(y,t||w.domElement)),[y,t,w.domElement]),T=v.useRef();return v.useLayoutEffect((()=>{s?null==C||C.attach(s instanceof f.Object3D?s:s.current):null==C||C.attach(T.current)}),[s,e,C]),v.useEffect((()=>{if(j){const e=e=>j.enabled=!e.value;return C.addEventListener("dragging-changed",e),()=>C.removeEventListener("dragging-changed",e)}}),[C,j]),v.useEffect((()=>{const e=e=>{q(),r&&r(e)};return null==C||null==C.addEventListener||C.addEventListener("change",e),l&&(null==C||null==C.addEventListener||C.addEventListener("mouseDown",l)),o&&(null==C||null==C.addEventListener||C.addEventListener("mouseUp",o)),a&&(null==C||null==C.addEventListener||C.addEventListener("objectChange",a)),()=>{null==C||null==C.removeEventListener||C.removeEventListener("change",e),l&&(null==C||null==C.removeEventListener||C.removeEventListener("mouseDown",l)),o&&(null==C||null==C.removeEventListener||C.removeEventListener("mouseUp",o)),a&&(null==C||null==C.removeEventListener||C.removeEventListener("objectChange",a))}}),[r,l,o,a,C,q]),C?v.createElement(v.Fragment,null,v.createElement("primitive",i.default({ref:E,dispose:void 0,object:C},p)),v.createElement("group",i.default({ref:T},L),e)):null}));exports.TransformControls=m;

package/core/TransformControls.d.ts

@@ -6,6 +6,7 @@ export declare type TransformControlsProps = ReactThreeFiber.Object3DNode<Transf
     object?: THREE.Object3D | React.MutableRefObject<THREE.Object3D>;
     enabled?: boolean;
     axis?: string | null;
+    domElement?: HTMLElement;
     mode?: string;
     translationSnap?: number | null;
     rotationSnap?: number | null;
@@ -22,4 +23,4 @@ export declare type TransformControlsProps = ReactThreeFiber.Object3DNode<Transf
     onMouseUp?: (e?: THREE.Event) => void;
     onObjectChange?: (e?: THREE.Event) => void;
 };
-export declare const TransformControls: React.ForwardRefExoticComponent<Pick<TransformControlsProps, "object" | "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "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" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | "onMouseDown" | "onMouseUp" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "size" | "space" | "enabled" | "update" | "axis" | "setSize" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setScaleSnap" | "setSpace" | "onObjectChange" | "mode" | "translationSnap" | "rotationSnap" | "scaleSnap" | "showX" | "showY" | "showZ"> & React.RefAttributes<TransformControlsImpl<THREE.Camera>>>;
+export declare const TransformControls: React.ForwardRefExoticComponent<Pick<TransformControlsProps, "object" | "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "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" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | "onMouseDown" | "onMouseUp" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "size" | "space" | "enabled" | "update" | "axis" | "setSize" | "domElement" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setScaleSnap" | "setSpace" | "onObjectChange" | "mode" | "translationSnap" | "rotationSnap" | "scaleSnap" | "showX" | "showY" | "showZ"> & React.RefAttributes<TransformControlsImpl<THREE.Camera>>>;

package/core/TransformControls.js

@@ -8,6 +8,7 @@ import { TransformControls as TransformControls$1 } from 'three-stdlib';
 
 const TransformControls = /*#__PURE__*/React.forwardRef(({
   children,
+  domElement,
   onChange,
   onMouseDown,
   onMouseUp,
@@ -34,7 +35,7 @@ const TransformControls = /*#__PURE__*/React.forwardRef(({
     invalidate
   }) => invalidate);
   const explCamera = camera || defaultCamera;
-  const [controls] = React.useState(() => new TransformControls$1(explCamera, gl.domElement));
+  const controls = React.useMemo(() => new TransformControls$1(explCamera, domElement || gl.domElement), [explCamera, domElement, gl.domElement]);
   const group = React.useRef();
   React.useLayoutEffect(() => {
     if (object) controls == null ? void 0 : controls.attach(object instanceof THREE.Object3D ? object : object.current);else controls == null ? void 0 : controls.attach(group.current);

package/core/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Effects.cjs.js"),a=require("./GradientTexture.cjs.js"),c=require("./Image.cjs.js"),j=require("./OrthographicCamera.cjs.js"),n=require("./PerspectiveCamera.cjs.js"),p=require("./CubeCamera.cjs.js"),l=require("./DeviceOrientationControls.cjs.js"),x=require("./FlyControls.cjs.js"),q=require("./MapControls.cjs.js"),d=require("./OrbitControls.cjs.js"),h=require("./TrackballControls.cjs.js"),C=require("./ArcballControls.cjs.js"),m=require("./TransformControls.cjs.js"),b=require("./PointerLockControls.cjs.js"),B=require("./FirstPersonControls.cjs.js"),M=require("./GizmoHelper.cjs.js"),P=require("./GizmoViewcube.cjs.js"),S=require("./GizmoViewport.cjs.js"),f=require("./useCubeTexture.cjs.js"),T=require("./useFBX.cjs.js"),g=require("./useGLTF.cjs.js"),v=require("./useProgress.cjs.js"),L=require("./useTexture.cjs.js"),A=require("./Stats.cjs.js"),G=require("./useDepthBuffer.cjs.js"),k=require("./useAspect.cjs.js"),D=require("./useCamera.cjs.js"),F=require("./useDetectGPU.cjs.js"),w=require("./useHelper.cjs.js"),z=require("./useBVH.cjs.js"),I=require("./useContextBridge.cjs.js"),O=require("./useAnimations.cjs.js"),E=require("./useFBO.cjs.js"),R=require("./useIntersect.cjs.js"),y=require("./CurveModifier.cjs.js"),H=require("./MeshDistortMaterial.cjs.js"),V=require("./MeshWobbleMaterial.cjs.js"),Q=require("./MeshReflectorMaterial.cjs.js"),W=require("./PointMaterial.cjs.js"),N=require("./shaderMaterial.cjs.js"),U=require("./softShadows.cjs.js"),X=require("./shapes.cjs.js"),K=require("./RoundedBox.cjs.js"),_=require("./ScreenQuad.cjs.js"),J=require("./Center.cjs.js"),Y=require("./Bounds.cjs.js"),Z=require("./CameraShake.cjs.js"),$=require("./Float.cjs.js"),ee=require("./Stage.cjs.js"),re=require("./Backdrop.cjs.js"),se=require("./Shadow.cjs.js"),te=require("./ContactShadows.cjs.js"),oe=require("./Reflector.cjs.js"),ie=require("./SpotLight.cjs.js"),ue=require("./Environment.cjs.js"),ae=require("./Sky.cjs.js"),ce=require("./Stars.cjs.js"),je=require("./Cloud.cjs.js"),ne=require("./useMatcapTexture.cjs.js"),pe=require("./useNormalTexture.cjs.js"),le=require("./Points.cjs.js"),xe=require("./Instances.cjs.js"),qe=require("./Segments.cjs.js"),de=require("./Detailed.cjs.js"),he=require("./Preload.cjs.js"),Ce=require("./BakeShadows.cjs.js"),me=require("./meshBounds.cjs.js"),be=require("./AdaptiveDpr.cjs.js"),Be=require("./AdaptiveEvents.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("lodash.omit"),require("lodash.pick"),require("zustand"),require("three/examples/js/libs/stats.min"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("use-asset"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../assets/cloud.base64.cjs.js"),require("../helpers/matcap-assets.cjs.js"),require("../helpers/normal-assets.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.Line=t.Line,exports.PositionalAudio=o.PositionalAudio,exports.Text=i.Text,exports.Effects=u.Effects,exports.isWebGL2Available=u.isWebGL2Available,exports.GradientTexture=a.GradientTexture,exports.Image=c.Image,exports.OrthographicCamera=j.OrthographicCamera,exports.PerspectiveCamera=n.PerspectiveCamera,exports.CubeCamera=p.CubeCamera,exports.DeviceOrientationControls=l.DeviceOrientationControls,exports.FlyControls=x.FlyControls,exports.MapControls=q.MapControls,exports.OrbitControls=d.OrbitControls,exports.TrackballControls=h.TrackballControls,exports.ArcballControls=C.ArcballControls,exports.TransformControls=m.TransformControls,exports.PointerLockControls=b.PointerLockControls,exports.FirstPersonControls=B.FirstPersonControls,exports.GizmoHelper=M.GizmoHelper,exports.useGizmoContext=M.useGizmoContext,exports.GizmoViewcube=P.GizmoViewcube,exports.GizmoViewport=S.GizmoViewport,exports.useCubeTexture=f.useCubeTexture,exports.useFBX=T.useFBX,exports.useGLTF=g.useGLTF,exports.useProgress=v.useProgress,exports.IsObject=L.IsObject,exports.useTexture=L.useTexture,exports.Stats=A.Stats,exports.useDepthBuffer=G.useDepthBuffer,exports.useAspect=k.useAspect,exports.useCamera=D.useCamera,exports.useDetectGPU=F.useDetectGPU,exports.useHelper=w.useHelper,exports.useBVH=z.useBVH,exports.useContextBridge=I.useContextBridge,exports.useAnimations=O.useAnimations,exports.useFBO=E.useFBO,exports.useIntersect=R.useIntersect,exports.CurveModifier=y.CurveModifier,exports.MeshDistortMaterial=H.MeshDistortMaterial,exports.MeshWobbleMaterial=V.MeshWobbleMaterial,exports.MeshReflectorMaterial=Q.MeshReflectorMaterial,exports.PointMaterial=W.PointMaterial,exports.PointMaterialImpl=W.PointMaterialImpl,exports.shaderMaterial=N.shaderMaterial,exports.softShadows=U.softShadows,exports.Box=X.Box,exports.Circle=X.Circle,exports.Cone=X.Cone,exports.Cylinder=X.Cylinder,exports.Dodecahedron=X.Dodecahedron,exports.Extrude=X.Extrude,exports.Icosahedron=X.Icosahedron,exports.Lathe=X.Lathe,exports.Octahedron=X.Octahedron,exports.Plane=X.Plane,exports.Polyhedron=X.Polyhedron,exports.Ring=X.Ring,exports.Sphere=X.Sphere,exports.Tetrahedron=X.Tetrahedron,exports.Torus=X.Torus,exports.TorusKnot=X.TorusKnot,exports.Tube=X.Tube,exports.RoundedBox=K.RoundedBox,exports.ScreenQuad=_.ScreenQuad,exports.Center=J.Center,exports.Bounds=Y.Bounds,exports.useBounds=Y.useBounds,exports.CameraShake=Z.CameraShake,exports.Float=$.Float,exports.Stage=ee.Stage,exports.Backdrop=re.Backdrop,exports.Shadow=se.Shadow,exports.ContactShadows=te.ContactShadows,exports.Reflector=oe.Reflector,exports.SpotLight=ie.SpotLight,exports.Environment=ue.Environment,exports.Sky=ae.Sky,exports.calcPosFromAngles=ae.calcPosFromAngles,exports.Stars=ce.Stars,exports.Cloud=je.Cloud,exports.useMatcapTexture=ne.useMatcapTexture,exports.useNormalTexture=pe.useNormalTexture,exports.Point=le.Point,exports.Points=le.Points,exports.PointsBuffer=le.PointsBuffer,exports.Instance=xe.Instance,exports.Instances=xe.Instances,exports.Merged=xe.Merged,exports.Segment=qe.Segment,exports.Segments=qe.Segments,exports.Detailed=de.Detailed,exports.Preload=he.Preload,exports.BakeShadows=Ce.BakeShadows,exports.meshBounds=me.meshBounds,exports.AdaptiveDpr=be.AdaptiveDpr,exports.AdaptiveEvents=Be.AdaptiveEvents;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Effects.cjs.js"),a=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),c=require("./Edges.cjs.js"),n=require("./OrthographicCamera.cjs.js"),p=require("./PerspectiveCamera.cjs.js"),l=require("./CubeCamera.cjs.js"),x=require("./DeviceOrientationControls.cjs.js"),q=require("./FlyControls.cjs.js"),d=require("./MapControls.cjs.js"),C=require("./OrbitControls.cjs.js"),h=require("./TrackballControls.cjs.js"),m=require("./ArcballControls.cjs.js"),B=require("./TransformControls.cjs.js"),b=require("./PointerLockControls.cjs.js"),M=require("./FirstPersonControls.cjs.js"),P=require("./GizmoHelper.cjs.js"),S=require("./GizmoViewcube.cjs.js"),f=require("./GizmoViewport.cjs.js"),T=require("./useCubeTexture.cjs.js"),g=require("./useFBX.cjs.js"),v=require("./useGLTF.cjs.js"),L=require("./useProgress.cjs.js"),A=require("./useTexture.cjs.js"),G=require("./useKTX2.cjs.js"),k=require("./Stats.cjs.js"),D=require("./useDepthBuffer.cjs.js"),F=require("./useAspect.cjs.js"),w=require("./useCamera.cjs.js"),z=require("./useDetectGPU.cjs.js"),I=require("./useHelper.cjs.js"),O=require("./useBVH.cjs.js"),E=require("./useContextBridge.cjs.js"),R=require("./useAnimations.cjs.js"),y=require("./useFBO.cjs.js"),H=require("./useIntersect.cjs.js"),V=require("./CurveModifier.cjs.js"),Q=require("./MeshDistortMaterial.cjs.js"),X=require("./MeshWobbleMaterial.cjs.js"),K=require("./MeshReflectorMaterial.cjs.js"),W=require("./PointMaterial.cjs.js"),N=require("./shaderMaterial.cjs.js"),U=require("./softShadows.cjs.js"),_=require("./shapes.cjs.js"),J=require("./RoundedBox.cjs.js"),Y=require("./ScreenQuad.cjs.js"),Z=require("./Center.cjs.js"),$=require("./Bounds.cjs.js"),ee=require("./CameraShake.cjs.js"),re=require("./Float.cjs.js"),se=require("./Stage.cjs.js"),te=require("./Backdrop.cjs.js"),oe=require("./Shadow.cjs.js"),ie=require("./ContactShadows.cjs.js"),ue=require("./Reflector.cjs.js"),ae=require("./SpotLight.cjs.js"),je=require("./Environment.cjs.js"),ce=require("./Sky.cjs.js"),ne=require("./Stars.cjs.js"),pe=require("./Cloud.cjs.js"),le=require("./useMatcapTexture.cjs.js"),xe=require("./useNormalTexture.cjs.js"),qe=require("./Points.cjs.js"),de=require("./Instances.cjs.js"),Ce=require("./Segments.cjs.js"),he=require("./Detailed.cjs.js"),me=require("./Preload.cjs.js"),Be=require("./BakeShadows.cjs.js"),be=require("./meshBounds.cjs.js"),Me=require("./AdaptiveDpr.cjs.js"),Pe=require("./AdaptiveEvents.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("lodash.omit"),require("lodash.pick"),require("zustand"),require("three/examples/js/libs/stats.min"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("use-asset"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.Line=t.Line,exports.PositionalAudio=o.PositionalAudio,exports.Text=i.Text,exports.Effects=u.Effects,exports.isWebGL2Available=u.isWebGL2Available,exports.GradientTexture=a.GradientTexture,exports.Image=j.Image,exports.Edges=c.Edges,exports.OrthographicCamera=n.OrthographicCamera,exports.PerspectiveCamera=p.PerspectiveCamera,exports.CubeCamera=l.CubeCamera,exports.DeviceOrientationControls=x.DeviceOrientationControls,exports.FlyControls=q.FlyControls,exports.MapControls=d.MapControls,exports.OrbitControls=C.OrbitControls,exports.TrackballControls=h.TrackballControls,exports.ArcballControls=m.ArcballControls,exports.TransformControls=B.TransformControls,exports.PointerLockControls=b.PointerLockControls,exports.FirstPersonControls=M.FirstPersonControls,exports.GizmoHelper=P.GizmoHelper,exports.useGizmoContext=P.useGizmoContext,exports.GizmoViewcube=S.GizmoViewcube,exports.GizmoViewport=f.GizmoViewport,exports.useCubeTexture=T.useCubeTexture,exports.useFBX=g.useFBX,exports.useGLTF=v.useGLTF,exports.useProgress=L.useProgress,exports.IsObject=A.IsObject,exports.useTexture=A.useTexture,exports.useKTX2=G.useKTX2,exports.Stats=k.Stats,exports.useDepthBuffer=D.useDepthBuffer,exports.useAspect=F.useAspect,exports.useCamera=w.useCamera,exports.useDetectGPU=z.useDetectGPU,exports.useHelper=I.useHelper,exports.useBVH=O.useBVH,exports.useContextBridge=E.useContextBridge,exports.useAnimations=R.useAnimations,exports.useFBO=y.useFBO,exports.useIntersect=H.useIntersect,exports.CurveModifier=V.CurveModifier,exports.MeshDistortMaterial=Q.MeshDistortMaterial,exports.MeshWobbleMaterial=X.MeshWobbleMaterial,exports.MeshReflectorMaterial=K.MeshReflectorMaterial,exports.PointMaterial=W.PointMaterial,exports.PointMaterialImpl=W.PointMaterialImpl,exports.shaderMaterial=N.shaderMaterial,exports.softShadows=U.softShadows,exports.Box=_.Box,exports.Circle=_.Circle,exports.Cone=_.Cone,exports.Cylinder=_.Cylinder,exports.Dodecahedron=_.Dodecahedron,exports.Extrude=_.Extrude,exports.Icosahedron=_.Icosahedron,exports.Lathe=_.Lathe,exports.Octahedron=_.Octahedron,exports.Plane=_.Plane,exports.Polyhedron=_.Polyhedron,exports.Ring=_.Ring,exports.Sphere=_.Sphere,exports.Tetrahedron=_.Tetrahedron,exports.Torus=_.Torus,exports.TorusKnot=_.TorusKnot,exports.Tube=_.Tube,exports.RoundedBox=J.RoundedBox,exports.ScreenQuad=Y.ScreenQuad,exports.Center=Z.Center,exports.Bounds=$.Bounds,exports.useBounds=$.useBounds,exports.CameraShake=ee.CameraShake,exports.Float=re.Float,exports.Stage=se.Stage,exports.Backdrop=te.Backdrop,exports.Shadow=oe.Shadow,exports.ContactShadows=ie.ContactShadows,exports.Reflector=ue.Reflector,exports.SpotLight=ae.SpotLight,exports.Environment=je.Environment,exports.Sky=ce.Sky,exports.calcPosFromAngles=ce.calcPosFromAngles,exports.Stars=ne.Stars,exports.Cloud=pe.Cloud,exports.useMatcapTexture=le.useMatcapTexture,exports.useNormalTexture=xe.useNormalTexture,exports.Point=qe.Point,exports.Points=qe.Points,exports.PointsBuffer=qe.PointsBuffer,exports.Instance=de.Instance,exports.Instances=de.Instances,exports.Merged=de.Merged,exports.Segment=Ce.Segment,exports.Segments=Ce.Segments,exports.Detailed=he.Detailed,exports.Preload=me.Preload,exports.BakeShadows=Be.BakeShadows,exports.meshBounds=be.meshBounds,exports.AdaptiveDpr=Me.AdaptiveDpr,exports.AdaptiveEvents=Pe.AdaptiveEvents;

package/core/index.d.ts

@@ -7,6 +7,7 @@ export * from './Text';
 export * from './Effects';
 export * from './GradientTexture';
 export * from './Image';
+export * from './Edges';
 export * from './OrthographicCamera';
 export * from './PerspectiveCamera';
 export * from './CubeCamera';
@@ -27,6 +28,7 @@ export * from './useFBX';
 export * from './useGLTF';
 export * from './useProgress';
 export * from './useTexture';
+export * from './useKTX2';
 export * from './Stats';
 export * from './useDepthBuffer';
 export * from './useAspect';

package/core/index.js

@@ -7,6 +7,7 @@ export { Text } from './Text.js';
 export { Effects, isWebGL2Available } from './Effects.js';
 export { GradientTexture } from './GradientTexture.js';
 export { Image } from './Image.js';
+export { Edges } from './Edges.js';
 export { OrthographicCamera } from './OrthographicCamera.js';
 export { PerspectiveCamera } from './PerspectiveCamera.js';
 export { CubeCamera } from './CubeCamera.js';
@@ -27,6 +28,7 @@ export { useFBX } from './useFBX.js';
 export { useGLTF } from './useGLTF.js';
 export { useProgress } from './useProgress.js';
 export { IsObject, useTexture } from './useTexture.js';
+export { useKTX2 } from './useKTX2.js';
 export { Stats } from './Stats.js';
 export { useDepthBuffer } from './useDepthBuffer.js';
 export { useAspect } from './useAspect.js';
@@ -93,8 +95,5 @@ import '../materials/ConvolutionMaterial.js';
 import '../materials/MeshReflectorMaterial.js';
 import '../helpers/environment-assets.js';
 import '../materials/SpotLightMaterial.js';
-import '../assets/cloud.base64.js';
-import '../helpers/matcap-assets.js';
-import '../helpers/normal-assets.js';
 import '../helpers/Position.js';
 import 'react-composer';

package/core/useKTX2.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),r=require("react"),s=require("three-stdlib"),t=require("./useTexture.cjs.js");require("three");const a="https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master";function c(c,u=`${a}/basis/`){const o=e.useThree((e=>e.gl)),i=e.useLoader(s.KTX2Loader,t.IsObject(c)?Object.values(c):c,(e=>{e.detectSupport(o),e.setTranscoderPath(u)}));if(r.useEffect((()=>{(Array.isArray(i)?i:[i]).forEach(o.initTexture)}),[o,i]),t.IsObject(c)){const e=Object.keys(c),r={};return e.forEach((s=>Object.assign(r,{[s]:i[e.indexOf(s)]}))),r}return i}c.preload=(r,t=`${a}/basis/`)=>e.useLoader.preload(s.KTX2Loader,r,(e=>{e.setTranscoderPath(t)})),c.clear=r=>e.useLoader.clear(s.KTX2Loader,r),exports.useKTX2=c;

package/core/useKTX2.d.ts

@@ -0,0 +1,8 @@
+import { Texture } from 'three';
+export declare function useKTX2<Url extends string[] | string | Record<string, string>>(input: Url, basisPath?: string): Url extends any[] ? Texture[] : Url extends object ? {
+    [key in keyof Url]: Texture;
+} : Texture;
+export declare namespace useKTX2 {
+    var preload: (url: string, basisPath?: string) => undefined;
+    var clear: (input: string | string[]) => any;
+}

package/core/useKTX2.js

@@ -0,0 +1,39 @@
+import { useThree, useLoader } from '@react-three/fiber';
+import { useEffect } from 'react';
+import { KTX2Loader } from 'three-stdlib';
+import { IsObject } from './useTexture.js';
+
+const cdn = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master';
+function useKTX2(input, basisPath = `${cdn}/basis/`) {
+  const gl = useThree(state => state.gl);
+  const textures = useLoader(KTX2Loader, IsObject(input) ? Object.values(input) : input, loader => {
+    loader.detectSupport(gl);
+    loader.setTranscoderPath(basisPath);
+  }); // https://github.com/mrdoob/three.js/issues/22696
+  // Upload the texture to the GPU immediately instead of waiting for the first render
+
+  useEffect(() => {
+    const array = Array.isArray(textures) ? textures : [textures];
+    array.forEach(gl.initTexture);
+  }, [gl, textures]);
+
+  if (IsObject(input)) {
+    const keys = Object.keys(input);
+    const keyed = {};
+    keys.forEach(key => Object.assign(keyed, {
+      [key]: textures[keys.indexOf(key)]
+    }));
+    return keyed;
+  } else {
+    return textures;
+  }
+}
+
+useKTX2.preload = (url, basisPath = `${cdn}/basis/`) => useLoader.preload(KTX2Loader, url, loader => {
+  loader.setTranscoderPath(basisPath);
+}); // @ts-expect-error new in r3f 7.0.5
+
+
+useKTX2.clear = input => useLoader.clear(KTX2Loader, input);
+
+export { useKTX2 };

package/core/useMatcapTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./useTexture.cjs.js"),r=require("../helpers/matcap-assets.cjs.js");function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var c=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,c.get?c:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("three"),require("@react-three/fiber");var a=c(e);const u=r.matcapList[0];exports.useMatcapTexture=function(e=0,c=1024){const s=a.useMemo((()=>Object.keys(r.matcapList).length),[]),n=`https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d/${c}/${`${a.useMemo((()=>"string"==typeof e?e:"number"==typeof e?r.matcapList[e]:null),[e])||u}${function(e){switch(e){case 64:return"-64px";case 128:return"-128px";case 256:return"-256px";case 512:return"-512px";default:return""}}(c)}.png`}`;return[t.useTexture(n),n,s]};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./useTexture.cjs.js"),r=require("use-asset");function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("three"),require("@react-three/fiber");var u=s(e);exports.useMatcapTexture=function(e=0,s=1024){const a=r.useAsset((()=>new Promise((async e=>{e(await fetch("https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json").then((e=>e.json())))}))),"matcapList"),n=a[0],c=u.useMemo((()=>Object.keys(a).length),[]),i=`https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d/${s}/${`${u.useMemo((()=>"string"==typeof e?e:"number"==typeof e?a[e]:null),[e])||n}${function(e){switch(e){case 64:return"-64px";case 128:return"-128px";case 256:return"-256px";case 512:return"-512px";default:return""}}(s)}.png`}`;return[t.useTexture(i),i,c]};