@tresjs/core 2.1.3 → 2.2.0

package/dist/tres.umd.cjs

@@ -1,9 +1,9 @@
 /**
  * name: @tresjs/core
- * version: v2.1.3
+ * version: v2.2.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(d,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):(d=typeof globalThis<"u"?globalThis:d||self,c(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,c,m,f){"use strict";function ye(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,a.get?a:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const ee=ye(m),te=e=>typeof e=="function",Ce=e=>typeof e=="string",ae=e=>!!e&&e.constructor===Array,$=c.ref({}),q=e=>void Object.assign($.value,e),h=["00","01","02","03","04","05","06","07","08","09","0a","0b","0c","0d","0e","0f","10","11","12","13","14","15","16","17","18","19","1a","1b","1c","1d","1e","1f","20","21","22","23","24","25","26","27","28","29","2a","2b","2c","2d","2e","2f","30","31","32","33","34","35","36","37","38","39","3a","3b","3c","3d","3e","3f","40","41","42","43","44","45","46","47","48","49","4a","4b","4c","4d","4e","4f","50","51","52","53","54","55","56","57","58","59","5a","5b","5c","5d","5e","5f","60","61","62","63","64","65","66","67","68","69","6a","6b","6c","6d","6e","6f","70","71","72","73","74","75","76","77","78","79","7a","7b","7c","7d","7e","7f","80","81","82","83","84","85","86","87","88","89","8a","8b","8c","8d","8e","8f","90","91","92","93","94","95","96","97","98","99","9a","9b","9c","9d","9e","9f","a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","aa","ab","ac","ad","ae","af","b0","b1","b2","b3","b4","b5","b6","b7","b8","b9","ba","bb","bc","bd","be","bf","c0","c1","c2","c3","c4","c5","c6","c7","c8","c9","ca","cb","cc","cd","ce","cf","d0","d1","d2","d3","d4","d5","d6","d7","d8","d9","da","db","dc","dd","de","df","e0","e1","e2","e3","e4","e5","e6","e7","e8","e9","ea","eb","ec","ed","ee","ef","f0","f1","f2","f3","f4","f5","f6","f7","f8","f9","fa","fb","fc","fd","fe","ff"];function Me(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,o=Math.random()*4294967295|0,a=Math.random()*4294967295|0;return(h[e&255]+h[e>>8&255]+h[e>>16&255]+h[e>>24&255]+"-"+h[t&255]+h[t>>8&255]+"-"+h[t>>16&15|64]+h[t>>24&255]+"-"+h[o&63|128]+h[o>>8&255]+"-"+h[o>>16&255]+h[o>>24&255]+h[a&255]+h[a>>8&255]+h[a>>16&255]+h[a>>24&255]).toLowerCase()}const z=Symbol();function ne(){const e=c.shallowReactive({uuid:Me(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:c.computed(()=>window.innerWidth/window.innerHeight)});function t(n){return e[n]}function o(n,r){e[n]=r}const a={state:e,...c.toRefs(e),getState:t,setState:o};return c.provide(z,a),a}const O=()=>c.inject(z,{state:c.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});var re=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(re||{});const Se=45;let x;function K(){const{state:e,setState:t,aspectRatio:o}=O();function a(s="Perspective",l){var p,v,w;if(s==="Perspective"){const{near:P,far:_,fov:C}=l||{near:.1,far:1e3,fov:Se};x=new m.PerspectiveCamera(C,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,P,_),(v=e.cameras)==null||v.push(x)}else{const{left:P,right:_,top:C,bottom:V,near:y,far:L}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};x=new m.OrthographicCamera(P,_,C,V,y,L),(w=e.cameras)==null||w.push(x)}return e.camera=x,t("camera",e.camera),x}function n(){var s;e.camera instanceof m.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(s=e.camera)==null||s.updateProjectionMatrix()}function r(s){var l;(l=e.cameras)==null||l.push(s),s instanceof m.PerspectiveCamera&&e.aspectRatio&&(s.aspect=e.aspectRatio.value),s.updateProjectionMatrix(),t("camera",s)}function u(s){var l;((l=e.cameras)==null?void 0:l.length)===0&&r(s)}function i(){e.cameras=[]}return c.watchEffect(()=>{o!=null&&o.value&&n()}),{activeCamera:c.toRef(e,"camera"),createCamera:a,updateCamera:n,pushCamera:r,clearCameras:i,setFirstCamera:u}}const oe=f.createEventHook(),ie=f.createEventHook(),X=f.createEventHook(),I=new m.Clock;let E=0,W=0;const{pause:Pe,resume:_e,isActive:Le}=f.useRafFn(()=>{oe.trigger({delta:E,elapsed:W,clock:I}),ie.trigger({delta:E,elapsed:W,clock:I}),X.trigger({delta:E,elapsed:W,clock:I})},{immediate:!1});X.on(()=>{E=I.getDelta(),W=I.getElapsedTime()});function J(){return{onBeforeLoop:oe.on,onLoop:ie.on,onAfterLoop:X.on,pause:Pe,resume:_e,isActive:Le}}function Ae(e){return e instanceof m.Color?e:Array.isArray(e)?new m.Color(...e):new m.Color(e)}const Q={realistic:{outputColorSpace:m.SRGBColorSpace,toneMapping:m.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:m.PCFSoftShadowMap}}},se=(e,t)=>{for(const o of Object.keys(t))t[o]instanceof Object&&Object.assign(t[o],se(e[o],t[o]));return Object.assign(e||{},t),e},Oe=xe("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 N(e){return e.replace(/-([a-z])/g,(t,o)=>o.toUpperCase())}function xe(e,t){const o=Object.create(null),a=e.split(",");for(let n=0;n<a.length;n++)o[a[n]]=!0;return t?n=>!!o[n.toLowerCase()]:n=>!!o[n]}const Te=!0,ce="[TresJS ▲ ■ ●] ";function T(){function e(a,n){console.error(`${ce} ${a}`,n||"")}function t(a){console.warn(`${ce} ${a}`)}function o(a,n){}return{logError:e,logWarning:t,logMessage:o}}function ue(e){const t=c.shallowRef(),o=c.ref(!1),{alpha:a=!0,antialias:n=!0,depth:r,logarithmicDepthBuffer:u,failIfMajorPerformanceCaveat:i,precision:s,premultipliedAlpha:l,stencil:p,shadows:v=!1,shadowMapType:w=m.PCFShadowMap,useLegacyLights:P=!1,outputColorSpace:_=m.LinearSRGBColorSpace,toneMapping:C=m.NoToneMapping,toneMappingExposure:V=1,context:y=void 0,powerPreference:L="default",preserveDrawingBuffer:H=!1,clearColor:S,windowSize:g=!1,preset:A=void 0}=c.toRefs(e),{state:b,setState:M}=O(),{width:B,height:F}=f.toValue(g)==!0||f.toValue(g)===""||f.toValue(g)==="true"?f.useWindowSize():f.useElementSize(b.container),{logError:R,logWarning:U}=T(),{pixelRatio:G}=f.useDevicePixelRatio(),{pause:k,resume:Y}=J(),j=c.computed(()=>B.value/F.value);setTimeout(()=>{!f.toValue(g)&&!b.canvas.value.offsetHeight&&U(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
-  You could set windowSize=true to force the canvas to be the size of the window.`)},1e3);const we=()=>{t.value&&(t.value.setSize(B.value,F.value),t.value.setPixelRatio(Math.min(G.value,2)))},be=()=>{if(!t.value)return;const D=f.toValue(A);if(D){D in Q||R("Renderer Preset must be one of these: "+Object.keys(Q).join(", ")),se(t.value,Q[D]);return}t.value.shadowMap.enabled=f.toValue(v),t.value.shadowMap.type=f.toValue(w),t.value.toneMapping=f.toValue(C)||m.NoToneMapping,t.value.toneMappingExposure=f.toValue(V),t.value.outputColorSpace=f.toValue(_)||m.LinearSRGBColorSpace,S!=null&&S.value&&t.value.setClearColor(Ae(f.toValue(S))),t.value.useLegacyLights=f.toValue(P)},Ee=()=>{const D=f.unrefElement(b.canvas);D&&(t.value=new m.WebGLRenderer({canvas:D,alpha:f.toValue(a),antialias:f.toValue(n),context:f.toValue(y),depth:f.toValue(r),failIfMajorPerformanceCaveat:f.toValue(i),logarithmicDepthBuffer:f.toValue(u),powerPreference:f.toValue(L),precision:f.toValue(s),stencil:f.toValue(p),preserveDrawingBuffer:f.toValue(H),premultipliedAlpha:f.toValue(l)}),M("renderer",t.value),M("clock",new m.Clock),M("aspectRatio",j),be(),we(),Y(),o.value=!0)},We=()=>{t.value&&(t.value.dispose(),t.value=void 0,o.value=!1,k())};return c.watch([j,G],we),c.watch([v,w,_,P,C,V,S],be),c.watch(()=>[b.canvas,b.container],()=>{f.unrefElement(b.canvas)&&f.unrefElement(b.container)&&Ee()},{immediate:!0,deep:!0}),{renderer:t,isReady:o,dispose:We,aspectRatio:j}}function fe(e){const t={nodes:{},materials:{}};return e&&e.traverse(o=>{o.name&&(t.nodes[o.name]=o),o.material&&!t.materials[o.material.name]&&(t.materials[o.material.name]=o.material)}),t}async function Ve(e,t,o,a,n){const{logError:r}=T(),u=new e;n&&n(u),o&&o(u);const s=(Array.isArray(t)?t:[t]).map(l=>new Promise((p,v)=>{u.load(l,w=>{w.scene&&Object.assign(w,fe(w.scene)),p(w)},a,w=>v(r("[useLoader] - Failed to load resource",w)))}));return ae(t)?await Promise.all(s):await s[0]}async function Re(e){const t=new m.LoadingManager,o=new m.TextureLoader(t),a=n=>new Promise((r,u)=>{o.load(n,i=>r(i),()=>null,()=>{u(new Error("[useTextures] - Failed to load texture"))})});if(ae(e)){const n=await Promise.all(e.map(r=>a(r)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:r,normalMap:u,roughnessMap:i,metalnessMap:s,aoMap:l,alphaMap:p,matcap:v}=e;return{map:n?await a(n):null,displacementMap:r?await a(r):null,normalMap:u?await a(u):null,roughnessMap:i?await a(i):null,metalnessMap:s?await a(s):null,aoMap:l?await a(l):null,alphaMap:p?await a(p):null,matcap:v?await a(v):null}}}function le(){var u;const e=c.shallowRef(new m.Raycaster),t=c.ref(new m.Vector2),o=c.ref(null),{setState:a,state:n}=O();a("raycaster",e.value),a("pointer",t),a("currentInstance",o);function r(i){t.value.x=i.clientX/window.innerWidth*2-1,t.value.y=-(i.clientY/window.innerHeight)*2+1}return(u=n==null?void 0:n.renderer)==null||u.domElement.addEventListener("pointermove",r),c.onUnmounted(()=>{var i;(i=n==null?void 0:n.renderer)==null||i.domElement.removeEventListener("pointermove",r)}),{raycaster:e,pointer:t}}function ke(){const{logWarning:e}=T();function t(a,n,r){let u=null;return a.traverse(i=>{i[n]===r&&(u=i)}),u||e(`Child with ${n} '${r}' not found.`),u}function o(a,n){return t(a,"name",n)}return{seek:t,seekByName:o}}const je=/^on[^a-z]/,De=e=>je.test(e);function Ue(e){}let Z=null,de=null;const me={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp"},{logError:pe}=T();let ve=!0;const Ie={createElement(e,t,o,a){var s,l;if(a||(a={}),a.args||(a.args=[]),e==="template"||Oe(e))return null;let n=e.replace("Tres",""),r;if(e==="primitive"){(a==null?void 0:a.object)===void 0&&pe("Tres primitives need a prop 'object'");const p=a.object;n=p.type,r=Object.assign(p,{type:n,attach:a.attach,primitive:!0})}else{const p=$.value[n];p||pe(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`),r=new p(...a.args)}if(r.isCamera&&ve){a!=null&&a.position||r.position.set(3,3,3),a!=null&&a.lookAt||r.lookAt(0,0,0);const{setFirstCamera:p}=K();p(r),ve=!1}(a==null?void 0:a.attach)===void 0&&(r.isMaterial?r.attach="material":r.isBufferGeometry&&(r.attach="geometry"));const{GEOMETRY_VIA_PROP:u,MATERIAL_VIA_PROP:i}=me;return r.isObject3D&&((s=a==null?void 0:a.material)!=null&&s.isMaterial&&(r.userData[i]=!0),(l=a==null?void 0:a.geometry)!=null&&l.isBufferGeometry&&(r.userData[u]=!0)),r.events={},r},insert(e,t){var o,a,n,r,u;if(t&&t.isScene&&(de=t),(((o=e==null?void 0:e.__vnode)==null?void 0:o.type)==="TresGroup"||((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresObject3D")&&t===null&&!((r=(n=e==null?void 0:e.__vnode)==null?void 0:n.ctx)!=null&&r.asyncResolved)){Z=e;return}else(u=e==null?void 0:e.__vnode)!=null&&u.type.includes("Controls")&&t===null&&(Z=de);t||(t=Z),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"})):e!=null&&e.isFog?t.fog=e:typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e))},remove(e){var t,o;if(e){if(e.isObject3D){const a=e,n=r=>{var s,l;const{GEOMETRY_VIA_PROP:u,MATERIAL_VIA_PROP:i}=me;r.userData[i]||(s=r.material)==null||s.dispose(),r.userData[u]||(l=r.geometry)==null||l.dispose()};a.traverse(r=>n(r)),n(a)}(t=e.removeFromParent)==null||t.call(e),(o=e.dispose)==null||o.call(e)}},patchProp(e,t,o,a){if(e){let n=e,r=t,u=N(r),i=n==null?void 0:n[u];if(n.type==="BufferGeometry"){if(r==="args")return;n.setAttribute(N(r),new m.BufferAttribute(...a));return}if(r.includes("-")&&i===void 0){const l=r.split("-");i=l.reduce((p,v)=>p[N(v)],n),r=l.pop(),u=r.toLowerCase(),i!=null&&i.set||(n=l.reduce((p,v)=>p[N(v)],n))}if(De(r)){const l=r;e.events[l]=a}let s=a;if(s===""&&(s=!0),te(i)){Array.isArray(s)?e[u](...s):e[u](s);return}!(i!=null&&i.set)&&!te(i)?n[u]=s:i.constructor===s.constructor&&(i!=null&&i.copy)?i==null||i.copy(s):Array.isArray(s)?i.set(...s):!i.isColor&&i.setScalar?i.setScalar(s):i.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:Be}=c.createRenderer(Ie),Fe=e=>{const t=Be(o);function o(){return e&&e.default?e.default():[]}return t};q(ee);const{logWarning:ge}=T(),Ge=c.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:o}){e.physicallyCorrectLights===!0&&ge("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=c.ref(),n=c.ref(),r=new ee.Scene,{setState:u}=O();u("scene",r),u("canvas",n),u("container",a);const i=c.ref(),s=t&&t.default&&t.default();s&&(s==null?void 0:s.length)>0&&(i.value=s.some(y=>Ce(y.type)&&y.type.includes("Camera"))||e.camera,i.value||ge("No camera found in the scene, please add one!"));const{onLoop:l,resume:p}=J();c.onMounted(()=>{_()}),c.onUnmounted(()=>{u("renderer",null)});const{activeCamera:v,pushCamera:w,clearCameras:P}=K();function _(){const{renderer:y}=ue(e);e.camera&&w(e.camera);const{raycaster:L,pointer:H}=le();let S=null,g=null;c.watchEffect(()=>{v.value&&L.value.setFromCamera(H.value,v.value)}),l(()=>{var A,b,M,B,F,R,U,G,k,Y;if(v.value&&e.disableRender!==!0&&((A=y.value)==null||A.render(r,v.value)),L.value){const j=L.value.intersectObjects(r.children);j.length>0?(g=j[0],S===null&&((B=(M=(b=g.object)==null?void 0:b.events)==null?void 0:M.onPointerEnter)==null||B.call(M,g)),(U=(R=(F=g.object)==null?void 0:F.events)==null?void 0:R.onPointerMove)==null||U.call(R,g)):S!==null&&((Y=(k=(G=g==null?void 0:g.object)==null?void 0:G.events)==null?void 0:k.onPointerLeave)==null||Y.call(k,S),g=null),S=g}}),f.useEventListener(n.value,"click",()=>{var A,b,M;g!==null&&((M=(b=(A=g.object)==null?void 0:A.events)==null?void 0:b.onClick)==null||M.call(b,g))})}let C;function V(){C=Fe(t);const y=O();C.provide("useTres",y),C.provide(z,y),C.provide("extend",q),C.mount(r)}return V(),o({scene:r}),c.watch(()=>e.camera,y=>{y&&(P(),w(y))}),()=>c.h(c.h("div",{ref:a,"data-scene":r.uuid,key:r.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[c.h("div",{style:{width:"100%",height:"100%"}},[c.h("canvas",{ref:n,"data-scene":r.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),he=c.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:o}){const a=ne();return o(a),()=>c.h(Ge,e,t)}}),ze={install(e){e.component("TresCanvas",he)}};d.CameraType=re,d.TRES_CONTEXT_KEY=z,d.TresCanvas=he,d.catalogue=$,d.default=ze,d.extend=q,d.isProd=Te,d.trasverseObjects=fe,d.useCamera=K,d.useLoader=Ve,d.useLogger=T,d.useRaycaster=le,d.useRenderLoop=J,d.useRenderer=ue,d.useSeek=ke,d.useTexture=Re,d.useTres=O,d.useTresProvider=ne,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(m,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):(m=typeof globalThis<"u"?globalThis:m||self,f(m.tres={},m.Vue,m.Three,m.VueUseCore))})(this,function(m,f,g,l){"use strict";function ge(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const N=ge(g),F=f.ref({}),z=e=>void Object.assign(F.value,e),H=e=>typeof e=="function",X=e=>!!e&&e.constructor===Array,P=["00","01","02","03","04","05","06","07","08","09","0a","0b","0c","0d","0e","0f","10","11","12","13","14","15","16","17","18","19","1a","1b","1c","1d","1e","1f","20","21","22","23","24","25","26","27","28","29","2a","2b","2c","2d","2e","2f","30","31","32","33","34","35","36","37","38","39","3a","3b","3c","3d","3e","3f","40","41","42","43","44","45","46","47","48","49","4a","4b","4c","4d","4e","4f","50","51","52","53","54","55","56","57","58","59","5a","5b","5c","5d","5e","5f","60","61","62","63","64","65","66","67","68","69","6a","6b","6c","6d","6e","6f","70","71","72","73","74","75","76","77","78","79","7a","7b","7c","7d","7e","7f","80","81","82","83","84","85","86","87","88","89","8a","8b","8c","8d","8e","8f","90","91","92","93","94","95","96","97","98","99","9a","9b","9c","9d","9e","9f","a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","aa","ab","ac","ad","ae","af","b0","b1","b2","b3","b4","b5","b6","b7","b8","b9","ba","bb","bc","bd","be","bf","c0","c1","c2","c3","c4","c5","c6","c7","c8","c9","ca","cb","cc","cd","ce","cf","d0","d1","d2","d3","d4","d5","d6","d7","d8","d9","da","db","dc","dd","de","df","e0","e1","e2","e3","e4","e5","e6","e7","e8","e9","ea","eb","ec","ed","ee","ef","f0","f1","f2","f3","f4","f5","f6","f7","f8","f9","fa","fb","fc","fd","fe","ff"];function he(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,n=Math.random()*4294967295|0,a=Math.random()*4294967295|0;return(P[e&255]+P[e>>8&255]+P[e>>16&255]+P[e>>24&255]+"-"+P[t&255]+P[t>>8&255]+"-"+P[t>>16&15|64]+P[t>>24&255]+"-"+P[n&63|128]+P[n>>8&255]+"-"+P[n>>16&255]+P[n>>24&255]+P[a&255]+P[a>>8&255]+P[a>>16&255]+P[a>>24&255]).toLowerCase()}const V=Symbol();function J(){const e=f.shallowReactive({uuid:he(),camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,aspectRatio:void 0,pointerEventHandler:void 0});function t(o){return e[o]}function n(o,i){e[o]=i}const a={state:e,...f.toRefs(e),getState:t,setState:n};return f.provide(V,a),a}const A=()=>f.inject(V,{state:f.shallowReactive({camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,pointerEventHandler:void 0})});var Q=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(Q||{});const we=45;let E;function Z(){const{state:e,setState:t,aspectRatio:n}=A();function a(s="Perspective",c){var p,v,h;if(s==="Perspective"){const{near:M,far:C,fov:w}=c||{near:.1,far:1e3,fov:we};E=new g.PerspectiveCamera(w,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,M,C),(v=e.cameras)==null||v.push(E)}else{const{left:M,right:C,top:w,bottom:L,near:y,far:_}=c||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};E=new g.OrthographicCamera(M,C,w,L,y,_),(h=e.cameras)==null||h.push(E)}return e.camera=E,t("camera",e.camera),E}function o(){var s;e.camera instanceof g.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(s=e.camera)==null||s.updateProjectionMatrix()}function i(s){var c;(c=e.cameras)==null||c.push(s),s instanceof g.PerspectiveCamera&&e.aspectRatio&&(s.aspect=e.aspectRatio.value),s.updateProjectionMatrix(),t("camera",s)}function u(s){var c;((c=e.cameras)==null?void 0:c.length)===0&&i(s)}function r(){e.cameras=[]}return f.watchEffect(()=>{n!=null&&n.value&&o()}),{activeCamera:f.toRef(e,"camera"),createCamera:a,updateCamera:o,pushCamera:i,clearCameras:r,setFirstCamera:u}}const ee=l.createEventHook(),te=l.createEventHook(),W=l.createEventHook(),x=new g.Clock;let j=0,D=0;const{pause:be,resume:ye,isActive:Pe}=l.useRafFn(()=>{ee.trigger({delta:j,elapsed:D,clock:x}),te.trigger({delta:j,elapsed:D,clock:x}),W.trigger({delta:j,elapsed:D,clock:x})},{immediate:!1});W.on(()=>{j=x.getDelta(),D=x.getElapsedTime()});function U(){return{onBeforeLoop:ee.on,onLoop:te.on,onAfterLoop:W.on,pause:be,resume:ye,isActive:Pe}}function Ce(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}const Y={realistic:{outputColorSpace:g.SRGBColorSpace,toneMapping:g.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:g.PCFSoftShadowMap}}},ae=(e,t)=>{for(const n of Object.keys(t))t[n]instanceof Object&&Object.assign(t[n],ae(e[n],t[n]));return Object.assign(e||{},t),e},Me=_e("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 I(e){return e.replace(/-([a-z])/g,(t,n)=>n.toUpperCase())}function _e(e,t){const n=Object.create(null),a=e.split(",");for(let o=0;o<a.length;o++)n[a[o]]=!0;return t?o=>!!n[o.toLowerCase()]:o=>!!n[o]}const Le=(e,t)=>{const n=new Set,a=[];for(const o of e){const i=t(o);n.has(i)||(n.add(i),a.push(o))}return a},Se=!0,ne="[TresJS ▲ ■ ●] ";function R(){function e(a,o){console.error(`${ne} ${a}`,o||"")}function t(a){console.warn(`${ne} ${a}`)}function n(a,o){}return{logError:e,logWarning:t,logMessage:n}}function re(e){const t=f.shallowRef(),n=f.ref(!1),{alpha:a=!0,antialias:o=!0,depth:i,logarithmicDepthBuffer:u,failIfMajorPerformanceCaveat:r,precision:s,premultipliedAlpha:c,stencil:p,shadows:v=!1,shadowMapType:h=g.PCFShadowMap,useLegacyLights:M=!1,outputColorSpace:C=g.LinearSRGBColorSpace,toneMapping:w=g.NoToneMapping,toneMappingExposure:L=1,context:y=void 0,powerPreference:_="default",preserveDrawingBuffer:G=!1,clearColor:O,windowSize:T=!1,preset:$=void 0}=f.toRefs(e),{state:d,setState:b}=A(),{width:le,height:de}=l.toValue(T)==!0||l.toValue(T)===""||l.toValue(T)==="true"?l.useWindowSize():l.useElementSize(d.container),{logError:je,logWarning:De}=R(),{pixelRatio:pe}=l.useDevicePixelRatio(),{pause:Ie,resume:Be}=U(),K=f.computed(()=>le.value/de.value);setTimeout(()=>{var S;!l.toValue(T)&&!((S=d.canvas)!=null&&S.value.offsetHeight)&&De(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
+  You could set windowSize=true to force the canvas to be the size of the window.`)},1e3);const me=()=>{t.value&&(t.value.setSize(le.value,de.value),t.value.setPixelRatio(Math.min(pe.value,2)))},ve=()=>{if(!t.value)return;const S=l.toValue($);if(S){S in Y||je("Renderer Preset must be one of these: "+Object.keys(Y).join(", ")),ae(t.value,Y[S]);return}t.value.shadowMap.enabled=l.toValue(v),t.value.shadowMap.type=l.toValue(h),t.value.toneMapping=l.toValue(w)||g.NoToneMapping,t.value.toneMappingExposure=l.toValue(L),t.value.outputColorSpace=l.toValue(C)||g.LinearSRGBColorSpace,O!=null&&O.value&&t.value.setClearColor(Ce(l.toValue(O))),t.value.useLegacyLights=l.toValue(M)},Ge=()=>{const S=l.unrefElement(d.canvas);S&&(t.value=new g.WebGLRenderer({canvas:S,alpha:l.toValue(a),antialias:l.toValue(o),context:l.toValue(y),depth:l.toValue(i),failIfMajorPerformanceCaveat:l.toValue(r),logarithmicDepthBuffer:l.toValue(u),powerPreference:l.toValue(_),precision:l.toValue(s),stencil:l.toValue(p),preserveDrawingBuffer:l.toValue(G),premultipliedAlpha:l.toValue(c)}),b("renderer",t.value),b("clock",new g.Clock),b("aspectRatio",K),ve(),me(),Be(),n.value=!0)},Ne=()=>{t.value&&(t.value.dispose(),t.value=void 0,n.value=!1,Ie())};return f.watch([K,pe],me),f.watch([v,h,C,M,w,L,O],ve),f.watch(()=>[d.canvas,d.container],()=>{l.unrefElement(d.canvas)&&l.unrefElement(d.container)&&Ge()},{immediate:!0,deep:!0}),{renderer:t,isReady:n,dispose:Ne,aspectRatio:K}}function oe(e){const t={nodes:{},materials:{}};return e&&e.traverse(n=>{n.name&&(t.nodes[n.name]=n),n.material&&!t.materials[n.material.name]&&(t.materials[n.material.name]=n.material)}),t}async function Oe(e,t,n,a,o){const{logError:i}=R(),u=new e;o&&o(u),n&&n(u);const s=(Array.isArray(t)?t:[t]).map(c=>new Promise((p,v)=>{u.load(c,h=>{h.scene&&Object.assign(h,oe(h.scene)),p(h)},a,h=>v(i("[useLoader] - Failed to load resource",h)))}));return X(t)?await Promise.all(s):await s[0]}async function Te(e){const t=new g.LoadingManager,n=new g.TextureLoader(t),a=o=>new Promise((i,u)=>{n.load(o,r=>i(r),()=>null,()=>{u(new Error("[useTextures] - Failed to load texture"))})});if(X(e)){const o=await Promise.all(e.map(i=>a(i)));return e.length>1?o:o[0]}else{const{map:o,displacementMap:i,normalMap:u,roughnessMap:r,metalnessMap:s,aoMap:c,alphaMap:p,matcap:v}=e;return{map:o?await a(o):null,displacementMap:i?await a(i):null,normalMap:u?await a(u):null,roughnessMap:r?await a(r):null,metalnessMap:s?await a(s):null,aoMap:c?await a(c):null,alphaMap:p?await a(p):null,matcap:v?await a(v):null}}}const ie=e=>{const{state:t}=A(),n=f.computed(()=>{var d;return(d=t.canvas)==null?void 0:d.value}),{x:a,y:o}=l.usePointer({target:n}),{width:i,height:u,top:r,left:s}=l.useElementBounding(n),c=new g.Raycaster,p=({x:d,y:b})=>{if(n.value)return{x:(d-s.value)/i.value*2-1,y:-((b-r.value)/u.value)*2+1}},v=({x:d,y:b})=>{if(t.camera)return c.setFromCamera(new g.Vector2(d,b),t.camera),c.intersectObjects(e.value,!1)},h=d=>{const b=p({x:(d==null?void 0:d.clientX)??a.value,y:(d==null?void 0:d.clientY)??o.value});return b?v(b)||[]:[]},M=f.computed(()=>h()),C=l.createEventHook(),w=l.createEventHook(),L=(d,b)=>{d.trigger({event:b,intersects:h(b)})},y=d=>{L(w,d)};let _;const G=d=>{var b;_=(b=h(d)[0])==null?void 0:b.object},O=d=>{var b;d instanceof PointerEvent&&_===((b=h(d)[0])==null?void 0:b.object)&&L(C,d)},T=d=>w.trigger({event:d,intersects:[]}),$=f.watchEffect(()=>{n!=null&&n.value&&(n.value.addEventListener("pointerup",O),n.value.addEventListener("pointerdown",G),n.value.addEventListener("pointermove",y),n.value.addEventListener("pointerleave",T),$())});return f.onUnmounted(()=>{n!=null&&n.value&&(n.value.removeEventListener("pointerup",O),n.value.removeEventListener("pointerdown",G),n.value.removeEventListener("pointermove",y),n.value.removeEventListener("pointerleave",T))}),{intersects:M,onClick:d=>C.on(d).off,onPointerMove:d=>w.on(d).off}};function Ae(){const{logWarning:e}=R();function t(a,o,i){let u=null;return a.traverse(r=>{r[o]===i&&(u=r)}),u||e(`Child with ${o} '${i}' not found.`),u}function n(a,o){return t(a,"name",o)}return{seek:t,seekByName:n}}const se=()=>{const e=f.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),t=r=>{Object.values(e).forEach(s=>s.delete(r))},n=r=>{const{onClick:s,onPointerMove:c,onPointerEnter:p,onPointerLeave:v}=r;s&&e.click.set(r,s),c&&e.pointerMove.set(r,c),p&&e.pointerEnter.set(r,p),v&&e.pointerLeave.set(r,v),r.addEventListener("removed",()=>{r.traverse(h=>{t(h)}),t(r)})},a=f.computed(()=>Le(Object.values(e).map(r=>Array.from(r.keys())).flat(),({uuid:r})=>r)),{onClick:o,onPointerMove:i}=ie(a);o(({intersects:r,event:s})=>{var c;r.length&&((c=e.click.get(r[0].object))==null||c(r[0],s))});let u;return i(({intersects:r,event:s})=>{var M,C,w,L;const c=(M=r==null?void 0:r[0])==null?void 0:M.object,{pointerLeave:p,pointerEnter:v,pointerMove:h}=e;u&&u!==c&&((C=p.get(u))==null||C(u,s)),c&&(u!==c&&((w=v.get(c))==null||w(r[0],s)),(L=h.get(c))==null||L(r[0],s)),u=c||null}),{registerObject:n,deregisterObject:t}},B={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp",REGISTER_AT_POINTER_EVENT_HANDLER:"tres__registerAtPointerEventHandler"};function ze(e){}let q=null,k=null;const{logError:ce}=R(),Ee={createElement(e,t,n,a){var s,c;if(a||(a={}),a.args||(a.args=[]),e==="template"||Me(e))return null;let o=e.replace("Tres",""),i;if(e==="primitive"){(a==null?void 0:a.object)===void 0&&ce("Tres primitives need a prop 'object'");const p=a.object;o=p.type,i=Object.assign(p,{type:o,attach:a.attach,primitive:!0})}else{const p=F.value[o];p||ce(`${o} is not defined on the THREE namespace. Use extend to add it to the catalog.`),i=new p(...a.args)}i.isCamera&&(a!=null&&a.position||i.position.set(3,3,3),a!=null&&a.lookAt||i.lookAt(0,0,0)),(a==null?void 0:a.attach)===void 0&&(i.isMaterial?i.attach="material":i.isBufferGeometry&&(i.attach="geometry"));const{GEOMETRY_VIA_PROP:u,MATERIAL_VIA_PROP:r}=B;return i.isObject3D&&((s=a==null?void 0:a.material)!=null&&s.isMaterial&&(i.userData[r]=!0),(c=a==null?void 0:a.geometry)!=null&&c.isBufferGeometry&&(i.userData[u]=!0)),i},insert(e,t){var n,a,o,i,u,r,s;if(t&&t.isScene&&(k=t),(((n=e==null?void 0:e.__vnode)==null?void 0:n.type)==="TresGroup"||((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresObject3D")&&t===null&&!((i=(o=e==null?void 0:e.__vnode)==null?void 0:o.ctx)!=null&&i.asyncResolved)){q=e;return}else(u=e==null?void 0:e.__vnode)!=null&&u.type.includes("Controls")&&t===null&&(q=k);t||(t=q),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"}),(s=(r=k==null?void 0:k.userData)==null?void 0:r[B.REGISTER_AT_POINTER_EVENT_HANDLER])==null||s.call(r,e)):e!=null&&e.isFog?t.fog=e:typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e))},remove(e){var t,n;if(e){if(e.isObject3D){const a=e,o=i=>{var s,c;const{GEOMETRY_VIA_PROP:u,MATERIAL_VIA_PROP:r}=B;i.userData[r]||(s=i.material)==null||s.dispose(),i.userData[u]||(c=i.geometry)==null||c.dispose()};a.traverse(i=>{o(i)}),o(a)}(t=e.removeFromParent)==null||t.call(e),(n=e.dispose)==null||n.call(e)}},patchProp(e,t,n,a){if(e){let o=e,i=t,u=I(i),r=o==null?void 0:o[u];if(o.type==="BufferGeometry"){if(i==="args")return;o.setAttribute(I(i),new g.BufferAttribute(...a));return}if(i.includes("-")&&r===void 0){const c=i.split("-");r=c.reduce((p,v)=>p[I(v)],o),i=c.pop(),u=i.toLowerCase(),r!=null&&r.set||(o=c.reduce((p,v)=>p[I(v)],o))}let s=a;if(s===""&&(s=!0),H(r)){Array.isArray(s)?e[u](...s):e[u](s);return}!(r!=null&&r.set)&&!H(r)?o[u]=s:r.constructor===s.constructor&&(r!=null&&r.copy)?r==null||r.copy(s):Array.isArray(s)?r.set(...s):!r.isColor&&r.setScalar?r.setScalar(s):r.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:Re}=f.createRenderer(Ee),xe=e=>{const t=Re(n);function n(){return e&&e.default?e.default():[]}return t};z(N);const{logWarning:ue}=R(),ke=f.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:n}){e.physicallyCorrectLights===!0&&ue("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=f.ref(),o=f.ref(),i=new N.Scene,u=se(),{setState:r}=A();i.userData[B.REGISTER_AT_POINTER_EVENT_HANDLER]=u.registerObject,r("scene",i),r("canvas",o),r("container",a),r("pointerEventHandler",u);const{onLoop:s,resume:c}=U();f.onMounted(()=>{C()}),f.onUnmounted(()=>{r("renderer",null)});const{activeCamera:p,pushCamera:v,clearCameras:h}=Z();function M(){const y=i.getObjectByProperty("isCamera",!0);if(y)v(y);else{ue("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");const _=new N.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);_.position.set(3,3,3),_.lookAt(0,0,0),v(_)}}function C(){const{renderer:y}=re(e);e.camera&&v(e.camera),s(()=>{var _;p.value&&e.disableRender!==!0&&((_=y.value)==null||_.render(i,p.value))})}let w;function L(){w=xe(t);const y=A();w.provide("useTres",y),w.provide(V,y),w.provide("extend",z),w.mount(i),M()}return L(),n({scene:i}),f.watch(()=>e.camera,y=>{y&&(h(),v(y))}),()=>f.h(f.h("div",{ref:a,"data-scene":i.uuid,key:i.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[f.h("div",{style:{width:"100%",height:"100%"}},[f.h("canvas",{ref:o,"data-scene":i.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),fe=f.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:n}){const a=J();return n(a),()=>f.h(ke,e,t)}}),Ve={install(e){e.component("TresCanvas",fe)}};m.CameraType=Q,m.TRES_CONTEXT_KEY=V,m.TresCanvas=fe,m.catalogue=F,m.default=Ve,m.extend=z,m.isProd=Se,m.trasverseObjects=oe,m.useCamera=Z,m.useLoader=Oe,m.useLogger=R,m.usePointerEventHandler=se,m.useRaycaster=ie,m.useRenderLoop=U,m.useRenderer=re,m.useSeek=Ae,m.useTexture=Te,m.useTres=A,m.useTresProvider=J,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/types/index.d.ts

@@ -25,7 +25,6 @@ export interface InstanceProps<T = any, P = any> {
 }
 interface TresBaseObject {
     attach?: string;
-    events: EventHandlers;
     removeFromParent?: () => void;
     dispose?: () => void;
     [prop: string]: any;

package/dist/utils/index.d.ts

@@ -3,3 +3,4 @@ export declare const merge: (target: any, source: any) => any;
 export declare const isHTMLTag: (key: string) => boolean;
 export declare function kebabToCamel(str: string): string;
 export declare function makeMap(str: string, expectsLowerCase?: boolean): (key: string) => boolean;
+export declare const uniqueBy: <T, K>(array: T[], iteratee: (value: T) => K) => T[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "type": "module",
   "packageManager": "pnpm@8.3.1",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -61,16 +61,17 @@
     "vue": ">=3.3"
   },
   "dependencies": {
-    "@alvarosabu/utils": "^3.0.0",
-    "@vueuse/core": "^10.1.2"
+    "@alvarosabu/utils": "^3.1.1",
+    "@vueuse/core": "^10.1.2",
+    "vue-zustand": "^0.5.0",
+    "zustand": "^4.3.8"
   },
   "devDependencies": {
-    "vue": "^3.3.4",
     "@alvarosabu/prettier-config": "^1.3.0",
     "@huntersofbook/plausible-vue": "^1.0.0",
     "@release-it/conventional-changelog": "^5.1.1",
     "@stackblitz/sdk": "^1.9.0",
-    "@tresjs/cientos": "2.1.3",
+    "@tresjs/cientos": "2.1.4",
     "@types/three": "^0.152.1",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.59.11",
@@ -102,6 +103,7 @@
     "vite-svg-loader": "^4.0.0",
     "vitepress": "1.0.0-beta.2",
     "vitest": "^0.32.0",
+    "vue": "^3.3.4",
     "vue-demi": "^0.14.5"
   }
 }