@react-three/drei 7.21.1 → 7.22.0

package/core/Bounds.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");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 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)}var o=a(e),n=a(t);const c=e=>e&&e.isOrthographicCamera,i=o.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:a,clip:s,margin:m=1.2,eps:u=.01}){const f=o.useRef(null),x=r.useThree((e=>e.camera)),p=r.useThree((e=>e.controls)),l=r.useThree((e=>e.invalidate));function z(e,t){return Math.abs(e.x-t.x)<u&&Math.abs(e.y-t.y)<u&&Math.abs(e.z-t.z)<u}function h(e,t,r,a){e.x=n.MathUtils.damp(e.x,t.x,r,a),e.y=n.MathUtils.damp(e.y,t.y,r,a),e.z=n.MathUtils.damp(e.z,t.z,r,a)}const[y]=o.useState((()=>({animating:!1,focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[d]=o.useState((()=>({focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),M=o.useMemo((()=>{const e=new n.Box3;function r(){const t=e.getSize(new n.Vector3),r=e.getCenter(new n.Vector3),a=Math.max(t.x,t.y,t.z),o=c(x)?4*a:a/(2*Math.atan(Math.PI*x.fov/360)),i=c(x)?4*a:o/x.aspect;return{size:t,center:r,distance:m*Math.max(o,i)}}return{getSize:r,refresh(t){return e.setFromObject(t||f.current),this},clip(){const{distance:e}=r();return p&&(p.maxDistance=10*e),x.near=e/100,x.far=100*e,x.updateProjectionMatrix(),p&&p.update(),this},fit(){y.camera.copy(x.position),p&&y.focus.copy(p.target);const{center:a,distance:o}=r(),i=a.clone().sub(x.position).normalize().multiplyScalar(o);if(d.camera.copy(a).sub(i),d.focus.copy(a),c(x)){y.zoom=x.zoom;let r=0,o=0;const c=[new n.Vector3(e.min.x,e.min.y,e.min.z),new n.Vector3(e.min.x,e.max.y,e.min.z),new n.Vector3(e.min.x,e.min.y,e.max.z),new n.Vector3(e.min.x,e.max.y,e.max.z),new n.Vector3(e.max.x,e.max.y,e.max.z),new n.Vector3(e.max.x,e.max.y,e.min.z),new n.Vector3(e.max.x,e.min.y,e.max.z),new n.Vector3(e.max.x,e.min.y,e.min.z)];a.applyMatrix4(x.matrixWorldInverse);for(const e of c)e.applyMatrix4(x.matrixWorldInverse),r=Math.max(r,Math.abs(e.y-a.y)),o=Math.max(o,Math.abs(e.x-a.x));r*=2,o*=2;const i=(x.top-x.bottom)/r,s=(x.right-x.left)/o;d.zoom=Math.min(i,s)/m,t||(x.zoom=d.zoom,x.updateProjectionMatrix())}return t?y.animating=!0:(x.position.copy(d.camera),x.lookAt(d.focus),p&&(p.target.copy(d.focus),p.update()),l()),this}}}),[x,p,m,t,l]);return o.useLayoutEffect((()=>{if(M.refresh(),a&&M.fit(),s&&M.clip(),p){const e=e=>y.animating=!1;return p.addEventListener("start",e),()=>p.removeEventListener("start",e)}}),[M,a,p]),r.useFrame(((e,r)=>{if(y.animating){if(h(y.focus,d.focus,t,r),h(y.camera,d.camera,t,r),y.zoom=n.MathUtils.damp(y.zoom,d.zoom,t,r),x.position.copy(y.camera),c(x)&&(x.zoom=y.zoom,x.updateProjectionMatrix()),p?(p.target.copy(y.focus),p.update()):x.lookAt(y.focus),l(),c(x)&&!(Math.abs(y.zoom-d.zoom)<u))return;if(!c(x)&&!z(y.camera,d.camera))return;if(p&&!z(y.focus,d.focus))return;y.animating=!1}})),o.createElement("group",{ref:f},o.createElement(i.Provider,{value:M},e))},exports.useBounds=function(){return o.useContext(i)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");function o(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)}var a=o(e),n=o(t);const c=e=>e&&e.isOrthographicCamera,i=a.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:o,clip:s,margin:m=1.2,eps:u=.01}){const f=a.useRef(null),x=r.useThree((e=>e.camera)),p=r.useThree((e=>e.controls)),l=r.useThree((e=>e.invalidate));function z(e,t){return Math.abs(e.x-t.x)<u&&Math.abs(e.y-t.y)<u&&Math.abs(e.z-t.z)<u}function h(e,t,r,o){e.x=n.MathUtils.damp(e.x,t.x,r,o),e.y=n.MathUtils.damp(e.y,t.y,r,o),e.z=n.MathUtils.damp(e.z,t.z,r,o)}const[y]=a.useState((()=>({animating:!1,focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[d]=a.useState((()=>({focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),M=a.useMemo((()=>{const e=new n.Box3;function r(){const t=e.getSize(new n.Vector3),r=e.getCenter(new n.Vector3),o=Math.max(t.x,t.y,t.z),a=c(x)?4*o:o/(2*Math.atan(Math.PI*x.fov/360)),i=c(x)?4*o:a/x.aspect;return{size:t,center:r,distance:m*Math.max(a,i)}}return{getSize:r,refresh(t){if(e.setFromObject(t||f.current),e.isEmpty()){const t=x.position.length()||10;e.setFromCenterAndSize(new n.Vector3,new n.Vector3(t,t,t))}return this},clip(){const{distance:e}=r();return p&&(p.maxDistance=10*e),x.near=e/100,x.far=100*e,x.updateProjectionMatrix(),p&&p.update(),this},fit(){y.camera.copy(x.position),p&&y.focus.copy(p.target);const{center:o,distance:a}=r(),i=o.clone().sub(x.position).normalize().multiplyScalar(a);if(d.camera.copy(o).sub(i),d.focus.copy(o),c(x)){y.zoom=x.zoom;let r=0,a=0;const c=[new n.Vector3(e.min.x,e.min.y,e.min.z),new n.Vector3(e.min.x,e.max.y,e.min.z),new n.Vector3(e.min.x,e.min.y,e.max.z),new n.Vector3(e.min.x,e.max.y,e.max.z),new n.Vector3(e.max.x,e.max.y,e.max.z),new n.Vector3(e.max.x,e.max.y,e.min.z),new n.Vector3(e.max.x,e.min.y,e.max.z),new n.Vector3(e.max.x,e.min.y,e.min.z)];o.applyMatrix4(x.matrixWorldInverse);for(const e of c)e.applyMatrix4(x.matrixWorldInverse),r=Math.max(r,Math.abs(e.y-o.y)),a=Math.max(a,Math.abs(e.x-o.x));r*=2,a*=2;const i=(x.top-x.bottom)/r,s=(x.right-x.left)/a;d.zoom=Math.min(i,s)/m,t||(x.zoom=d.zoom,x.updateProjectionMatrix())}return t?y.animating=!0:(x.position.copy(d.camera),x.lookAt(d.focus),p&&(p.target.copy(d.focus),p.update()),l()),this}}}),[x,p,m,t,l]);return a.useLayoutEffect((()=>{if(M.refresh(),o&&M.fit(),s&&M.clip(),p){const e=e=>y.animating=!1;return p.addEventListener("start",e),()=>p.removeEventListener("start",e)}}),[M,o,p]),r.useFrame(((e,r)=>{if(y.animating){if(h(y.focus,d.focus,t,r),h(y.camera,d.camera,t,r),y.zoom=n.MathUtils.damp(y.zoom,d.zoom,t,r),x.position.copy(y.camera),c(x)&&(x.zoom=y.zoom,x.updateProjectionMatrix()),p?(p.target.copy(y.focus),p.update()):x.lookAt(y.focus),l(),c(x)&&!(Math.abs(y.zoom-d.zoom)<u))return;if(!c(x)&&!z(y.camera,d.camera))return;if(p&&!z(y.focus,d.focus))return;y.animating=!1}})),a.createElement("group",{ref:f},a.createElement(i.Provider,{value:M},e))},exports.useBounds=function(){return a.useContext(i)};

package/core/Bounds.js

@@ -62,6 +62,12 @@ function Bounds({
 
       refresh(object) {
         box.setFromObject(object || ref.current);
+
+        if (box.isEmpty()) {
+          const max = camera.position.length() || 10;
+          box.setFromCenterAndSize(new THREE.Vector3(), new THREE.Vector3(max, max, max));
+        }
+
         return this;
       },
 

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

package/core/Points.d.ts

@@ -1,26 +1,16 @@
 import * as THREE from 'three';
 import * as React from 'react';
-declare const Points: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").Node<THREE.Points<THREE.BufferGeometry, THREE.Material | THREE.Material[]>, typeof THREE.Points>, import("@react-three/fiber").NonFunctionKeys<{
-    position?: import("@react-three/fiber").Vector3 | undefined;
-    up?: import("@react-three/fiber").Vector3 | undefined;
-    scale?: import("@react-three/fiber").Vector3 | undefined;
-    rotation?: import("@react-three/fiber").Euler | undefined;
-    matrix?: import("@react-three/fiber").Matrix4 | undefined;
-    quaternion?: import("@react-three/fiber").Quaternion | undefined;
-    layers?: import("@react-three/fiber").Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-}>> & {
-    position?: import("@react-three/fiber").Vector3 | undefined;
-    up?: import("@react-three/fiber").Vector3 | undefined;
-    scale?: import("@react-three/fiber").Vector3 | undefined;
-    rotation?: import("@react-three/fiber").Euler | undefined;
-    matrix?: import("@react-three/fiber").Matrix4 | undefined;
-    quaternion?: import("@react-three/fiber").Quaternion | undefined;
-    layers?: import("@react-three/fiber").Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
-    range?: number | undefined;
-    limit?: number | undefined;
-}, "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" | "updateMorphTargets" | "isPoints" | "limit"> & React.RefAttributes<THREE.Points<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
-declare const Point: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
-export { Points, Point };
+declare type PointsInstancesProps = JSX.IntrinsicElements['points'] & {
+    range?: number;
+    limit?: number;
+};
+export declare const Point: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+declare type PointsBuffersProps = Omit<JSX.IntrinsicElements['points'], 'position'> & {
+    positions: Float32Array;
+    colors?: Float32Array;
+    sizes?: Float32Array;
+    stride?: 2 | 3;
+};
+export declare const PointsBuffer: React.ForwardRefExoticComponent<Pick<PointsBuffersProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "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 | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "updateMorphTargets" | "colors" | "isPoints" | "positions" | "sizes" | "stride"> & React.RefAttributes<THREE.Points<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+export declare const Points: React.ForwardRefExoticComponent<Pick<PointsInstancesProps | PointsBuffersProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "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" | "onClick" | "onContextMenu" | "onDoubleClick" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOut" | "onWheel" | "onPointerMissed" | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "updateMorphTargets" | "isPoints"> & React.RefAttributes<THREE.Points<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+export {};

package/core/Points.js

@@ -1,7 +1,7 @@
 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 { Position } from '../helpers/Position.js';
 
@@ -10,7 +10,11 @@ const context = /*#__PURE__*/React.createContext(null);
 const parentMatrix = new THREE.Matrix4();
 const position = new THREE.Vector3();
 const color = new THREE.Color();
-const Points = /*#__PURE__*/React.forwardRef(({
+/**
+ * Instance implementation, relies on react + context to update the attributes based on the children of this component
+ */
+
+const PointsInstances = /*#__PURE__*/React.forwardRef(({
   children,
   range,
   limit = 1000,
@@ -18,7 +22,11 @@ const Points = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const parentRef = React.useRef(null);
   const [refs, setRefs] = React.useState([]);
-  const [[positions, colors]] = React.useState(() => [new Float32Array(limit * 3), new Float32Array([...new Array(limit * 3)].map(() => 1))]);
+  const [[positions, colors, sizes]] = React.useState(() => [new Float32Array(limit * 3), Float32Array.from({
+    length: limit * 3
+  }, () => 1), Float32Array.from({
+    length: limit
+  }, () => 1)]);
   React.useLayoutEffect(() => {
     parentRef.current.geometry.drawRange.count = Math.min(limit, range !== undefined ? range : limit, refs.length);
   }, [refs, range]);
@@ -45,6 +53,11 @@ const Points = /*#__PURE__*/React.forwardRef(({
         positionRef.color.toArray(colors, i * 3);
         parentRef.current.geometry.attributes.color.needsUpdate = true;
       }
+
+      if (positionRef.size !== sizes[i]) {
+        sizes.set([positionRef.size], i);
+        parentRef.current.geometry.attributes.size.needsUpdate = true;
+      }
     }
   });
   const events = React.useMemo(() => {
@@ -88,6 +101,12 @@ const Points = /*#__PURE__*/React.forwardRef(({
     array: colors,
     itemSize: 3,
     usage: THREE.DynamicDrawUsage
+  }), /*#__PURE__*/React.createElement("bufferAttribute", {
+    attachObject: ['attributes', 'size'],
+    count: sizes.length,
+    array: sizes,
+    itemSize: 1,
+    usage: THREE.DynamicDrawUsage
   })), /*#__PURE__*/React.createElement(context.Provider, {
     value: api
   }, children));
@@ -108,5 +127,64 @@ const Point = /*#__PURE__*/React.forwardRef(({
     ref: mergeRefs([ref, group])
   }, props), children);
 });
+/**
+ * Buffer implementation, relies on complete buffers of the correct number, leaves it to the user to update them
+ */
+
+const PointsBuffer = /*#__PURE__*/React.forwardRef(({
+  children,
+  positions,
+  colors,
+  sizes,
+  stride = 3,
+  ...props
+}, forwardedRef) => {
+  const pointsRef = React.useRef(null);
+  useFrame(() => {
+    const attr = pointsRef.current.geometry.attributes;
+    attr.position.needsUpdate = true;
+
+    if (colors) {
+      attr.color.needsUpdate = true;
+    }
+
+    if (sizes) {
+      attr.size.needsUpdate = true;
+    }
+  });
+  return /*#__PURE__*/React.createElement("points", _extends({
+    matrixAutoUpdate: false,
+    ref: mergeRefs([forwardedRef, pointsRef])
+  }, props), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
+    attachObject: ['attributes', 'position'],
+    count: positions.length / stride,
+    array: positions,
+    itemSize: stride,
+    usage: THREE.DynamicDrawUsage
+  }), colors && /*#__PURE__*/React.createElement("bufferAttribute", {
+    attachObject: ['attributes', 'color'],
+    count: colors.length / stride,
+    array: colors,
+    itemSize: 3,
+    usage: THREE.DynamicDrawUsage
+  }), sizes && /*#__PURE__*/React.createElement("bufferAttribute", {
+    attachObject: ['attributes', 'size'],
+    count: sizes.length / stride,
+    array: sizes,
+    itemSize: 1,
+    usage: THREE.DynamicDrawUsage
+  })), children);
+});
+const Points = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+  if (props.positions instanceof Float32Array) {
+    return /*#__PURE__*/React.createElement(PointsBuffer, _extends({}, props, {
+      ref: forwardedRef
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(PointsInstances, _extends({}, props, {
+    ref: forwardedRef
+  }));
+});
 
-export { Point, Points };
+export { Point, Points, PointsBuffer };

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"),c=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),n=require("./OrthographicCamera.cjs.js"),l=require("./PerspectiveCamera.cjs.js"),x=require("./CameraShake.cjs.js"),q=require("./CubeCamera.cjs.js"),d=require("./DeviceOrientationControls.cjs.js"),h=require("./FlyControls.cjs.js"),C=require("./MapControls.cjs.js"),m=require("./OrbitControls.cjs.js"),S=require("./TrackballControls.cjs.js"),b=require("./ArcballControls.cjs.js"),B=require("./TransformControls.cjs.js"),P=require("./PointerLockControls.cjs.js"),f=require("./FirstPersonControls.cjs.js"),T=require("./GizmoHelper.cjs.js"),g=require("./GizmoViewcube.cjs.js"),M=require("./GizmoViewport.cjs.js"),v=require("./useCubeTexture.cjs.js"),D=require("./useFBX.cjs.js"),L=require("./useGLTF.cjs.js"),A=require("./useProgress.cjs.js"),G=require("./useTexture.cjs.js"),w=require("./Reflector.cjs.js"),z=require("./Shadow.cjs.js"),k=require("./Stats.cjs.js"),F=require("./Center.cjs.js"),I=require("./Bounds.cjs.js"),O=require("./DepthBuffer.cjs.js"),E=require("./useDepthBuffer.cjs.js"),y=require("./useAspect.cjs.js"),H=require("./useCamera.cjs.js"),R=require("./useDetectGPU.cjs.js"),V=require("./useHelper.cjs.js"),Q=require("./useBVH.cjs.js"),W=require("./useContextBridge.cjs.js"),N=require("./useAnimations.cjs.js"),U=require("./useFBO.cjs.js"),X=require("./useIntersect.cjs.js"),K=require("./useSimplification.cjs.js"),_=require("./useTessellation.cjs.js"),J=require("./useEdgeSplit.cjs.js"),Y=require("./CurveModifier.cjs.js"),Z=require("./MeshDistortMaterial.cjs.js"),$=require("./MeshWobbleMaterial.cjs.js"),ee=require("./PointMaterial.cjs.js"),re=require("./shaderMaterial.cjs.js"),se=require("./Sky.cjs.js"),te=require("./softShadows.cjs.js"),oe=require("./Stars.cjs.js"),ie=require("./ContactShadows.cjs.js"),ue=require("./SpotLight.cjs.js"),ae=require("./shapes.cjs.js"),ce=require("./RoundedBox.cjs.js"),je=require("./ScreenQuad.cjs.js"),pe=require("./useMatcapTexture.cjs.js"),ne=require("./useNormalTexture.cjs.js"),le=require("./Stage.cjs.js"),xe=require("./Points.cjs.js"),qe=require("./Instances.cjs.js"),de=require("./Segments.cjs.js"),he=require("./Detailed.cjs.js"),Ce=require("./Preload.cjs.js"),me=require("./BakeShadows.cjs.js"),Se=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("../assets/cloud.base64.cjs.js"),require("three"),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("three/examples/js/libs/stats.min"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),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=c.Effects,exports.isWebGL2Available=c.isWebGL2Available,exports.GradientTexture=j.GradientTexture,exports.Image=p.Image,exports.OrthographicCamera=n.OrthographicCamera,exports.PerspectiveCamera=l.PerspectiveCamera,exports.CameraShake=x.CameraShake,exports.CubeCamera=q.CubeCamera,exports.DeviceOrientationControls=d.DeviceOrientationControls,exports.FlyControls=h.FlyControls,exports.MapControls=C.MapControls,exports.OrbitControls=m.OrbitControls,exports.TrackballControls=S.TrackballControls,exports.ArcballControls=b.ArcballControls,exports.TransformControls=B.TransformControls,exports.PointerLockControls=P.PointerLockControls,exports.FirstPersonControls=f.FirstPersonControls,exports.GizmoHelper=T.GizmoHelper,exports.useGizmoContext=T.useGizmoContext,exports.GizmoViewcube=g.GizmoViewcube,exports.GizmoViewport=M.GizmoViewport,exports.useCubeTexture=v.useCubeTexture,exports.useFBX=D.useFBX,exports.useGLTF=L.useGLTF,exports.useProgress=A.useProgress,exports.IsObject=G.IsObject,exports.useTexture=G.useTexture,exports.Reflector=w.Reflector,exports.Shadow=z.Shadow,exports.Stats=k.Stats,exports.Center=F.Center,exports.Bounds=I.Bounds,exports.useBounds=I.useBounds,exports.DepthBuffer=O.DepthBuffer,exports.useDepthBuffer=E.useDepthBuffer,exports.useAspect=y.useAspect,exports.useCamera=H.useCamera,exports.useDetectGPU=R.useDetectGPU,exports.useHelper=V.useHelper,exports.useBVH=Q.useBVH,exports.useContextBridge=W.useContextBridge,exports.useAnimations=N.useAnimations,exports.useFBO=U.useFBO,exports.useIntersect=X.useIntersect,exports.useSimplification=K.useSimplification,exports.useTessellation=_.useTessellation,exports.useEdgeSplit=J.useEdgeSplit,exports.CurveModifier=Y.CurveModifier,exports.MeshDistortMaterial=Z.MeshDistortMaterial,exports.MeshWobbleMaterial=$.MeshWobbleMaterial,exports.PointMaterial=ee.PointMaterial,exports.PointMaterialImpl=ee.PointMaterialImpl,exports.shaderMaterial=re.shaderMaterial,exports.Sky=se.Sky,exports.calcPosFromAngles=se.calcPosFromAngles,exports.softShadows=te.softShadows,exports.Stars=oe.Stars,exports.ContactShadows=ie.ContactShadows,exports.SpotLight=ue.SpotLight,exports.Box=ae.Box,exports.Circle=ae.Circle,exports.Cone=ae.Cone,exports.Cylinder=ae.Cylinder,exports.Dodecahedron=ae.Dodecahedron,exports.Extrude=ae.Extrude,exports.Icosahedron=ae.Icosahedron,exports.Lathe=ae.Lathe,exports.Octahedron=ae.Octahedron,exports.Parametric=ae.Parametric,exports.Plane=ae.Plane,exports.Polyhedron=ae.Polyhedron,exports.Ring=ae.Ring,exports.Sphere=ae.Sphere,exports.Tetrahedron=ae.Tetrahedron,exports.Torus=ae.Torus,exports.TorusKnot=ae.TorusKnot,exports.Tube=ae.Tube,exports.RoundedBox=ce.RoundedBox,exports.ScreenQuad=je.ScreenQuad,exports.useMatcapTexture=pe.useMatcapTexture,exports.useNormalTexture=ne.useNormalTexture,exports.Stage=le.Stage,exports.Point=xe.Point,exports.Points=xe.Points,exports.Instance=qe.Instance,exports.Instances=qe.Instances,exports.Merged=qe.Merged,exports.Segment=de.Segment,exports.Segments=de.Segments,exports.Detailed=he.Detailed,exports.Preload=Ce.Preload,exports.BakeShadows=me.BakeShadows,exports.meshBounds=Se.meshBounds,exports.AdaptiveDpr=be.AdaptiveDpr,exports.AdaptiveEvents=Be.AdaptiveEvents;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./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"),c=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),n=require("./OrthographicCamera.cjs.js"),l=require("./PerspectiveCamera.cjs.js"),x=require("./CameraShake.cjs.js"),q=require("./CubeCamera.cjs.js"),d=require("./DeviceOrientationControls.cjs.js"),h=require("./FlyControls.cjs.js"),C=require("./MapControls.cjs.js"),m=require("./OrbitControls.cjs.js"),S=require("./TrackballControls.cjs.js"),b=require("./ArcballControls.cjs.js"),B=require("./TransformControls.cjs.js"),f=require("./PointerLockControls.cjs.js"),P=require("./FirstPersonControls.cjs.js"),T=require("./GizmoHelper.cjs.js"),g=require("./GizmoViewcube.cjs.js"),M=require("./GizmoViewport.cjs.js"),v=require("./useCubeTexture.cjs.js"),D=require("./useFBX.cjs.js"),L=require("./useGLTF.cjs.js"),A=require("./useProgress.cjs.js"),G=require("./useTexture.cjs.js"),w=require("./Reflector.cjs.js"),z=require("./Shadow.cjs.js"),k=require("./Stats.cjs.js"),F=require("./Center.cjs.js"),I=require("./Bounds.cjs.js"),O=require("./DepthBuffer.cjs.js"),E=require("./useDepthBuffer.cjs.js"),y=require("./useAspect.cjs.js"),H=require("./useCamera.cjs.js"),R=require("./useDetectGPU.cjs.js"),V=require("./useHelper.cjs.js"),Q=require("./useBVH.cjs.js"),W=require("./useContextBridge.cjs.js"),N=require("./useAnimations.cjs.js"),U=require("./useFBO.cjs.js"),X=require("./useIntersect.cjs.js"),K=require("./useSimplification.cjs.js"),_=require("./useTessellation.cjs.js"),J=require("./useEdgeSplit.cjs.js"),Y=require("./CurveModifier.cjs.js"),Z=require("./MeshDistortMaterial.cjs.js"),$=require("./MeshWobbleMaterial.cjs.js"),ee=require("./PointMaterial.cjs.js"),re=require("./shaderMaterial.cjs.js"),se=require("./Sky.cjs.js"),te=require("./softShadows.cjs.js"),oe=require("./Stars.cjs.js"),ie=require("./ContactShadows.cjs.js"),ue=require("./SpotLight.cjs.js"),ae=require("./shapes.cjs.js"),ce=require("./RoundedBox.cjs.js"),je=require("./ScreenQuad.cjs.js"),pe=require("./useMatcapTexture.cjs.js"),ne=require("./useNormalTexture.cjs.js"),le=require("./Stage.cjs.js"),xe=require("./Points.cjs.js"),qe=require("./Instances.cjs.js"),de=require("./Segments.cjs.js"),he=require("./Detailed.cjs.js"),Ce=require("./Preload.cjs.js"),me=require("./BakeShadows.cjs.js"),Se=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("../assets/cloud.base64.cjs.js"),require("three"),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("three/examples/js/libs/stats.min"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),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=c.Effects,exports.isWebGL2Available=c.isWebGL2Available,exports.GradientTexture=j.GradientTexture,exports.Image=p.Image,exports.OrthographicCamera=n.OrthographicCamera,exports.PerspectiveCamera=l.PerspectiveCamera,exports.CameraShake=x.CameraShake,exports.CubeCamera=q.CubeCamera,exports.DeviceOrientationControls=d.DeviceOrientationControls,exports.FlyControls=h.FlyControls,exports.MapControls=C.MapControls,exports.OrbitControls=m.OrbitControls,exports.TrackballControls=S.TrackballControls,exports.ArcballControls=b.ArcballControls,exports.TransformControls=B.TransformControls,exports.PointerLockControls=f.PointerLockControls,exports.FirstPersonControls=P.FirstPersonControls,exports.GizmoHelper=T.GizmoHelper,exports.useGizmoContext=T.useGizmoContext,exports.GizmoViewcube=g.GizmoViewcube,exports.GizmoViewport=M.GizmoViewport,exports.useCubeTexture=v.useCubeTexture,exports.useFBX=D.useFBX,exports.useGLTF=L.useGLTF,exports.useProgress=A.useProgress,exports.IsObject=G.IsObject,exports.useTexture=G.useTexture,exports.Reflector=w.Reflector,exports.Shadow=z.Shadow,exports.Stats=k.Stats,exports.Center=F.Center,exports.Bounds=I.Bounds,exports.useBounds=I.useBounds,exports.DepthBuffer=O.DepthBuffer,exports.useDepthBuffer=E.useDepthBuffer,exports.useAspect=y.useAspect,exports.useCamera=H.useCamera,exports.useDetectGPU=R.useDetectGPU,exports.useHelper=V.useHelper,exports.useBVH=Q.useBVH,exports.useContextBridge=W.useContextBridge,exports.useAnimations=N.useAnimations,exports.useFBO=U.useFBO,exports.useIntersect=X.useIntersect,exports.useSimplification=K.useSimplification,exports.useTessellation=_.useTessellation,exports.useEdgeSplit=J.useEdgeSplit,exports.CurveModifier=Y.CurveModifier,exports.MeshDistortMaterial=Z.MeshDistortMaterial,exports.MeshWobbleMaterial=$.MeshWobbleMaterial,exports.PointMaterial=ee.PointMaterial,exports.PointMaterialImpl=ee.PointMaterialImpl,exports.shaderMaterial=re.shaderMaterial,exports.Sky=se.Sky,exports.calcPosFromAngles=se.calcPosFromAngles,exports.softShadows=te.softShadows,exports.Stars=oe.Stars,exports.ContactShadows=ie.ContactShadows,exports.SpotLight=ue.SpotLight,exports.Box=ae.Box,exports.Circle=ae.Circle,exports.Cone=ae.Cone,exports.Cylinder=ae.Cylinder,exports.Dodecahedron=ae.Dodecahedron,exports.Extrude=ae.Extrude,exports.Icosahedron=ae.Icosahedron,exports.Lathe=ae.Lathe,exports.Octahedron=ae.Octahedron,exports.Parametric=ae.Parametric,exports.Plane=ae.Plane,exports.Polyhedron=ae.Polyhedron,exports.Ring=ae.Ring,exports.Sphere=ae.Sphere,exports.Tetrahedron=ae.Tetrahedron,exports.Torus=ae.Torus,exports.TorusKnot=ae.TorusKnot,exports.Tube=ae.Tube,exports.RoundedBox=ce.RoundedBox,exports.ScreenQuad=je.ScreenQuad,exports.useMatcapTexture=pe.useMatcapTexture,exports.useNormalTexture=ne.useNormalTexture,exports.Stage=le.Stage,exports.Point=xe.Point,exports.Points=xe.Points,exports.PointsBuffer=xe.PointsBuffer,exports.Instance=qe.Instance,exports.Instances=qe.Instances,exports.Merged=qe.Merged,exports.Segment=de.Segment,exports.Segments=de.Segments,exports.Detailed=he.Detailed,exports.Preload=Ce.Preload,exports.BakeShadows=me.BakeShadows,exports.meshBounds=Se.meshBounds,exports.AdaptiveDpr=be.AdaptiveDpr,exports.AdaptiveEvents=Be.AdaptiveEvents;

package/core/index.js

@@ -65,7 +65,7 @@ export { ScreenQuad } from './ScreenQuad.js';
 export { useMatcapTexture } from './useMatcapTexture.js';
 export { useNormalTexture } from './useNormalTexture.js';
 export { Stage } from './Stage.js';
-export { Point, Points } from './Points.js';
+export { Point, Points, PointsBuffer } from './Points.js';
 export { Instance, Instances, Merged } from './Instances.js';
 export { Segment, Segments } from './Segments.js';
 export { Detailed } from './Detailed.js';