@yaelg/tresjs-core/dist/tres.iife.js

Declarative ThreeJS using Vue Components

/**
 * name: @yaelg/tresjs-core
 * version: v3.3.0
 * (c) 2023
 * description: Declarative ThreeJS using Vue Components
 * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
 */
var tres=function(P,c,_,w){"use strict";function oe(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const se=oe(_),I=({sizes:e,scene:n})=>{const t=c.ref([]),r=c.computed(()=>t.value[0]),a=(s,m=!1)=>{t.value.some(({uuid:i})=>i===s.uuid)||(m?f(s):t.value.push(s))},o=s=>{t.value=t.value.filter(({uuid:m})=>m!==s.uuid)},f=s=>{const m=s instanceof _.Camera?s:t.value.find(d=>d.uuid===s);if(!m)return;const i=t.value.filter(({uuid:d})=>d!==m.uuid);t.value=[m,...i]};return c.watchEffect(()=>{e.aspectRatio.value&&t.value.forEach(s=>{s instanceof _.PerspectiveCamera&&(s.aspect=e.aspectRatio.value),(s instanceof _.PerspectiveCamera||s instanceof _.OrthographicCamera)&&s.updateProjectionMatrix()})}),n.userData.tres__registerCamera=a,n.userData.tres__deregisterCamera=o,c.onUnmounted(()=>{t.value=[]}),{camera:r,cameras:t,registerCamera:a,deregisterCamera:o,setCameraActive:f}},W=w.createEventHook(),$=w.createEventHook(),F=w.createEventHook(),S=new _.Clock;let B=0,x=0;const{pause:ie,resume:le,isActive:ue}=w.useRafFn(()=>{W.trigger({delta:B,elapsed:x,clock:S}),$.trigger({delta:B,elapsed:x,clock:S}),F.trigger({delta:B,elapsed:x,clock:S})},{immediate:!1});F.on(()=>{B=S.getDelta(),x=S.getElapsedTime()});const G=()=>({onBeforeLoop:W.on,onLoop:$.on,onAfterLoop:F.on,pause:ie,resume:le,isActive:ue}),ce=!0,N="[TresJS ▲ ■ ●] ";function L(){function e(r,a){console.error(`${N} ${r}`,a||"")}function n(r){console.warn(`${N} ${r}`)}function t(r,a){}return{logError:e,logWarning:n,logMessage:t}}function fe(e){return typeof e=="number"?[e,e,e]:e instanceof _.Vector3?[e.x,e.y,e.z]:e}function U(e){return e instanceof _.Color?e:Array.isArray(e)?new _.Color(...e):new _.Color(e)}const q=(e,n)=>{for(const t of Object.keys(n))n[t]instanceof Object&&Object.assign(n[t],q(e[t],n[t]));return Object.assign(e||{},n),e},me=de("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot");function H(e){return e&&e.nodeType===1}function j(e){return e.replace(/-([a-z])/g,(n,t)=>t.toUpperCase())}function de(e,n){const t=Object.create(null),r=e.split(",");for(let a=0;a<r.length;a++)t[r[a]]=!0;return n?a=>!!t[a.toLowerCase()]:a=>!!t[a]}const pe=(e,n)=>{const t=new Set,r=[];for(const a of e){const o=n(a);t.has(o)||(t.add(o),r.push(a))}return r},J=(e,n)=>{if(!n)return;const t=Array.isArray(n)?n:n.match(/([^[.\]])+/g);return t==null?void 0:t.reduce((r,a)=>r&&r[a],e)},ge=(e,n,t)=>{const r=Array.isArray(n)?n:n.match(/([^[.\]])+/g);r&&r.reduce((a,o,f)=>(a[o]===void 0&&(a[o]={}),f===r.length-1&&(a[o]=t),a[o]),e)};function K(e,n){if(H(e)&&H(n)){const a=e.attributes,o=n.attributes;return a.length!==o.length?!1:Array.from(a).every(({name:f,value:s})=>n.getAttribute(f)===s)}if(e===n)return!0;if(e===null||typeof e!="object"||n===null||typeof n!="object")return!1;const t=Object.keys(e),r=Object.keys(n);if(t.length!==r.length)return!1;for(const a of t)if(!r.includes(a)||!K(e[a],n[a]))return!1;return!0}function ve(e,n){if(!Array.isArray(e)||!Array.isArray(n)||e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!K(e[t],n[t]))return!1;return!0}const ye=Array.isArray,we=Number.parseInt(_.REVISION.replace("dev","")),E={realistic:{shadows:!0,physicallyCorrectLights:!0,outputColorSpace:_.SRGBColorSpace,toneMapping:_.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:_.PCFSoftShadowMap}}};function X({scene:e,canvas:n,options:t,disableRender:r,contextParts:{sizes:a,camera:o}}){const f=c.computed(()=>({alpha:w.toValue(t.alpha),depth:w.toValue(t.depth),canvas:w.unrefElement(n),context:w.toValue(t.context),stencil:w.toValue(t.stencil),antialias:w.toValue(t.antialias)===void 0?!0:w.toValue(t.antialias),precision:w.toValue(t.precision),powerPreference:w.toValue(t.powerPreference),premultipliedAlpha:w.toValue(t.premultipliedAlpha),preserveDrawingBuffer:w.toValue(t.preserveDrawingBuffer),logarithmicDepthBuffer:w.toValue(t.logarithmicDepthBuffer),failIfMajorPerformanceCaveat:w.toValue(t.failIfMajorPerformanceCaveat)})),s=c.shallowRef(new _.WebGLRenderer(f.value));c.watch(f,()=>{s.value.dispose(),s.value=new _.WebGLRenderer(f.value)}),c.watchEffect(()=>{s.value.setSize(a.width.value,a.height.value)});const{pixelRatio:m}=w.useDevicePixelRatio();c.watchEffect(()=>{s.value.setPixelRatio(m.value)});const{logError:i}=L(),u=(()=>{const v=new _.WebGLRenderer,M={shadowMap:{enabled:v.shadowMap.enabled,type:v.shadowMap.type},toneMapping:v.toneMapping,toneMappingExposure:v.toneMappingExposure,outputColorSpace:v.outputColorSpace};return v.dispose(),M})();c.watchEffect(()=>{const v=w.toValue(t.preset);v&&(v in E||i(`Renderer Preset must be one of these: ${Object.keys(E).join(", ")}`),q(s.value,E[v]));const M=(k,b)=>{const h=w.toValue(k),z=()=>{if(v)return J(E[v],b)};if(h!==void 0)return h;const C=z();return C!==void 0?C:J(u,b)},A=(k,b)=>ge(s.value,b,M(k,b));A(t.shadows,"shadowMap.enabled"),A(t.toneMapping,"toneMapping"),A(t.shadowMapType,"shadowMap.type"),we<150&&A(!t.useLegacyLights,"physicallyCorrectLights"),A(t.outputColorSpace,"outputColorSpace"),A(t.toneMappingExposure,"toneMappingExposure");const D=M(t.clearColor,"clearColor");D&&s.value.setClearColor(D?U(D):new _.Color(0))});const{pause:l,resume:g,onLoop:p}=G();return p(()=>{o.value&&!w.toValue(r)&&s.value.render(e,o.value)}),g(),c.onUnmounted(()=>{l(),s.value.dispose(),s.value.forceContextLoss()}),{renderer:s}}const Y=e=>typeof e=="function",Ce=e=>!!e&&e.constructor===Array;function Q(e){const n={nodes:{},materials:{}};return e&&e.traverse(t=>{t.name&&(n.nodes[t.name]=t),t.material&&!n.materials[t.material.name]&&(n.materials[t.material.name]=t.material)}),n}async function _e(e,n,t,r,a){const{logError:o}=L(),f=new e;a&&a(f),t&&t(f);const m=(Array.isArray(n)?n:[n]).map(i=>new Promise((d,u)=>{f.load(i,l=>{l.scene&&Object.assign(l,Q(l.scene)),d(l)},r,l=>u(o("[useLoader] - Failed to load resource",l)))}));return Ce(n)?await Promise.all(m):await m[0]}async function Pe(e){const n=new _.LoadingManager,t=new _.TextureLoader(n),r=a=>new Promise((o,f)=>{t.load(a,s=>o(s),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(ye(e)){const a=await Promise.all(e.map(o=>r(o)));return e.length>1?a:a[0]}else{const{map:a,displacementMap:o,normalMap:f,roughnessMap:s,metalnessMap:m,aoMap:i,alphaMap:d,matcap:u}=e;return{map:a?await r(a):null,displacementMap:o?await r(o):null,normalMap:f?await r(f):null,roughnessMap:s?await r(s):null,metalnessMap:m?await r(m):null,aoMap:i?await r(i):null,alphaMap:d?await r(d):null,matcap:u?await r(u):null}}}const Z=(e,{renderer:n,camera:t,raycaster:r})=>{const a=c.computed(()=>n.value.domElement),{x:o,y:f}=w.usePointer({target:a}),{width:s,height:m,top:i,left:d}=w.useElementBounding(a),u=({x:C,y:O})=>{if(a.value)return{x:(C-d.value)/s.value*2-1,y:-((O-i.value)/m.value)*2+1}},l=({x:C,y:O})=>{if(t.value)return r.value.setFromCamera(new _.Vector2(C,O),t.value),r.value.intersectObjects(e.value,!1)},g=C=>{const O=u({x:(C==null?void 0:C.clientX)??o.value,y:(C==null?void 0:C.clientY)??f.value});return O?l(O)||[]:[]},p=c.computed(()=>g()),v=w.createEventHook(),M=w.createEventHook(),A=(C,O)=>{C.trigger({event:O,intersects:g(O)})},D=C=>{A(M,C)};let k;const b=C=>{var O;k=(O=g(C)[0])==null?void 0:O.object},h=C=>{var O;C instanceof PointerEvent&&k===((O=g(C)[0])==null?void 0:O.object)&&A(v,C)},z=C=>M.trigger({event:C,intersects:[]});return a.value.addEventListener("pointerup",h),a.value.addEventListener("pointerdown",b),a.value.addEventListener("pointermove",D),a.value.addEventListener("pointerleave",z),c.onUnmounted(()=>{a!=null&&a.value&&(a.value.removeEventListener("pointerup",h),a.value.removeEventListener("pointerdown",b),a.value.removeEventListener("pointermove",D),a.value.removeEventListener("pointerleave",z))}),{intersects:p,onClick:C=>v.on(C).off,onPointerMove:C=>M.on(C).off}};function Me(){const{logWarning:e}=L();function n(r,a,o){let f=null;return r.traverse(s=>{s[a]===o&&(f=s)}),f||e(`Child with ${a} '${o}' not found.`),f}function t(r,a){return n(r,"name",a)}return{seek:n,seekByName:t}}const ee=({scene:e,contextParts:n})=>{const t=c.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),r=c.ref(new Set),a=l=>{r.value.add(l)},o=l=>{r.value.delete(l)},f=l=>{Object.values(t).forEach(g=>g.delete(l)),o(l)},s=l=>{const{onClick:g,onPointerMove:p,onPointerEnter:v,onPointerLeave:M}=l;g&&t.click.set(l,g),p&&t.pointerMove.set(l,p),v&&t.pointerEnter.set(l,v),M&&t.pointerLeave.set(l,M)};e.userData.tres__registerAtPointerEventHandler=s,e.userData.tres__deregisterAtPointerEventHandler=f,e.userData.tres__registerBlockingObjectAtPointerEventHandler=a,e.userData.tres__deregisterBlockingObjectAtPointerEventHandler=o;const m=c.computed(()=>pe([...Array.from(r.value),...Object.values(t).map(l=>Array.from(l.keys())).flat()],({uuid:l})=>l)),{onClick:i,onPointerMove:d}=Z(m,n);i(({intersects:l,event:g})=>{var p;l.length&&((p=t.click.get(l[0].object))==null||p(l[0],g))});let u;return d(({intersects:l,event:g})=>{var D,k,b,h;const p=(D=l==null?void 0:l[0])==null?void 0:D.object,{pointerLeave:v,pointerEnter:M,pointerMove:A}=t;u&&u!==p&&((k=v.get(u))==null||k(u,g)),p&&(u!==p&&((b=M.get(p))==null||b(l[0],g)),(h=A.get(p))==null||h(l[0],g)),u=p||null}),{registerObject:s,deregisterObject:f}},V=c.ref({}),T=e=>Object.assign(V.value,e);function te({scene:e,canvas:n,windowSize:t,disableRender:r,rendererOptions:a}){const o=c.computed(()=>w.toValue(t)?w.useWindowSize():w.useElementSize(w.toValue(n).parentElement)),f=c.computed(()=>o.value.width.value),s=c.computed(()=>o.value.height.value),m=c.computed(()=>f.value/s.value),i={height:s,width:f,aspectRatio:m},d=c.shallowRef(e),{camera:u,cameras:l,registerCamera:g,deregisterCamera:p,setCameraActive:v}=I({sizes:i,scene:e}),{renderer:M}=X({scene:e,canvas:n,options:a,contextParts:{sizes:i,camera:u},disableRender:r}),A={sizes:i,scene:d,camera:u,cameras:c.readonly(l),renderer:M,raycaster:c.shallowRef(new _.Raycaster),controls:c.ref(null),extend:T,registerCamera:g,setCameraActive:v,deregisterCamera:p};return c.provide("useTres",A),A}function re(){const e=c.inject("useTres");if(!e)throw new Error("useTresContext must be used together with useTresContextProvider");return e}const be=re;function Be(e){}let R=null,y=null;const{logError:ne}=L(),ke={createElement(e,n,t,r){var f,s;if(r||(r={}),r.args||(r.args=[]),e==="template"||me(e))return null;let a=e.replace("Tres",""),o;if(e==="primitive"){(r==null?void 0:r.object)===void 0&&ne("Tres primitives need a prop 'object'");const m=r.object;a=m.type,o=Object.assign(m,{type:a,attach:r.attach,primitive:!0})}else{const m=V.value[a];m||ne(`${a} is not defined on the THREE namespace. Use extend to add it to the catalog.`),o=new m(...r.args)}return o.isCamera&&(r!=null&&r.position||o.position.set(3,3,3),r!=null&&r.lookAt||o.lookAt(0,0,0)),(r==null?void 0:r.attach)===void 0&&(o.isMaterial?o.attach="material":o.isBufferGeometry&&(o.attach="geometry")),o.isObject3D&&((f=r==null?void 0:r.material)!=null&&f.isMaterial&&(o.userData.tres__materialViaProp=!0),(s=r==null?void 0:r.geometry)!=null&&s.isBufferGeometry&&(o.userData.tres__geometryViaProp=!0)),o.userData={...o.userData,tres__name:a},o},insert(e,n){var t,r,a,o,f,s,m,i,d,u;if(n&&n.isScene&&(y=n),(((t=e==null?void 0:e.__vnode)==null?void 0:t.type)==="TresGroup"||((r=e==null?void 0:e.__vnode)==null?void 0:r.type)==="TresObject3D")&&n===null&&!((o=(a=e==null?void 0:e.__vnode)==null?void 0:a.ctx)!=null&&o.asyncResolved)){R=e;return}else n===null&&((f=e==null?void 0:e.__vnode)!=null&&f.type.includes("Controls")||(s=e==null?void 0:e.__vnode)!=null&&s.type.includes("Helper"))&&(R=y);if(n||(n=R),e!=null&&e.isObject3D){if(e!=null&&e.isCamera){if(!(y!=null&&y.userData.tres__registerCamera))throw"could not find tres__registerCamera on scene's userData";(i=y==null?void 0:(m=y.userData).tres__registerCamera)==null||i.call(m,e)}if(e!=null&&e.onClick||e!=null&&e.onPointerMove||e!=null&&e.onPointerEnter||e!=null&&e.onPointerLeave){if(!(y!=null&&y.userData.tres__registerAtPointerEventHandler))throw"could not find tres__registerAtPointerEventHandler on scene's userData";(u=y==null?void 0:(d=y.userData).tres__registerAtPointerEventHandler)==null||u.call(d,e)}}e!=null&&e.isObject3D&&(n!=null&&n.isObject3D)?(n.add(e),e.dispatchEvent({type:"added"})):e!=null&&e.isFog?n.fog=e:typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[n==null?void 0:n.attach],n&&(n[e.attach]=e))},remove(e){var n,t;if(e){if(e.isObject3D){const r=e,a=i=>{var u,l;const d=i;i.userData.tres__materialViaProp||(u=d.material)==null||u.dispose(),i.userData.tres__geometryViaProp||(l=d.geometry)==null||l.dispose()},o=y==null?void 0:y.userData.tres__deregisterAtPointerEventHandler,f=y==null?void 0:y.userData.tres__deregisterBlockingObjectAtPointerEventHandler,s=i=>{var d,u;if(!f)throw"could not find tres__deregisterBlockingObjectAtPointerEventHandler on scene's userData";if((u=y==null?void 0:(d=y.userData).tres__deregisterBlockingObjectAtPointerEventHandler)==null||u.call(d,i),!o)throw"could not find tres__deregisterAtPointerEventHandler on scene's userData";(i!=null&&i.onClick||i!=null&&i.onPointerMove||i!=null&&i.onPointerEnter||i!=null&&i.onPointerLeave)&&(o==null||o(i))},m=i=>{const d=y==null?void 0:y.userData.tres__deregisterCamera;if(!d)throw"could not find tres__deregisterCamera on scene's userData";i.isCamera&&(d==null||d(i))};r.traverse(i=>{a(i),m(i),s==null||s(i)}),a(r),m(r),s==null||s(r)}(n=e.removeFromParent)==null||n.call(e),(t=e.dispose)==null||t.call(e)}},patchProp(e,n,t,r){var a,o,f,s;if(e){let m=e,i=n;if(e.isObject3D&&i==="blocks-pointer-events"){r||r===""?(o=y==null?void 0:(a=y.userData).tres__registerBlockingObjectAtPointerEventHandler)==null||o.call(a,e):(s=y==null?void 0:(f=y.userData).tres__deregisterBlockingObjectAtPointerEventHandler)==null||s.call(f,e);return}let d=j(i),u=m==null?void 0:m[d];if(i==="args"){const g=e,p=t??[],v=r??[],M=e.userData.tres__name||e.type;M&&p.length&&!ve(p,v)&&(m=Object.assign(g,new V.value[M](...r)));return}if(m.type==="BufferGeometry"){if(i==="args")return;m.setAttribute(j(i),new _.BufferAttribute(...r));return}if(i.includes("-")&&u===void 0){const g=i.split("-");u=g.reduce((p,v)=>p[j(v)],m),i=g.pop(),d=i.toLowerCase(),u!=null&&u.set||(m=g.reduce((p,v)=>p[j(v)],m))}let l=r;if(l===""&&(l=!0),Y(u)){Array.isArray(l)?e[d](...l):e[d](l);return}!(u!=null&&u.set)&&!Y(u)?m[d]=l:u.constructor===l.constructor&&(u!=null&&u.copy)?u==null||u.copy(l):Array.isArray(l)?u.set(...l):!u.isColor&&u.setScalar?u.setScalar(l):u.set(l)}},parentNode(e){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{render:Ae}=c.createRenderer(ke);T(se);const Oe=["data-scene"],ae=c.defineComponent({__name:"TresCanvas",props:{shadows:{type:Boolean,default:void 0},clearColor:{},toneMapping:{},shadowMapType:{},useLegacyLights:{type:Boolean,default:void 0},outputColorSpace:{},toneMappingExposure:{},camera:{},preset:{},windowSize:{type:Boolean,default:void 0},disableRender:{type:Boolean,default:void 0},context:{},precision:{},alpha:{type:Boolean,default:void 0},premultipliedAlpha:{type:Boolean},antialias:{type:Boolean,default:void 0},stencil:{type:Boolean,default:void 0},preserveDrawingBuffer:{type:Boolean,default:void 0},powerPreference:{},depth:{type:Boolean,default:void 0},logarithmicDepthBuffer:{type:Boolean,default:void 0},failIfMajorPerformanceCaveat:{type:Boolean,default:void 0}},setup(e,{expose:n}){var l;const t=e,{logWarning:r}=L(),a=c.ref(),o=c.shallowRef(new _.Scene);G();const f=c.useSlots(),s=(l=c.getCurrentInstance())==null?void 0:l.appContext.app,m=g=>c.defineComponent({setup(){var v;const p=(v=c.getCurrentInstance())==null?void 0:v.appContext;return p&&(p.app=s),c.provide("useTres",g),c.provide("extend",T),()=>c.h(c.Fragment,null,f!=null&&f.default?f.default():[])}}),i=g=>{const p=m(g);Ae(c.h(p),o.value)},d=c.computed(()=>t.disableRender),u=c.shallowRef(null);return n({context:u}),c.onMounted(()=>{const g=a;u.value=te({scene:o.value,canvas:g,windowSize:t.windowSize,disableRender:d,rendererOptions:t}),ee({scene:o.value,contextParts:u.value});const{registerCamera:p,camera:v,cameras:M,deregisterCamera:A}=u.value;i(u.value);const D=()=>{const k=new _.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);k.position.set(3,3,3),k.lookAt(0,0,0),p(k);const b=c.watchEffect(()=>{M.value.length>=2&&(k.removeFromParent(),A(k),b==null||b())})};c.watch(()=>t.camera,(k,b)=>{k&&p(k),b&&(b.removeFromParent(),A(b))},{immediate:!0}),v.value||(r("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."),D())}),(g,p)=>(c.openBlock(),c.createElementBlock("canvas",{ref_key:"canvas",ref:a,"data-scene":o.value.uuid,style:c.normalizeStyle({display:"block",width:"100%",height:"100%",position:g.windowSize?"fixed":"relative",top:0,left:0,pointerEvents:"auto",touchAction:"none"})},null,12,Oe))}}),De=["TresCanvas","TresLeches","TresScene"],he={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!De.includes(e)||e==="primitive"}}},Le={install(e){e.component("TresCanvas",ae)}};return P.TresCanvas=ae,P.catalogue=V,P.default=Le,P.extend=T,P.isProd=ce,P.normalizeColor=U,P.normalizeVectorFlexibleParam=fe,P.templateCompilerOptions=he,P.trasverseObjects=Q,P.useCamera=I,P.useLoader=_e,P.useLogger=L,P.usePointerEventHandler=ee,P.useRaycaster=Z,P.useRenderLoop=G,P.useRenderer=X,P.useSeek=Me,P.useTexture=Pe,P.useTres=be,P.useTresContext=re,P.useTresContextProvider=te,Object.defineProperties(P,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),P}({},Vue,Three,VueUseCore);