@react-three/drei 7.8.6 → 7.9.0

package/core/Instances.cjs.js

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

package/core/Instances.d.ts

@@ -1,5 +1,30 @@
 import * as THREE from 'three';
 import * as React from 'react';
+import { Position } from '../helpers/Position';
+declare type Api = {
+    subscribe: (ref: any) => void;
+};
+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;
+    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 & {
+    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" | "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;
@@ -21,6 +46,11 @@ declare const Instances: React.ForwardRefExoticComponent<Pick<Omit<import("@reac
 } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     range?: number | undefined;
     limit?: 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" | "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" | "count" | "instanceColor" | "instanceMatrix" | "isInstancedMesh" | "getColorAt" | "getMatrixAt" | "setColorAt" | "setMatrixAt" | "limit"> & React.RefAttributes<THREE.InstancedMesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
-declare const Instance: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
-export { Instances, Instance };
+    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" | "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" | "count" | "instanceColor" | "instanceMatrix" | "isInstancedMesh" | "getColorAt" | "getMatrixAt" | "setColorAt" | "setMatrixAt" | "limit"> & React.RefAttributes<THREE.InstancedMesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+declare function Merged({ meshes, children, ...props }: {
+    [x: string]: any;
+    meshes: any;
+    children: any;
+}): JSX.Element;
+export { Instances, Instance, Merged };

package/core/Instances.js

@@ -1,12 +1,13 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as THREE from 'three';
 import * as React from 'react';
-import { useFrame, extend } from '@react-three/fiber';
+import { extend, useFrame } from '@react-three/fiber';
 import mergeRefs from 'react-merge-refs';
+import Composer from 'react-composer';
 import { Position } from '../helpers/Position.js';
 
 let i, instanceRef;
-const context = /*#__PURE__*/React.createContext(null);
+const globalContext = /*#__PURE__*/React.createContext(null);
 const parentMatrix = new THREE.Matrix4();
 const instanceMatrix = new THREE.Matrix4();
 const tempMatrix = new THREE.Matrix4();
@@ -14,12 +15,39 @@ const color = new THREE.Color();
 const translation = new THREE.Vector3();
 const rotation = new THREE.Quaternion();
 const scale = new THREE.Vector3();
+const Instance = /*#__PURE__*/React.forwardRef(({
+  context,
+  children,
+  ...props
+}, ref) => {
+  React.useMemo(() => extend({
+    Position
+  }), []);
+  const group = React.useRef();
+  const {
+    subscribe
+  } = React.useContext(context || globalContext);
+  React.useLayoutEffect(() => subscribe(group), []);
+  return /*#__PURE__*/React.createElement("position", _extends({
+    ref: mergeRefs([ref, group])
+  }, props), children);
+});
 const Instances = /*#__PURE__*/React.forwardRef(({
   children,
   range,
   limit = 1000,
+  frames = Infinity,
   ...props
 }, ref) => {
+  const [[context, instance]] = React.useState(() => {
+    const c = /*#__PURE__*/React.createContext(null);
+
+    const i = props => /*#__PURE__*/React.createElement(Instance, _extends({
+      context: c
+    }, props));
+
+    return [c, i];
+  });
   const parentRef = React.useRef(null);
   const [instances, setInstances] = React.useState([]);
   const [[matrices, colors]] = React.useState(() => {
@@ -36,27 +64,32 @@ const Instances = /*#__PURE__*/React.forwardRef(({
     // We might be a frame too late? 🤷‍♂️
     parentRef.current.instanceMatrix.needsUpdate = true;
   });
+  let count = 0;
   useFrame(state => {
-    parentRef.current.updateMatrix();
-    parentRef.current.updateMatrixWorld();
-    parentMatrix.copy(parentRef.current.matrixWorld).invert();
+    if (frames === Infinity || count < frames) {
+      parentRef.current.updateMatrix();
+      parentRef.current.updateMatrixWorld();
+      parentMatrix.copy(parentRef.current.matrixWorld).invert();
 
-    for (i = 0; i < instances.length; i++) {
-      instanceRef = instances[i].current; // Multiply the inverse of the InstancedMesh world matrix or else
-      // Instances will be double-transformed if <Instances> isn't at identity
+      for (i = 0; i < instances.length; i++) {
+        instanceRef = instances[i].current; // Multiply the inverse of the InstancedMesh world matrix or else
+        // Instances will be double-transformed if <Instances> isn't at identity
 
-      instanceRef.matrixWorld.decompose(translation, rotation, scale);
-      instanceMatrix.compose(translation, rotation, scale).premultiply(parentMatrix);
+        instanceRef.matrixWorld.decompose(translation, rotation, scale);
+        instanceMatrix.compose(translation, rotation, scale).premultiply(parentMatrix);
 
-      if (!instanceMatrix.equals(tempMatrix.fromArray(matrices, i * 16))) {
-        instanceMatrix.toArray(matrices, i * 16);
-        parentRef.current.instanceMatrix.needsUpdate = true;
-      }
+        if (!instanceMatrix.equals(tempMatrix.fromArray(matrices, i * 16))) {
+          instanceMatrix.toArray(matrices, i * 16);
+          parentRef.current.instanceMatrix.needsUpdate = true;
+        }
 
-      if (!instanceRef.color.equals(color.fromArray(colors, i * 3))) {
-        instanceRef.color.toArray(colors, i * 3);
-        parentRef.current.instanceColor.needsUpdate = true;
+        if (!instanceRef.color.equals(color.fromArray(colors, i * 3))) {
+          instanceRef.color.toArray(colors, i * 3);
+          parentRef.current.instanceColor.needsUpdate = true;
+        }
       }
+
+      count++;
     }
   });
   const events = React.useMemo(() => {
@@ -90,31 +123,38 @@ const Instances = /*#__PURE__*/React.forwardRef(({
     attach: "instanceMatrix",
     count: matrices.length / 16,
     array: matrices,
-    itemSize: 16
+    itemSize: 16,
+    usage: THREE.DynamicDrawUsage
   }), /*#__PURE__*/React.createElement("instancedBufferAttribute", {
     attach: "instanceColor",
     count: colors.length / 3,
     array: colors,
-    itemSize: 3
-  }), /*#__PURE__*/React.createElement(context.Provider, {
+    itemSize: 3,
+    usage: THREE.DynamicDrawUsage
+  }), typeof children === 'function' ? /*#__PURE__*/React.createElement(context.Provider, {
+    value: api
+  }, children(instance)) : /*#__PURE__*/React.createElement(globalContext.Provider, {
     value: api
   }, children));
 });
-const Instance = /*#__PURE__*/React.forwardRef(({
+
+function Merged({
+  meshes,
   children,
   ...props
-}, ref) => {
-  React.useMemo(() => extend({
-    Position
-  }), []);
-  const group = React.useRef();
-  const {
-    subscribe
-  } = React.useContext(context);
-  React.useLayoutEffect(() => subscribe(group), []);
-  return /*#__PURE__*/React.createElement("position", _extends({
-    ref: mergeRefs([ref, group])
-  }, props), children);
-});
+}) {
+  const isArray = Array.isArray(meshes);
+  return /*#__PURE__*/React.createElement(Composer, {
+    components: (isArray ? meshes : Object.values(meshes)).map(({
+      geometry,
+      material
+    }) => /*#__PURE__*/React.createElement(Instances, _extends({
+      geometry: geometry,
+      material: material
+    }, props)))
+  }, args => isArray ? children(...args) : children(Object.keys(meshes).reduce((acc, key, i) => ({ ...acc,
+    [key]: args[i]
+  }), {})));
+}
 
-export { Instance, Instances };
+export { Instance, Instances, Merged };

package/core/Points.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/objectWithoutPropertiesLoose"),r=require("three"),n=require("react"),u=require("@react-three/fiber"),o=require("react-merge-refs"),i=require("../helpers/Position.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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 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)}require("@babel/runtime/helpers/inheritsLoose");var l,f,s=a(e),d=a(t),b=c(r),m=c(n),p=a(o),y=m.createContext(null),h=new b.Matrix4,v=new b.Vector3,g=new b.Color,x=m.forwardRef((function(e,t){var r=e.children,n=e.range,o=e.limit,i=void 0===o?1e3:o,a=d.default(e,["children","range","limit"]),c=m.useRef(null),b=m.useState([]),x=b[0],j=b[1],O=m.useState((function(){return[new Float32Array(3*i),new Float32Array([].concat(new Array(3*i)).map((function(){return 1})))]}))[0],P=O[0],w=O[1];m.useLayoutEffect((function(){c.current.geometry.drawRange.count=Math.min(i,void 0!==n?n:i,x.length)}),[x,n]),m.useEffect((function(){c.current.geometry.attributes.position.needsUpdate=!0})),u.useFrame((function(){for(c.current.updateMatrix(),c.current.updateMatrixWorld(),h.copy(c.current.matrixWorld).invert(),l=0;l<x.length;l++)(f=x[l].current).getWorldPosition(v).applyMatrix4(h),v.x===P[3*l]&&v.y===P[3*l+1]&&v.z===P[3*l+2]||(v.toArray(P,3*l),c.current.geometry.attributes.position.needsUpdate=!0,f.matrixWorldNeedsUpdate=!0),f.color.equals(g.fromArray(w,3*l))||(f.color.toArray(w,3*l),c.current.geometry.attributes.color.needsUpdate=!0)}));var E=m.useMemo((function(){var e={};for(l=0;l<x.length;l++){var t;Object.assign(e,null==(t=x[l].current)?void 0:t.__r3f.handlers)}return Object.keys(e).reduce((function(e,t){var r;return s.default({},e,((r={})[t]=function(e){var r,n,u;return null==(r=x[e.index].current)||null==(n=r.__r3f)||null==(u=n.handlers)?void 0:u[t](e)},r))}),{})}),[x]),M=m.useMemo((function(){return{subscribe:function(e){return j((function(t){return[].concat(t,[e])})),function(){return j((function(t){return t.filter((function(t){return t.current!==e.current}))}))}}}}),[]);return m.createElement("points",s.default({matrixAutoUpdate:!1,ref:p.default([t,c])},E,a),m.createElement("bufferGeometry",null,m.createElement("bufferAttribute",{attachObject:["attributes","position"],count:P.length/3,array:P,itemSize:3}),m.createElement("bufferAttribute",{attachObject:["attributes","color"],count:w.length/3,array:w,itemSize:3})),m.createElement(y.Provider,{value:M},r))})),j=m.forwardRef((function(e,t){var r=e.children,n=d.default(e,["children"]);m.useMemo((function(){return u.extend({Position:i.Position})}),[]);var o=m.useRef(),a=m.useContext(y).subscribe;return m.useLayoutEffect((function(){return a(o)}),[]),m.createElement("position",s.default({ref:p.default([t,o])},n),r)}));exports.Point=j,exports.Points=x;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@babel/runtime/helpers/objectWithoutPropertiesLoose"),t=require("three"),n=require("react"),u=require("@react-three/fiber"),o=require("react-merge-refs"),a=require("../helpers/Position.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/inheritsLoose");var l,f,s=i(e),d=i(r),b=c(t),m=c(n),p=i(o),y=m.createContext(null),h=new b.Matrix4,g=new b.Vector3,v=new b.Color,x=m.forwardRef((function(e,r){var t=e.children,n=e.range,o=e.limit,a=void 0===o?1e3:o,i=d.default(e,["children","range","limit"]),c=m.useRef(null),x=m.useState([]),j=x[0],w=x[1],O=m.useState((function(){return[new Float32Array(3*a),new Float32Array([].concat(new Array(3*a)).map((function(){return 1})))]}))[0],P=O[0],E=O[1];m.useLayoutEffect((function(){c.current.geometry.drawRange.count=Math.min(a,void 0!==n?n:a,j.length)}),[j,n]),m.useEffect((function(){c.current.geometry.attributes.position.needsUpdate=!0})),u.useFrame((function(){for(c.current.updateMatrix(),c.current.updateMatrixWorld(),h.copy(c.current.matrixWorld).invert(),l=0;l<j.length;l++)(f=j[l].current).getWorldPosition(g).applyMatrix4(h),g.x===P[3*l]&&g.y===P[3*l+1]&&g.z===P[3*l+2]||(g.toArray(P,3*l),c.current.geometry.attributes.position.needsUpdate=!0,f.matrixWorldNeedsUpdate=!0),f.color.equals(v.fromArray(E,3*l))||(f.color.toArray(E,3*l),c.current.geometry.attributes.color.needsUpdate=!0)}));var M=m.useMemo((function(){var e={};for(l=0;l<j.length;l++){var r;Object.assign(e,null==(r=j[l].current)?void 0:r.__r3f.handlers)}return Object.keys(e).reduce((function(e,r){var t;return s.default({},e,((t={})[r]=function(e){var t,n,u;return null==(t=j[e.index].current)||null==(n=t.__r3f)||null==(u=n.handlers)?void 0:u[r](e)},t))}),{})}),[j]),q=m.useMemo((function(){return{subscribe:function(e){return w((function(r){return[].concat(r,[e])})),function(){return w((function(r){return r.filter((function(r){return r.current!==e.current}))}))}}}}),[]);return m.createElement("points",s.default({matrixAutoUpdate:!1,ref:p.default([r,c])},M,i),m.createElement("bufferGeometry",null,m.createElement("bufferAttribute",{attachObject:["attributes","position"],count:P.length/3,array:P,itemSize:3,usage:b.DynamicDrawUsage}),m.createElement("bufferAttribute",{attachObject:["attributes","color"],count:E.length/3,array:E,itemSize:3,usage:b.DynamicDrawUsage})),m.createElement(y.Provider,{value:q},t))})),j=m.forwardRef((function(e,r){var t=e.children,n=d.default(e,["children"]);m.useMemo((function(){return u.extend({Position:a.Position})}),[]);var o=m.useRef(),i=m.useContext(y).subscribe;return m.useLayoutEffect((function(){return i(o)}),[]),m.createElement("position",s.default({ref:p.default([r,o])},n),t)}));exports.Point=j,exports.Points=x;

package/core/Points.js

@@ -77,12 +77,14 @@ const Points = /*#__PURE__*/React.forwardRef(({
     attachObject: ['attributes', 'position'],
     count: positions.length / 3,
     array: positions,
-    itemSize: 3
+    itemSize: 3,
+    usage: THREE.DynamicDrawUsage
   }), /*#__PURE__*/React.createElement("bufferAttribute", {
     attachObject: ['attributes', 'color'],
     count: colors.length / 3,
     array: colors,
-    itemSize: 3
+    itemSize: 3,
+    usage: THREE.DynamicDrawUsage
   })), /*#__PURE__*/React.createElement(context.Provider, {
     value: api
   }, children));

package/core/index.cjs.js

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

package/core/index.js

@@ -61,7 +61,7 @@ export { useMatcapTexture } from './useMatcapTexture.js';
 export { useNormalTexture } from './useNormalTexture.js';
 export { Stage } from './Stage.js';
 export { Point, Points } from './Points.js';
-export { Instance, Instances } from './Instances.js';
+export { Instance, Instances, Merged } from './Instances.js';
 export { Detailed } from './Detailed.js';
 export { Preload } from './Preload.js';
 export { meshBounds } from './meshBounds.js';
@@ -91,3 +91,4 @@ import '../materials/SpotLightMaterial.js';
 import '../helpers/matcap-assets.js';
 import '../helpers/normal-assets.js';
 import '../helpers/Position.js';
+import 'react-composer';