@react-three/drei 8.3.0 → 8.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -64,6 +64,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
64
64
  <li><a href="#gizmohelper">GizmoHelper</a></li>
65
65
  <li><a href="#effects">Effects</a></li>
66
66
  <li><a href="#gradienttexture">GradientTexture</a></li>
67
+ <li><a href="#edges">Edges</a></li>
67
68
  <li><a href="#useanimations">useAnimations</a></li>
68
69
  </ul>
69
70
  <li><a href="#shaders">Shaders</a></li>
@@ -87,6 +88,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
87
88
  <ul>
88
89
  <li><a href="#html">Html</a></li>
89
90
  <li><a href="#cycleraycast">CycleRaycast</a></li>
91
+ <li><a href="#select">Select</a></li>
90
92
  <li><a href="#stats">Stats</a></li>
91
93
  <li><a href="#usedepthbuffer">useDepthBuffer</a></li>
92
94
  <li><a href="#usecontextbridge">useContextBridge</a></li>
@@ -105,6 +107,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
105
107
  <li><a href="#usegltf">useGLTF</a></li>
106
108
  <li><a href="#usefbx">useFBX</a></li>
107
109
  <li><a href="#usetexture">useTexture</a></li>
110
+ <li><a href="#usektx2">useKTX2</a></li>
108
111
  <li><a href="#usecubetexture">useCubeTexture</a></li>
109
112
  </ul>
110
113
  <li><a href="#performance">Performance</a></li>
@@ -309,7 +312,7 @@ You can listen and react to scroll with the `useScroll` hook which gives you use
309
312
  </Scroll>
310
313
  </ScrollControls>
311
314
 
312
- function Foo() {
315
+ function Foo(props) {
313
316
  const ref = useRef()
314
317
  const data = useScroll()
315
318
  useFrame(() => {
@@ -345,6 +348,7 @@ Semi-OrbitControls with spring-physics, polar zoom and snap-back, for presentati
345
348
  ```jsx
346
349
  <PresentationControls
347
350
  global={false} // Spin globally or by dragging the model
351
+ cursor={true} // Whether to toggle cursor style on drag
348
352
  snap={false} // Snap-back to center (can also be a spring config)
349
353
  speed={1} // Speed factor
350
354
  zoom={1} // Zoom factor when half the polar-max is reached
@@ -575,6 +579,22 @@ A declarative THREE.Texture which attaches to "map" by default. You can use this
575
579
  </mesh>
576
580
  ```
577
581
 
582
+ #### Edges
583
+
584
+ 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.
585
+
586
+ ```jsx
587
+ <mesh>
588
+ <boxGeometry />
589
+ <meshBasicMaterial />
590
+ <Edges
591
+ scale={1.1}
592
+ threshold={15} // Display edges only when the angle between two faces exceeds this value (default=15 degrees)
593
+ color="white"
594
+ />
595
+ </mesh>
596
+ ```
597
+
578
598
  #### useAnimations
579
599
 
580
600
  [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-useanimations--use-animations-st)
@@ -850,6 +870,20 @@ For this to work properly your event handler have to call `event.stopPropagation
850
870
  />
851
871
  ```
852
872
 
873
+ #### Select
874
+
875
+ This component allows you to select/unselect objects by clicking on them. It keeps track of the currently selected objects and can select multiple objects (with the shift key). Nested components can request the current selection (which is always an array) with the `useSelect` hook.
876
+
877
+ ```jsx
878
+ <Select multiple onChange={console.log}>
879
+ <Foo />
880
+ <Bar />
881
+ </Select>
882
+
883
+ function Foo() {
884
+ const selected = useSelect()
885
+ ```
886
+
853
887
  #### Stats
854
888
 
855
889
  [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-stats--default-story)
@@ -1093,6 +1127,19 @@ const props = useTexture({
1093
1127
  return <meshStandardMaterial {...props} />
1094
1128
  ```
1095
1129
 
1130
+ #### useKTX2
1131
+
1132
+ [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-ktx2--use-ktx-2-scene-st)
1133
+
1134
+ A convenience hook that uses `useLoader` and `KTX2Loader`
1135
+
1136
+ ```jsx
1137
+ const texture = useKTX2(url)
1138
+ const [texture1, texture2] = useKTX2([texture1, texture2])
1139
+
1140
+ return <meshStandardMaterial map={texture} />
1141
+ ```
1142
+
1096
1143
  #### useCubeTexture
1097
1144
 
1098
1145
  [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-cubetexture)
@@ -0,0 +1 @@
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}))};
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ import { ReactThreeFiber } from '@react-three/fiber';
3
+ declare type Props = JSX.IntrinsicElements['lineSegments'] & {
4
+ threshold?: number;
5
+ color?: ReactThreeFiber.Color;
6
+ };
7
+ export declare function Edges({ userData, children, geometry, threshold, color, ...props }: Props): JSX.Element;
8
+ export {};
package/core/Edges.js ADDED
@@ -0,0 +1,35 @@
1
+ import _extends from '@babel/runtime/helpers/esm/extends';
2
+ import * as React from 'react';
3
+ import * as THREE from 'three';
4
+
5
+ function Edges({
6
+ userData,
7
+ children,
8
+ geometry,
9
+ threshold = 15,
10
+ color = 'black',
11
+ ...props
12
+ }) {
13
+ const ref = React.useRef(null);
14
+ React.useLayoutEffect(() => {
15
+ const parent = ref.current.parent;
16
+
17
+ if (parent) {
18
+ const geom = geometry || parent.geometry;
19
+
20
+ if (geom !== ref.current.userData.currentGeom || threshold !== ref.current.userData.currentThreshold) {
21
+ ref.current.userData.currentGeom = geom;
22
+ ref.current.userData.currentThreshold = threshold;
23
+ ref.current.geometry = new THREE.EdgesGeometry(geom, threshold);
24
+ }
25
+ }
26
+ });
27
+ return /*#__PURE__*/React.createElement("lineSegments", _extends({
28
+ ref: ref,
29
+ raycast: () => null
30
+ }, props), children ? children : /*#__PURE__*/React.createElement("lineBasicMaterial", {
31
+ color: color
32
+ }));
33
+ }
34
+
35
+ export { Edges };
@@ -1 +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}));
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,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}));
@@ -45,7 +45,7 @@ const FaceMaterial = ({
45
45
  context.fillStyle = textColor;
46
46
  context.fillText(faces[index].toUpperCase(), 64, 76);
47
47
  return new CanvasTexture(canvas);
48
- }, [index, font, color, textColor, strokeColor]);
48
+ }, [index, faces, font, color, textColor, strokeColor]);
49
49
  return /*#__PURE__*/React.createElement("meshLambertMaterial", {
50
50
  map: texture,
51
51
  "map-anisotropy": gl.capabilities.getMaxAnisotropy() || 1,
@@ -1 +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]})),{}))))};
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 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]})),{}))))};
@@ -2,8 +2,18 @@ import * as THREE from 'three';
2
2
  import * as React from 'react';
3
3
  import { Position } from '../helpers/Position';
4
4
  declare type Api = {
5
+ getParent: () => React.MutableRefObject<InstancedMesh>;
5
6
  subscribe: (ref: any) => void;
6
7
  };
8
+ declare type InstancesProps = JSX.IntrinsicElements['instancedMesh'] & {
9
+ range?: number;
10
+ limit?: number;
11
+ frames?: number;
12
+ };
13
+ declare type InstancedMesh = Omit<THREE.InstancedMesh, 'instanceMatrix' | 'instanceColor'> & {
14
+ instanceMatrix: THREE.InstancedBufferAttribute;
15
+ instanceColor: THREE.InstancedBufferAttribute;
16
+ };
7
17
  declare const Instance: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").Node<Position, typeof Position>, import("@react-three/fiber").NonFunctionKeys<{
8
18
  position?: import("@react-three/fiber").Vector3 | undefined;
9
19
  up?: import("@react-three/fiber").Vector3 | undefined;
@@ -24,30 +34,8 @@ declare const Instance: React.ForwardRefExoticComponent<Pick<Omit<import("@react
24
34
  dispose?: (() => void) | null | undefined;
25
35
  } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
26
36
  context?: React.Context<Api> | undefined;
27
- }, "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>>;
28
- 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<{
29
- position?: import("@react-three/fiber").Vector3 | undefined;
30
- up?: import("@react-three/fiber").Vector3 | undefined;
31
- scale?: import("@react-three/fiber").Vector3 | undefined;
32
- rotation?: import("@react-three/fiber").Euler | undefined;
33
- matrix?: import("@react-three/fiber").Matrix4 | undefined;
34
- quaternion?: import("@react-three/fiber").Quaternion | undefined;
35
- layers?: import("@react-three/fiber").Layers | undefined;
36
- dispose?: (() => void) | null | undefined;
37
- }>> & {
38
- position?: import("@react-three/fiber").Vector3 | undefined;
39
- up?: import("@react-three/fiber").Vector3 | undefined;
40
- scale?: import("@react-three/fiber").Vector3 | undefined;
41
- rotation?: import("@react-three/fiber").Euler | undefined;
42
- matrix?: import("@react-three/fiber").Matrix4 | undefined;
43
- quaternion?: import("@react-three/fiber").Quaternion | undefined;
44
- layers?: import("@react-three/fiber").Layers | undefined;
45
- dispose?: (() => void) | null | undefined;
46
- } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
47
- range?: number | undefined;
48
- limit?: number | undefined;
49
- frames?: number | undefined;
50
- }, "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[]>>>;
37
+ }, "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>>;
38
+ 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>>;
51
39
  declare function Merged({ meshes, children, ...props }: {
52
40
  [x: string]: any;
53
41
  meshes: any;
package/core/Instances.js CHANGED
@@ -25,10 +25,13 @@ const Instance = /*#__PURE__*/React.forwardRef(({
25
25
  }), []);
26
26
  const group = React.useRef();
27
27
  const {
28
- subscribe
28
+ subscribe,
29
+ getParent
29
30
  } = React.useContext(context || globalContext);
30
31
  React.useLayoutEffect(() => subscribe(group), []);
31
32
  return /*#__PURE__*/React.createElement("position", _extends({
33
+ instance: getParent(),
34
+ instanceKey: group,
32
35
  ref: mergeRefs([ref, group])
33
36
  }, props), children);
34
37
  });
@@ -97,37 +100,22 @@ const Instances = /*#__PURE__*/React.forwardRef(({
97
100
  count++;
98
101
  }
99
102
  });
100
- const events = React.useMemo(() => {
101
- const events = {};
102
-
103
- for (i = 0; i < instances.length; i++) {
104
- var _instances$i$current;
105
-
106
- Object.assign(events, (_instances$i$current = instances[i].current) == null ? void 0 : _instances$i$current.__r3f.handlers);
107
- }
108
-
109
- return Object.keys(events).reduce((prev, key) => ({ ...prev,
110
- [key]: event => {
111
- var _instances$event$inst, _r3f, _r3f$handlers;
112
-
113
- const object = (_instances$event$inst = instances[event.instanceId]) == null ? void 0 : _instances$event$inst.current;
114
- return object == null ? void 0 : (_r3f = object.__r3f) == null ? void 0 : (_r3f$handlers = _r3f.handlers) == null ? void 0 : _r3f$handlers[key]({ ...event,
115
- object
116
- });
117
- }
118
- }), {});
119
- }, [children, instances]);
120
103
  const api = React.useMemo(() => ({
104
+ getParent: () => parentRef,
121
105
  subscribe: ref => {
122
106
  setInstances(instances => [...instances, ref]);
123
107
  return () => setInstances(instances => instances.filter(item => item.current !== ref.current));
124
108
  }
125
109
  }), []);
126
110
  return /*#__PURE__*/React.createElement("instancedMesh", _extends({
111
+ userData: {
112
+ instances
113
+ },
127
114
  matrixAutoUpdate: false,
128
115
  ref: mergeRefs([ref, parentRef]),
129
- args: [null, null, 0]
130
- }, events, props), /*#__PURE__*/React.createElement("instancedBufferAttribute", {
116
+ args: [null, null, 0],
117
+ raycast: () => null
118
+ }, props), /*#__PURE__*/React.createElement("instancedBufferAttribute", {
131
119
  attach: "instanceMatrix",
132
120
  count: matrices.length / 16,
133
121
  array: matrices,
@@ -1 +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;
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}),[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;
@@ -103,7 +103,7 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
103
103
  projectionMatrix.elements[6] = clipPlane.y;
104
104
  projectionMatrix.elements[10] = clipPlane.z + 1.0;
105
105
  projectionMatrix.elements[14] = clipPlane.w;
106
- }, []);
106
+ }, [camera]);
107
107
  const [fbo1, fbo2, blurpass, reflectorProps] = React.useMemo(() => {
108
108
  const parameters = {
109
109
  minFilter: LinearFilter,
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var 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 o=r(e),u=n(t);const c=u.createContext([]);exports.Select=function({multiple:e,children:t,onChange:r,...n}){const[i,l]=u.useState(!1),[s,a]=u.useReducer(((e,{object:t,shift:r})=>void 0===t?[]:r?e.includes(t)?e.filter((e=>e!==t)):[t,...e]:e[0]===t?[]:[t]),[]);u.useEffect((()=>{null==r||r(s)}),[s]);const f=u.useCallback((t=>{t.stopPropagation(),a({object:t.object,shift:e&&t.shiftKey})}),[]),d=u.useCallback((e=>!i&&a({})),[i]);return u.createElement("group",o.default({onClick:f,onPointerOver:()=>l(!0),onPointerOut:()=>l(!1),onPointerMissed:d},n),u.createElement(c.Provider,{value:s},t))},exports.useSelect=function(){return u.useContext(c)};
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ import * as THREE from 'three';
3
+ declare type Props = JSX.IntrinsicElements['group'] & {
4
+ multiple?: boolean;
5
+ onChange?: (selected: THREE.Object3D[]) => void;
6
+ };
7
+ export declare function Select({ multiple, children, onChange, ...props }: Props): JSX.Element;
8
+ export declare function useSelect(): THREE.Object3D<THREE.Event>[];
9
+ export {};
package/core/Select.js ADDED
@@ -0,0 +1,40 @@
1
+ import _extends from '@babel/runtime/helpers/esm/extends';
2
+ import * as React from 'react';
3
+
4
+ const context = /*#__PURE__*/React.createContext([]);
5
+ function Select({
6
+ multiple,
7
+ children,
8
+ onChange,
9
+ ...props
10
+ }) {
11
+ const [hovered, hover] = React.useState(false);
12
+ const [active, dispatch] = React.useReducer((state, {
13
+ object,
14
+ shift
15
+ }) => {
16
+ if (object === undefined) return [];else if (!shift) return state[0] === object ? [] : [object];else if (state.includes(object)) return state.filter(o => o !== object);else return [object, ...state];
17
+ }, []);
18
+ React.useEffect(() => void (onChange == null ? void 0 : onChange(active)), [active]);
19
+ const onClick = React.useCallback(e => {
20
+ e.stopPropagation();
21
+ dispatch({
22
+ object: e.object,
23
+ shift: multiple && e.shiftKey
24
+ });
25
+ }, []);
26
+ const onPointerMissed = React.useCallback(e => !hovered && dispatch({}), [hovered]);
27
+ return /*#__PURE__*/React.createElement("group", _extends({
28
+ onClick: onClick,
29
+ onPointerOver: () => hover(true),
30
+ onPointerOut: () => hover(false),
31
+ onPointerMissed: onPointerMissed
32
+ }, props), /*#__PURE__*/React.createElement(context.Provider, {
33
+ value: active
34
+ }, children));
35
+ }
36
+ function useSelect() {
37
+ return React.useContext(context);
38
+ }
39
+
40
+ export { Select, useSelect };
@@ -1 +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;
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"),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;
@@ -6,6 +6,7 @@ export declare type TransformControlsProps = ReactThreeFiber.Object3DNode<Transf
6
6
  object?: THREE.Object3D | React.MutableRefObject<THREE.Object3D>;
7
7
  enabled?: boolean;
8
8
  axis?: string | null;
9
+ domElement?: HTMLElement;
9
10
  mode?: string;
10
11
  translationSnap?: number | null;
11
12
  rotationSnap?: number | null;
@@ -22,4 +23,4 @@ export declare type TransformControlsProps = ReactThreeFiber.Object3DNode<Transf
22
23
  onMouseUp?: (e?: THREE.Event) => void;
23
24
  onObjectChange?: (e?: THREE.Event) => void;
24
25
  };
25
- 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>>>;
26
+ 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>>>;
@@ -8,6 +8,7 @@ import { TransformControls as TransformControls$1 } from 'three-stdlib';
8
8
 
9
9
  const TransformControls = /*#__PURE__*/React.forwardRef(({
10
10
  children,
11
+ domElement,
11
12
  onChange,
12
13
  onMouseDown,
13
14
  onMouseUp,
@@ -34,7 +35,7 @@ const TransformControls = /*#__PURE__*/React.forwardRef(({
34
35
  invalidate
35
36
  }) => invalidate);
36
37
  const explCamera = camera || defaultCamera;
37
- const [controls] = React.useState(() => new TransformControls$1(explCamera, gl.domElement));
38
+ const controls = React.useMemo(() => new TransformControls$1(explCamera, domElement || gl.domElement), [explCamera, domElement, gl.domElement]);
38
39
  const group = React.useRef();
39
40
  React.useLayoutEffect(() => {
40
41
  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 CHANGED
@@ -1 +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"),C=require("./TrackballControls.cjs.js"),h=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"),Ce=require("./Preload.cjs.js"),he=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("../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=C.TrackballControls,exports.ArcballControls=h.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=Ce.Preload,exports.BakeShadows=he.BakeShadows,exports.meshBounds=me.meshBounds,exports.AdaptiveDpr=Be.AdaptiveDpr,exports.AdaptiveEvents=be.AdaptiveEvents;
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("./Edges.cjs.js"),p=require("./OrthographicCamera.cjs.js"),n=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"),S=require("./TransformControls.cjs.js"),B=require("./PointerLockControls.cjs.js"),b=require("./FirstPersonControls.cjs.js"),M=require("./GizmoHelper.cjs.js"),P=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("./Select.cjs.js"),F=require("./useDepthBuffer.cjs.js"),w=require("./useAspect.cjs.js"),z=require("./useCamera.cjs.js"),I=require("./useDetectGPU.cjs.js"),O=require("./useHelper.cjs.js"),E=require("./useBVH.cjs.js"),R=require("./useContextBridge.cjs.js"),y=require("./useAnimations.cjs.js"),H=require("./useFBO.cjs.js"),V=require("./useIntersect.cjs.js"),Q=require("./CurveModifier.cjs.js"),X=require("./MeshDistortMaterial.cjs.js"),K=require("./MeshWobbleMaterial.cjs.js"),W=require("./MeshReflectorMaterial.cjs.js"),N=require("./PointMaterial.cjs.js"),U=require("./shaderMaterial.cjs.js"),_=require("./softShadows.cjs.js"),J=require("./shapes.cjs.js"),Y=require("./RoundedBox.cjs.js"),Z=require("./ScreenQuad.cjs.js"),$=require("./Center.cjs.js"),ee=require("./Bounds.cjs.js"),re=require("./CameraShake.cjs.js"),se=require("./Float.cjs.js"),te=require("./Stage.cjs.js"),oe=require("./Backdrop.cjs.js"),ie=require("./Shadow.cjs.js"),ue=require("./ContactShadows.cjs.js"),ae=require("./Reflector.cjs.js"),ce=require("./SpotLight.cjs.js"),je=require("./Environment.cjs.js"),pe=require("./Sky.cjs.js"),ne=require("./Stars.cjs.js"),le=require("./Cloud.cjs.js"),xe=require("./useMatcapTexture.cjs.js"),qe=require("./useNormalTexture.cjs.js"),de=require("./Points.cjs.js"),Ce=require("./Instances.cjs.js"),he=require("./Segments.cjs.js"),me=require("./Detailed.cjs.js"),Se=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=c.Image,exports.Edges=j.Edges,exports.OrthographicCamera=p.OrthographicCamera,exports.PerspectiveCamera=n.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=S.TransformControls,exports.PointerLockControls=B.PointerLockControls,exports.FirstPersonControls=b.FirstPersonControls,exports.GizmoHelper=M.GizmoHelper,exports.useGizmoContext=M.useGizmoContext,exports.GizmoViewcube=P.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.Select=D.Select,exports.useSelect=D.useSelect,exports.useDepthBuffer=F.useDepthBuffer,exports.useAspect=w.useAspect,exports.useCamera=z.useCamera,exports.useDetectGPU=I.useDetectGPU,exports.useHelper=O.useHelper,exports.useBVH=E.useBVH,exports.useContextBridge=R.useContextBridge,exports.useAnimations=y.useAnimations,exports.useFBO=H.useFBO,exports.useIntersect=V.useIntersect,exports.CurveModifier=Q.CurveModifier,exports.MeshDistortMaterial=X.MeshDistortMaterial,exports.MeshWobbleMaterial=K.MeshWobbleMaterial,exports.MeshReflectorMaterial=W.MeshReflectorMaterial,exports.PointMaterial=N.PointMaterial,exports.PointMaterialImpl=N.PointMaterialImpl,exports.shaderMaterial=U.shaderMaterial,exports.softShadows=_.softShadows,exports.Box=J.Box,exports.Circle=J.Circle,exports.Cone=J.Cone,exports.Cylinder=J.Cylinder,exports.Dodecahedron=J.Dodecahedron,exports.Extrude=J.Extrude,exports.Icosahedron=J.Icosahedron,exports.Lathe=J.Lathe,exports.Octahedron=J.Octahedron,exports.Plane=J.Plane,exports.Polyhedron=J.Polyhedron,exports.Ring=J.Ring,exports.Sphere=J.Sphere,exports.Tetrahedron=J.Tetrahedron,exports.Torus=J.Torus,exports.TorusKnot=J.TorusKnot,exports.Tube=J.Tube,exports.RoundedBox=Y.RoundedBox,exports.ScreenQuad=Z.ScreenQuad,exports.Center=$.Center,exports.Bounds=ee.Bounds,exports.useBounds=ee.useBounds,exports.CameraShake=re.CameraShake,exports.Float=se.Float,exports.Stage=te.Stage,exports.Backdrop=oe.Backdrop,exports.Shadow=ie.Shadow,exports.ContactShadows=ue.ContactShadows,exports.Reflector=ae.Reflector,exports.SpotLight=ce.SpotLight,exports.Environment=je.Environment,exports.Sky=pe.Sky,exports.calcPosFromAngles=pe.calcPosFromAngles,exports.Stars=ne.Stars,exports.Cloud=le.Cloud,exports.useMatcapTexture=xe.useMatcapTexture,exports.useNormalTexture=qe.useNormalTexture,exports.Point=de.Point,exports.Points=de.Points,exports.PointsBuffer=de.PointsBuffer,exports.Instance=Ce.Instance,exports.Instances=Ce.Instances,exports.Merged=Ce.Merged,exports.Segment=he.Segment,exports.Segments=he.Segments,exports.Detailed=me.Detailed,exports.Preload=Se.Preload,exports.BakeShadows=Be.BakeShadows,exports.meshBounds=be.meshBounds,exports.AdaptiveDpr=Me.AdaptiveDpr,exports.AdaptiveEvents=Pe.AdaptiveEvents;
package/core/index.d.ts CHANGED
@@ -7,6 +7,7 @@ export * from './Text';
7
7
  export * from './Effects';
8
8
  export * from './GradientTexture';
9
9
  export * from './Image';
10
+ export * from './Edges';
10
11
  export * from './OrthographicCamera';
11
12
  export * from './PerspectiveCamera';
12
13
  export * from './CubeCamera';
@@ -27,7 +28,9 @@ export * from './useFBX';
27
28
  export * from './useGLTF';
28
29
  export * from './useProgress';
29
30
  export * from './useTexture';
31
+ export * from './useKTX2';
30
32
  export * from './Stats';
33
+ export * from './Select';
31
34
  export * from './useDepthBuffer';
32
35
  export * from './useAspect';
33
36
  export * from './useCamera';
package/core/index.js CHANGED
@@ -7,6 +7,7 @@ export { Text } from './Text.js';
7
7
  export { Effects, isWebGL2Available } from './Effects.js';
8
8
  export { GradientTexture } from './GradientTexture.js';
9
9
  export { Image } from './Image.js';
10
+ export { Edges } from './Edges.js';
10
11
  export { OrthographicCamera } from './OrthographicCamera.js';
11
12
  export { PerspectiveCamera } from './PerspectiveCamera.js';
12
13
  export { CubeCamera } from './CubeCamera.js';
@@ -27,7 +28,9 @@ export { useFBX } from './useFBX.js';
27
28
  export { useGLTF } from './useGLTF.js';
28
29
  export { useProgress } from './useProgress.js';
29
30
  export { IsObject, useTexture } from './useTexture.js';
31
+ export { useKTX2 } from './useKTX2.js';
30
32
  export { Stats } from './Stats.js';
33
+ export { Select, useSelect } from './Select.js';
31
34
  export { useDepthBuffer } from './useDepthBuffer.js';
32
35
  export { useAspect } from './useAspect.js';
33
36
  export { useCamera } from './useCamera.js';
@@ -0,0 +1 @@
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;
@@ -0,0 +1,8 @@
1
+ import { Texture } from 'three';
2
+ export declare function useKTX2<Url extends string[] | string | Record<string, string>>(input: Url, basisPath?: string): Url extends any[] ? Texture[] : Url extends object ? {
3
+ [key in keyof Url]: Texture;
4
+ } : Texture;
5
+ export declare namespace useKTX2 {
6
+ var preload: (url: string, basisPath?: string) => undefined;
7
+ var clear: (input: string | string[]) => any;
8
+ }