@tresjs/core 3.0.0 → 3.1.0-next.0

package/dist/tres.umd.cjs

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

package/dist/utils/index.d.ts

@@ -6,3 +6,5 @@ export declare function makeMap(str: string, expectsLowerCase?: boolean): (key:
 export declare const uniqueBy: <T, K>(array: T[], iteratee: (value: T) => K) => T[];
 export declare const get: <T>(obj: any, path: string | string[]) => T | undefined;
 export declare const set: (obj: any, path: string | string[], value: any) => void;
+export declare function deepEqual(a: any, b: any): boolean;
+export declare function deepArrayEqual(arr1: any[], arr2: any[]): boolean;

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "3.0.0",
+  "version": "3.1.0-next.0",
   "type": "module",
   "packageManager": "pnpm@8.3.1",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -64,47 +64,47 @@
   },
   "dependencies": {
     "@alvarosabu/utils": "^3.1.1",
-    "@vueuse/core": "^10.2.1"
+    "@vueuse/core": "^10.3.0"
   },
   "devDependencies": {
     "@alvarosabu/prettier-config": "^1.3.0",
     "@huntersofbook/plausible-vue": "^1.0.0",
-    "@release-it/conventional-changelog": "^5.1.1",
+    "@release-it/conventional-changelog": "^7.0.0",
     "@stackblitz/sdk": "^1.9.0",
-    "@tresjs/cientos": "2.2.0",
-    "@types/three": "^0.152.1",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
+    "@tresjs/cientos": "3.0.1",
+    "@types/three": "^0.154.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vitest/coverage-c8": "^0.32.3",
-    "@vitest/ui": "^0.32.3",
-    "@vue/test-utils": "^2.4.0",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.15.1",
-    "esno": "^0.16.3",
+    "@vitest/coverage-c8": "^0.33.0",
+    "@vitest/ui": "^0.33.0",
+    "@vue/test-utils": "^2.4.1",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.9.0",
+    "eslint-plugin-vue": "^9.16.1",
+    "esno": "^0.17.0",
     "gsap": "^3.12.2",
     "jsdom": "^22.1.0",
     "kolorist": "^1.8.0",
     "ohmyfetch": "^0.4.21",
     "pathe": "^1.1.1",
-    "prettier": "^2.8.8",
-    "release-it": "^15.11.0",
+    "prettier": "^3.0.0",
+    "release-it": "^16.1.3",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-visualizer": "^5.9.2",
-    "three": "^0.154.0",
-    "unocss": "^0.53.4",
-    "unplugin": "^1.3.1",
+    "three": "^0.155.0",
+    "unocss": "^0.54.0",
+    "unplugin": "^1.4.0",
     "unplugin-vue-components": "^0.25.1",
-    "vite": "^4.3.9",
+    "vite": "^4.4.7",
     "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "3.0.2",
-    "vite-plugin-inspect": "^0.7.32",
-    "vite-plugin-require-transform": "^1.0.20",
+    "vite-plugin-dts": "3.4.0",
+    "vite-plugin-inspect": "^0.7.33",
+    "vite-plugin-require-transform": "^1.0.21",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-beta.5",
-    "vitest": "^0.32.3",
+    "vitepress": "1.0.0-beta.7",
+    "vitest": "^0.33.0",
     "vue": "^3.3.4",
     "vue-demi": "^0.14.5"
   }