38 lines
7.6 KiB
JavaScript
38 lines
7.6 KiB
JavaScript
(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,60099,31067,e=>{"use strict";let t,r;function n(){return(n=Object.assign.bind()).apply(null,arguments)}e.s(["default",()=>n],31067);var i=e.i(71645),o=e.i(88014),l=e.i(90072),a=e.i(28600),s=e.i(25234);let c=new l.Vector3,u=new l.Vector3,d=new l.Vector3,m=new l.Vector2;function f(e,t,r){let n=c.setFromMatrixPosition(e.matrixWorld);n.project(t);let i=r.width/2,o=r.height/2;return[n.x*i+i,-(n.y*o)+o]}let h=e=>1e-10>Math.abs(e)?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}let x=(t=[1,-1,1,1,1,-1,1,1,1,-1,1,1,1,-1,1,1],e=>p(e,t)),v=(r=e=>[1/e,1/e,1/e,1,-1/e,-1/e,-1/e,-1,1/e,1/e,1/e,1,1,1,1,1],(e,t)=>p(e,r(t),"translate(-50%,-50%)")),y=i.forwardRef(({children:e,eps:t=.001,style:r,className:p,prepend:y,center:g,fullscreen:M,portal:P,distanceFactor:b,sprite:w=!1,transform:E=!1,occlude:W,onOcclude:S,castShadow:$,receiveShadow:R,material:T,geometry:z,zIndexRange:F=[0x1000037,0],calculatePosition:C=f,as:j="div",wrapperClass:A,pointerEvents:I="auto",...H},O)=>{let{gl:V,camera:k,scene:N,size:L,raycaster:B,events:D,viewport:K}=(0,a.useThree)(),[U]=i.useState(()=>document.createElement(j)),_=i.useRef(null),G=i.useRef(null),Z=i.useRef(0),q=i.useRef([0,0]),J=i.useRef(null),Q=i.useRef(null),X=(null==P?void 0:P.current)||D.connected||V.domElement.parentNode,Y=i.useRef(null),ee=i.useRef(!1),et=i.useMemo(()=>{var e;return W&&"blending"!==W||Array.isArray(W)&&W.length&&(e=W[0])&&"object"==typeof e&&"current"in e},[W]);i.useLayoutEffect(()=>{let e=V.domElement;W&&"blending"===W?(e.style.zIndex=`${Math.floor(F[0]/2)}`,e.style.position="absolute",e.style.pointerEvents="none"):(e.style.zIndex=null,e.style.position=null,e.style.pointerEvents=null)},[W]),i.useLayoutEffect(()=>{if(G.current){let e=_.current=o.createRoot(U);if(N.updateMatrixWorld(),E)U.style.cssText="position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";else{let e=C(G.current,k,L);U.style.cssText=`position:absolute;top:0;left:0;transform:translate3d(${e[0]}px,${e[1]}px,0);transform-origin:0 0;`}return X&&(y?X.prepend(U):X.appendChild(U)),()=>{X&&X.removeChild(U),e.unmount()}}},[X,E]),i.useLayoutEffect(()=>{A&&(U.className=A)},[A]);let er=i.useMemo(()=>E?{position:"absolute",top:0,left:0,width:L.width,height:L.height,transformStyle:"preserve-3d",pointerEvents:"none"}:{position:"absolute",transform:g?"translate3d(-50%,-50%,0)":"none",...M&&{top:-L.height/2,left:-L.width/2,width:L.width,height:L.height},...r},[r,g,M,L,E]),en=i.useMemo(()=>({position:"absolute",pointerEvents:I}),[I]);i.useLayoutEffect(()=>{var t,n;ee.current=!1,E?null==(t=_.current)||t.render(i.createElement("div",{ref:J,style:er},i.createElement("div",{ref:Q,style:en},i.createElement("div",{ref:O,className:p,style:r,children:e})))):null==(n=_.current)||n.render(i.createElement("div",{ref:O,style:er,className:p,children:e}))});let ei=i.useRef(!0);(0,s.useFrame)(e=>{if(G.current){k.updateMatrixWorld(),G.current.updateWorldMatrix(!0,!1);let e=E?q.current:C(G.current,k,L);if(E||Math.abs(Z.current-k.zoom)>t||Math.abs(q.current[0]-e[0])>t||Math.abs(q.current[1]-e[1])>t){var r;let t,n,i,o,a=(r=G.current,t=c.setFromMatrixPosition(r.matrixWorld),n=u.setFromMatrixPosition(k.matrixWorld),i=t.sub(n),o=k.getWorldDirection(d),i.angleTo(o)>Math.PI/2),s=!1;et&&(Array.isArray(W)?s=W.map(e=>e.current):"blending"!==W&&(s=[N]));let f=ei.current;s?ei.current=function(e,t,r,n){let i=c.setFromMatrixPosition(e.matrixWorld),o=i.clone();o.project(t),m.set(o.x,o.y),r.setFromCamera(m,t);let l=r.intersectObjects(n,!0);if(l.length){let e=l[0].distance;return i.distanceTo(r.ray.origin)<e}return!0}(G.current,k,B,s)&&!a:ei.current=!a,f!==ei.current&&(S?S(!ei.current):U.style.display=ei.current?"block":"none");let p=Math.floor(F[0]/2),y=W?et?[F[0],p]:[p-1,0]:F;if(U.style.zIndex=`${function(e,t,r){if(t instanceof l.PerspectiveCamera||t instanceof l.OrthographicCamera){let n=c.setFromMatrixPosition(e.matrixWorld),i=u.setFromMatrixPosition(t.matrixWorld),o=n.distanceTo(i),l=(r[1]-r[0])/(t.far-t.near),a=r[1]-l*t.far;return Math.round(l*o+a)}}(G.current,k,y)}`,E){let[e,t]=[L.width/2,L.height/2],r=k.projectionMatrix.elements[5]*t,{isOrthographicCamera:n,top:i,left:o,bottom:l,right:a}=k,s=x(k.matrixWorldInverse),c=n?`scale(${r})translate(${h(-(a+o)/2)}px,${h((i+l)/2)}px)`:`translateZ(${r}px)`,u=G.current.matrixWorld;w&&((u=k.matrixWorldInverse.clone().transpose().copyPosition(u).scale(G.current.scale)).elements[3]=u.elements[7]=u.elements[11]=0,u.elements[15]=1),U.style.width=L.width+"px",U.style.height=L.height+"px",U.style.perspective=n?"":`${r}px`,J.current&&Q.current&&(J.current.style.transform=`${c}${s}translate(${e}px,${t}px)`,Q.current.style.transform=v(u,1/((b||10)/400)))}else{let t=void 0===b?1:function(e,t){if(t instanceof l.OrthographicCamera)return t.zoom;if(!(t instanceof l.PerspectiveCamera))return 1;{let r=c.setFromMatrixPosition(e.matrixWorld),n=u.setFromMatrixPosition(t.matrixWorld);return 1/(2*Math.tan(t.fov*Math.PI/180/2)*r.distanceTo(n))}}(G.current,k)*b;U.style.transform=`translate3d(${e[0]}px,${e[1]}px,0) scale(${t})`}q.current=e,Z.current=k.zoom}}if(!et&&Y.current&&!ee.current)if(E){if(J.current){let e=J.current.children[0];if(null!=e&&e.clientWidth&&null!=e&&e.clientHeight){let{isOrthographicCamera:t}=k;if(t||z)H.scale&&(Array.isArray(H.scale)?H.scale instanceof l.Vector3?Y.current.scale.copy(H.scale.clone().divideScalar(1)):Y.current.scale.set(1/H.scale[0],1/H.scale[1],1/H.scale[2]):Y.current.scale.setScalar(1/H.scale));else{let t=(b||10)/400,r=e.clientWidth*t,n=e.clientHeight*t;Y.current.scale.set(r,n,1)}ee.current=!0}}}else{let t=U.children[0];if(null!=t&&t.clientWidth&&null!=t&&t.clientHeight){let e=1/K.factor,r=t.clientWidth*e,n=t.clientHeight*e;Y.current.scale.set(r,n,1),ee.current=!0}Y.current.lookAt(e.camera.position)}});let eo=i.useMemo(()=>({vertexShader:E?void 0:`
|
|
/*
|
|
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;
|
|
}
|
|
`,fragmentShader:`
|
|
void main() {
|
|
gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
|
|
}
|
|
`}),[E]);return i.createElement("group",n({},H,{ref:G}),W&&!et&&i.createElement("mesh",{castShadow:$,receiveShadow:R,ref:Y},z||i.createElement("planeGeometry",null),T||i.createElement("shaderMaterial",{side:l.DoubleSide,vertexShader:eo.vertexShader,fragmentShader:eo.fragmentShader})))});e.s(["Html",0,y],60099)}]); |