@tresjs/core 2.4.0-next.4 → 2.4.0-next.6

package/dist/tres.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/core
- * version: v2.4.0-next.4
+ * version: v2.4.0-next.6
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(C,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],l):(C=typeof globalThis<"u"?globalThis:C||self,l(C.tres={},C.Vue,C.Three,C.VueUseCore))})(this,function(C,l,w,v){"use strict";function ae(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(a,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return a.default=e,Object.freeze(a)}const oe=ae(w),I=l.ref({}),B=e=>void Object.assign(I.value,e),F=e=>typeof e=="function",W=e=>!!e&&e.constructor===Array,S={REGISTER_CAMERA:"tres__registerCamera",IS_ACTIVE_CAMERA:"tres__isActiveCamera",GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp",DEREGISTER_CAMERA:"tres__deregisterCamera",REGISTER_AT_POINTER_EVENT_HANDLER:"tres__registerAtPointerEventHandler",DEREGISTER_AT_POINTER_EVENT_HANDLER:"tres__deregisterAtPointerEventHandler"};function $({sizes:e,scene:a}){const{IS_ACTIVE_CAMERA:n,REGISTER_CAMERA:t,DEREGISTER_CAMERA:i}=S,o=l.ref([]),c=l.computed(()=>o.value.find(({userData:s})=>s[n])),r=(s,f=!0)=>{o.value.some(({uuid:g})=>g===s.uuid)||(o.value.push(s),f&&d(s))},m=s=>{if(s.userData[n]){const f=o.value[o.value.length-1];f&&d(f.uuid)}o.value=o.value.filter(({uuid:f})=>f!==s.uuid)},d=s=>{const f=s instanceof w.Camera?s:o.value.find(g=>g.uuid===s);f&&(o.value.forEach(({userData:g})=>g[n]=!1),f.userData[n]=!0)},p=()=>{o.value=[]};return l.watchEffect(()=>{e.aspectRatio.value&&o.value.forEach(s=>{s instanceof w.PerspectiveCamera&&(s.aspect=e.aspectRatio.value),(s instanceof w.PerspectiveCamera||s instanceof w.OrthographicCamera)&&s.updateProjectionMatrix()})}),a.userData[t]=r,a.userData[i]=m,l.onUnmounted(()=>{p()}),{camera:c,cameras:o,addCamera:r,removeCamera:m,setCameraActive:d}}const U=v.createEventHook(),q=v.createEventHook(),G=v.createEventHook(),b=new w.Clock;let k=0,V=0;const{pause:re,resume:se,isActive:ie}=v.useRafFn(()=>{U.trigger({delta:k,elapsed:V,clock:b}),q.trigger({delta:k,elapsed:V,clock:b}),G.trigger({delta:k,elapsed:V,clock:b})},{immediate:!1});G.on(()=>{k=b.getDelta(),V=b.getElapsedTime()});const N=()=>({onBeforeLoop:U.on,onLoop:q.on,onAfterLoop:G.on,pause:re,resume:se,isActive:ie}),z={realistic:{outputColorSpace:w.SRGBColorSpace,toneMapping:w.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:w.PCFSoftShadowMap}}},Y=(e,a)=>{for(const n of Object.keys(a))a[n]instanceof Object&&Object.assign(a[n],Y(e[n],a[n]));return Object.assign(e||{},a),e},ue=le("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 x(e){return e.replace(/-([a-z])/g,(a,n)=>n.toUpperCase())}function le(e,a){const n=Object.create(null),t=e.split(",");for(let i=0;i<t.length;i++)n[t[i]]=!0;return a?i=>!!n[i.toLowerCase()]:i=>!!n[i]}const ce=(e,a)=>{const n=new Set,t=[];for(const i of e){const o=a(i);n.has(o)||(n.add(o),t.push(i))}return t},fe=!0,J="[TresJS ▲ ■ ●] ";function h(){function e(t,i){console.error(`${J} ${t}`,i||"")}function a(t){console.warn(`${J} ${t}`)}function n(t,i){}return{logError:e,logWarning:a,logMessage:n}}function pe(e){return typeof e=="number"?[e,e,e]:e instanceof w.Vector3?[e.x,e.y,e.z]:e}function K(e){return e instanceof w.Color?e:Array.isArray(e)?new w.Color(...e):new w.Color(e)}function X({scene:e,canvas:a,options:n,disableRender:t,contextParts:{sizes:i,camera:o}}){const c=l.computed(()=>({alpha:v.toValue(n.alpha),depth:v.toValue(n.depth),canvas:v.unrefElement(a),context:v.toValue(n.context),stencil:v.toValue(n.stencil),antialias:v.toValue(n.antialias),precision:v.toValue(n.precision),powerPreference:v.toValue(n.powerPreference),premultipliedAlpha:v.toValue(n.premultipliedAlpha),preserveDrawingBuffer:v.toValue(n.preserveDrawingBuffer),logarithmicDepthBuffer:v.toValue(n.logarithmicDepthBuffer),failIfMajorPerformanceCaveat:v.toValue(n.failIfMajorPerformanceCaveat)})),r=l.shallowRef(new w.WebGLRenderer(c.value));l.watch(c,()=>{r.value.dispose(),r.value=new w.WebGLRenderer(c.value)}),l.watchEffect(()=>{r.value.setSize(i.width.value,i.height.value)});const{pixelRatio:m}=v.useDevicePixelRatio();l.watchEffect(()=>{r.value.setPixelRatio(m.value)});const{logError:d}=h(),s=(()=>{const u=new w.WebGLRenderer,_={shadowMap:{enabled:u.shadowMap.enabled,type:u.shadowMap.type},toneMapping:u.toneMapping,toneMappingExposure:u.toneMappingExposure,outputColorSpace:u.outputColorSpace,useLegacyLights:u.useLegacyLights};return u.dispose(),_})();l.watchEffect(()=>{const u=v.toValue(n.preset);if(u){u in z||d("Renderer Preset must be one of these: "+Object.keys(z).join(", ")),Y(r.value,z[u]);return}const _=v.toValue(n.shadows);r.value.shadowMap.enabled=_!==void 0?_:s.shadowMap.enabled;const E=v.toValue(n.shadowMapType);r.value.shadowMap.type=E!==void 0?E:s.shadowMap.type;const T=v.toValue(n.toneMapping);r.value.toneMapping=T!==void 0?T:s.toneMapping;const R=v.toValue(n.toneMappingExposure);r.value.toneMappingExposure=R!==void 0?R:s.toneMappingExposure;const L=v.toValue(n.outputColorSpace);r.value.outputColorSpace=L!==void 0?L:s.outputColorSpace;const D=v.toValue(n.useLegacyLights);r.value.useLegacyLights=D!==void 0?D:s.useLegacyLights;const O=v.toValue(n.clearColor);O&&r.value.setClearColor(O?K(O):new w.Color(0))});const{pause:f,resume:g,onLoop:M}=N();return M(()=>{o.value&&!v.toValue(t)&&r.value.render(e,o.value)}),g(),l.onUnmounted(()=>{f(),r.value.dispose(),r.value.forceContextLoss()}),{renderer:r}}function Q(e){const a={nodes:{},materials:{}};return e&&e.traverse(n=>{n.name&&(a.nodes[n.name]=n),n.material&&!a.materials[n.material.name]&&(a.materials[n.material.name]=n.material)}),a}async function me(e,a,n,t,i){const{logError:o}=h(),c=new e;i&&i(c),n&&n(c);const m=(Array.isArray(a)?a:[a]).map(d=>new Promise((p,s)=>{c.load(d,f=>{f.scene&&Object.assign(f,Q(f.scene)),p(f)},t,f=>s(o("[useLoader] - Failed to load resource",f)))}));return W(a)?await Promise.all(m):await m[0]}async function de(e){const a=new w.LoadingManager,n=new w.TextureLoader(a),t=i=>new Promise((o,c)=>{n.load(i,r=>o(r),()=>null,()=>{c(new Error("[useTextures] - Failed to load texture"))})});if(W(e)){const i=await Promise.all(e.map(o=>t(o)));return e.length>1?i:i[0]}else{const{map:i,displacementMap:o,normalMap:c,roughnessMap:r,metalnessMap:m,aoMap:d,alphaMap:p,matcap:s}=e;return{map:i?await t(i):null,displacementMap:o?await t(o):null,normalMap:c?await t(c):null,roughnessMap:r?await t(r):null,metalnessMap:m?await t(m):null,aoMap:d?await t(d):null,alphaMap:p?await t(p):null,matcap:s?await t(s):null}}}const Z=(e,{renderer:a,camera:n})=>{const t=l.computed(()=>a.value.domElement),{x:i,y:o}=v.usePointer({target:t}),{width:c,height:r,top:m,left:d}=v.useElementBounding(t),p=new w.Raycaster,s=({x:y,y:P})=>{if(t.value)return{x:(y-d.value)/c.value*2-1,y:-((P-m.value)/r.value)*2+1}},f=({x:y,y:P})=>{if(n.value)return p.setFromCamera(new w.Vector2(y,P),n.value),p.intersectObjects(e.value,!1)},g=y=>{const P=s({x:(y==null?void 0:y.clientX)??i.value,y:(y==null?void 0:y.clientY)??o.value});return P?f(P)||[]:[]},M=l.computed(()=>g()),u=v.createEventHook(),_=v.createEventHook(),E=(y,P)=>{y.trigger({event:P,intersects:g(P)})},T=y=>{E(_,y)};let R;const L=y=>{var P;R=(P=g(y)[0])==null?void 0:P.object},D=y=>{var P;y instanceof PointerEvent&&R===((P=g(y)[0])==null?void 0:P.object)&&E(u,y)},O=y=>_.trigger({event:y,intersects:[]});return t.value.addEventListener("pointerup",D),t.value.addEventListener("pointerdown",L),t.value.addEventListener("pointermove",T),t.value.addEventListener("pointerleave",O),l.onUnmounted(()=>{t!=null&&t.value&&(t.value.removeEventListener("pointerup",D),t.value.removeEventListener("pointerdown",L),t.value.removeEventListener("pointermove",T),t.value.removeEventListener("pointerleave",O))}),{intersects:M,onClick:y=>u.on(y).off,onPointerMove:y=>_.on(y).off}};function ve(){const{logWarning:e}=h();function a(t,i,o){let c=null;return t.traverse(r=>{r[i]===o&&(c=r)}),c||e(`Child with ${i} '${o}' not found.`),c}function n(t,i){return a(t,"name",i)}return{seek:a,seekByName:n}}const H=(e,a)=>{const n=l.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),t=s=>{Object.values(n).forEach(f=>f.delete(s))},i=s=>{const{onClick:f,onPointerMove:g,onPointerEnter:M,onPointerLeave:u}=s;f&&n.click.set(s,f),g&&n.pointerMove.set(s,g),M&&n.pointerEnter.set(s,M),u&&n.pointerLeave.set(s,u)},{REGISTER_AT_POINTER_EVENT_HANDLER:o,DEREGISTER_AT_POINTER_EVENT_HANDLER:c}=S;e.userData[o]=i,e.userData[c]=t;const r=l.computed(()=>ce(Object.values(n).map(s=>Array.from(s.keys())).flat(),({uuid:s})=>s)),{onClick:m,onPointerMove:d}=Z(r,a);m(({intersects:s,event:f})=>{var g;s.length&&((g=n.click.get(s[0].object))==null||g(s[0],f))});let p;return d(({intersects:s,event:f})=>{var E,T,R,L;const g=(E=s==null?void 0:s[0])==null?void 0:E.object,{pointerLeave:M,pointerEnter:u,pointerMove:_}=n;p&&p!==g&&((T=M.get(p))==null||T(p,f)),g&&(p!==g&&((R=u.get(g))==null||R(s[0],f)),(L=_.get(g))==null||L(s[0],f)),p=g||null}),{registerObject:i,deregisterObject:t}};function ee({scene:e,canvas:a,windowSize:n,disableRender:t,rendererOptions:i}){const o=l.computed(()=>v.toValue(n)?v.useWindowSize():v.useElementSize(v.toValue(a).parentElement)),c=l.computed(()=>o.value.width.value),r=l.computed(()=>o.value.height.value),m=l.computed(()=>c.value/r.value),d={height:r,width:c,aspectRatio:m},p=l.shallowRef(e),{camera:s,cameras:f,addCamera:g,removeCamera:M,setCameraActive:u}=$({sizes:d,scene:e}),{renderer:_}=X({scene:e,canvas:a,options:i,contextParts:{sizes:d,camera:s},disableRender:t}),E={sizes:d,scene:l.readonly(p),camera:s,cameras:l.readonly(f),renderer:l.readonly(_),addCamera:g,removeCamera:M,setCameraActive:u};return l.provide("useTres",E),E}function ge(){const e=l.inject("useTres");if(!e)throw new Error("useTresContext must be used together with useTresContextProvider");return e}function Te(e){}let j=null,A=null;const{logError:te}=h(),Ce={createElement(e,a,n,t){var m,d;if(t||(t={}),t.args||(t.args=[]),e==="template"||ue(e))return null;let i=e.replace("Tres",""),o;if(e==="primitive"){(t==null?void 0:t.object)===void 0&&te("Tres primitives need a prop 'object'");const p=t.object;i=p.type,o=Object.assign(p,{type:i,attach:t.attach,primitive:!0})}else{const p=I.value[i];p||te(`${i} is not defined on the THREE namespace. Use extend to add it to the catalog.`),o=new p(...t.args)}o.isCamera&&(t!=null&&t.position||o.position.set(3,3,3),t!=null&&t.lookAt||o.lookAt(0,0,0)),(t==null?void 0:t.attach)===void 0&&(o.isMaterial?o.attach="material":o.isBufferGeometry&&(o.attach="geometry"));const{GEOMETRY_VIA_PROP:c,MATERIAL_VIA_PROP:r}=S;return o.isObject3D&&((m=t==null?void 0:t.material)!=null&&m.isMaterial&&(o.userData[r]=!0),(d=t==null?void 0:t.geometry)!=null&&d.isBufferGeometry&&(o.userData[c]=!0)),o},insert(e,a){var n,t,i,o,c,r,m,d,p;if(a&&a.isScene&&(A=a),(((n=e==null?void 0:e.__vnode)==null?void 0:n.type)==="TresGroup"||((t=e==null?void 0:e.__vnode)==null?void 0:t.type)==="TresObject3D")&&a===null&&!((o=(i=e==null?void 0:e.__vnode)==null?void 0:i.ctx)!=null&&o.asyncResolved)){j=e;return}else(c=e==null?void 0:e.__vnode)!=null&&c.type.includes("Controls")&&a===null&&(j=A);a||(a=j),e!=null&&e.isObject3D&&(e!=null&&e.isCamera&&((m=(r=A==null?void 0:A.userData)==null?void 0:r[S.REGISTER_CAMERA])==null||m.call(r,e)),(e!=null&&e.onClick||e!=null&&e.onPointerMove||e!=null&&e.onPointerEnter||e!=null&&e.onPointerLeave)&&((p=(d=A==null?void 0:A.userData)==null?void 0:d[S.REGISTER_AT_POINTER_EVENT_HANDLER])==null||p.call(d,e))),e!=null&&e.isObject3D&&(a!=null&&a.isObject3D)?(a.add(e),e.dispatchEvent({type:"added"})):e!=null&&e.isFog?a.fog=e:typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[a==null?void 0:a.attach],a&&(a[e.attach]=e))},remove(e){var a,n,t,i;if(e){if(e.isObject3D){const o=e,{DEREGISTER_CAMERA:c,GEOMETRY_VIA_PROP:r,MATERIAL_VIA_PROP:m,DEREGISTER_AT_POINTER_EVENT_HANDLER:d}=S,p=u=>{var _,E;u.userData[m]||(_=u.material)==null||_.dispose(),u.userData[r]||(E=u.geometry)==null||E.dispose()},s=(a=A==null?void 0:A.userData)==null?void 0:a[d],f=u=>{(u!=null&&u.onClick||u!=null&&u.onPointerMove||u!=null&&u.onPointerEnter||u!=null&&u.onPointerLeave)&&(s==null||s(u))},g=(n=A==null?void 0:A.userData)==null?void 0:n[c],M=u=>{u.isCamera&&g(u)};o.traverse(u=>{p(u),M(u),f==null||f(u)}),p(o),M(o),f==null||f(o)}(t=e.removeFromParent)==null||t.call(e),(i=e.dispose)==null||i.call(e)}},patchProp(e,a,n,t){if(e){let i=e,o=a,c=x(o),r=i==null?void 0:i[c];if(i.type==="BufferGeometry"){if(o==="args")return;i.setAttribute(x(o),new w.BufferAttribute(...t));return}if(o.includes("-")&&r===void 0){const d=o.split("-");r=d.reduce((p,s)=>p[x(s)],i),o=d.pop(),c=o.toLowerCase(),r!=null&&r.set||(i=d.reduce((p,s)=>p[x(s)],i))}let m=t;if(m===""&&(m=!0),F(r)){Array.isArray(m)?e[c](...m):e[c](m);return}!(r!=null&&r.set)&&!F(r)?i[c]=m:r.constructor===m.constructor&&(r!=null&&r.copy)?r==null||r.copy(m):Array.isArray(m)?r.set(...m):!r.isColor&&r.setScalar?r.setScalar(m):r.set(m)}},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},{createApp:ye}=l.createRenderer(Ce),we=e=>{const a=ye(n);function n(){return e&&e.default?e.default():[]}return a};B(oe);const _e=["data-scene"],ne=l.defineComponent({__name:"TresCanvas",props:{shadows:{type:Boolean},clearColor:{},toneMapping:{},shadowMapType:{},useLegacyLights:{type:Boolean},outputColorSpace:{},toneMappingExposure:{},windowSize:{type:Boolean},preset:{},disableRender:{type:Boolean},camera:{},context:{},precision:{},alpha:{type:Boolean},premultipliedAlpha:{type:Boolean},antialias:{type:Boolean},stencil:{type:Boolean},preserveDrawingBuffer:{type:Boolean},powerPreference:{},depth:{type:Boolean},logarithmicDepthBuffer:{type:Boolean},failIfMajorPerformanceCaveat:{type:Boolean}},setup(e){const a=e,{logWarning:n}=h(),t=l.ref(),i=l.shallowRef(new w.Scene);N();const o=l.useSlots();let c;const r=d=>{c=we(o),c.provide("useTres",d),c.provide("extend",B),c.mount(i.value)},m=l.computed(()=>a.disableRender);return l.onMounted(()=>{const d=t,p=ee({scene:i.value,canvas:d,windowSize:a.windowSize,disableRender:m,rendererOptions:{...a,antialias:a.antialias===void 0?!0:a.antialias}});H(i.value,p);const{addCamera:s,camera:f,cameras:g,removeCamera:M}=p;r(p);const u=()=>{const _=new w.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);_.position.set(3,3,3),_.lookAt(0,0,0),s(_);const E=l.watchEffect(()=>{g.value.length>=2&&(_.removeFromParent(),M(_),E==null||E())})};l.watch(()=>a.camera,(_,E)=>{_?s(_):E&&(E.removeFromParent(),M(E))},{immediate:!0}),f.value||(n("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."),u())}),(d,p)=>(l.openBlock(),l.createElementBlock("canvas",{ref_key:"canvas",ref:t,"data-scene":i.value.uuid,style:l.normalizeStyle({display:"block",width:"100%",height:"100%",position:d.windowSize?"fixed":"relative",top:0,left:0,pointerEvents:"auto",touchAction:"none",zIndex:1})},null,12,_e))}}),Ee=["TresCanvas","TresLeches","TresScene"],Me={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!Ee.includes(e)||e==="primitive"}}},Pe={install(e){e.component("TresCanvas",ne)}};C.TresCanvas=ne,C.catalogue=I,C.default=Pe,C.extend=B,C.isProd=fe,C.normalizeColor=K,C.normalizeVectorFlexibleParam=pe,C.templateCompilerOptions=Me,C.trasverseObjects=Q,C.useCamera=$,C.useLoader=me,C.useLogger=h,C.usePointerEventHandler=H,C.useRaycaster=Z,C.useRenderLoop=N,C.useRenderer=X,C.useSeek=ve,C.useTexture=de,C.useTresContext=ge,C.useTresContextProvider=ee,Object.defineProperties(C,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(d,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],f):(d=typeof globalThis<"u"?globalThis:d||self,f(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,f,g,p){"use strict";function ae(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const ne=ae(g),E=f.ref({}),j=e=>void Object.assign(E.value,e),W=e=>typeof e=="function",$=e=>!!e&&e.constructor===Array;function I({sizes:e,scene:r}){const t=f.ref([]),a=f.computed(()=>t.value.find(({userData:n})=>n.tres__isActiveCamera)),o=(n,i=!0)=>{t.value.some(({uuid:m})=>m===n.uuid)||(t.value.push(n),i&&l(n))},u=n=>{if(n.userData.tres__isActiveCamera){const i=t.value[t.value.length-1];i&&l(i.uuid)}t.value=t.value.filter(({uuid:i})=>i!==n.uuid)},l=n=>{const i=n instanceof g.Camera?n:t.value.find(c=>c.uuid===n);if(!i)return;t.value.forEach(({userData:c})=>c.tres__isActiveCamera=!1);const m=i;m.userData.tres__isActiveCamera=!0},s=()=>{t.value=[]};return f.watchEffect(()=>{e.aspectRatio.value&&t.value.forEach(n=>{n instanceof g.PerspectiveCamera&&(n.aspect=e.aspectRatio.value),(n instanceof g.PerspectiveCamera||n instanceof g.OrthographicCamera)&&n.updateProjectionMatrix()})}),r.userData.tres__registerCamera=o,r.userData.tres__deregisterCamera=u,f.onUnmounted(()=>{s()}),{camera:a,cameras:t,addCamera:o,removeCamera:u,setCameraActive:l}}const q=p.createEventHook(),N=p.createEventHook(),z=p.createEventHook(),D=new g.Clock;let V=0,B=0;const{pause:re,resume:oe,isActive:se}=p.useRafFn(()=>{q.trigger({delta:V,elapsed:B,clock:D}),N.trigger({delta:V,elapsed:B,clock:D}),z.trigger({delta:V,elapsed:B,clock:D})},{immediate:!1});z.on(()=>{V=D.getDelta(),B=D.getElapsedTime()});const F=()=>({onBeforeLoop:q.on,onLoop:N.on,onAfterLoop:z.on,pause:re,resume:oe,isActive:se}),G={realistic:{outputColorSpace:g.SRGBColorSpace,toneMapping:g.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:g.PCFSoftShadowMap}}},U=(e,r)=>{for(const t of Object.keys(r))r[t]instanceof Object&&Object.assign(r[t],U(e[t],r[t]));return Object.assign(e||{},r),e},ie=ue("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 T(e){return e.replace(/-([a-z])/g,(r,t)=>t.toUpperCase())}function ue(e,r){const t=Object.create(null),a=e.split(",");for(let o=0;o<a.length;o++)t[a[o]]=!0;return r?o=>!!t[o.toLowerCase()]:o=>!!t[o]}const le=(e,r)=>{const t=new Set,a=[];for(const o of e){const u=r(o);t.has(u)||(t.add(u),a.push(o))}return a},ce=!0,J="[TresJS ▲ ■ ●] ";function k(){function e(a,o){console.error(`${J} ${a}`,o||"")}function r(a){console.warn(`${J} ${a}`)}function t(a,o){}return{logError:e,logWarning:r,logMessage:t}}function fe(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function K(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}function X({scene:e,canvas:r,options:t,disableRender:a,contextParts:{sizes:o,camera:u}}){const l=f.computed(()=>({alpha:p.toValue(t.alpha),depth:p.toValue(t.depth),canvas:p.unrefElement(r),context:p.toValue(t.context),stencil:p.toValue(t.stencil),antialias:p.toValue(t.antialias)===void 0?!0:p.toValue(t.antialias),precision:p.toValue(t.precision),powerPreference:p.toValue(t.powerPreference),premultipliedAlpha:p.toValue(t.premultipliedAlpha),preserveDrawingBuffer:p.toValue(t.preserveDrawingBuffer),logarithmicDepthBuffer:p.toValue(t.logarithmicDepthBuffer),failIfMajorPerformanceCaveat:p.toValue(t.failIfMajorPerformanceCaveat)})),s=f.shallowRef(new g.WebGLRenderer(l.value));f.watch(l,()=>{s.value.dispose(),s.value=new g.WebGLRenderer(l.value)}),f.watchEffect(()=>{s.value.setSize(o.width.value,o.height.value)});const{pixelRatio:n}=p.useDevicePixelRatio();f.watchEffect(()=>{s.value.setPixelRatio(n.value)});const{logError:i}=k(),c=(()=>{const y=new g.WebGLRenderer,w={shadowMap:{enabled:y.shadowMap.enabled,type:y.shadowMap.type},toneMapping:y.toneMapping,toneMappingExposure:y.toneMappingExposure,outputColorSpace:y.outputColorSpace,useLegacyLights:y.useLegacyLights};return y.dispose(),w})();f.watchEffect(()=>{const y=p.toValue(t.preset);if(y){y in G||i("Renderer Preset must be one of these: "+Object.keys(G).join(", ")),U(s.value,G[y]);return}const w=p.toValue(t.shadows);s.value.shadowMap.enabled=w!==void 0?w:c.shadowMap.enabled;const _=p.toValue(t.shadowMapType);s.value.shadowMap.type=_!==void 0?_:c.shadowMap.type;const b=p.toValue(t.toneMapping);s.value.toneMapping=b!==void 0?b:c.toneMapping;const A=p.toValue(t.toneMappingExposure);s.value.toneMappingExposure=A!==void 0?A:c.toneMappingExposure;const O=p.toValue(t.outputColorSpace);s.value.outputColorSpace=O!==void 0?O:c.outputColorSpace;const x=p.toValue(t.useLegacyLights);s.value.useLegacyLights=x!==void 0?x:c.useLegacyLights;const S=p.toValue(t.clearColor);S&&s.value.setClearColor(S?K(S):new g.Color(0))});const{pause:M,resume:P,onLoop:L}=F();return L(()=>{u.value&&!p.toValue(a)&&s.value.render(e,u.value)}),P(),f.onUnmounted(()=>{M(),s.value.dispose(),s.value.forceContextLoss()}),{renderer:s}}function Y(e){const r={nodes:{},materials:{}};return e&&e.traverse(t=>{t.name&&(r.nodes[t.name]=t),t.material&&!r.materials[t.material.name]&&(r.materials[t.material.name]=t.material)}),r}async function me(e,r,t,a,o){const{logError:u}=k(),l=new e;o&&o(l),t&&t(l);const n=(Array.isArray(r)?r:[r]).map(i=>new Promise((m,c)=>{l.load(i,M=>{M.scene&&Object.assign(M,Y(M.scene)),m(M)},a,M=>c(u("[useLoader] - Failed to load resource",M)))}));return $(r)?await Promise.all(n):await n[0]}async function pe(e){const r=new g.LoadingManager,t=new g.TextureLoader(r),a=o=>new Promise((u,l)=>{t.load(o,s=>u(s),()=>null,()=>{l(new Error("[useTextures] - Failed to load texture"))})});if($(e)){const o=await Promise.all(e.map(u=>a(u)));return e.length>1?o:o[0]}else{const{map:o,displacementMap:u,normalMap:l,roughnessMap:s,metalnessMap:n,aoMap:i,alphaMap:m,matcap:c}=e;return{map:o?await a(o):null,displacementMap:u?await a(u):null,normalMap:l?await a(l):null,roughnessMap:s?await a(s):null,metalnessMap:n?await a(n):null,aoMap:i?await a(i):null,alphaMap:m?await a(m):null,matcap:c?await a(c):null}}}const Q=(e,{renderer:r,camera:t})=>{const a=f.computed(()=>r.value.domElement),{x:o,y:u}=p.usePointer({target:a}),{width:l,height:s,top:n,left:i}=p.useElementBounding(a),m=new g.Raycaster,c=({x:v,y:h})=>{if(a.value)return{x:(v-i.value)/l.value*2-1,y:-((h-n.value)/s.value)*2+1}},M=({x:v,y:h})=>{if(t.value)return m.setFromCamera(new g.Vector2(v,h),t.value),m.intersectObjects(e.value,!1)},P=v=>{const h=c({x:(v==null?void 0:v.clientX)??o.value,y:(v==null?void 0:v.clientY)??u.value});return h?M(h)||[]:[]},L=f.computed(()=>P()),y=p.createEventHook(),w=p.createEventHook(),_=(v,h)=>{v.trigger({event:h,intersects:P(h)})},b=v=>{_(w,v)};let A;const O=v=>{var h;A=(h=P(v)[0])==null?void 0:h.object},x=v=>{var h;v instanceof PointerEvent&&A===((h=P(v)[0])==null?void 0:h.object)&&_(y,v)},S=v=>w.trigger({event:v,intersects:[]});return a.value.addEventListener("pointerup",x),a.value.addEventListener("pointerdown",O),a.value.addEventListener("pointermove",b),a.value.addEventListener("pointerleave",S),f.onUnmounted(()=>{a!=null&&a.value&&(a.value.removeEventListener("pointerup",x),a.value.removeEventListener("pointerdown",O),a.value.removeEventListener("pointermove",b),a.value.removeEventListener("pointerleave",S))}),{intersects:L,onClick:v=>y.on(v).off,onPointerMove:v=>w.on(v).off}};function de(){const{logWarning:e}=k();function r(a,o,u){let l=null;return a.traverse(s=>{s[o]===u&&(l=s)}),l||e(`Child with ${o} '${u}' not found.`),l}function t(a,o){return r(a,"name",o)}return{seek:r,seekByName:t}}const Z=(e,r)=>{const t=f.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),a=i=>{Object.values(t).forEach(m=>m.delete(i))},o=i=>{const{onClick:m,onPointerMove:c,onPointerEnter:M,onPointerLeave:P}=i;m&&t.click.set(i,m),c&&t.pointerMove.set(i,c),M&&t.pointerEnter.set(i,M),P&&t.pointerLeave.set(i,P)};e.userData.tres__registerAtPointerEventHandler=o,e.userData.tres__deregisterAtPointerEventHandler=a;const u=f.computed(()=>le(Object.values(t).map(i=>Array.from(i.keys())).flat(),({uuid:i})=>i)),{onClick:l,onPointerMove:s}=Q(u,r);l(({intersects:i,event:m})=>{var c;i.length&&((c=t.click.get(i[0].object))==null||c(i[0],m))});let n;return s(({intersects:i,event:m})=>{var y,w,_,b;const c=(y=i==null?void 0:i[0])==null?void 0:y.object,{pointerLeave:M,pointerEnter:P,pointerMove:L}=t;n&&n!==c&&((w=M.get(n))==null||w(n,m)),c&&(n!==c&&((_=P.get(c))==null||_(i[0],m)),(b=L.get(c))==null||b(i[0],m)),n=c||null}),{registerObject:o,deregisterObject:a}};function H({scene:e,canvas:r,windowSize:t,disableRender:a,rendererOptions:o}){const u=f.computed(()=>p.toValue(t)?p.useWindowSize():p.useElementSize(p.toValue(r).parentElement)),l=f.computed(()=>u.value.width.value),s=f.computed(()=>u.value.height.value),n=f.computed(()=>l.value/s.value),i={height:s,width:l,aspectRatio:n},m=f.shallowRef(e),{camera:c,cameras:M,addCamera:P,removeCamera:L,setCameraActive:y}=I({sizes:i,scene:e}),{renderer:w}=X({scene:e,canvas:r,options:o,contextParts:{sizes:i,camera:c},disableRender:a}),_={sizes:i,scene:f.readonly(m),camera:c,cameras:f.readonly(M),renderer:w,addCamera:P,removeCamera:L,setCameraActive:y};return f.provide("useTres",_),_}function ve(){const e=f.inject("useTres");if(!e)throw new Error("useTresContext must be used together with useTresContextProvider");return e}function Le(e){}let R=null,C=null;const{logError:ee}=k(),ge={createElement(e,r,t,a){var l,s;if(a||(a={}),a.args||(a.args=[]),e==="template"||ie(e))return null;let o=e.replace("Tres",""),u;if(e==="primitive"){(a==null?void 0:a.object)===void 0&&ee("Tres primitives need a prop 'object'");const n=a.object;o=n.type,u=Object.assign(n,{type:o,attach:a.attach,primitive:!0})}else{const n=E.value[o];n||ee(`${o} is not defined on the THREE namespace. Use extend to add it to the catalog.`),u=new n(...a.args)}return u.isCamera&&(a!=null&&a.position||u.position.set(3,3,3),a!=null&&a.lookAt||u.lookAt(0,0,0)),(a==null?void 0:a.attach)===void 0&&(u.isMaterial?u.attach="material":u.isBufferGeometry&&(u.attach="geometry")),u.isObject3D&&((l=a==null?void 0:a.material)!=null&&l.isMaterial&&(u.userData.tres__materialViaProp=!0),(s=a==null?void 0:a.geometry)!=null&&s.isBufferGeometry&&(u.userData.tres__geometryViaProp=!0)),u},insert(e,r){var t,a,o,u,l,s,n,i,m;if(r&&r.isScene&&(C=r),(((t=e==null?void 0:e.__vnode)==null?void 0:t.type)==="TresGroup"||((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresObject3D")&&r===null&&!((u=(o=e==null?void 0:e.__vnode)==null?void 0:o.ctx)!=null&&u.asyncResolved)){R=e;return}else(l=e==null?void 0:e.__vnode)!=null&&l.type.includes("Controls")&&r===null&&(R=C);if(r||(r=R),e!=null&&e.isObject3D){if(e!=null&&e.isCamera){if(!(C!=null&&C.userData.tres__registerCamera))throw"could not find tres__registerCamera on scene's userData";(n=C==null?void 0:(s=C.userData).tres__registerCamera)==null||n.call(s,e)}if(e!=null&&e.onClick||e!=null&&e.onPointerMove||e!=null&&e.onPointerEnter||e!=null&&e.onPointerLeave){if(!(C!=null&&C.userData.tres__registerAtPointerEventHandler))throw"could not find tres__registerAtPointerEventHandler on scene's userData";(m=C==null?void 0:(i=C.userData).tres__registerAtPointerEventHandler)==null||m.call(i,e)}}e!=null&&e.isObject3D&&(r!=null&&r.isObject3D)?(r.add(e),e.dispatchEvent({type:"added"})):e!=null&&e.isFog?r.fog=e:typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[r==null?void 0:r.attach],r&&(r[e.attach]=e))},remove(e){var r,t;if(e){if(e.isObject3D){const a=e,o=n=>{var m,c;const i=n;n.userData.tres__materialViaProp||(m=i.material)==null||m.dispose(),n.userData.tres__geometryViaProp||(c=i.geometry)==null||c.dispose()},u=C==null?void 0:C.userData.tres__deregisterAtPointerEventHandler,l=n=>{if(!u)throw"could not find tres__deregisterAtPointerEventHandler on scene's userData";(n!=null&&n.onClick||n!=null&&n.onPointerMove||n!=null&&n.onPointerEnter||n!=null&&n.onPointerLeave)&&(u==null||u(n))},s=n=>{const i=C==null?void 0:C.userData.tres__deregisterCamera;if(!i)throw"could not find tres__deregisterCamera on scene's userData";n.isCamera&&(i==null||i(n))};a.traverse(n=>{o(n),s(n),l==null||l(n)}),o(a),s(a),l==null||l(a)}(r=e.removeFromParent)==null||r.call(e),(t=e.dispose)==null||t.call(e)}},patchProp(e,r,t,a){if(e){let o=e,u=r,l=T(u),s=o==null?void 0:o[l];if(o.type==="BufferGeometry"){if(u==="args")return;o.setAttribute(T(u),new g.BufferAttribute(...a));return}if(u.includes("-")&&s===void 0){const i=u.split("-");s=i.reduce((m,c)=>m[T(c)],o),u=i.pop(),l=u.toLowerCase(),s!=null&&s.set||(o=i.reduce((m,c)=>m[T(c)],o))}let n=a;if(n===""&&(n=!0),W(s)){Array.isArray(n)?e[l](...n):e[l](n);return}!(s!=null&&s.set)&&!W(s)?o[l]=n:s.constructor===n.constructor&&(s!=null&&s.copy)?s==null||s.copy(n):Array.isArray(n)?s.set(...n):!s.isColor&&s.setScalar?s.setScalar(n):s.set(n)}},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},{createApp:we}=f.createRenderer(ge),ye=e=>{const r=we(t);function t(){return e&&e.default?e.default():[]}return r};j(ne);const Ce=["data-scene"],te=f.defineComponent({__name:"TresCanvas",props:{shadows:{type:Boolean},clearColor:{},toneMapping:{},shadowMapType:{},useLegacyLights:{type:Boolean},outputColorSpace:{},toneMappingExposure:{},windowSize:{type:Boolean},preset:{},disableRender:{type:Boolean},camera:{},context:{},precision:{},alpha:{type:Boolean},premultipliedAlpha:{type:Boolean},antialias:{type:Boolean},stencil:{type:Boolean},preserveDrawingBuffer:{type:Boolean},powerPreference:{},depth:{type:Boolean},logarithmicDepthBuffer:{type:Boolean},failIfMajorPerformanceCaveat:{type:Boolean}},setup(e){const r=e,{logWarning:t}=k(),a=f.ref(),o=f.shallowRef(new g.Scene);F();const u=f.useSlots();let l;const s=i=>{l=ye(u),l.provide("useTres",i),l.provide("extend",j),l.mount(o.value)},n=f.computed(()=>r.disableRender);return f.onMounted(()=>{const i=a,m=H({scene:o.value,canvas:i,windowSize:r.windowSize,disableRender:n,rendererOptions:r});Z(o.value,m);const{addCamera:c,camera:M,cameras:P,removeCamera:L}=m;s(m);const y=()=>{const w=new g.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);w.position.set(3,3,3),w.lookAt(0,0,0),c(w);const _=f.watchEffect(()=>{P.value.length>=2&&(w.removeFromParent(),L(w),_==null||_())})};f.watch(()=>r.camera,(w,_)=>{w?c(w):_&&(_.removeFromParent(),L(_))},{immediate:!0}),M.value||(t("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."),y())}),(i,m)=>(f.openBlock(),f.createElementBlock("canvas",{ref_key:"canvas",ref:a,"data-scene":o.value.uuid,style:f.normalizeStyle({display:"block",width:"100%",height:"100%",position:i.windowSize?"fixed":"relative",top:0,left:0,pointerEvents:"auto",touchAction:"none",zIndex:1})},null,12,Ce))}}),Me=["TresCanvas","TresLeches","TresScene"],_e={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!Me.includes(e)||e==="primitive"}}},Pe={install(e){e.component("TresCanvas",te)}};d.TresCanvas=te,d.catalogue=E,d.default=Pe,d.extend=j,d.isProd=ce,d.normalizeColor=K,d.normalizeVectorFlexibleParam=fe,d.templateCompilerOptions=_e,d.trasverseObjects=Y,d.useCamera=I,d.useLoader=me,d.useLogger=k,d.usePointerEventHandler=Z,d.useRaycaster=Q,d.useRenderLoop=F,d.useRenderer=X,d.useSeek=de,d.useTexture=pe,d.useTresContext=ve,d.useTresContextProvider=H,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
-import type * as THREE from 'three';
 import { DefineComponent, Ref, VNode } from 'vue';
+import type * as THREE from 'three';
+import type { EventProps as PointerEventHandlerEventProps } from '../composables/usePointerEventHandler';
 export type AttachFnType<O = any> = (parent: any, self: O) => () => void;
 export type AttachType<O = any> = string | AttachFnType<O>;
 export type ConstructorRepresentation = new (...args: any[]) => any;
@@ -33,13 +34,21 @@ export interface TresObject3D extends THREE.Object3D {
     geometry?: THREE.BufferGeometry & TresBaseObject;
     material?: THREE.Material & TresBaseObject;
     userData: {
-        MATERIAL_VIA_PROP: boolean;
-        GEOMETRY_VIA_PROP: boolean;
-    } & {
+        tres__materialViaProp: boolean;
+        tres__geometryViaProp: boolean;
         [key: string]: any;
     };
 }
 export type TresObject = TresBaseObject & (TresObject3D | THREE.BufferGeometry | THREE.Material | THREE.Fog);
+export interface TresScene extends THREE.Scene {
+    userData: {
+        tres__registerCamera?: (newCamera: THREE.Camera, active?: boolean) => void;
+        tres__deregisterCamera?: (camera: THREE.Camera) => void;
+        tres__registerAtPointerEventHandler?: (object: THREE.Object3D & PointerEventHandlerEventProps) => void;
+        tres__deregisterAtPointerEventHandler?: (object: THREE.Object3D) => void;
+        [key: string]: any;
+    };
+}
 export interface Intersection extends THREE.Intersection {
     /** The event source (the object which registered the handler) */
     eventObject: TresObject;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "2.4.0-next.4",
+  "version": "2.4.0-next.6",
   "type": "module",
   "packageManager": "pnpm@8.3.1",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",

package/dist/keys.d.ts

@@ -1,9 +0,0 @@
-export declare const OBJECT_3D_USER_DATA_KEYS: {
-    REGISTER_CAMERA: string;
-    IS_ACTIVE_CAMERA: string;
-    GEOMETRY_VIA_PROP: string;
-    MATERIAL_VIA_PROP: string;
-    DEREGISTER_CAMERA: string;
-    REGISTER_AT_POINTER_EVENT_HANDLER: string;
-    DEREGISTER_AT_POINTER_EVENT_HANDLER: string;
-};

package/dist/utils/test-utils.d.ts

@@ -1 +0,0 @@
-export declare function withSetup(composable: any): (import("vue").App<Element> | undefined)[];