@react-three/drei 7.20.1 → 7.20.5

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"),u=require("react-composer"),c=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(u);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:c.Position})),[]);const u=f.useRef(),{subscribe:o}=f.useContext(e||x);return f.useLayoutEffect((()=>o(u)),[]),f.createElement("position",s.default({ref:d.default([a,u])},r),t)})),E=f.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...u},c)=>{const[{context:o,instance:i}]=f.useState((()=>{const e=f.createContext(null);return{context:e,instance:f.forwardRef(((t,r)=>f.createElement(A,s.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((e=>{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 u=null==(r=E[e.instanceId])?void 0:r.current;return null==u||null==(n=u.__r3f)||null==(a=n.handlers)?void 0:a[t]({...e,object:u})}})),{})}),[e,E]),R=f.useMemo((()=>({subscribe:e=>(O((t=>[...t,e])),()=>O((t=>t.filter((t=>t.current!==e.current)))))})),[]);return f.createElement("instancedMesh",s.default({matrixAutoUpdate:!1,ref:d.default([c,m]),args:[null,null,0]},C,u),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(i)):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(let 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,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]})),{}))))};
+"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((e=>{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]})),{}))))};

package/core/Instances.js

@@ -153,7 +153,7 @@ function Merged({
 }) {
   const isArray = Array.isArray(meshes); // Filter out meshes from collections, which may contain non-meshes
 
-  if (!isArray) for (let key of Object.keys(meshes)) if (!meshes[key].isMesh) delete meshes[key];
+  if (!isArray) for (const key of Object.keys(meshes)) if (!meshes[key].isMesh) delete meshes[key];
   return /*#__PURE__*/React.createElement(Composer, {
     components: (isArray ? meshes : Object.values(meshes)).map(({
       geometry,

package/core/Segments.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"),o=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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=s(e),c=a(t),u=a(r);const l=u.createContext(null),f=e=>e instanceof c.Vector3?e.toArray():e,d=u.forwardRef(((e,t)=>{const{limit:r=1e3,lineWidth:s=1,children:a,...d}=e,[m,b]=u.useState([]),[g]=u.useState((()=>new o.Line2)),[h]=u.useState((()=>new o.LineMaterial)),[p]=u.useState((()=>new o.LineSegmentsGeometry)),[v]=u.useState((()=>new c.Vector2(512,512))),[j]=u.useState((()=>Array(r).fill(0))),[y]=u.useState((()=>Array(r).fill(1))),S=u.useMemo((()=>({subscribe:e=>(b((t=>[...t,e])),()=>b((t=>t.filter((t=>t.current!==e.current)))))})),[]);return n.useFrame((()=>{j.length=6*m.length,y.length=6*m.length,m.forEach(((e,t)=>{const r=e.current;if(r){const e=f(r.start),s=f(r.end),a=(o=r.color)instanceof c.Color?o.toArray():o;for(var n=0;n<3;n++)j[6*t+n]=e[n],j[6*t+n+3]=s[n],y[6*t+n]=a[n],y[6*t+n+3]=a[n]}var o})),p.setColors(y),p.setPositions(j),g.computeLineDistances()})),u.createElement("primitive",{object:g,ref:t},u.createElement("primitive",{object:p,attach:"geometry"}),u.createElement("primitive",i.default({object:h,attach:"material",vertexColors:!0,resolution:v,linewidth:s},d)),u.createElement(l.Provider,{value:S},a))})),m=u.forwardRef(((e,t)=>{const{start:r,end:n,color:o}=e,s=u.useContext(l);if(!s)throw"Segment must used inside Segments component.";const a=u.useRef({start:[0,0,0],end:[0,0,0],color:[1,1,1]});return u.useLayoutEffect((()=>s.subscribe(t||a)),[]),u.useLayoutEffect((()=>{var e=t||a;r&&Object.assign(e.current,{start:r}),n&&Object.assign(e.current,{end:n}),o&&Object.assign(e.current,{color:o})}),[r,n,o]),null}));exports.Segment=m,exports.Segments=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("react-merge-refs"),o=require("@react-three/fiber"),i=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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 c=s(e),u=a(t),l=a(r),f=s(n);const m=l.createContext(null),d=e=>e instanceof u.Vector3?e.toArray():e,b=l.forwardRef(((e,t)=>{const{limit:r=1e3,lineWidth:n=1,children:s,...a}=e,[f,b]=l.useState([]),[h]=l.useState((()=>new i.Line2)),[v]=l.useState((()=>new i.LineMaterial)),[p]=l.useState((()=>new i.LineSegmentsGeometry)),[w]=l.useState((()=>new u.Vector2(512,512))),[S]=l.useState((()=>Array(6*r).fill(0))),[g]=l.useState((()=>Array(6*r).fill(0))),j=l.useMemo((()=>({subscribe:e=>(b((t=>[...t,e])),()=>b((t=>t.filter((t=>t.current!==e.current)))))})),[]);return o.useFrame((()=>{for(let o=0;o<r;o++){var e;const r=null==(e=f[o])?void 0:e.current,i=r?d(r.start):[0,0,0],s=r?d(r.end):[0,0,0],a=r?(n=r.color)instanceof u.Color?n.toArray():n:[1,1,1];for(var t=0;t<3;t++)S[6*o+t]=i[t],S[6*o+t+3]=s[t],g[6*o+t]=a[t],g[6*o+t+3]=a[t]}var n;p.setColors(g),p.setPositions(S),h.computeLineDistances()})),l.createElement("primitive",{object:h,ref:t},l.createElement("primitive",{object:p,attach:"geometry"}),l.createElement("primitive",c.default({object:v,attach:"material",vertexColors:!0,resolution:w,linewidth:n},a)),l.createElement(m.Provider,{value:j},s))}));class h{constructor(){this.color=new u.Color("white"),this.start=new u.Vector3(0,0,0),this.end=new u.Vector3(0,0,0)}}const v=l.forwardRef(((e,t)=>{const r=l.useContext(m);if(!r)throw"Segment must used inside Segments component.";const n=l.useRef();return l.useMemo((()=>o.extend({SegmentObject:h})),[]),l.useLayoutEffect((()=>r.subscribe(n)),[]),l.createElement("segmentObject",c.default({ref:f.default([n,t])},e))}));exports.Segment=v,exports.Segments=b;

package/core/Segments.d.ts

@@ -1,5 +1,6 @@
 import * as THREE from 'three';
 import * as React from 'react';
+import { ReactThreeFiber } from '@react-three/fiber';
 import { Line2 } from 'three-stdlib';
 declare type SegmentsProps = {
     limit?: number;
@@ -7,10 +8,24 @@ declare type SegmentsProps = {
     children: React.ReactNode;
 };
 declare type Segment = {
-    start: THREE.Vector3 | [number, number, number];
-    end: THREE.Vector3 | [number, number, number];
-    color?: THREE.Color | [number, number, number];
+    start: THREE.Vector3;
+    end: THREE.Vector3;
+    color?: THREE.Color;
 };
+declare type SegmentProps = JSX.IntrinsicElements['segmentObject'] & Segment;
 declare const Segments: React.ForwardRefExoticComponent<SegmentsProps & React.RefAttributes<Line2>>;
-declare const Segment: React.ForwardRefExoticComponent<Segment & React.RefAttributes<Segment>>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            segmentObject: ReactThreeFiber.Object3DNode<SegmentObject, typeof SegmentObject>;
+        }
+    }
+}
+declare class SegmentObject {
+    color: THREE.Color;
+    start: THREE.Vector3;
+    end: THREE.Vector3;
+    constructor();
+}
+declare const Segment: React.ForwardRefExoticComponent<Pick<SegmentProps, "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "color" | "onClick" | "onContextMenu" | "onDoubleClick" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOut" | "onWheel" | "onPointerMissed" | "end" | "start"> & React.RefAttributes<Segment>>;
 export { Segments, Segment };

package/core/Segments.js

@@ -1,7 +1,8 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as THREE from 'three';
 import * as React from 'react';
-import { useFrame } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
+import { useFrame, extend } from '@react-three/fiber';
 import { Line2, LineMaterial, LineSegmentsGeometry } from 'three-stdlib';
 
 const context = /*#__PURE__*/React.createContext(null);
@@ -22,8 +23,8 @@ const Segments = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
   const [material] = React.useState(() => new LineMaterial());
   const [geometry] = React.useState(() => new LineSegmentsGeometry());
   const [resolution] = React.useState(() => new THREE.Vector2(512, 512));
-  const [positions] = React.useState(() => Array(limit).fill(0));
-  const [colors] = React.useState(() => Array(limit).fill(1));
+  const [positions] = React.useState(() => Array(limit * 6).fill(0));
+  const [colors] = React.useState(() => Array(limit * 6).fill(0));
   const api = React.useMemo(() => ({
     subscribe: ref => {
       setSegments(segments => [...segments, ref]);
@@ -31,24 +32,22 @@ const Segments = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     }
   }), []);
   useFrame(() => {
-    positions.length = segments.length * 6;
-    colors.length = segments.length * 6;
-    segments.forEach((segmentRef, i) => {
-      const segment = segmentRef.current;
+    for (let i = 0; i < limit; i++) {
+      var _segments$i;
 
-      if (segment) {
-        const segmentStart = arrPos(segment.start);
-        const segmentEnd = arrPos(segment.end);
-        const segmentColor = arrColor(segment.color);
+      const segment = (_segments$i = segments[i]) == null ? void 0 : _segments$i.current;
+      const segmentStart = segment ? arrPos(segment.start) : [0, 0, 0];
+      const segmentEnd = segment ? arrPos(segment.end) : [0, 0, 0];
+      const segmentColor = segment ? arrColor(segment.color) : [1, 1, 1]; //console.log(segmentStart, segmentEnd, segmentColor)
 
-        for (var j = 0; j < 3; j++) {
-          positions[i * 6 + j] = segmentStart[j];
-          positions[i * 6 + j + 3] = segmentEnd[j];
-          colors[i * 6 + j] = segmentColor[j];
-          colors[i * 6 + j + 3] = segmentColor[j];
-        }
+      for (var j = 0; j < 3; j++) {
+        positions[i * 6 + j] = segmentStart[j];
+        positions[i * 6 + j + 3] = segmentEnd[j];
+        colors[i * 6 + j] = segmentColor[j];
+        colors[i * 6 + j + 3] = segmentColor[j];
       }
-    });
+    }
+
     geometry.setColors(colors);
     geometry.setPositions(positions);
     line.computeLineDistances();
@@ -69,33 +68,27 @@ const Segments = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     value: api
   }, children));
 });
+
+class SegmentObject {
+  constructor() {
+    this.color = new THREE.Color('white');
+    this.start = new THREE.Vector3(0, 0, 0);
+    this.end = new THREE.Vector3(0, 0, 0);
+  }
+
+}
+
 const Segment = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
-  const {
-    start,
-    end,
-    color
-  } = props;
   const api = React.useContext(context);
   if (!api) throw 'Segment must used inside Segments component.';
-  const ref = React.useRef({
-    start: [0, 0, 0],
-    end: [0, 0, 0],
-    color: [1, 1, 1]
-  });
-  React.useLayoutEffect(() => api.subscribe(forwardedRef || ref), []);
-  React.useLayoutEffect(() => {
-    var currRef = forwardedRef || ref;
-    start && Object.assign(currRef.current, {
-      start
-    });
-    end && Object.assign(currRef.current, {
-      end
-    });
-    color && Object.assign(currRef.current, {
-      color
-    });
-  }, [start, end, color]);
-  return null;
+  const ref = React.useRef();
+  React.useMemo(() => extend({
+    SegmentObject
+  }), []);
+  React.useLayoutEffect(() => api.subscribe(ref), []);
+  return /*#__PURE__*/React.createElement("segmentObject", _extends({
+    ref: mergeRefs([ref, forwardedRef])
+  }, props));
 });
 
 export { Segment, Segments };