@ohos-ports/react-three-drei 10.7.7-beta.0

package/web/Loader.js

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { useProgress } from '../core/Progress.js';
+
+const defaultDataInterpolation = p => `Loading ${p.toFixed(2)}%`;
+function Loader({
+  containerStyles,
+  innerStyles,
+  barStyles,
+  dataStyles,
+  dataInterpolation = defaultDataInterpolation,
+  initialState = active => active
+}) {
+  const {
+    active,
+    progress
+  } = useProgress();
+  const progressRef = React.useRef(0);
+  const rafRef = React.useRef(0);
+  const progressSpanRef = React.useRef(null);
+  const [shown, setShown] = React.useState(initialState(active));
+  React.useEffect(() => {
+    let t;
+    if (active !== shown) t = setTimeout(() => setShown(active), 300);
+    return () => clearTimeout(t);
+  }, [shown, active]);
+  const updateProgress = React.useCallback(() => {
+    if (!progressSpanRef.current) return;
+    progressRef.current += (progress - progressRef.current) / 2;
+    if (progressRef.current > 0.95 * progress || progress === 100) progressRef.current = progress;
+    progressSpanRef.current.innerText = dataInterpolation(progressRef.current);
+    if (progressRef.current < progress) rafRef.current = requestAnimationFrame(updateProgress);
+  }, [dataInterpolation, progress]);
+  React.useEffect(() => {
+    updateProgress();
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [updateProgress]);
+  return shown ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...styles.container,
+      opacity: active ? 1 : 0,
+      ...containerStyles
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...styles.inner,
+      ...innerStyles
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...styles.bar,
+      transform: `scaleX(${progress / 100})`,
+      ...barStyles
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    ref: progressSpanRef,
+    style: {
+      ...styles.data,
+      ...dataStyles
+    }
+  })))) : null;
+}
+const styles = {
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    background: '#171717',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'opacity 300ms ease',
+    zIndex: 1000
+  },
+  inner: {
+    width: 100,
+    height: 3,
+    background: '#272727',
+    textAlign: 'center'
+  },
+  bar: {
+    height: 3,
+    width: '100%',
+    background: 'white',
+    transition: 'transform 200ms',
+    transformOrigin: 'left center'
+  },
+  data: {
+    display: 'inline-block',
+    position: 'relative',
+    fontVariantNumeric: 'tabular-nums',
+    marginTop: '0.8em',
+    color: '#f0f0f0',
+    fontSize: '0.6em',
+    fontFamily: `-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, Roboto, Ubuntu, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+    whiteSpace: 'nowrap'
+  }
+};
+
+export { Loader };

package/web/PresentationControls.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),o=require("@use-gesture/react"),n=require("maath");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var 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 l=u(e),i=s(t);exports.PresentationControls=function({enabled:e=!0,snap:t,global:u,domElement:s,cursor:c=!0,children:d,speed:m=1,rotation:f=[0,0,0],zoom:p=1,polar:g=[0,Math.PI/2],azimuth:h=[-1/0,1/0],damping:b=.25}){const y=a.useThree((e=>e.events)),M=a.useThree((e=>e.gl)),v=s||y.connected||M.domElement,{size:E}=a.useThree(),j=i.useMemo((()=>[f[0]+g[0],f[0]+g[1]]),[f[0],g[0],g[1]]),O=i.useMemo((()=>[f[1]+h[0],f[1]+h[1]]),[f[1],h[0],h[1]]),P=i.useMemo((()=>[r.MathUtils.clamp(f[0],...j),r.MathUtils.clamp(f[1],...O),f[2]]),[f[0],f[1],f[2],j,O]);i.useEffect((()=>{if(u&&c&&e)return v.style.cursor="grab",M.domElement.style.cursor="",()=>{v.style.cursor="default",M.domElement.style.cursor="default"}}),[u,c,v,e]);const[q]=i.useState({scale:1,rotation:P,damping:b}),z=i.useRef(null);a.useFrame(((e,t)=>{n.easing.damp3(z.current.scale,q.scale,q.damping,t),n.easing.dampE(z.current.rotation,q.rotation,q.damping,t)}));const U=o.useGesture({onHover:({last:t})=>{c&&!u&&e&&(v.style.cursor=t?"auto":"grab")},onDrag:({down:a,delta:[o,n],memo:[u,s]=q.rotation||P})=>e?(c&&(v.style.cursor=a?"grabbing":"grab"),o=r.MathUtils.clamp(s+o/E.width*Math.PI*m,...O),n=r.MathUtils.clamp(u+n/E.height*Math.PI*m,...j),q.scale=a&&n>j[1]/2?p:1,q.rotation=t&&!a?P:[n,o,0],q.damping=t&&!a&&"boolean"!=typeof t?t:b,[n,o]):[n,o]},{target:u?v:void 0});return i.createElement("group",l.default({ref:z},null==U?void 0:U()),d)};

package/web/PresentationControls.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export type PresentationControlProps = {
+    snap?: Boolean | number;
+    global?: boolean;
+    cursor?: boolean;
+    speed?: number;
+    zoom?: number;
+    rotation?: [number, number, number];
+    polar?: [number, number];
+    azimuth?: [number, number];
+    damping?: number;
+    enabled?: boolean;
+    children?: React.ReactNode;
+    domElement?: HTMLElement;
+};
+export declare function PresentationControls({ enabled, snap, global, domElement, cursor, children, speed, rotation, zoom, polar, azimuth, damping, }: PresentationControlProps): React.JSX.Element;

package/web/PresentationControls.js

@@ -0,0 +1,79 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { MathUtils } from 'three';
+import { useThree, useFrame } from '@react-three/fiber';
+import { useGesture } from '@use-gesture/react';
+import { easing } from 'maath';
+
+function PresentationControls({
+  enabled = true,
+  snap,
+  global,
+  domElement,
+  cursor = true,
+  children,
+  speed = 1,
+  rotation = [0, 0, 0],
+  zoom = 1,
+  polar = [0, Math.PI / 2],
+  azimuth = [-Infinity, Infinity],
+  damping = 0.25
+}) {
+  const events = useThree(state => state.events);
+  const gl = useThree(state => state.gl);
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const {
+    size
+  } = useThree();
+  const rPolar = React.useMemo(() => [rotation[0] + polar[0], rotation[0] + polar[1]], [rotation[0], polar[0], polar[1]]);
+  const rAzimuth = React.useMemo(() => [rotation[1] + azimuth[0], rotation[1] + azimuth[1]], [rotation[1], azimuth[0], azimuth[1]]);
+  const rInitial = React.useMemo(() => [MathUtils.clamp(rotation[0], ...rPolar), MathUtils.clamp(rotation[1], ...rAzimuth), rotation[2]], [rotation[0], rotation[1], rotation[2], rPolar, rAzimuth]);
+  React.useEffect(() => {
+    if (global && cursor && enabled) {
+      explDomElement.style.cursor = 'grab';
+      gl.domElement.style.cursor = '';
+      return () => {
+        explDomElement.style.cursor = 'default';
+        gl.domElement.style.cursor = 'default';
+      };
+    }
+  }, [global, cursor, explDomElement, enabled]);
+  const [animation] = React.useState({
+    scale: 1,
+    rotation: rInitial,
+    damping
+  });
+  const ref = React.useRef(null);
+  useFrame((state, delta) => {
+    easing.damp3(ref.current.scale, animation.scale, animation.damping, delta);
+    easing.dampE(ref.current.rotation, animation.rotation, animation.damping, delta);
+  });
+  const bind = useGesture({
+    onHover: ({
+      last
+    }) => {
+      if (cursor && !global && enabled) explDomElement.style.cursor = last ? 'auto' : 'grab';
+    },
+    onDrag: ({
+      down,
+      delta: [x, y],
+      memo: [oldY, oldX] = animation.rotation || rInitial
+    }) => {
+      if (!enabled) return [y, x];
+      if (cursor) explDomElement.style.cursor = down ? 'grabbing' : 'grab';
+      x = MathUtils.clamp(oldX + x / size.width * Math.PI * speed, ...rAzimuth);
+      y = MathUtils.clamp(oldY + y / size.height * Math.PI * speed, ...rPolar);
+      animation.scale = down && y > rPolar[1] / 2 ? zoom : 1;
+      animation.rotation = snap && !down ? rInitial : [y, x, 0];
+      animation.damping = snap && !down && typeof snap !== 'boolean' ? snap : damping;
+      return [y, x];
+    }
+  }, {
+    target: global ? explDomElement : undefined
+  });
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: ref
+  }, bind == null ? void 0 : bind()), children);
+}
+
+export { PresentationControls };

package/web/ScreenVideoTexture.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("suspend-react"),u=require("../core/VideoTexture.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three"),require("@react-three/fiber"),require("hls.js");var n=c(e),o=i(r);const a=r.forwardRef((({options:e={video:!0},...c},i)=>{const a=t.suspend((()=>navigator.mediaDevices.getDisplayMedia(e)),[]);return r.useEffect((()=>()=>{null==a||a.getTracks().forEach((e=>e.stop())),t.clear([])}),[a]),o.createElement(u.VideoTexture,n.default({ref:i},c,{src:a}))}));exports.ScreenVideoTexture=a;

package/web/ScreenVideoTexture.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as THREE from 'three';
+import { VideoTextureProps } from '../core/VideoTexture';
+export type ScreenVideoTextureProps = Omit<VideoTextureProps, 'src'> & {
+    options?: DisplayMediaStreamOptions;
+};
+export declare const ScreenVideoTexture: React.ForwardRefExoticComponent<Omit<{
+    children?: (texture: THREE.VideoTexture) => React.ReactNode;
+    src: string | MediaProvider | null;
+} & {
+    unsuspend?: keyof HTMLVideoElementEventMap;
+    start?: boolean;
+    hls?: Parameters<(userConfig?: Partial<import("hls.js").HlsConfig> | undefined) => Promise<import("hls.js").default | null>>[0];
+    onVideoFrame?: VideoFrameRequestCallback;
+} & Partial<Omit<HTMLVideoElement, "children" | "src" | "srcObject">>, "src"> & {
+    options?: DisplayMediaStreamOptions;
+} & React.RefAttributes<THREE.VideoTexture>>;

package/web/ScreenVideoTexture.js

@@ -0,0 +1,30 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { forwardRef, useEffect } from 'react';
+import { suspend, clear } from 'suspend-react';
+import { VideoTexture } from '../core/VideoTexture.js';
+
+/**
+ * Create a video texture from [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia)
+ */
+const ScreenVideoTexture = /* @__PURE__ */forwardRef(({
+  options = {
+    video: true
+  },
+  ...props
+}, fref) => {
+  const mediaStream = suspend(() => navigator.mediaDevices.getDisplayMedia(options), []);
+  useEffect(() => {
+    return () => {
+      mediaStream == null || mediaStream.getTracks().forEach(track => track.stop());
+      clear([]);
+    };
+  }, [mediaStream]);
+  return /*#__PURE__*/React.createElement(VideoTexture, _extends({
+    ref: fref
+  }, props, {
+    src: mediaStream
+  }));
+});
+
+export { ScreenVideoTexture };

package/web/ScrollControls.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("react-dom/client"),n=require("@react-three/fiber"),o=require("maath");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var 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=l(t),a=l(r);const f=c.createContext(null);function u(){return c.useContext(f)}const d=c.forwardRef((({children:e},t)=>{const r=c.useRef(null);c.useImperativeHandle(t,(()=>r.current),[]);const o=u(),{width:s,height:l}=n.useThree((e=>e.viewport));return n.useFrame((()=>{r.current.position.x=o.horizontal?-s*(o.pages-1)*o.offset:0,r.current.position.y=o.horizontal?0:l*(o.pages-1)*o.offset})),c.createElement("group",{ref:r},e)})),p=c.forwardRef((({children:e,style:t,...r},o)=>{const s=u(),l=c.useRef(null);c.useImperativeHandle(o,(()=>l.current),[]);const{width:d,height:p}=n.useThree((e=>e.size)),h=c.useContext(n.context),m=c.useMemo((()=>a.createRoot(s.fixed)),[s.fixed]);return n.useFrame((()=>{s.delta>s.eps&&(l.current.style.transform=`translate3d(${s.horizontal?-d*(s.pages-1)*s.offset:0}px,${s.horizontal?0:p*(s.pages-1)*-s.offset}px,0)`)})),m.render(c.createElement("div",i.default({ref:l,style:{...t,position:"absolute",top:0,left:0,willChange:"transform"}},r),c.createElement(f.Provider,{value:s},c.createElement(n.context.Provider,{value:h},e)))),null})),h=c.forwardRef((({html:e,...t},r)=>{const n=e?p:d;return c.createElement(n,i.default({ref:r},t))}));exports.Scroll=h,exports.ScrollControls=function({eps:e=1e-5,enabled:t=!0,infinite:r,horizontal:s,pages:l=1,distance:i=1,damping:a=.25,maxSpeed:u=1/0,prepend:d=!1,style:p={},children:h}){const{get:m,setEvents:v,gl:g,size:y,invalidate:x,events:w}=n.useThree(),[E]=c.useState((()=>document.createElement("div"))),[b]=c.useState((()=>document.createElement("div"))),[z]=c.useState((()=>document.createElement("div"))),C=g.domElement.parentNode,L=c.useRef(0),R=c.useMemo((()=>{const t={el:E,eps:e,fill:b,fixed:z,horizontal:s,damping:a,offset:0,delta:0,scroll:L,pages:l,range(e,t,r=0){const n=e-r,o=n+t+2*r;return this.offset<n?0:this.offset>o?1:(this.offset-n)/(o-n)},curve(e,t,r=0){return Math.sin(this.range(e,t,r)*Math.PI)},visible(e,t,r=0){const n=e-r,o=n+t+2*r;return this.offset>=n&&this.offset<=o}};return t}),[e,a,s,l]);c.useEffect((()=>{E.style.position="absolute",E.style.width="100%",E.style.height="100%",E.style[s?"overflowX":"overflowY"]="auto",E.style[s?"overflowY":"overflowX"]="hidden",E.style.top="0px",E.style.left="0px";for(const e in p)E.style[e]=p[e];z.style.position="sticky",z.style.top="0px",z.style.left="0px",z.style.width="100%",z.style.height="100%",z.style.overflow="hidden",E.appendChild(z),b.style.height=s?"100%":l*i*100+"%",b.style.width=s?l*i*100+"%":"100%",b.style.pointerEvents="none",E.appendChild(b),d?C.prepend(E):C.appendChild(E),E[s?"scrollLeft":"scrollTop"]=1;const e=w.connected||g.domElement;requestAnimationFrame((()=>null==w.connect?void 0:w.connect(E)));const t=m().events.compute;return v({compute(e,t){const{left:r,top:n}=C.getBoundingClientRect(),o=e.clientX-r,s=e.clientY-n;t.pointer.set(o/t.size.width*2-1,-s/t.size.height*2+1),t.raycaster.setFromCamera(t.pointer,t.camera)}}),()=>{C.removeChild(E),v({compute:t}),null==w.connect||w.connect(e)}}),[l,i,s,E,b,z,C]),c.useEffect((()=>{if(w.connected===E){const e=y[s?"width":"height"],n=E[s?"scrollWidth":"scrollHeight"],o=n-e;let l=0,i=!0,c=!0;const a=()=>{if(t&&!c&&(x(),l=E[s?"scrollLeft":"scrollTop"],L.current=l/o,r)){if(!i)if(l>=o){const e=1-R.offset;E[s?"scrollLeft":"scrollTop"]=1,L.current=R.offset=-e,i=!0}else if(l<=0){const e=1+R.offset;E[s?"scrollLeft":"scrollTop"]=n,L.current=R.offset=e,i=!0}i&&setTimeout((()=>i=!1),40)}};E.addEventListener("scroll",a,{passive:!0}),requestAnimationFrame((()=>c=!1));const f=e=>E.scrollLeft+=e.deltaY/2;return s&&E.addEventListener("wheel",f,{passive:!0}),()=>{E.removeEventListener("scroll",a),s&&E.removeEventListener("wheel",f)}}}),[E,w,y,r,R,x,s,t]);let T=0;return n.useFrame(((t,r)=>{T=R.offset,o.easing.damp(R,"offset",L.current,a,r,u,void 0,e),o.easing.damp(R,"delta",Math.abs(T-R.offset),a,r,u,void 0,e),R.delta>e&&x()})),c.createElement(f.Provider,{value:R},h)},exports.useScroll=u;

package/web/ScrollControls.d.ts

@@ -0,0 +1,45 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type ScrollControlsProps = {
+    eps?: number;
+    horizontal?: boolean;
+    infinite?: boolean;
+    pages?: number;
+    distance?: number;
+    damping?: number;
+    maxSpeed?: number;
+    prepend?: boolean;
+    enabled?: boolean;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+};
+export type ScrollControlsState = {
+    el: HTMLDivElement;
+    eps: number;
+    fill: HTMLDivElement;
+    fixed: HTMLDivElement;
+    horizontal: boolean | undefined;
+    damping: number;
+    offset: number;
+    delta: number;
+    pages: number;
+    range(from: number, distance: number, margin?: number): number;
+    curve(from: number, distance: number, margin?: number): number;
+    visible(from: number, distance: number, margin?: number): boolean;
+};
+export declare function useScroll(): ScrollControlsState;
+export declare function ScrollControls({ eps, enabled, infinite, horizontal, pages, distance, damping, maxSpeed, prepend, style, children, }: ScrollControlsProps): React.JSX.Element;
+interface ScrollPropsWithFalseHtml {
+    children?: React.ReactNode;
+    html?: false;
+    style?: never;
+}
+interface ScrollPropsWithTrueHtml {
+    children?: React.ReactNode;
+    html: true;
+    style?: React.CSSProperties;
+}
+export type ScrollProps = ScrollPropsWithFalseHtml | ScrollPropsWithTrueHtml;
+export declare const Scroll: ForwardRefComponent<ScrollProps, THREE.Group & HTMLDivElement>;
+export {};

package/web/ScrollControls.js

@@ -0,0 +1,237 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { useThree, useFrame, context as context$1 } from '@react-three/fiber';
+import { easing } from 'maath';
+
+const context = /* @__PURE__ */React.createContext(null);
+function useScroll() {
+  return React.useContext(context);
+}
+function ScrollControls({
+  eps = 0.00001,
+  enabled = true,
+  infinite,
+  horizontal,
+  pages = 1,
+  distance = 1,
+  damping = 0.25,
+  maxSpeed = Infinity,
+  prepend = false,
+  style = {},
+  children
+}) {
+  const {
+    get,
+    setEvents,
+    gl,
+    size,
+    invalidate,
+    events
+  } = useThree();
+  const [el] = React.useState(() => document.createElement('div'));
+  const [fill] = React.useState(() => document.createElement('div'));
+  const [fixed] = React.useState(() => document.createElement('div'));
+  const target = gl.domElement.parentNode;
+  const scroll = React.useRef(0);
+  const state = React.useMemo(() => {
+    const state = {
+      el,
+      eps,
+      fill,
+      fixed,
+      horizontal,
+      damping,
+      offset: 0,
+      delta: 0,
+      scroll,
+      pages,
+      // 0-1 for a range between from -> from + distance
+      range(from, distance, margin = 0) {
+        const start = from - margin;
+        const end = start + distance + margin * 2;
+        return this.offset < start ? 0 : this.offset > end ? 1 : (this.offset - start) / (end - start);
+      },
+      // 0-1-0 for a range between from -> from + distance
+      curve(from, distance, margin = 0) {
+        return Math.sin(this.range(from, distance, margin) * Math.PI);
+      },
+      // true/false for a range between from -> from + distance
+      visible(from, distance, margin = 0) {
+        const start = from - margin;
+        const end = start + distance + margin * 2;
+        return this.offset >= start && this.offset <= end;
+      }
+    };
+    return state;
+  }, [eps, damping, horizontal, pages]);
+  React.useEffect(() => {
+    el.style.position = 'absolute';
+    el.style.width = '100%';
+    el.style.height = '100%';
+    el.style[horizontal ? 'overflowX' : 'overflowY'] = 'auto';
+    el.style[horizontal ? 'overflowY' : 'overflowX'] = 'hidden';
+    el.style.top = '0px';
+    el.style.left = '0px';
+    for (const key in style) {
+      el.style[key] = style[key];
+    }
+    fixed.style.position = 'sticky';
+    fixed.style.top = '0px';
+    fixed.style.left = '0px';
+    fixed.style.width = '100%';
+    fixed.style.height = '100%';
+    fixed.style.overflow = 'hidden';
+    el.appendChild(fixed);
+    fill.style.height = horizontal ? '100%' : `${pages * distance * 100}%`;
+    fill.style.width = horizontal ? `${pages * distance * 100}%` : '100%';
+    fill.style.pointerEvents = 'none';
+    el.appendChild(fill);
+    if (prepend) target.prepend(el);else target.appendChild(el);
+
+    // Init scroll one pixel in to allow upward/leftward scroll
+    el[horizontal ? 'scrollLeft' : 'scrollTop'] = 1;
+    const oldTarget = events.connected || gl.domElement;
+    requestAnimationFrame(() => events.connect == null ? void 0 : events.connect(el));
+    const oldCompute = get().events.compute;
+    setEvents({
+      compute(event, state) {
+        // we are using boundingClientRect because we could not rely on target.offsetTop as canvas could be positioned anywhere in dom
+        const {
+          left,
+          top
+        } = target.getBoundingClientRect();
+        const offsetX = event.clientX - left;
+        const offsetY = event.clientY - top;
+        state.pointer.set(offsetX / state.size.width * 2 - 1, -(offsetY / state.size.height) * 2 + 1);
+        state.raycaster.setFromCamera(state.pointer, state.camera);
+      }
+    });
+    return () => {
+      target.removeChild(el);
+      setEvents({
+        compute: oldCompute
+      });
+      events.connect == null || events.connect(oldTarget);
+    };
+  }, [pages, distance, horizontal, el, fill, fixed, target]);
+  React.useEffect(() => {
+    if (events.connected === el) {
+      const containerLength = size[horizontal ? 'width' : 'height'];
+      const scrollLength = el[horizontal ? 'scrollWidth' : 'scrollHeight'];
+      const scrollThreshold = scrollLength - containerLength;
+      let current = 0;
+      let disableScroll = true;
+      let firstRun = true;
+      const onScroll = () => {
+        // Prevent first scroll because it is indirectly caused by the one pixel offset
+        if (!enabled || firstRun) return;
+        invalidate();
+        current = el[horizontal ? 'scrollLeft' : 'scrollTop'];
+        scroll.current = current / scrollThreshold;
+        if (infinite) {
+          if (!disableScroll) {
+            if (current >= scrollThreshold) {
+              const damp = 1 - state.offset;
+              el[horizontal ? 'scrollLeft' : 'scrollTop'] = 1;
+              scroll.current = state.offset = -damp;
+              disableScroll = true;
+            } else if (current <= 0) {
+              const damp = 1 + state.offset;
+              el[horizontal ? 'scrollLeft' : 'scrollTop'] = scrollLength;
+              scroll.current = state.offset = damp;
+              disableScroll = true;
+            }
+          }
+          if (disableScroll) setTimeout(() => disableScroll = false, 40);
+        }
+      };
+      el.addEventListener('scroll', onScroll, {
+        passive: true
+      });
+      requestAnimationFrame(() => firstRun = false);
+      const onWheel = e => el.scrollLeft += e.deltaY / 2;
+      if (horizontal) el.addEventListener('wheel', onWheel, {
+        passive: true
+      });
+      return () => {
+        el.removeEventListener('scroll', onScroll);
+        if (horizontal) el.removeEventListener('wheel', onWheel);
+      };
+    }
+  }, [el, events, size, infinite, state, invalidate, horizontal, enabled]);
+  let last = 0;
+  useFrame((_, delta) => {
+    last = state.offset;
+    easing.damp(state, 'offset', scroll.current, damping, delta, maxSpeed, undefined, eps);
+    easing.damp(state, 'delta', Math.abs(last - state.offset), damping, delta, maxSpeed, undefined, eps);
+    if (state.delta > eps) invalidate();
+  });
+  return /*#__PURE__*/React.createElement(context.Provider, {
+    value: state
+  }, children);
+}
+const ScrollCanvas = /* @__PURE__ */React.forwardRef(({
+  children
+}, ref) => {
+  const group = React.useRef(null);
+  React.useImperativeHandle(ref, () => group.current, []);
+  const state = useScroll();
+  const {
+    width,
+    height
+  } = useThree(state => state.viewport);
+  useFrame(() => {
+    group.current.position.x = state.horizontal ? -width * (state.pages - 1) * state.offset : 0;
+    group.current.position.y = state.horizontal ? 0 : height * (state.pages - 1) * state.offset;
+  });
+  return /*#__PURE__*/React.createElement("group", {
+    ref: group
+  }, children);
+});
+const ScrollHtml = /*#__PURE__*/React.forwardRef(({
+  children,
+  style,
+  ...props
+}, ref) => {
+  const state = useScroll();
+  const group = React.useRef(null);
+  React.useImperativeHandle(ref, () => group.current, []);
+  const {
+    width,
+    height
+  } = useThree(state => state.size);
+  const fiberState = React.useContext(context$1);
+  const root = React.useMemo(() => ReactDOM.createRoot(state.fixed), [state.fixed]);
+  useFrame(() => {
+    if (state.delta > state.eps) {
+      group.current.style.transform = `translate3d(${state.horizontal ? -width * (state.pages - 1) * state.offset : 0}px,${state.horizontal ? 0 : height * (state.pages - 1) * -state.offset}px,0)`;
+    }
+  });
+  root.render(/*#__PURE__*/React.createElement("div", _extends({
+    ref: group,
+    style: {
+      ...style,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      willChange: 'transform'
+    }
+  }, props), /*#__PURE__*/React.createElement(context.Provider, {
+    value: state
+  }, /*#__PURE__*/React.createElement(context$1.Provider, {
+    value: fiberState
+  }, children))));
+  return null;
+});
+const Scroll = /* @__PURE__ */React.forwardRef(({
+  html,
+  ...props
+}, ref) => {
+  const El = html ? ScrollHtml : ScrollCanvas;
+  return /*#__PURE__*/React.createElement(El, _extends({
+    ref: ref
+  }, props));
+});
+
+export { Scroll, ScrollControls, useScroll };

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

package/web/Select.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as THREE from 'three';
+import { ThreeElements } from '@react-three/fiber';
+export type SelectProps = Omit<ThreeElements['group'], 'ref'> & {
+    multiple?: boolean;
+    box?: boolean;
+    border?: string;
+    backgroundColor?: string;
+    onChange?: (selected: THREE.Object3D[]) => void;
+    onChangePointerUp?: (selected: THREE.Object3D[]) => void;
+    filter?: (selected: THREE.Object3D[]) => THREE.Object3D[];
+};
+export declare function Select({ box, multiple, children, onChange, onChangePointerUp, border, backgroundColor, filter: customFilter, ...props }: SelectProps): React.JSX.Element;
+export declare function useSelect(): THREE.Object3D[];