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

package/web/Html.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("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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,375 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,12 @@
+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 {};