@react-three/drei 10.7.6 → 10.8.0-alpha.1

package/web/Html.cjs.js

@@ -1 +0,0 @@
-"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("three"),o=require("@react-three/fiber");function i(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 a=i(e),c=s(t),l=s(r);const u=new n.Vector3,d=new n.Vector3,m=new n.Vector3,f=new n.Vector2;function h(e,t,r){const n=u.setFromMatrixPosition(e.matrixWorld);n.project(t);const o=r.width/2,i=r.height/2;return[n.x*o+o,-n.y*i+i]}const p=e=>Math.abs(e)<1e-10?0:e;function x(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 v=(y=[1,-1,1,1,1,-1,1,1,1,-1,1,1,1,-1,1,1],e=>x(e,y));var y;const g=(e,t)=>{return x(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};const M=c.forwardRef((({children:e,eps:t=.001,style:r,className:i,prepend:s,center:x,fullscreen:y,portal:M,distanceFactor:b,sprite:P=!1,transform:w=!1,occlude:E,onOcclude:W,castShadow:S,receiveShadow:$,material:j,geometry:z,zIndexRange:O=[16777271,0],calculatePosition:R=h,as:F="div",wrapperClass:C,pointerEvents:T="auto",...I},A)=>{const{gl:k,camera:H,scene:N,size:V,raycaster:_,events:q,viewport:L}=o.useThree(),[D]=c.useState((()=>document.createElement(F))),G=c.useRef(null),Z=c.useRef(null),B=c.useRef(0),J=c.useRef([0,0]),K=c.useRef(null),Q=c.useRef(null),U=(null==M?void 0:M.current)||q.connected||k.domElement.parentNode,X=c.useRef(null),Y=c.useRef(!1),ee=c.useMemo((()=>E&&"blending"!==E||Array.isArray(E)&&E.length&&function(e){return e&&"object"==typeof e&&"current"in e}(E[0])),[E]);c.useLayoutEffect((()=>{const e=k.domElement;E&&"blending"===E?(e.style.zIndex=`${Math.floor(O[0]/2)}`,e.style.position="absolute",e.style.pointerEvents="none"):(e.style.zIndex=null,e.style.position=null,e.style.pointerEvents=null)}),[E]),c.useLayoutEffect((()=>{if(Z.current){const e=G.current=l.createRoot(D);if(N.updateMatrixWorld(),w)D.style.cssText="position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";else{const e=R(Z.current,H,V);D.style.cssText=`position:absolute;top:0;left:0;transform:translate3d(${e[0]}px,${e[1]}px,0);transform-origin:0 0;`}return U&&(s?U.prepend(D):U.appendChild(D)),()=>{U&&U.removeChild(D),e.unmount()}}}),[U,w]),c.useLayoutEffect((()=>{C&&(D.className=C)}),[C]);const te=c.useMemo((()=>w?{position:"absolute",top:0,left:0,width:V.width,height:V.height,transformStyle:"preserve-3d",pointerEvents:"none"}:{position:"absolute",transform:x?"translate3d(-50%,-50%,0)":"none",...y&&{top:-V.height/2,left:-V.width/2,width:V.width,height:V.height},...r}),[r,x,y,V,w]),re=c.useMemo((()=>({position:"absolute",pointerEvents:T})),[T]);c.useLayoutEffect((()=>{var t,n;(Y.current=!1,w)?null==(t=G.current)||t.render(c.createElement("div",{ref:K,style:te},c.createElement("div",{ref:Q,style:re},c.createElement("div",{ref:A,className:i,style:r,children:e})))):null==(n=G.current)||n.render(c.createElement("div",{ref:A,style:te,className:i,children:e}))}));const ne=c.useRef(!0);o.useFrame((e=>{if(Z.current){H.updateMatrixWorld(),Z.current.updateWorldMatrix(!0,!1);const e=w?J.current:R(Z.current,H,V);if(w||Math.abs(B.current-H.zoom)>t||Math.abs(J.current[0]-e[0])>t||Math.abs(J.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),i=t.getWorldDirection(m);return o.angleTo(i)>Math.PI/2}(Z.current,H);let r=!1;ee&&(Array.isArray(E)?r=E.map((e=>e.current)):"blending"!==E&&(r=[N]));const o=ne.current;if(r){const e=function(e,t,r,n){const o=u.setFromMatrixPosition(e.matrixWorld),i=o.clone();i.project(t),f.set(i.x,i.y),r.setFromCamera(f,t);const s=r.intersectObjects(n,!0);if(s.length){const e=s[0].distance;return o.distanceTo(r.ray.origin)<e}return!0}(Z.current,H,_,r);ne.current=e&&!t}else ne.current=!t;o!==ne.current&&(W?W(!ne.current):D.style.display=ne.current?"block":"none");const i=Math.floor(O[0]/2),s=E?ee?[O[0],i]:[i-1,0]:O;if(D.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),i=n.distanceTo(o),s=(r[1]-r[0])/(t.far-t.near),a=r[1]-s*t.far;return Math.round(s*i+a)}}(Z.current,H,s)}`,w){const[e,t]=[V.width/2,V.height/2],r=H.projectionMatrix.elements[5]*t,{isOrthographicCamera:n,top:o,left:i,bottom:s,right:a}=H,c=v(H.matrixWorldInverse),l=n?`scale(${r})translate(${p(-(a+i)/2)}px,${p((o+s)/2)}px)`:`translateZ(${r}px)`;let u=Z.current.matrixWorld;P&&(u=H.matrixWorldInverse.clone().transpose().copyPosition(u).scale(Z.current.scale),u.elements[3]=u.elements[7]=u.elements[11]=0,u.elements[15]=1),D.style.width=V.width+"px",D.style.height=V.height+"px",D.style.perspective=n?"":`${r}px`,K.current&&Q.current&&(K.current.style.transform=`${l}${c}translate(${e}px,${t}px)`,Q.current.style.transform=g(u,1/((b||10)/400)))}else{const t=void 0===b?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,i=r.distanceTo(n);return 1/(2*Math.tan(o/2)*i)}return 1}(Z.current,H)*b;D.style.transform=`translate3d(${e[0]}px,${e[1]}px,0) scale(${t})`}J.current=e,B.current=H.zoom}}if(!ee&&X.current&&!Y.current)if(w){if(K.current){const e=K.current.children[0];if(null!=e&&e.clientWidth&&null!=e&&e.clientHeight){const{isOrthographicCamera:t}=H;if(t||z)I.scale&&(Array.isArray(I.scale)?I.scale instanceof n.Vector3?X.current.scale.copy(I.scale.clone().divideScalar(1)):X.current.scale.set(1/I.scale[0],1/I.scale[1],1/I.scale[2]):X.current.scale.setScalar(1/I.scale));else{const t=(b||10)/400,r=e.clientWidth*t,n=e.clientHeight*t;X.current.scale.set(r,n,1)}Y.current=!0}}}else{const t=D.children[0];if(null!=t&&t.clientWidth&&null!=t&&t.clientHeight){const e=1/L.factor,r=t.clientWidth*e,n=t.clientHeight*e;X.current.scale.set(r,n,1),Y.current=!0}X.current.lookAt(e.camera.position)}}));const oe=c.useMemo((()=>({vertexShader:w?void 0:'\n          /*\n            This shader is from the THREE\'s SpriteMaterial.\n            We need to turn the backing plane into a Sprite\n            (make it always face the camera) if "transfrom"\n            is false.\n          */\n          #include <common>\n\n          void main() {\n            vec2 center = vec2(0., 1.);\n            float rotation = 0.0;\n\n            // This is somewhat arbitrary, but it seems to work well\n            // Need to figure out how to derive this dynamically if it even matters\n            float size = 0.03;\n\n            vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );\n            vec2 scale;\n            scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );\n            scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );\n\n            bool isPerspective = isPerspectiveMatrix( projectionMatrix );\n            if ( isPerspective ) scale *= - mvPosition.z;\n\n            vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;\n            vec2 rotatedPosition;\n            rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;\n            rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;\n            mvPosition.xy += rotatedPosition;\n\n            gl_Position = projectionMatrix * mvPosition;\n          }\n      ',fragmentShader:"\n        void main() {\n          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\n        }\n      "})),[w]);return c.createElement("group",a.default({},I,{ref:Z}),E&&!ee&&c.createElement("mesh",{castShadow:S,receiveShadow:$,ref:X},z||c.createElement("planeGeometry",null),j||c.createElement("shaderMaterial",{side:n.DoubleSide,vertexShader:oe.vertexShader,fragmentShader:oe.fragmentShader})))}));exports.Html=M;

package/web/Html.d.ts

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { Object3D, Camera } from 'three';
-import { Assign } from 'utility-types';
-import { ThreeElements } from '@react-three/fiber';
-import { ForwardRefComponent } from '../helpers/ts-utils';
-declare function defaultCalculatePosition(el: Object3D, camera: Camera, size: {
-    width: number;
-    height: number;
-}): number[];
-export type CalculatePosition = typeof defaultCalculatePosition;
-type PointerEventsProperties = 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all' | 'inherit';
-export interface HtmlProps extends Omit<Assign<React.HTMLAttributes<HTMLDivElement>, ThreeElements['group']>, 'ref'> {
-    prepend?: boolean;
-    center?: boolean;
-    fullscreen?: boolean;
-    eps?: number;
-    portal?: React.RefObject<HTMLElement>;
-    distanceFactor?: number;
-    sprite?: boolean;
-    transform?: boolean;
-    zIndexRange?: Array<number>;
-    calculatePosition?: CalculatePosition;
-    as?: string;
-    wrapperClass?: string;
-    pointerEvents?: PointerEventsProperties;
-    occlude?: React.RefObject<Object3D>[] | boolean | 'raycast' | 'blending';
-    onOcclude?: (hidden: boolean) => void;
-    material?: React.ReactNode;
-    geometry?: React.ReactNode;
-    castShadow?: boolean;
-    receiveShadow?: boolean;
-}
-export declare const Html: ForwardRefComponent<HtmlProps, HTMLDivElement>;
-export {};

package/web/Html.js

@@ -1,375 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
-import { Vector3, DoubleSide, OrthographicCamera, PerspectiveCamera, Vector2 } from 'three';
-import { useThree, useFrame } from '@react-three/fiber';
-
-const v1 = /* @__PURE__ */new Vector3();
-const v2 = /* @__PURE__ */new Vector3();
-const v3 = /* @__PURE__ */new Vector3();
-const v4 = /* @__PURE__ */new Vector2();
-function defaultCalculatePosition(el, camera, size) {
-  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
-  objectPos.project(camera);
-  const widthHalf = size.width / 2;
-  const heightHalf = size.height / 2;
-  return [objectPos.x * widthHalf + widthHalf, -(objectPos.y * heightHalf) + heightHalf];
-}
-function isObjectBehindCamera(el, camera) {
-  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
-  const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
-  const deltaCamObj = objectPos.sub(cameraPos);
-  const camDir = camera.getWorldDirection(v3);
-  return deltaCamObj.angleTo(camDir) > Math.PI / 2;
-}
-function isObjectVisible(el, camera, raycaster, occlude) {
-  const elPos = v1.setFromMatrixPosition(el.matrixWorld);
-  const screenPos = elPos.clone();
-  screenPos.project(camera);
-  v4.set(screenPos.x, screenPos.y);
-  raycaster.setFromCamera(v4, camera);
-  const intersects = raycaster.intersectObjects(occlude, true);
-  if (intersects.length) {
-    const intersectionDistance = intersects[0].distance;
-    const pointDistance = elPos.distanceTo(raycaster.ray.origin);
-    return pointDistance < intersectionDistance;
-  }
-  return true;
-}
-function objectScale(el, camera) {
-  if (camera instanceof OrthographicCamera) {
-    return camera.zoom;
-  } else if (camera instanceof PerspectiveCamera) {
-    const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
-    const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
-    const vFOV = camera.fov * Math.PI / 180;
-    const dist = objectPos.distanceTo(cameraPos);
-    const scaleFOV = 2 * Math.tan(vFOV / 2) * dist;
-    return 1 / scaleFOV;
-  } else {
-    return 1;
-  }
-}
-function objectZIndex(el, camera, zIndexRange) {
-  if (camera instanceof PerspectiveCamera || camera instanceof OrthographicCamera) {
-    const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
-    const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
-    const dist = objectPos.distanceTo(cameraPos);
-    const A = (zIndexRange[1] - zIndexRange[0]) / (camera.far - camera.near);
-    const B = zIndexRange[1] - A * camera.far;
-    return Math.round(A * dist + B);
-  }
-  return undefined;
-}
-const epsilon = value => Math.abs(value) < 1e-10 ? 0 : value;
-function getCSSMatrix(matrix, multipliers, prepend = '') {
-  let matrix3d = 'matrix3d(';
-  for (let i = 0; i !== 16; i++) {
-    matrix3d += epsilon(multipliers[i] * matrix.elements[i]) + (i !== 15 ? ',' : ')');
-  }
-  return prepend + matrix3d;
-}
-const getCameraCSSMatrix = (multipliers => {
-  return matrix => getCSSMatrix(matrix, multipliers);
-})([1, -1, 1, 1, 1, -1, 1, 1, 1, -1, 1, 1, 1, -1, 1, 1]);
-const getObjectCSSMatrix = (scaleMultipliers => {
-  return (matrix, factor) => getCSSMatrix(matrix, scaleMultipliers(factor), 'translate(-50%,-50%)');
-})(f => [1 / f, 1 / f, 1 / f, 1, -1 / f, -1 / f, -1 / f, -1, 1 / f, 1 / f, 1 / f, 1, 1, 1, 1, 1]);
-function isRefObject(ref) {
-  return ref && typeof ref === 'object' && 'current' in ref;
-}
-const Html = /* @__PURE__ */React.forwardRef(({
-  children,
-  eps = 0.001,
-  style,
-  className,
-  prepend,
-  center,
-  fullscreen,
-  portal,
-  distanceFactor,
-  sprite = false,
-  transform = false,
-  occlude,
-  onOcclude,
-  castShadow,
-  receiveShadow,
-  material,
-  geometry,
-  zIndexRange = [16777271, 0],
-  calculatePosition = defaultCalculatePosition,
-  as = 'div',
-  wrapperClass,
-  pointerEvents = 'auto',
-  ...props
-}, ref) => {
-  const {
-    gl,
-    camera,
-    scene,
-    size,
-    raycaster,
-    events,
-    viewport
-  } = useThree();
-  const [el] = React.useState(() => document.createElement(as));
-  const root = React.useRef(null);
-  const group = React.useRef(null);
-  const oldZoom = React.useRef(0);
-  const oldPosition = React.useRef([0, 0]);
-  const transformOuterRef = React.useRef(null);
-  const transformInnerRef = React.useRef(null);
-  // Append to the connected element, which makes HTML work with views
-  const target = (portal == null ? void 0 : portal.current) || events.connected || gl.domElement.parentNode;
-  const occlusionMeshRef = React.useRef(null);
-  const isMeshSizeSet = React.useRef(false);
-  const isRayCastOcclusion = React.useMemo(() => {
-    return occlude && occlude !== 'blending' || Array.isArray(occlude) && occlude.length && isRefObject(occlude[0]);
-  }, [occlude]);
-  React.useLayoutEffect(() => {
-    const el = gl.domElement;
-    if (occlude && occlude === 'blending') {
-      el.style.zIndex = `${Math.floor(zIndexRange[0] / 2)}`;
-      el.style.position = 'absolute';
-      el.style.pointerEvents = 'none';
-    } else {
-      el.style.zIndex = null;
-      el.style.position = null;
-      el.style.pointerEvents = null;
-    }
-  }, [occlude]);
-  React.useLayoutEffect(() => {
-    if (group.current) {
-      const currentRoot = root.current = ReactDOM.createRoot(el);
-      scene.updateMatrixWorld();
-      if (transform) {
-        el.style.cssText = `position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;`;
-      } else {
-        const vec = calculatePosition(group.current, camera, size);
-        el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
-      }
-      if (target) {
-        if (prepend) target.prepend(el);else target.appendChild(el);
-      }
-      return () => {
-        if (target) target.removeChild(el);
-        currentRoot.unmount();
-      };
-    }
-  }, [target, transform]);
-  React.useLayoutEffect(() => {
-    if (wrapperClass) el.className = wrapperClass;
-  }, [wrapperClass]);
-  const styles = React.useMemo(() => {
-    if (transform) {
-      return {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: size.width,
-        height: size.height,
-        transformStyle: 'preserve-3d',
-        pointerEvents: 'none'
-      };
-    } else {
-      return {
-        position: 'absolute',
-        transform: center ? 'translate3d(-50%,-50%,0)' : 'none',
-        ...(fullscreen && {
-          top: -size.height / 2,
-          left: -size.width / 2,
-          width: size.width,
-          height: size.height
-        }),
-        ...style
-      };
-    }
-  }, [style, center, fullscreen, size, transform]);
-  const transformInnerStyles = React.useMemo(() => ({
-    position: 'absolute',
-    pointerEvents
-  }), [pointerEvents]);
-  React.useLayoutEffect(() => {
-    isMeshSizeSet.current = false;
-    if (transform) {
-      var _root$current;
-      (_root$current = root.current) == null || _root$current.render(/*#__PURE__*/React.createElement("div", {
-        ref: transformOuterRef,
-        style: styles
-      }, /*#__PURE__*/React.createElement("div", {
-        ref: transformInnerRef,
-        style: transformInnerStyles
-      }, /*#__PURE__*/React.createElement("div", {
-        ref: ref,
-        className: className,
-        style: style,
-        children: children
-      }))));
-    } else {
-      var _root$current2;
-      (_root$current2 = root.current) == null || _root$current2.render(/*#__PURE__*/React.createElement("div", {
-        ref: ref,
-        style: styles,
-        className: className,
-        children: children
-      }));
-    }
-  });
-  const visible = React.useRef(true);
-  useFrame(gl => {
-    if (group.current) {
-      camera.updateMatrixWorld();
-      group.current.updateWorldMatrix(true, false);
-      const vec = transform ? oldPosition.current : calculatePosition(group.current, camera, size);
-      if (transform || Math.abs(oldZoom.current - camera.zoom) > eps || Math.abs(oldPosition.current[0] - vec[0]) > eps || Math.abs(oldPosition.current[1] - vec[1]) > eps) {
-        const isBehindCamera = isObjectBehindCamera(group.current, camera);
-        let raytraceTarget = false;
-        if (isRayCastOcclusion) {
-          if (Array.isArray(occlude)) {
-            raytraceTarget = occlude.map(item => item.current);
-          } else if (occlude !== 'blending') {
-            raytraceTarget = [scene];
-          }
-        }
-        const previouslyVisible = visible.current;
-        if (raytraceTarget) {
-          const isvisible = isObjectVisible(group.current, camera, raycaster, raytraceTarget);
-          visible.current = isvisible && !isBehindCamera;
-        } else {
-          visible.current = !isBehindCamera;
-        }
-        if (previouslyVisible !== visible.current) {
-          if (onOcclude) onOcclude(!visible.current);else el.style.display = visible.current ? 'block' : 'none';
-        }
-        const halfRange = Math.floor(zIndexRange[0] / 2);
-        const zRange = occlude ? isRayCastOcclusion //
-        ? [zIndexRange[0], halfRange] : [halfRange - 1, 0] : zIndexRange;
-        el.style.zIndex = `${objectZIndex(group.current, camera, zRange)}`;
-        if (transform) {
-          const [widthHalf, heightHalf] = [size.width / 2, size.height / 2];
-          const fov = camera.projectionMatrix.elements[5] * heightHalf;
-          const {
-            isOrthographicCamera,
-            top,
-            left,
-            bottom,
-            right
-          } = camera;
-          const cameraMatrix = getCameraCSSMatrix(camera.matrixWorldInverse);
-          const cameraTransform = isOrthographicCamera ? `scale(${fov})translate(${epsilon(-(right + left) / 2)}px,${epsilon((top + bottom) / 2)}px)` : `translateZ(${fov}px)`;
-          let matrix = group.current.matrixWorld;
-          if (sprite) {
-            matrix = camera.matrixWorldInverse.clone().transpose().copyPosition(matrix).scale(group.current.scale);
-            matrix.elements[3] = matrix.elements[7] = matrix.elements[11] = 0;
-            matrix.elements[15] = 1;
-          }
-          el.style.width = size.width + 'px';
-          el.style.height = size.height + 'px';
-          el.style.perspective = isOrthographicCamera ? '' : `${fov}px`;
-          if (transformOuterRef.current && transformInnerRef.current) {
-            transformOuterRef.current.style.transform = `${cameraTransform}${cameraMatrix}translate(${widthHalf}px,${heightHalf}px)`;
-            transformInnerRef.current.style.transform = getObjectCSSMatrix(matrix, 1 / ((distanceFactor || 10) / 400));
-          }
-        } else {
-          const scale = distanceFactor === undefined ? 1 : objectScale(group.current, camera) * distanceFactor;
-          el.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(${scale})`;
-        }
-        oldPosition.current = vec;
-        oldZoom.current = camera.zoom;
-      }
-    }
-    if (!isRayCastOcclusion && occlusionMeshRef.current && !isMeshSizeSet.current) {
-      if (transform) {
-        if (transformOuterRef.current) {
-          const el = transformOuterRef.current.children[0];
-          if (el != null && el.clientWidth && el != null && el.clientHeight) {
-            const {
-              isOrthographicCamera
-            } = camera;
-            if (isOrthographicCamera || geometry) {
-              if (props.scale) {
-                if (!Array.isArray(props.scale)) {
-                  occlusionMeshRef.current.scale.setScalar(1 / props.scale);
-                } else if (props.scale instanceof Vector3) {
-                  occlusionMeshRef.current.scale.copy(props.scale.clone().divideScalar(1));
-                } else {
-                  occlusionMeshRef.current.scale.set(1 / props.scale[0], 1 / props.scale[1], 1 / props.scale[2]);
-                }
-              }
-            } else {
-              const ratio = (distanceFactor || 10) / 400;
-              const w = el.clientWidth * ratio;
-              const h = el.clientHeight * ratio;
-              occlusionMeshRef.current.scale.set(w, h, 1);
-            }
-            isMeshSizeSet.current = true;
-          }
-        }
-      } else {
-        const ele = el.children[0];
-        if (ele != null && ele.clientWidth && ele != null && ele.clientHeight) {
-          const ratio = 1 / viewport.factor;
-          const w = ele.clientWidth * ratio;
-          const h = ele.clientHeight * ratio;
-          occlusionMeshRef.current.scale.set(w, h, 1);
-          isMeshSizeSet.current = true;
-        }
-        occlusionMeshRef.current.lookAt(gl.camera.position);
-      }
-    }
-  });
-  const shaders = React.useMemo(() => ({
-    vertexShader: !transform ? /* glsl */`
-          /*
-            This shader is from the THREE's SpriteMaterial.
-            We need to turn the backing plane into a Sprite
-            (make it always face the camera) if "transfrom"
-            is false.
-          */
-          #include <common>
-
-          void main() {
-            vec2 center = vec2(0., 1.);
-            float rotation = 0.0;
-
-            // This is somewhat arbitrary, but it seems to work well
-            // Need to figure out how to derive this dynamically if it even matters
-            float size = 0.03;
-
-            vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
-            vec2 scale;
-            scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
-            scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );
-
-            bool isPerspective = isPerspectiveMatrix( projectionMatrix );
-            if ( isPerspective ) scale *= - mvPosition.z;
-
-            vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;
-            vec2 rotatedPosition;
-            rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
-            rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
-            mvPosition.xy += rotatedPosition;
-
-            gl_Position = projectionMatrix * mvPosition;
-          }
-      ` : undefined,
-    fragmentShader: /* glsl */`
-        void main() {
-          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
-        }
-      `
-  }), [transform]);
-  return /*#__PURE__*/React.createElement("group", _extends({}, props, {
-    ref: group
-  }), occlude && !isRayCastOcclusion && /*#__PURE__*/React.createElement("mesh", {
-    castShadow: castShadow,
-    receiveShadow: receiveShadow,
-    ref: occlusionMeshRef
-  }, geometry || /*#__PURE__*/React.createElement("planeGeometry", null), material || /*#__PURE__*/React.createElement("shaderMaterial", {
-    side: DoubleSide,
-    vertexShader: shaders.vertexShader,
-    fragmentShader: shaders.fragmentShader
-  })));
-});
-
-export { Html };

package/web/KeyboardControls.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("zustand"),r=require("zustand/middleware");function n(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=n(e);const o=s.createContext(null);exports.KeyboardControls=function({map:e,children:n,onChange:u,domElement:c}){const a=e.map((e=>e.name+e.keys)).join("-"),d=s.useMemo((()=>t.create(r.subscribeWithSelector((()=>e.reduce(((e,t)=>({...e,[t.name]:!1})),{}))))),[a]),i=s.useMemo((()=>[d.subscribe,d.getState,d]),[a]),p=d.setState;return s.useEffect((()=>{const t=e.map((({name:e,keys:t,up:r})=>({keys:t,up:r,fn:t=>{p({[e]:t}),u&&u(e,t,i[1]())}}))).reduce(((e,{keys:t,fn:r,up:n=!0})=>(t.forEach((t=>e[t]={fn:r,pressed:!1,up:n})),e)),{}),r=({key:e,code:r})=>{const n=t[e]||t[r];if(!n)return;const{fn:s,pressed:o,up:u}=n;n.pressed=!0,!u&&o||s(!0)},n=({key:e,code:r})=>{const n=t[e]||t[r];if(!n)return;const{fn:s,up:o}=n;n.pressed=!1,o&&s(!1)},s=c||window;return s.addEventListener("keydown",r,{passive:!0}),s.addEventListener("keyup",n,{passive:!0}),()=>{s.removeEventListener("keydown",r),s.removeEventListener("keyup",n)}}),[c,a]),s.createElement(o.Provider,{value:i,children:n})},exports.useKeyboardControls=function(e){const[t,r,n]=s.useContext(o);return e?n(e):[t,r]};

package/web/KeyboardControls.d.ts

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { StoreApi } from 'zustand';
-type State = object;
-type StateSelector<T extends State, U> = (state: T) => U;
-type EqualityChecker<T> = (state: T, newState: T) => boolean;
-type StateListener<T> = (state: T, previousState: T) => void;
-type StoreApiWithSubscribeWithSelector<T extends State> = Omit<StoreApi<T>, 'subscribe'> & {
-    subscribe: {
-        (listener: StateListener<T>): () => void;
-        <StateSlice>(selector: StateSelector<T, StateSlice>, listener: StateListener<StateSlice>, options?: {
-            equalityFn?: EqualityChecker<StateSlice>;
-            fireImmediately?: boolean;
-        }): () => void;
-    };
-};
-type KeyboardControlsState<T extends string = string> = {
-    [K in T]: boolean;
-};
-export type KeyboardControlsEntry<T extends string = string> = {
-    name: T;
-    keys: string[];
-    up?: boolean;
-};
-export type KeyboardControlsProps = {
-    map: KeyboardControlsEntry[];
-    children: React.ReactNode;
-    onChange?: (name: string, pressed: boolean, state: KeyboardControlsState) => void;
-    domElement?: HTMLElement;
-};
-export declare function KeyboardControls({ map, children, onChange, domElement }: KeyboardControlsProps): React.JSX.Element;
-type Selector<T extends string = string> = (state: KeyboardControlsState<T>) => boolean;
-export declare function useKeyboardControls<T extends string = string>(): [
-    StoreApiWithSubscribeWithSelector<KeyboardControlsState<T>>['subscribe'],
-    StoreApiWithSubscribeWithSelector<KeyboardControlsState<T>>['getState']
-];
-export declare function useKeyboardControls<T extends string = string>(sel: Selector<T>): ReturnType<Selector<T>>;
-export {};

package/web/KeyboardControls.js

@@ -1,104 +0,0 @@
-import * as React from 'react';
-import { create } from 'zustand';
-import { subscribeWithSelector } from 'zustand/middleware';
-
-// These are removed in Zustand v4
-// unknown
-
-// Zustand v3 marked deprecations in 3.x, but there's no visible upgrade path
-
-const context = /* @__PURE__ */React.createContext(null);
-function KeyboardControls({
-  map,
-  children,
-  onChange,
-  domElement
-}) {
-  const key = map.map(item => item.name + item.keys).join('-');
-  const useControls = React.useMemo(() => {
-    return create(subscribeWithSelector(() => map.reduce((prev, cur) => ({
-      ...prev,
-      [cur.name]: false
-    }), {})));
-  }, [key]);
-  const api = React.useMemo(() => [useControls.subscribe, useControls.getState, useControls], [key]);
-  const set = useControls.setState;
-  React.useEffect(() => {
-    const config = map.map(({
-      name,
-      keys,
-      up
-    }) => ({
-      keys,
-      up,
-      fn: value => {
-        // Set zustand state
-        set({
-          [name]: value
-        });
-        // Inform callback
-        if (onChange) onChange(name, value, api[1]());
-      }
-    }));
-    const keyMap = config.reduce((out, {
-      keys,
-      fn,
-      up = true
-    }) => {
-      keys.forEach(key => out[key] = {
-        fn,
-        pressed: false,
-        up
-      });
-      return out;
-    }, {});
-    const downHandler = ({
-      key,
-      code
-    }) => {
-      const obj = keyMap[key] || keyMap[code];
-      if (!obj) return;
-      const {
-        fn,
-        pressed,
-        up
-      } = obj;
-      obj.pressed = true;
-      if (up || !pressed) fn(true);
-    };
-    const upHandler = ({
-      key,
-      code
-    }) => {
-      const obj = keyMap[key] || keyMap[code];
-      if (!obj) return;
-      const {
-        fn,
-        up
-      } = obj;
-      obj.pressed = false;
-      if (up) fn(false);
-    };
-    const source = domElement || window;
-    source.addEventListener('keydown', downHandler, {
-      passive: true
-    });
-    source.addEventListener('keyup', upHandler, {
-      passive: true
-    });
-    return () => {
-      source.removeEventListener('keydown', downHandler);
-      source.removeEventListener('keyup', upHandler);
-    };
-  }, [domElement, key]);
-  return /*#__PURE__*/React.createElement(context.Provider, {
-    value: api,
-    children: children
-  });
-}
-function useKeyboardControls(sel) {
-  const [sub, get, store] = React.useContext(context);
-  if (sel) return store(sel);else return [sub, get];
-}
-
-export { KeyboardControls, useKeyboardControls };

package/web/Loader.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../core/Progress.cjs.js");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("three"),require("zustand");var n=r(e);const a=e=>`Loading ${e.toFixed(2)}%`;const i={container:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"#171717",display:"flex",alignItems:"center",justifyContent:"center",transition:"opacity 300ms ease",zIndex:1e3},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"}};exports.Loader=function({containerStyles:e,innerStyles:r,barStyles:o,dataStyles:c,dataInterpolation:s=a,initialState:l=e=>e}){const{active:u,progress:f}=t.useProgress(),m=n.useRef(0),d=n.useRef(0),p=n.useRef(null),[y,b]=n.useState(l(u));n.useEffect((()=>{let e;return u!==y&&(e=setTimeout((()=>b(u)),300)),()=>clearTimeout(e)}),[y,u]);const g=n.useCallback((()=>{p.current&&(m.current+=(f-m.current)/2,(m.current>.95*f||100===f)&&(m.current=f),p.current.innerText=s(m.current),m.current<f&&(d.current=requestAnimationFrame(g)))}),[s,f]);return n.useEffect((()=>(g(),()=>cancelAnimationFrame(d.current))),[g]),y?n.createElement("div",{style:{...i.container,opacity:u?1:0,...e}},n.createElement("div",null,n.createElement("div",{style:{...i.inner,...r}},n.createElement("div",{style:{...i.bar,transform:`scaleX(${f/100})`,...o}}),n.createElement("span",{ref:p,style:{...i.data,...c}})))):null};

package/web/Loader.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { CSSProperties } from 'react';
-interface LoaderOptions {
-    containerStyles: CSSProperties;
-    innerStyles: CSSProperties;
-    barStyles: CSSProperties;
-    dataStyles: CSSProperties;
-    dataInterpolation: (p: number) => string;
-    initialState: (active: boolean) => boolean;
-}
-export declare function Loader({ containerStyles, innerStyles, barStyles, dataStyles, dataInterpolation, initialState, }: Partial<LoaderOptions>): React.JSX.Element | null;
-export {};