@react-three/drei 8.4.0 → 9.0.0-beta.1

package/native/index.js

@@ -7,6 +7,7 @@ export { Text } from '../core/Text.js';
 export { Effects, isWebGL2Available } from '../core/Effects.js';
 export { GradientTexture } from '../core/GradientTexture.js';
 export { Image } from '../core/Image.js';
+export { Edges } from '../core/Edges.js';
 export { OrthographicCamera } from '../core/OrthographicCamera.js';
 export { PerspectiveCamera } from '../core/PerspectiveCamera.js';
 export { CubeCamera } from '../core/CubeCamera.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "8.4.0",
+  "version": "9.0.0-beta.1",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [
@@ -57,9 +57,9 @@
     "zustand": "^3.5.13"
   },
   "peerDependencies": {
-    "@react-three/fiber": ">=6.0",
-    "react": ">=17.0",
-    "react-dom": ">=17.0",
+    "@react-three/fiber": ">=8.0",
+    "react": ">=18.0",
+    "react-dom": ">=18.0",
     "three": ">=0.134"
   },
   "peerDependenciesMeta": {

package/web/Html.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("react-dom"),n=require("three"),o=require("@react-three/fiber");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),l=a(r);const u=new n.Vector3,d=new n.Vector3,f=new n.Vector3;function m(e,t,r){const n=u.setFromMatrixPosition(e.matrixWorld);n.project(t);const o=r.width/2,s=r.height/2;return[n.x*o+o,-n.y*s+s]}const p=e=>Math.abs(e)<1e-10?0:e;function h(e,t,r=""){let n="matrix3d(";for(let r=0;16!==r;r++)n+=p(t[r]*e.elements[r])+(15!==r?",":")");return r+n}const x=(y=[1,-1,1,1,1,-1,1,1,1,-1,1,1,1,-1,1,1],e=>h(e,y));var y;const v=(e,t)=>{return h(e,[1/(r=t),1/r,1/r,1,-1/r,-1/r,-1/r,-1,1/r,1/r,1/r,1,1,1,1,1],"translate(-50%,-50%)");var r},b=c.forwardRef((({children:e,eps:t=.001,style:r,className:s,prepend:a,center:h,fullscreen:y,portal:b,distanceFactor:g,sprite:M=!1,transform:P=!1,occlude:w,onOcclude:W,zIndexRange:$=[16777271,0],calculatePosition:E=m,as:O="div",wrapperClass:j,pointerEvents:F="auto",...T},C)=>{var R;const z=o.useThree((({gl:e})=>e)),I=o.useThree((({camera:e})=>e)),N=o.useThree((({scene:e})=>e)),q=o.useThree((({size:e})=>e)),_=o.useThree((({raycaster:e})=>e)),[A]=c.useState((()=>document.createElement(O))),V=c.useRef(null),k=c.useRef(0),D=c.useRef([0,0]),L=c.useRef(null),S=c.useRef(null),H=null!==(R=null==b?void 0:b.current)&&void 0!==R?R:z.domElement.parentNode;c.useEffect((()=>{if(V.current){if(N.updateMatrixWorld(),P)A.style.cssText="position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";else{const e=E(V.current,I,q);A.style.cssText=`position:absolute;top:0;left:0;transform:translate3d(${e[0]}px,${e[1]}px,0);transform-origin:0 0;`}return H&&(a?H.prepend(A):H.appendChild(A)),()=>{H&&H.removeChild(A),l.unmountComponentAtNode(A)}}}),[H,P]),c.useLayoutEffect((()=>{j&&(A.className=j)}),[j]);const Z=c.useMemo((()=>P?{position:"absolute",top:0,left:0,width:q.width,height:q.height,transformStyle:"preserve-3d",pointerEvents:"none"}:{position:"absolute",transform:h?"translate3d(-50%,-50%,0)":"none",...y&&{top:-q.height/2,left:-q.width/2,width:q.width,height:q.height},...r}),[r,h,y,q,P]),B=c.useMemo((()=>({position:"absolute",pointerEvents:F})),[F]);c.useLayoutEffect((()=>{P?l.render(c.createElement("div",{ref:L,style:Z},c.createElement("div",{ref:S,style:B},c.createElement("div",{ref:C,className:s,style:r,children:e}))),A):l.render(c.createElement("div",{ref:C,style:Z,className:s,children:e}),A)}));const G=c.useRef(!0);return o.useFrame((()=>{if(V.current){I.updateMatrixWorld(),V.current.updateWorldMatrix(!0,!1);const e=P?D.current:E(V.current,I,q);if(P||Math.abs(k.current-I.zoom)>t||Math.abs(D.current[0]-e[0])>t||Math.abs(D.current[1]-e[1])>t){const t=function(e,t){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=r.sub(n),s=t.getWorldDirection(f);return o.angleTo(s)>Math.PI/2}(V.current,I);let r=!1;"boolean"==typeof w?!0===w&&(r=[N]):Array.isArray(w)&&(r=w.map((e=>e.current)));const o=G.current;if(r){const e=function(e,t,r,n){const o=u.setFromMatrixPosition(e.matrixWorld),s=o.clone();s.project(t),r.setFromCamera(s,t);const a=r.intersectObjects(n,!0);if(a.length){const e=a[0].distance;return o.distanceTo(r.ray.origin)<e}return!0}(V.current,I,_,r);G.current=e&&!t}else G.current=!t;if(o!==G.current&&(W?W(!G.current):A.style.display=G.current?"block":"none"),A.style.zIndex=`${function(e,t,r){if(t instanceof n.PerspectiveCamera||t instanceof n.OrthographicCamera){const n=u.setFromMatrixPosition(e.matrixWorld),o=d.setFromMatrixPosition(t.matrixWorld),s=n.distanceTo(o),a=(r[1]-r[0])/(t.far-t.near),i=r[1]-a*t.far;return Math.round(a*s+i)}}(V.current,I,$)}`,P){const[e,t]=[q.width/2,q.height/2],r=I.projectionMatrix.elements[5]*t,{isOrthographicCamera:n,top:o,left:s,bottom:a,right:i}=I,c=x(I.matrixWorldInverse),l=n?`scale(${r})translate(${p(-(i+s)/2)}px,${p((o+a)/2)}px)`:`translateZ(${r}px)`;let u=V.current.matrixWorld;M&&(u=I.matrixWorldInverse.clone().transpose().copyPosition(u).scale(V.current.scale),u.elements[3]=u.elements[7]=u.elements[11]=0,u.elements[15]=1),A.style.width=q.width+"px",A.style.height=q.height+"px",A.style.perspective=n?"":`${r}px`,L.current&&S.current&&(L.current.style.transform=`${l}${c}translate(${e}px,${t}px)`,S.current.style.transform=v(u,1/((g||10)/400)))}else{const t=void 0===g?1:function(e,t){if(t instanceof n.OrthographicCamera)return t.zoom;if(t instanceof n.PerspectiveCamera){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=t.fov*Math.PI/180,s=r.distanceTo(n);return 1/(2*Math.tan(o/2)*s)}return 1}(V.current,I)*g;A.style.transform=`translate3d(${e[0]}px,${e[1]}px,0) scale(${t})`}D.current=e,k.current=I.zoom}}})),c.createElement("group",i.default({},T,{ref:V}))}));exports.Html=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("react-dom"),n=require("three"),o=require("@react-three/fiber");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),l=a(r);const u=new n.Vector3,d=new n.Vector3,f=new n.Vector3;function m(e,t,r){const n=u.setFromMatrixPosition(e.matrixWorld);n.project(t);const o=r.width/2,s=r.height/2;return[n.x*o+o,-n.y*s+s]}const p=e=>Math.abs(e)<1e-10?0:e;function h(e,t,r=""){let n="matrix3d(";for(let r=0;16!==r;r++)n+=p(t[r]*e.elements[r])+(15!==r?",":")");return r+n}const x=(y=[1,-1,1,1,1,-1,1,1,1,-1,1,1,1,-1,1,1],e=>h(e,y));var y;const v=(e,t)=>{return h(e,[1/(r=t),1/r,1/r,1,-1/r,-1/r,-1/r,-1,1/r,1/r,1/r,1,1,1,1,1],"translate(-50%,-50%)");var r},b=c.forwardRef((({children:e,eps:t=.001,style:r,className:s,prepend:a,center:h,fullscreen:y,portal:b,distanceFactor:M,sprite:g=!1,transform:P=!1,occlude:w,onOcclude:W,zIndexRange:$=[16777271,0],calculatePosition:E=m,as:O="div",wrapperClass:j,pointerEvents:F="auto",...T},C)=>{var R;const z=o.useThree((({gl:e})=>e)),I=o.useThree((({camera:e})=>e)),q=o.useThree((({scene:e})=>e)),N=o.useThree((({size:e})=>e)),_=o.useThree((({raycaster:e})=>e)),[V]=c.useState((()=>document.createElement(O))),k=c.useMemo((()=>l.createRoot(V)),[V]),A=c.useRef(null),D=c.useRef(0),L=c.useRef([0,0]),S=c.useRef(null),H=c.useRef(null),Z=null!==(R=null==b?void 0:b.current)&&void 0!==R?R:z.domElement.parentNode;c.useEffect((()=>{if(A.current){if(q.updateMatrixWorld(),P)V.style.cssText="position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";else{const e=E(A.current,I,N);V.style.cssText=`position:absolute;top:0;left:0;transform:translate3d(${e[0]}px,${e[1]}px,0);transform-origin:0 0;`}return Z&&(a?Z.prepend(V):Z.appendChild(V)),()=>{Z&&Z.removeChild(V),k.unmount()}}}),[Z,P]),c.useLayoutEffect((()=>{j&&(V.className=j)}),[j]);const B=c.useMemo((()=>P?{position:"absolute",top:0,left:0,width:N.width,height:N.height,transformStyle:"preserve-3d",pointerEvents:"none"}:{position:"absolute",transform:h?"translate3d(-50%,-50%,0)":"none",...y&&{top:-N.height/2,left:-N.width/2,width:N.width,height:N.height},...r}),[r,h,y,N,P]),G=c.useMemo((()=>({position:"absolute",pointerEvents:F})),[F]);c.useLayoutEffect((()=>{P?k.render(c.createElement("div",{ref:S,style:B},c.createElement("div",{ref:H,style:G},c.createElement("div",{ref:C,className:s,style:r,children:e}))),V):k.render(c.createElement("div",{ref:C,style:B,className:s,children:e}),V)}));const J=c.useRef(!0);return o.useFrame((()=>{if(A.current){I.updateMatrixWorld(),A.current.updateWorldMatrix(!0,!1);const e=P?L.current:E(A.current,I,N);if(P||Math.abs(D.current-I.zoom)>t||Math.abs(L.current[0]-e[0])>t||Math.abs(L.current[1]-e[1])>t){const t=function(e,t){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=r.sub(n),s=t.getWorldDirection(f);return o.angleTo(s)>Math.PI/2}(A.current,I);let r=!1;"boolean"==typeof w?!0===w&&(r=[q]):Array.isArray(w)&&(r=w.map((e=>e.current)));const o=J.current;if(r){const e=function(e,t,r,n){const o=u.setFromMatrixPosition(e.matrixWorld),s=o.clone();s.project(t),r.setFromCamera(s,t);const a=r.intersectObjects(n,!0);if(a.length){const e=a[0].distance;return o.distanceTo(r.ray.origin)<e}return!0}(A.current,I,_,r);J.current=e&&!t}else J.current=!t;if(o!==J.current&&(W?W(!J.current):V.style.display=J.current?"block":"none"),V.style.zIndex=`${function(e,t,r){if(t instanceof n.PerspectiveCamera||t instanceof n.OrthographicCamera){const n=u.setFromMatrixPosition(e.matrixWorld),o=d.setFromMatrixPosition(t.matrixWorld),s=n.distanceTo(o),a=(r[1]-r[0])/(t.far-t.near),i=r[1]-a*t.far;return Math.round(a*s+i)}}(A.current,I,$)}`,P){const[e,t]=[N.width/2,N.height/2],r=I.projectionMatrix.elements[5]*t,{isOrthographicCamera:n,top:o,left:s,bottom:a,right:i}=I,c=x(I.matrixWorldInverse),l=n?`scale(${r})translate(${p(-(i+s)/2)}px,${p((o+a)/2)}px)`:`translateZ(${r}px)`;let u=A.current.matrixWorld;g&&(u=I.matrixWorldInverse.clone().transpose().copyPosition(u).scale(A.current.scale),u.elements[3]=u.elements[7]=u.elements[11]=0,u.elements[15]=1),V.style.width=N.width+"px",V.style.height=N.height+"px",V.style.perspective=n?"":`${r}px`,S.current&&H.current&&(S.current.style.transform=`${l}${c}translate(${e}px,${t}px)`,H.current.style.transform=v(u,1/((M||10)/400)))}else{const t=void 0===M?1:function(e,t){if(t instanceof n.OrthographicCamera)return t.zoom;if(t instanceof n.PerspectiveCamera){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=t.fov*Math.PI/180,s=r.distanceTo(n);return 1/(2*Math.tan(o/2)*s)}return 1}(A.current,I)*M;V.style.transform=`translate3d(${e[0]}px,${e[1]}px,0) scale(${t})`}L.current=e,D.current=I.zoom}}})),c.createElement("group",i.default({},T,{ref:A}))}));exports.Html=b;

package/web/Html.js

@@ -126,7 +126,9 @@ const Html = /*#__PURE__*/React.forwardRef(({
   const raycaster = useThree(({
     raycaster
   }) => raycaster);
-  const [el] = React.useState(() => document.createElement(as));
+  const [el] = React.useState(() => document.createElement(as)); // @ts-expect-error React 18 types aren't available yet
+
+  const root = React.useMemo(() => ReactDOM.createRoot(el), [el]);
   const group = React.useRef(null);
   const oldZoom = React.useRef(0);
   const oldPosition = React.useRef([0, 0]);
@@ -150,7 +152,7 @@ const Html = /*#__PURE__*/React.forwardRef(({
 
       return () => {
         if (target) target.removeChild(el);
-        ReactDOM.unmountComponentAtNode(el);
+        root.unmount();
       };
     }
   }, [target, transform]);
@@ -188,7 +190,7 @@ const Html = /*#__PURE__*/React.forwardRef(({
   }), [pointerEvents]);
   React.useLayoutEffect(() => {
     if (transform) {
-      ReactDOM.render( /*#__PURE__*/React.createElement("div", {
+      root.render( /*#__PURE__*/React.createElement("div", {
         ref: transformOuterRef,
         style: styles
       }, /*#__PURE__*/React.createElement("div", {
@@ -201,7 +203,7 @@ const Html = /*#__PURE__*/React.forwardRef(({
         children: children
       }))), el);
     } else {
-      ReactDOM.render( /*#__PURE__*/React.createElement("div", {
+      root.render( /*#__PURE__*/React.createElement("div", {
         ref: ref,
         style: styles,
         className: className,

package/web/Select.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),n=require("three"),r=require("three-stdlib"),o=require("@react-three/fiber"),i=require("zustand/shallow");function l(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(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=l(e),c=s(t),a=s(n),d=l(i);const f=c.createContext([]);exports.Select=function({box:e,multiple:t,children:n,onChange:i,border:l="1px solid #55aaff",backgroundColor:s="rgba(75, 160, 255, 0.1)",...p}){const{camera:v,raycaster:b,gl:m,controls:y,size:h,get:x}=o.useThree(),[E,g]=c.useState(!1),[j,w]=c.useReducer(((e,{object:t,shift:n})=>void 0===t?[]:Array.isArray(t)?t:n?e.includes(t)?e.filter((e=>e!==t)):[t,...e]:e[0]===t?[]:[t]),[]);c.useEffect((()=>{null==i||i(j)}),[j]);const O=c.useCallback((e=>{e.stopPropagation(),w({object:e.object,shift:t&&e.shiftKey})}),[]),C=c.useCallback((e=>!E&&w({})),[E]),P=c.useRef(null);return c.useEffect((()=>{if(!e||!t)return;const n=new r.SelectionBox(v,P.current),o=document.createElement("div");o.style.pointerEvents="none",o.style.border=l,o.style.backgroundColor=s,o.style.position="fixed";const i=new a.Vector2,u=new a.Vector2,c=new a.Vector2,f=b.enabled,p=null==y?void 0:y.enabled;let E=!1;function g(e,t){var n;const{offsetX:r,offsetY:o}=null!==(n=null==b.computeOffsets?void 0:b.computeOffsets(e,x()))&&void 0!==n?n:e,{width:i,height:l}=h;t.set(r/i*2-1,-o/l*2+1)}function j(e){e.shiftKey&&(!function(e){var t;y&&(y.enabled=!1),b.enabled=!1,E=!0,null==(t=m.domElement.parentElement)||t.appendChild(o),o.style.left=`${e.clientX}px`,o.style.top=`${e.clientY}px`,o.style.width="0px",o.style.height="0px",i.x=e.clientX,i.y=e.clientY}(e),g(e,n.startPoint))}let O=[];function C(e){if(E){!function(e){c.x=Math.max(i.x,e.clientX),c.y=Math.max(i.y,e.clientY),u.x=Math.min(i.x,e.clientX),u.y=Math.min(i.y,e.clientY),o.style.left=`${u.x}px`,o.style.top=`${u.y}px`,o.style.width=c.x-u.x+"px",o.style.height=c.y-u.y+"px"}(e),g(e,n.endPoint);const t=n.select().sort((e=>e.uuid)).filter((e=>e.isMesh));d.default(t,O)||(O=t,w({object:t}))}}function M(e){var t;E&&E&&(y&&(y.enabled=p),b.enabled=f,E=!1,null==(t=o.parentElement)||t.removeChild(o))}return document.addEventListener("pointerdown",j,{passive:!0}),document.addEventListener("pointermove",C,{passive:!0,capture:!0}),document.addEventListener("pointerup",M,{passive:!0}),()=>{document.removeEventListener("pointerdown",j),document.removeEventListener("pointermove",C),document.removeEventListener("pointerup",M)}}),[h,b,v,y,m]),c.createElement("group",u.default({ref:P,onClick:O,onPointerOver:()=>g(!0),onPointerOut:()=>g(!1),onPointerMissed:C},p),c.createElement(f.Provider,{value:j},n))},exports.useSelect=function(){return c.useContext(f)};

package/web/Select.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import * as THREE from 'three';
+declare type Props = JSX.IntrinsicElements['group'] & {
+    multiple?: boolean;
+    box?: boolean;
+    border?: string;
+    backgroundColor?: string;
+    onChange?: (selected: THREE.Object3D[]) => void;
+};
+export declare function Select({ box, multiple, children, onChange, border, backgroundColor, ...props }: Props): JSX.Element;
+export declare function useSelect(): THREE.Object3D<THREE.Event>[];
+export {};

package/web/Select.js

@@ -0,0 +1,169 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import * as THREE from 'three';
+import { SelectionBox } from 'three-stdlib';
+import { useThree } from '@react-three/fiber';
+import shallow from 'zustand/shallow';
+
+const context = /*#__PURE__*/React.createContext([]);
+function Select({
+  box,
+  multiple,
+  children,
+  onChange,
+  border = '1px solid #55aaff',
+  backgroundColor = 'rgba(75, 160, 255, 0.1)',
+  ...props
+}) {
+  const {
+    camera,
+    raycaster,
+    gl,
+    controls,
+    size,
+    get
+  } = useThree();
+  const [hovered, hover] = React.useState(false);
+  const [active, dispatch] = React.useReducer((state, {
+    object,
+    shift
+  }) => {
+    if (object === undefined) return [];else if (Array.isArray(object)) return object;else if (!shift) return state[0] === object ? [] : [object];else if (state.includes(object)) return state.filter(o => o !== object);else return [object, ...state];
+  }, []);
+  React.useEffect(() => void (onChange == null ? void 0 : onChange(active)), [active]);
+  const onClick = React.useCallback(e => {
+    e.stopPropagation();
+    dispatch({
+      object: e.object,
+      shift: multiple && e.shiftKey
+    });
+  }, []);
+  const onPointerMissed = React.useCallback(e => !hovered && dispatch({}), [hovered]);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!box || !multiple) return;
+    const selBox = new SelectionBox(camera, ref.current);
+    const element = document.createElement('div');
+    element.style.pointerEvents = 'none';
+    element.style.border = border;
+    element.style.backgroundColor = backgroundColor;
+    element.style.position = 'fixed';
+    const startPoint = new THREE.Vector2();
+    const pointTopLeft = new THREE.Vector2();
+    const pointBottomRight = new THREE.Vector2();
+    const oldRaycasterEnabled = raycaster.enabled;
+    const oldControlsEnabled = controls == null ? void 0 : controls.enabled;
+    let isDown = false;
+
+    function prepareRay(event, vec) {
+      var _raycaster$computeOff;
+
+      // https://github.com/pmndrs/react-three-fiber/pull/782
+      // Events trigger outside of canvas when moved
+      const {
+        offsetX,
+        offsetY
+      } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, get())) !== null && _raycaster$computeOff !== void 0 ? _raycaster$computeOff : event;
+      const {
+        width,
+        height
+      } = size;
+      vec.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
+    }
+
+    function onSelectStart(event) {
+      var _gl$domElement$parent;
+
+      if (controls) controls.enabled = false;
+      raycaster.enabled = false;
+      isDown = true;
+      (_gl$domElement$parent = gl.domElement.parentElement) == null ? void 0 : _gl$domElement$parent.appendChild(element);
+      element.style.left = `${event.clientX}px`;
+      element.style.top = `${event.clientY}px`;
+      element.style.width = '0px';
+      element.style.height = '0px';
+      startPoint.x = event.clientX;
+      startPoint.y = event.clientY;
+    }
+
+    function onSelectMove(event) {
+      pointBottomRight.x = Math.max(startPoint.x, event.clientX);
+      pointBottomRight.y = Math.max(startPoint.y, event.clientY);
+      pointTopLeft.x = Math.min(startPoint.x, event.clientX);
+      pointTopLeft.y = Math.min(startPoint.y, event.clientY);
+      element.style.left = `${pointTopLeft.x}px`;
+      element.style.top = `${pointTopLeft.y}px`;
+      element.style.width = `${pointBottomRight.x - pointTopLeft.x}px`;
+      element.style.height = `${pointBottomRight.y - pointTopLeft.y}px`;
+    }
+
+    function onSelectOver() {
+      if (isDown) {
+        var _element$parentElemen;
+
+        if (controls) controls.enabled = oldControlsEnabled;
+        raycaster.enabled = oldRaycasterEnabled;
+        isDown = false;
+        (_element$parentElemen = element.parentElement) == null ? void 0 : _element$parentElemen.removeChild(element);
+      }
+    }
+
+    function pointerDown(event) {
+      if (event.shiftKey) {
+        onSelectStart(event);
+        prepareRay(event, selBox.startPoint);
+      }
+    }
+
+    let previous = [];
+
+    function pointerMove(event) {
+      if (isDown) {
+        onSelectMove(event);
+        prepareRay(event, selBox.endPoint);
+        const allSelected = selBox.select().sort(o => o.uuid).filter(o => o.isMesh);
+
+        if (!shallow(allSelected, previous)) {
+          previous = allSelected;
+          dispatch({
+            object: allSelected
+          });
+        }
+      }
+    }
+
+    function pointerUp(event) {
+      if (isDown) onSelectOver();
+    }
+
+    document.addEventListener('pointerdown', pointerDown, {
+      passive: true
+    });
+    document.addEventListener('pointermove', pointerMove, {
+      passive: true,
+      capture: true
+    });
+    document.addEventListener('pointerup', pointerUp, {
+      passive: true
+    });
+    return () => {
+      document.removeEventListener('pointerdown', pointerDown);
+      document.removeEventListener('pointermove', pointerMove);
+      document.removeEventListener('pointerup', pointerUp);
+    };
+  }, [size, raycaster, camera, controls, gl]);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: ref,
+    onClick: onClick,
+    onPointerOver: () => hover(true),
+    onPointerOut: () => hover(false),
+    onPointerMissed: onPointerMissed
+  }, props), /*#__PURE__*/React.createElement(context.Provider, {
+    value: active
+  }, children));
+}
+function useSelect() {
+  return React.useContext(context);
+}
+
+export { Select, useSelect };

package/web/index.cjs.js

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

package/web/index.d.ts

@@ -4,4 +4,5 @@ export { useCursor } from './useCursor';
 export { Loader } from './Loader';
 export * from './ScrollControls';
 export * from './PresentationControls';
+export * from './Select';
 export * from '../core';

package/web/index.js

@@ -4,6 +4,7 @@ export { useCursor } from './useCursor.js';
 export { Loader } from './Loader.js';
 export { Scroll, ScrollControls, useScroll } from './ScrollControls.js';
 export { PresentationControls } from './PresentationControls.js';
+export { Select, useSelect } from './Select.js';
 export { Billboard } from '../core/Billboard.js';
 export { QuadraticBezierLine } from '../core/QuadraticBezierLine.js';
 export { CubicBezierLine } from '../core/CubicBezierLine.js';
@@ -13,6 +14,7 @@ export { Text } from '../core/Text.js';
 export { Effects, isWebGL2Available } from '../core/Effects.js';
 export { GradientTexture } from '../core/GradientTexture.js';
 export { Image } from '../core/Image.js';
+export { Edges } from '../core/Edges.js';
 export { OrthographicCamera } from '../core/OrthographicCamera.js';
 export { PerspectiveCamera } from '../core/PerspectiveCamera.js';
 export { CubeCamera } from '../core/CubeCamera.js';
@@ -90,6 +92,7 @@ import 'react-merge-refs';
 import '@react-spring/three';
 import '@use-gesture/react';
 import 'three-stdlib';
+import 'zustand/shallow';
 import 'troika-three-text';
 import 'lodash.omit';
 import 'lodash.pick';