@react-three/drei 9.49.0 → 9.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "9.49.0",
+  "version": "9.50.0",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [

package/web/Html.cjs.js

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

package/web/Html.d.ts

@@ -18,12 +18,16 @@ export interface HtmlProps extends Omit<Assign<React.HTMLAttributes<HTMLDivEleme
     sprite?: boolean;
     transform?: boolean;
     zIndexRange?: Array<number>;
-    occlude?: React.RefObject<Object3D>[] | boolean;
-    onOcclude?: (visible: boolean) => null;
     calculatePosition?: CalculatePosition;
     as?: string;
     wrapperClass?: string;
     pointerEvents?: PointerEventsProperties;
+    occlude?: React.RefObject<Object3D>[] | boolean | 'raycast' | 'blending';
+    onOcclude?: (visible: boolean) => null;
+    material?: React.ReactNode;
+    geometry?: React.ReactNode;
+    castShadow?: boolean;
+    receiveShadow?: boolean;
 }
 export declare const Html: React.ForwardRefExoticComponent<HtmlProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/web/Html.js

@@ -1,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { Vector3, OrthographicCamera, PerspectiveCamera } from 'three';
+import { Vector3, DoubleSide, OrthographicCamera, PerspectiveCamera } from 'three';
 import { useThree, useFrame } from '@react-three/fiber';
 
 const v1 = new Vector3();
@@ -88,6 +88,10 @@ 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,
@@ -102,6 +106,10 @@ const Html = /*#__PURE__*/React.forwardRef(({
   transform = false,
   occlude,
   onOcclude,
+  castShadow,
+  receiveShadow,
+  material,
+  geometry,
   zIndexRange = [16777271, 0],
   calculatePosition = defaultCalculatePosition,
   as = 'div',
@@ -115,7 +123,8 @@ const Html = /*#__PURE__*/React.forwardRef(({
     scene,
     size,
     raycaster,
-    events
+    events,
+    viewport
   } = useThree();
   const [el] = React.useState(() => document.createElement(as));
   const root = React.useRef();
@@ -126,6 +135,24 @@ const Html = /*#__PURE__*/React.forwardRef(({
   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 === 'raycast' || Array.isArray(occlude) && occlude.length && isRefObject(occlude[0]);
+  }, [occlude]);
+  React.useLayoutEffect(() => {
+    const el = gl.domElement;
+
+    if (occlude) {
+      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, isRayCastOcclusion]);
   React.useLayoutEffect(() => {
     if (group.current) {
       const currentRoot = root.current = ReactDOM.createRoot(el);
@@ -181,6 +208,8 @@ const Html = /*#__PURE__*/React.forwardRef(({
     pointerEvents
   }), [pointerEvents]);
   React.useLayoutEffect(() => {
+    isMeshSizeSet.current = false;
+
     if (transform) {
       var _root$current;
 
@@ -208,7 +237,7 @@ const Html = /*#__PURE__*/React.forwardRef(({
     }
   });
   const visible = React.useRef(true);
-  useFrame(() => {
+  useFrame(gl => {
     if (group.current) {
       camera.updateMatrixWorld();
       group.current.updateWorldMatrix(true, false);
@@ -218,12 +247,12 @@ const Html = /*#__PURE__*/React.forwardRef(({
         const isBehindCamera = isObjectBehindCamera(group.current, camera);
         let raytraceTarget = false;
 
-        if (typeof occlude === 'boolean') {
-          if (occlude === true) {
+        if (isRayCastOcclusion) {
+          if (occlude === 'raycast') {
             raytraceTarget = [scene];
+          } else if (Array.isArray(occlude)) {
+            raytraceTarget = occlude.map(item => item.current);
           }
-        } else if (Array.isArray(occlude)) {
-          raytraceTarget = occlude.map(item => item.current);
         }
 
         const previouslyVisible = visible.current;
@@ -239,7 +268,10 @@ const Html = /*#__PURE__*/React.forwardRef(({
           if (onOcclude) onOcclude(!visible.current);else el.style.display = visible.current ? 'block' : 'none';
         }
 
-        el.style.zIndex = `${objectZIndex(group.current, camera, zIndexRange)}`;
+        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];
@@ -278,10 +310,108 @@ const Html = /*#__PURE__*/React.forwardRef(({
         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 };