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

package/core/PerformanceMonitor.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("@react-three/fiber");function r(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var t=r(e);const o=e.createContext(null);exports.PerformanceMonitor=function({iterations:r=10,ms:a=250,threshold:c=.75,step:s=.1,factor:l=.5,flipflops:i=1/0,bounds:f=e=>e>100?[60,100]:[40,60],onIncline:u,onDecline:p,onChange:b,onFallback:h,children:d}){const g=Math.pow(10,0),[m,k]=e.useState((()=>({fps:0,index:0,factor:l,flipped:0,refreshrate:0,fallback:!1,frames:[],averages:[],subscriptions:new Map,subscribe:e=>{const n=Symbol();return m.subscriptions.set(n,e.current),()=>{m.subscriptions.delete(n)}}})));let v=0;return n.useFrame((()=>{const{frames:e,averages:n}=m;if(!m.fallback&&n.length<r){e.push(performance.now());const t=e[e.length-1]-e[0];if(t>=a){if(m.fps=Math.round(e.length/t*1e3*g)/g,m.refreshrate=Math.max(m.refreshrate,m.fps),n[m.index++%r]=m.fps,n.length===r){const[e,t]=f(m.refreshrate),o=n.filter((e=>e>=t)),a=n.filter((n=>n<e));o.length>r*c&&(m.factor=Math.min(1,m.factor+s),m.flipped++,u&&u(m),m.subscriptions.forEach((e=>e.onIncline&&e.onIncline(m)))),a.length>r*c&&(m.factor=Math.max(0,m.factor-s),m.flipped++,p&&p(m),m.subscriptions.forEach((e=>e.onDecline&&e.onDecline(m)))),v!==m.factor&&(v=m.factor,b&&b(m),m.subscriptions.forEach((e=>e.onChange&&e.onChange(m)))),m.flipped>i&&!m.fallback&&(m.fallback=!0,h&&h(m),m.subscriptions.forEach((e=>e.onFallback&&e.onFallback(m)))),m.averages=[]}m.frames=[]}}})),t.createElement(o.Provider,{value:m},d)},exports.usePerformanceMonitor=function({onIncline:n,onDecline:r,onChange:t,onFallback:a}){const c=e.useContext(o),s=e.useRef({onIncline:n,onDecline:r,onChange:t,onFallback:a});e.useLayoutEffect((()=>{s.current.onIncline=n,s.current.onDecline=r,s.current.onChange=t,s.current.onFallback=a}),[n,r,t,a]),e.useLayoutEffect((()=>c.subscribe(s)),[c])};

package/core/PerformanceMonitor.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+type PerformanceMonitorHookApi = {
+    onIncline: (api: PerformanceMonitorApi) => void;
+    onDecline: (api: PerformanceMonitorApi) => void;
+    onChange: (api: PerformanceMonitorApi) => void;
+    onFallback: (api: PerformanceMonitorApi) => void;
+};
+export type PerformanceMonitorApi = {
+    fps: number;
+    factor: number;
+    refreshrate: number;
+    frames: number[];
+    averages: number[];
+    index: number;
+    flipped: number;
+    fallback: boolean;
+    subscriptions: Map<Symbol, Partial<PerformanceMonitorHookApi>>;
+    subscribe: (ref: React.RefObject<Partial<PerformanceMonitorHookApi>>) => () => void;
+};
+export type PerformanceMonitorProps = {
+    ms?: number;
+    iterations?: number;
+    threshold?: number;
+    bounds?: (refreshrate: number) => [lower: number, upper: number];
+    flipflops?: number;
+    factor?: number;
+    step?: number;
+    onIncline?: (api: PerformanceMonitorApi) => void;
+    onDecline?: (api: PerformanceMonitorApi) => void;
+    onChange?: (api: PerformanceMonitorApi) => void;
+    onFallback?: (api: PerformanceMonitorApi) => void;
+    children?: React.ReactNode;
+};
+export declare function PerformanceMonitor({ iterations, ms, threshold, step, factor: _factor, flipflops, bounds, onIncline, onDecline, onChange, onFallback, children, }: PerformanceMonitorProps): React.JSX.Element;
+export declare function usePerformanceMonitor({ onIncline, onDecline, onChange, onFallback, }: Partial<PerformanceMonitorHookApi>): void;
+export {};

package/core/PerformanceMonitor.js

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { useState, useContext, useRef, useLayoutEffect, createContext } from 'react';
+import { useFrame } from '@react-three/fiber';
+
+const context = /* @__PURE__ */createContext(null);
+function PerformanceMonitor({
+  iterations = 10,
+  ms = 250,
+  threshold = 0.75,
+  step = 0.1,
+  factor: _factor = 0.5,
+  flipflops = Infinity,
+  bounds = refreshrate => refreshrate > 100 ? [60, 100] : [40, 60],
+  onIncline,
+  onDecline,
+  onChange,
+  onFallback,
+  children
+}) {
+  const decimalPlacesRatio = Math.pow(10, 0);
+  const [api, _] = useState(() => ({
+    fps: 0,
+    index: 0,
+    factor: _factor,
+    flipped: 0,
+    refreshrate: 0,
+    fallback: false,
+    frames: [],
+    averages: [],
+    subscriptions: new Map(),
+    subscribe: ref => {
+      const key = Symbol();
+      api.subscriptions.set(key, ref.current);
+      return () => void api.subscriptions.delete(key);
+    }
+  }));
+  let lastFactor = 0;
+  useFrame(() => {
+    const {
+      frames,
+      averages
+    } = api;
+
+    // If the fallback has been reached do not continue running samples
+    if (api.fallback) return;
+    if (averages.length < iterations) {
+      frames.push(performance.now());
+      const msPassed = frames[frames.length - 1] - frames[0];
+      if (msPassed >= ms) {
+        api.fps = Math.round(frames.length / msPassed * 1000 * decimalPlacesRatio) / decimalPlacesRatio;
+        api.refreshrate = Math.max(api.refreshrate, api.fps);
+        averages[api.index++ % iterations] = api.fps;
+        if (averages.length === iterations) {
+          const [lower, upper] = bounds(api.refreshrate);
+          const upperBounds = averages.filter(value => value >= upper);
+          const lowerBounds = averages.filter(value => value < lower);
+          // Trigger incline when more than -threshold- avgs exceed the upper bound
+          if (upperBounds.length > iterations * threshold) {
+            api.factor = Math.min(1, api.factor + step);
+            api.flipped++;
+            if (onIncline) onIncline(api);
+            api.subscriptions.forEach(value => value.onIncline && value.onIncline(api));
+          }
+          // Trigger decline when more than -threshold- avgs are below the lower bound
+          if (lowerBounds.length > iterations * threshold) {
+            api.factor = Math.max(0, api.factor - step);
+            api.flipped++;
+            if (onDecline) onDecline(api);
+            api.subscriptions.forEach(value => value.onDecline && value.onDecline(api));
+          }
+          if (lastFactor !== api.factor) {
+            lastFactor = api.factor;
+            if (onChange) onChange(api);
+            api.subscriptions.forEach(value => value.onChange && value.onChange(api));
+          }
+          if (api.flipped > flipflops && !api.fallback) {
+            api.fallback = true;
+            if (onFallback) onFallback(api);
+            api.subscriptions.forEach(value => value.onFallback && value.onFallback(api));
+          }
+          api.averages = [];
+
+          // Resetting the refreshrate creates more problems than it solves atm
+          // api.refreshrate = 0
+        }
+        api.frames = [];
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(context.Provider, {
+    value: api
+  }, children);
+}
+function usePerformanceMonitor({
+  onIncline,
+  onDecline,
+  onChange,
+  onFallback
+}) {
+  const api = useContext(context);
+  const ref = useRef({
+    onIncline,
+    onDecline,
+    onChange,
+    onFallback
+  });
+  useLayoutEffect(() => {
+    ref.current.onIncline = onIncline;
+    ref.current.onDecline = onDecline;
+    ref.current.onChange = onChange;
+    ref.current.onFallback = onFallback;
+  }, [onIncline, onDecline, onChange, onFallback]);
+  useLayoutEffect(() => api.subscribe(ref), [api]);
+}
+
+export { PerformanceMonitor, usePerformanceMonitor };

package/core/PerspectiveCamera.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("@react-three/fiber"),u=require("./Fbo.cjs.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var 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");var a=n(e),s=c(r);const l=s.forwardRef((({envMap:e,resolution:r=256,frames:n=1/0,makeDefault:c,children:l,...o},f)=>{const i=t.useThree((({set:e})=>e)),d=t.useThree((({camera:e})=>e)),b=t.useThree((({size:e})=>e)),p=s.useRef(null);s.useImperativeHandle(f,(()=>p.current),[]);const m=s.useRef(null),g=u.useFBO(r);s.useLayoutEffect((()=>{o.manual||(p.current.aspect=b.width/b.height)}),[b,o]),s.useLayoutEffect((()=>{p.current.updateProjectionMatrix()}));let h=0,v=null;const j="function"==typeof l;return t.useFrame((r=>{j&&(n===1/0||h<n)&&(m.current.visible=!1,r.gl.setRenderTarget(g),v=r.scene.background,e&&(r.scene.background=e),r.gl.render(r.scene,p.current),r.scene.background=v,r.gl.setRenderTarget(null),m.current.visible=!0,h++)})),s.useLayoutEffect((()=>{if(c){const e=d;return i((()=>({camera:p.current}))),()=>i((()=>({camera:e})))}}),[p,c,i]),s.createElement(s.Fragment,null,s.createElement("perspectiveCamera",a.default({ref:p},o),!j&&l),s.createElement("group",{ref:m},j&&l(g.texture)))}));exports.PerspectiveCamera=l;

package/core/PerspectiveCamera.d.ts

@@ -0,0 +1,14 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { PerspectiveCamera as PerspectiveCameraImpl } from 'three';
+import { ThreeElements } from '@react-three/fiber';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type PerspectiveCameraProps = Omit<ThreeElements['perspectiveCamera'], 'ref' | 'children'> & {
+    makeDefault?: boolean;
+    manual?: boolean;
+    children?: React.ReactNode | ((texture: THREE.Texture) => React.ReactNode);
+    frames?: number;
+    resolution?: number;
+    envMap?: THREE.Texture;
+};
+export declare const PerspectiveCamera: ForwardRefComponent<PerspectiveCameraProps, PerspectiveCameraImpl>;

package/core/PerspectiveCamera.js

@@ -0,0 +1,72 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import { useFBO } from './Fbo.js';
+
+const isFunction = node => typeof node === 'function';
+const PerspectiveCamera = /* @__PURE__ */React.forwardRef(({
+  envMap,
+  resolution = 256,
+  frames = Infinity,
+  makeDefault,
+  children,
+  ...props
+}, ref) => {
+  const set = useThree(({
+    set
+  }) => set);
+  const camera = useThree(({
+    camera
+  }) => camera);
+  const size = useThree(({
+    size
+  }) => size);
+  const cameraRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => cameraRef.current, []);
+  const groupRef = React.useRef(null);
+  const fbo = useFBO(resolution);
+  React.useLayoutEffect(() => {
+    if (!props.manual) {
+      cameraRef.current.aspect = size.width / size.height;
+    }
+  }, [size, props]);
+  React.useLayoutEffect(() => {
+    cameraRef.current.updateProjectionMatrix();
+  });
+  let count = 0;
+  let oldEnvMap = null;
+  const functional = isFunction(children);
+  useFrame(state => {
+    if (functional && (frames === Infinity || count < frames)) {
+      groupRef.current.visible = false;
+      state.gl.setRenderTarget(fbo);
+      oldEnvMap = state.scene.background;
+      if (envMap) state.scene.background = envMap;
+      state.gl.render(state.scene, cameraRef.current);
+      state.scene.background = oldEnvMap;
+      state.gl.setRenderTarget(null);
+      groupRef.current.visible = true;
+      count++;
+    }
+  });
+  React.useLayoutEffect(() => {
+    if (makeDefault) {
+      const oldCam = camera;
+      set(() => ({
+        camera: cameraRef.current
+      }));
+      return () => set(() => ({
+        camera: oldCam
+      }));
+    }
+    // The camera should not be part of the dependency list because this components camera is a stable reference
+    // that must exchange the default, and clean up after itself on unmount.
+  }, [cameraRef, makeDefault, set]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("perspectiveCamera", _extends({
+    ref: cameraRef
+  }, props), !functional && children), /*#__PURE__*/React.createElement("group", {
+    ref: groupRef
+  }, functional && children(fbo.texture)));
+});
+
+export { PerspectiveCamera };

package/core/PointMaterial.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("../helpers/constants.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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 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=a(e),l=o(t),c=o(r);const s=n.version>=154?"opaque_fragment":"output_fragment";class u extends l.PointsMaterial{constructor(e){super(e),this.onBeforeCompile=(e,t)=>{const{isWebGL2:r}=t.capabilities;e.fragmentShader=e.fragmentShader.replace(`#include <${s}>`,`\n        ${r?`#include <${s}>`:`#extension GL_OES_standard_derivatives : enable\n#include <${s}>`}\n      vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n      float r = dot(cxy, cxy);\n      float delta = fwidth(r);     \n      float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);\n      gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );\n      #include <tonemapping_fragment>\n      #include <${n.version>=154?"colorspace_fragment":"encodings_fragment"}>\n      `)}}}const f=c.forwardRef(((e,t)=>{const[r]=c.useState((()=>new u(null)));return c.createElement("primitive",i.default({},e,{object:r,ref:t,attach:"material"}))}));exports.PointMaterial=f,exports.PointMaterialImpl=u;

package/core/PointMaterial.d.ts

@@ -0,0 +1,8 @@
+import * as THREE from 'three';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+import { ThreeElements } from '@react-three/fiber';
+export declare class PointMaterialImpl extends THREE.PointsMaterial {
+    constructor(props: any);
+}
+export type PointMaterialProps = Omit<ThreeElements['pointsMaterial'], 'ref'>;
+export declare const PointMaterial: ForwardRefComponent<PointMaterialProps, PointMaterialImpl>;

package/core/PointMaterial.js

@@ -0,0 +1,36 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { version } from '../helpers/constants.js';
+
+const opaque_fragment = version >= 154 ? 'opaque_fragment' : 'output_fragment';
+class PointMaterialImpl extends THREE.PointsMaterial {
+  constructor(props) {
+    super(props);
+    this.onBeforeCompile = (shader, renderer) => {
+      const {
+        isWebGL2
+      } = renderer.capabilities;
+      shader.fragmentShader = shader.fragmentShader.replace(`#include <${opaque_fragment}>`, `
+        ${!isWebGL2 ? `#extension GL_OES_standard_derivatives : enable\n#include <${opaque_fragment}>` : `#include <${opaque_fragment}>`}
+      vec2 cxy = 2.0 * gl_PointCoord - 1.0;
+      float r = dot(cxy, cxy);
+      float delta = fwidth(r);     
+      float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
+      gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );
+      #include <tonemapping_fragment>
+      #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+      `);
+    };
+  }
+}
+const PointMaterial = /* @__PURE__ */React.forwardRef((props, ref) => {
+  const [material] = React.useState(() => new PointMaterialImpl(null));
+  return /*#__PURE__*/React.createElement("primitive", _extends({}, props, {
+    object: material,
+    ref: ref,
+    attach: "material"
+  }));
+});
+
+export { PointMaterial, PointMaterialImpl };

package/core/PointerLockControls.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=o(e),i=c(r);const u=i.forwardRef((({domElement:e,selector:r,onChange:o,onLock:c,onUnlock:u,enabled:a=!0,makeDefault:l,...f},d)=>{const{camera:m,...v}=f,h=t.useThree((e=>e.setEvents)),E=t.useThree((e=>e.gl)),b=t.useThree((e=>e.camera)),p=t.useThree((e=>e.invalidate)),k=t.useThree((e=>e.events)),L=t.useThree((e=>e.get)),g=t.useThree((e=>e.set)),j=m||b,y=e||k.connected||E.domElement,O=i.useMemo((()=>new n.PointerLockControls(j)),[j]);return i.useEffect((()=>{if(a){O.connect(y);const e=L().events.compute;return h({compute(e,t){const r=t.size.width/2,n=t.size.height/2;t.pointer.set(r/t.size.width*2-1,-n/t.size.height*2+1),t.raycaster.setFromCamera(t.pointer,t.camera)}}),()=>{O.disconnect(),h({compute:e})}}}),[a,O]),i.useEffect((()=>{const e=e=>{p(),o&&o(e)};O.addEventListener("change",e),c&&O.addEventListener("lock",c),u&&O.addEventListener("unlock",u);const t=()=>O.lock(),n=r?Array.from(document.querySelectorAll(r)):[document];return n.forEach((e=>e&&e.addEventListener("click",t))),()=>{O.removeEventListener("change",e),c&&O.removeEventListener("lock",c),u&&O.removeEventListener("unlock",u),n.forEach((e=>e?e.removeEventListener("click",t):void 0))}}),[o,c,u,r,O,p]),i.useEffect((()=>{if(l){const e=L().controls;return g({controls:O}),()=>g({controls:e})}}),[l,O]),i.createElement("primitive",s.default({ref:d,object:O},v))}));exports.PointerLockControls=u;

package/core/PointerLockControls.d.ts

@@ -0,0 +1,15 @@
+import { ThreeElement } from '@react-three/fiber';
+import * as THREE from 'three';
+import { PointerLockControls as PointerLockControlsImpl } from 'three-stdlib';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type PointerLockControlsProps = Omit<ThreeElement<typeof PointerLockControlsImpl>, 'ref' | 'args'> & {
+    domElement?: HTMLElement;
+    selector?: string;
+    enabled?: boolean;
+    camera?: THREE.Camera;
+    onChange?: (e?: THREE.Event) => void;
+    onLock?: (e?: THREE.Event) => void;
+    onUnlock?: (e?: THREE.Event) => void;
+    makeDefault?: boolean;
+};
+export declare const PointerLockControls: ForwardRefComponent<PointerLockControlsProps, PointerLockControlsImpl>;

package/core/PointerLockControls.js

@@ -0,0 +1,89 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { useThree } from '@react-three/fiber';
+import * as React from 'react';
+import { PointerLockControls as PointerLockControls$1 } from 'three-stdlib';
+
+const PointerLockControls = /* @__PURE__ */React.forwardRef(({
+  domElement,
+  selector,
+  onChange,
+  onLock,
+  onUnlock,
+  enabled = true,
+  makeDefault,
+  ...props
+}, ref) => {
+  const {
+    camera,
+    ...rest
+  } = props;
+  const setEvents = useThree(state => state.setEvents);
+  const gl = useThree(state => state.gl);
+  const defaultCamera = useThree(state => state.camera);
+  const invalidate = useThree(state => state.invalidate);
+  const events = useThree(state => state.events);
+  const get = useThree(state => state.get);
+  const set = useThree(state => state.set);
+  const explCamera = camera || defaultCamera;
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const controls = React.useMemo(() => new PointerLockControls$1(explCamera), [explCamera]);
+  React.useEffect(() => {
+    if (enabled) {
+      controls.connect(explDomElement);
+      // Force events to be centered while PLC is active
+      const oldComputeOffsets = get().events.compute;
+      setEvents({
+        compute(event, state) {
+          const offsetX = state.size.width / 2;
+          const offsetY = state.size.height / 2;
+          state.pointer.set(offsetX / state.size.width * 2 - 1, -(offsetY / state.size.height) * 2 + 1);
+          state.raycaster.setFromCamera(state.pointer, state.camera);
+        }
+      });
+      return () => {
+        controls.disconnect();
+        setEvents({
+          compute: oldComputeOffsets
+        });
+      };
+    }
+  }, [enabled, controls]);
+  React.useEffect(() => {
+    const callback = e => {
+      invalidate();
+      if (onChange) onChange(e);
+    };
+    controls.addEventListener('change', callback);
+    if (onLock) controls.addEventListener('lock', onLock);
+    if (onUnlock) controls.addEventListener('unlock', onUnlock);
+
+    // Enforce previous interaction
+    const handler = () => controls.lock();
+    const elements = selector ? Array.from(document.querySelectorAll(selector)) : [document];
+    elements.forEach(element => element && element.addEventListener('click', handler));
+    return () => {
+      controls.removeEventListener('change', callback);
+      if (onLock) controls.removeEventListener('lock', onLock);
+      if (onUnlock) controls.removeEventListener('unlock', onUnlock);
+      elements.forEach(element => element ? element.removeEventListener('click', handler) : undefined);
+    };
+  }, [onChange, onLock, onUnlock, selector, controls, invalidate]);
+  React.useEffect(() => {
+    if (makeDefault) {
+      const old = get().controls;
+      // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
+      set({
+        controls
+      });
+      return () => set({
+        controls: old
+      });
+    }
+  }, [makeDefault, controls]);
+  return /*#__PURE__*/React.createElement("primitive", _extends({
+    ref: ref,
+    object: controls
+  }, rest));
+});
+
+export { PointerLockControls };

package/core/Points.cjs.js

@@ -0,0 +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");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=a(e),o=s(t),u=s(r);const c=new o.Matrix4,l=new o.Ray,f=new o.Sphere,d=new o.Vector3;class p extends o.Group{constructor(){super(),this.size=0,this.color=new o.Color("white"),this.instance={current:void 0},this.instanceKey={current:void 0}}get geometry(){var e;return null==(e=this.instance.current)?void 0:e.geometry}raycast(e,t){var r,n;const a=this.instance.current;if(!a||!a.geometry)return;const s=a.userData.instances.indexOf(this.instanceKey);if(-1===s||s>a.geometry.drawRange.count)return;const i=null!==(r=null==(n=e.params.Points)?void 0:n.threshold)&&void 0!==r?r:1;if(f.set(this.getWorldPosition(d),i),!1===e.ray.intersectsSphere(f))return;c.copy(a.matrixWorld).invert(),l.copy(e.ray).applyMatrix4(c);const u=i/((this.scale.x+this.scale.y+this.scale.z)/3),p=u*u,m=l.distanceSqToPoint(this.position);if(m<p){const r=new o.Vector3;l.closestPointToPoint(this.position,r),r.applyMatrix4(this.matrixWorld);const n=e.ray.origin.distanceTo(r);if(n<e.near||n>e.far)return;t.push({distance:n,distanceToRay:Math.sqrt(m),point:r,index:s,face:null,object:this})}}}let m,y;const g=u.createContext(null),h=new o.Matrix4,b=new o.Vector3,x=u.forwardRef((({children:e,range:t,limit:r=1e3,...a},s)=>{const c=u.useRef(null);u.useImperativeHandle(s,(()=>c.current),[]);const[l,f]=u.useState([]),[[d,p,x]]=u.useState((()=>[new Float32Array(3*r),Float32Array.from({length:3*r},(()=>1)),Float32Array.from({length:r},(()=>1))]));u.useEffect((()=>{c.current.geometry.attributes.position.needsUpdate=!0})),n.useFrame((()=>{for(c.current.updateMatrix(),c.current.updateMatrixWorld(),h.copy(c.current.matrixWorld).invert(),c.current.geometry.drawRange.count=Math.min(r,void 0!==t?t:r,l.length),m=0;m<l.length;m++)y=l[m].current,y.getWorldPosition(b).applyMatrix4(h),b.toArray(d,3*m),c.current.geometry.attributes.position.needsUpdate=!0,y.matrixWorldNeedsUpdate=!0,y.color.toArray(p,3*m),c.current.geometry.attributes.color.needsUpdate=!0,x.set([y.size],m),c.current.geometry.attributes.size.needsUpdate=!0}));const w=u.useMemo((()=>({getParent:()=>c,subscribe:e=>(f((t=>[...t,e])),()=>f((t=>t.filter((t=>t.current!==e.current)))))})),[]);return u.createElement("points",i.default({userData:{instances:l},matrixAutoUpdate:!1,ref:c,raycast:()=>null},a),u.createElement("bufferGeometry",null,u.createElement("bufferAttribute",{attach:"attributes-position",args:[d,3],usage:o.DynamicDrawUsage}),u.createElement("bufferAttribute",{attach:"attributes-color",args:[p,3],usage:o.DynamicDrawUsage}),u.createElement("bufferAttribute",{attach:"attributes-size",args:[x,1],usage:o.DynamicDrawUsage})),u.createElement(g.Provider,{value:w},e))})),w=u.forwardRef((({children:e,...t},r)=>{u.useMemo((()=>n.extend({PositionPoint:p})),[]);const a=u.useRef(null);u.useImperativeHandle(r,(()=>a.current),[]);const{subscribe:s,getParent:o}=u.useContext(g);return u.useLayoutEffect((()=>s(a)),[]),u.createElement("positionPoint",i.default({instance:o(),instanceKey:a,ref:a},t),e)})),v=u.forwardRef((({children:e,positions:t,colors:r,sizes:a,stride:s=3,...c},l)=>{const f=u.useRef(null);return u.useImperativeHandle(l,(()=>f.current),[]),n.useFrame((()=>{const e=f.current.geometry.attributes;e.position.needsUpdate=!0,r&&(e.color.needsUpdate=!0),a&&(e.size.needsUpdate=!0)})),u.createElement("points",i.default({ref:f},c),u.createElement("bufferGeometry",null,u.createElement("bufferAttribute",{attach:"attributes-position",args:[t,s],usage:o.DynamicDrawUsage}),r&&u.createElement("bufferAttribute",{attach:"attributes-color",args:[r,s],count:r.length/s,usage:o.DynamicDrawUsage}),a&&u.createElement("bufferAttribute",{attach:"attributes-size",args:[a,1],count:a.length/s,usage:o.DynamicDrawUsage})),e)})),P=u.forwardRef(((e,t)=>e.positions instanceof Float32Array?u.createElement(v,i.default({},e,{ref:t})):u.createElement(x,i.default({},e,{ref:t}))));exports.Point=w,exports.Points=P,exports.PointsBuffer=v,exports.PositionPoint=p;

package/core/Points.d.ts

@@ -0,0 +1,31 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { ThreeElement, ThreeElements } from '@react-three/fiber';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        positionPoint: ThreeElement<typeof PositionPoint>;
+    }
+}
+export type PointsInstancesProps = Omit<ThreeElements['points'], 'ref'> & {
+    range?: number;
+    limit?: number;
+};
+export declare class PositionPoint extends THREE.Group {
+    size: number;
+    color: THREE.Color;
+    instance: React.RefObject<THREE.Points | undefined>;
+    instanceKey: React.RefObject<PositionPoint | undefined>;
+    constructor();
+    get geometry(): THREE.BufferGeometry<THREE.NormalBufferAttributes> | undefined;
+    raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void;
+}
+export declare const Point: ForwardRefComponent<ThreeElements['positionPoint'], PositionPoint>;
+export type PointsBuffersProps = ThreeElements['points'] & {
+    positions: Float32Array;
+    colors?: Float32Array;
+    sizes?: Float32Array;
+    stride?: 2 | 3;
+};
+export declare const PointsBuffer: ForwardRefComponent<PointsBuffersProps, THREE.Points>;
+export declare const Points: ForwardRefComponent<PointsBuffersProps | PointsInstancesProps, THREE.Points>;

package/core/Points.js

@@ -0,0 +1,202 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { extend, useFrame } from '@react-three/fiber';
+
+const _inverseMatrix = /* @__PURE__ */new THREE.Matrix4();
+const _ray = /* @__PURE__ */new THREE.Ray();
+const _sphere = /* @__PURE__ */new THREE.Sphere();
+const _position = /* @__PURE__ */new THREE.Vector3();
+class PositionPoint extends THREE.Group {
+  constructor() {
+    super();
+    this.size = 0;
+    this.color = new THREE.Color('white');
+    this.instance = {
+      current: undefined
+    };
+    this.instanceKey = {
+      current: undefined
+    };
+  }
+
+  // This will allow the virtual instance have bounds
+  get geometry() {
+    var _this$instance$curren;
+    return (_this$instance$curren = this.instance.current) == null ? void 0 : _this$instance$curren.geometry;
+  }
+  raycast(raycaster, intersects) {
+    var _raycaster$params$Poi, _raycaster$params$Poi2;
+    const parent = this.instance.current;
+    if (!parent || !parent.geometry) return;
+    const instanceId = parent.userData.instances.indexOf(this.instanceKey);
+    // If the instance wasn't found or exceeds the parents draw range, bail out
+    if (instanceId === -1 || instanceId > parent.geometry.drawRange.count) return;
+    const threshold = (_raycaster$params$Poi = (_raycaster$params$Poi2 = raycaster.params.Points) == null ? void 0 : _raycaster$params$Poi2.threshold) !== null && _raycaster$params$Poi !== void 0 ? _raycaster$params$Poi : 1;
+    _sphere.set(this.getWorldPosition(_position), threshold);
+    if (raycaster.ray.intersectsSphere(_sphere) === false) return;
+    _inverseMatrix.copy(parent.matrixWorld).invert();
+    _ray.copy(raycaster.ray).applyMatrix4(_inverseMatrix);
+    const localThreshold = threshold / ((this.scale.x + this.scale.y + this.scale.z) / 3);
+    const localThresholdSq = localThreshold * localThreshold;
+    const rayPointDistanceSq = _ray.distanceSqToPoint(this.position);
+    if (rayPointDistanceSq < localThresholdSq) {
+      const intersectPoint = new THREE.Vector3();
+      _ray.closestPointToPoint(this.position, intersectPoint);
+      intersectPoint.applyMatrix4(this.matrixWorld);
+      const distance = raycaster.ray.origin.distanceTo(intersectPoint);
+      if (distance < raycaster.near || distance > raycaster.far) return;
+      intersects.push({
+        distance: distance,
+        distanceToRay: Math.sqrt(rayPointDistanceSq),
+        point: intersectPoint,
+        index: instanceId,
+        face: null,
+        object: this
+      });
+    }
+  }
+}
+let i, positionRef;
+const context = /* @__PURE__ */React.createContext(null);
+const parentMatrix = /* @__PURE__ */new THREE.Matrix4();
+const position = /* @__PURE__ */new THREE.Vector3();
+
+/**
+ * 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,
+  ...props
+}, ref) => {
+  const parentRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => parentRef.current, []);
+  const [refs, setRefs] = React.useState([]);
+  const [[positions, colors, sizes]] = React.useState(() => [new Float32Array(limit * 3), Float32Array.from({
+    length: limit * 3
+  }, () => 1), Float32Array.from({
+    length: limit
+  }, () => 1)]);
+  React.useEffect(() => {
+    // We might be a frame too late? 🤷‍♂️
+    parentRef.current.geometry.attributes.position.needsUpdate = true;
+  });
+  useFrame(() => {
+    parentRef.current.updateMatrix();
+    parentRef.current.updateMatrixWorld();
+    parentMatrix.copy(parentRef.current.matrixWorld).invert();
+    parentRef.current.geometry.drawRange.count = Math.min(limit, range !== undefined ? range : limit, refs.length);
+    for (i = 0; i < refs.length; i++) {
+      positionRef = refs[i].current;
+      positionRef.getWorldPosition(position).applyMatrix4(parentMatrix);
+      position.toArray(positions, i * 3);
+      parentRef.current.geometry.attributes.position.needsUpdate = true;
+      positionRef.matrixWorldNeedsUpdate = true;
+      positionRef.color.toArray(colors, i * 3);
+      parentRef.current.geometry.attributes.color.needsUpdate = true;
+      sizes.set([positionRef.size], i);
+      parentRef.current.geometry.attributes.size.needsUpdate = true;
+    }
+  });
+  const api = React.useMemo(() => ({
+    getParent: () => parentRef,
+    subscribe: ref => {
+      setRefs(refs => [...refs, ref]);
+      return () => setRefs(refs => refs.filter(item => item.current !== ref.current));
+    }
+  }), []);
+  return /*#__PURE__*/React.createElement("points", _extends({
+    userData: {
+      instances: refs
+    },
+    matrixAutoUpdate: false,
+    ref: parentRef,
+    raycast: () => null
+  }, props), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-position",
+    args: [positions, 3],
+    usage: THREE.DynamicDrawUsage
+  }), /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-color",
+    args: [colors, 3],
+    usage: THREE.DynamicDrawUsage
+  }), /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-size",
+    args: [sizes, 1],
+    usage: THREE.DynamicDrawUsage
+  })), /*#__PURE__*/React.createElement(context.Provider, {
+    value: api
+  }, children));
+});
+const Point = /* @__PURE__ */React.forwardRef(({
+  children,
+  ...props
+}, ref) => {
+  React.useMemo(() => extend({
+    PositionPoint
+  }), []);
+  const group = React.useRef(null);
+  React.useImperativeHandle(ref, () => group.current, []);
+  const {
+    subscribe,
+    getParent
+  } = React.useContext(context);
+  React.useLayoutEffect(() => subscribe(group), []);
+  return /*#__PURE__*/React.createElement("positionPoint", _extends({
+    instance: getParent(),
+    instanceKey: group,
+    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);
+  React.useImperativeHandle(forwardedRef, () => pointsRef.current, []);
+  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({
+    ref: pointsRef
+  }, props), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-position",
+    args: [positions, stride],
+    usage: THREE.DynamicDrawUsage
+  }), colors && /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-color",
+    args: [colors, stride],
+    count: colors.length / stride,
+    usage: THREE.DynamicDrawUsage
+  }), sizes && /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-size",
+    args: [sizes, 1],
+    count: sizes.length / stride,
+    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
+    }));
+  } else return /*#__PURE__*/React.createElement(PointsInstances, _extends({}, props, {
+    ref: forwardedRef
+  }));
+});
+
+export { Point, Points, PointsBuffer, PositionPoint };

package/core/PositionalAudio.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("three"),u=require("@react-three/fiber");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(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)}var c=n(e),s=o(r);const a=s.forwardRef((({url:e,distance:r=1,loop:n=!0,autoplay:o,...a},i)=>{const f=s.useRef(null);s.useImperativeHandle(i,(()=>f.current),[]);const l=u.useThree((({camera:e})=>e)),[d]=s.useState((()=>new t.AudioListener)),p=u.useLoader(t.AudioLoader,e);return s.useEffect((()=>{const e=f.current;e&&(e.setBuffer(p),e.setRefDistance(r),e.setLoop(n),o&&!e.isPlaying&&e.play())}),[p,l,r,n]),s.useEffect((()=>{const e=f.current;return l.add(d),()=>{l.remove(d),e&&(e.isPlaying&&e.stop(),e.source&&e.source._connected&&e.disconnect())}}),[]),s.createElement("positionalAudio",c.default({ref:f,args:[d]},a))}));exports.PositionalAudio=a;