@tresjs/core 2.4.0 → 2.4.1

package/dist/tres.umd.cjs

@@ -1,9 +1,9 @@
 /**
  * name: @tresjs/core
- * version: v2.4.0
+ * version: v2.4.1
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(m,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):(m=typeof globalThis<"u"?globalThis:m||self,l(m.tres={},m.Vue,m.Three,m.VueUseCore))})(this,function(m,l,g,f){"use strict";function he(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const N=he(g),z=l.ref({}),F=e=>void Object.assign(z.value,e),X=e=>typeof e=="function",H=e=>!!e&&e.constructor===Array,y=["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 we(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,a=Math.random()*4294967295|0,n=Math.random()*4294967295|0;return(y[e&255]+y[e>>8&255]+y[e>>16&255]+y[e>>24&255]+"-"+y[t&255]+y[t>>8&255]+"-"+y[t>>16&15|64]+y[t>>24&255]+"-"+y[a&63|128]+y[a>>8&255]+"-"+y[a>>16&255]+y[a>>24&255]+y[n&255]+y[n>>8&255]+y[n>>16&255]+y[n>>24&255]).toLowerCase()}const j=Symbol();function J(){const e=l.shallowReactive({uuid:we(),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 a(o,s){e[o]=s}const n={state:e,...l.toRefs(e),getState:t,setState:a};return l.provide(j,n),n}const E=()=>l.inject(j,{state:l.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 be=45;let R;function Z(){const{state:e,setState:t,aspectRatio:a}=E();function n(i="Perspective",u){var p,h,v;if(i==="Perspective"){const{near:L,far:M,fov:P}=u||{near:.1,far:1e3,fov:be};R=new g.PerspectiveCamera(P,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,L,M),(h=e.cameras)==null||h.push(R)}else{const{left:L,right:M,top:P,bottom:C,near:O,far:b}=u||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};R=new g.OrthographicCamera(L,M,P,C,O,b),(v=e.cameras)==null||v.push(R)}return e.camera=R,t("camera",e.camera),R}function o(){var i;e.camera instanceof g.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(i=e.camera)==null||i.updateProjectionMatrix()}function s(i){var u;(u=e.cameras)==null||u.push(i),i instanceof g.PerspectiveCamera&&e.aspectRatio&&(i.aspect=e.aspectRatio.value),i.updateProjectionMatrix(),t("camera",i)}function c(i){var u;((u=e.cameras)==null?void 0:u.length)===0&&s(i)}function r(){e.cameras=[]}return l.watchEffect(()=>{a!=null&&a.value&&o()}),{activeCamera:l.toRef(e,"camera"),createCamera:n,updateCamera:o,pushCamera:s,clearCameras:r,setFirstCamera:c}}const ee=f.createEventHook(),te=f.createEventHook(),W=f.createEventHook(),k=new g.Clock;let D=0,I=0;const{pause:ye,resume:Ce,isActive:Pe}=f.useRafFn(()=>{ee.trigger({delta:D,elapsed:I,clock:k}),te.trigger({delta:D,elapsed:I,clock:k}),W.trigger({delta:D,elapsed:I,clock:k})},{immediate:!1});W.on(()=>{D=k.getDelta(),I=k.getElapsedTime()});function U(){return{onBeforeLoop:ee.on,onLoop:te.on,onAfterLoop:W.on,pause:ye,resume:Ce,isActive:Pe}}function Me(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function ae(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}}},ne=(e,t)=>{for(const a of Object.keys(t))t[a]instanceof Object&&Object.assign(t[a],ne(e[a],t[a]));return Object.assign(e||{},t),e},Le=_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 B(e){return e.replace(/-([a-z])/g,(t,a)=>a.toUpperCase())}function _e(e,t){const a=Object.create(null),n=e.split(",");for(let o=0;o<n.length;o++)a[n[o]]=!0;return t?o=>!!a[o.toLowerCase()]:o=>!!a[o]}const Se=(e,t)=>{const a=new Set,n=[];for(const o of e){const s=t(o);a.has(s)||(a.add(s),n.push(o))}return n},Oe=!0,re="[TresJS ▲ ■ ●] ";function x(){function e(n,o){console.error(`${re} ${n}`,o||"")}function t(n){console.warn(`${re} ${n}`)}function a(n,o){}return{logError:e,logWarning:t,logMessage:a}}function oe(e){const t=l.shallowRef(),a=l.ref(!1),{alpha:n=!0,antialias:o=!0,depth:s,logarithmicDepthBuffer:c,failIfMajorPerformanceCaveat:r,precision:i,premultipliedAlpha:u,stencil:p,shadows:h=!1,shadowMapType:v=g.PCFShadowMap,useLegacyLights:L=!1,outputColorSpace:M=g.LinearSRGBColorSpace,toneMapping:P=g.NoToneMapping,toneMappingExposure:C=1,context:O=void 0,powerPreference:b="default",preserveDrawingBuffer:_=!1,clearColor:T,windowSize:A=!1,preset:q=void 0}=l.toRefs(e),{state:d,setState:w}=E(),{width:de,height:me}=f.toValue(A)==!0||f.toValue(A)===""||f.toValue(A)==="true"?f.useWindowSize():f.useElementSize(d.container),{logError:Be,logWarning:Ge}=x(),{pixelRatio:pe}=f.useDevicePixelRatio(),{pause:Ne,resume:ze}=U(),K=l.computed(()=>de.value/me.value);setTimeout(()=>{var S;!f.toValue(A)&&!((S=d.canvas)!=null&&S.value.offsetHeight)&&Ge(`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 ve=()=>{t.value&&(t.value.setSize(de.value,me.value),t.value.setPixelRatio(Math.min(pe.value,2)))},ge=()=>{if(!t.value)return;const S=f.toValue(q);if(S){S in Y||Be("Renderer Preset must be one of these: "+Object.keys(Y).join(", ")),ne(t.value,Y[S]);return}t.value.shadowMap.enabled=f.toValue(h),t.value.shadowMap.type=f.toValue(v),t.value.toneMapping=f.toValue(P)||g.NoToneMapping,t.value.toneMappingExposure=f.toValue(C),t.value.outputColorSpace=f.toValue(M)||g.LinearSRGBColorSpace,T!=null&&T.value&&t.value.setClearColor(ae(f.toValue(T))),t.value.useLegacyLights=f.toValue(L)},Fe=()=>{const S=f.unrefElement(d.canvas);S&&(t.value=new g.WebGLRenderer({canvas:S,alpha:f.toValue(n),antialias:f.toValue(o),context:f.toValue(O),depth:f.toValue(s),failIfMajorPerformanceCaveat:f.toValue(r),logarithmicDepthBuffer:f.toValue(c),powerPreference:f.toValue(b),precision:f.toValue(i),stencil:f.toValue(p),preserveDrawingBuffer:f.toValue(_),premultipliedAlpha:f.toValue(u)}),w("renderer",t.value),w("clock",new g.Clock),w("aspectRatio",K),ge(),ve(),ze(),a.value=!0)},We=()=>{t.value&&(t.value.dispose(),t.value=void 0,a.value=!1,Ne())};return l.watch([K,pe],ve),l.watch([h,v,M,L,P,C,T],ge),l.watch(()=>[d.canvas,d.container],()=>{f.unrefElement(d.canvas)&&f.unrefElement(d.container)&&Fe()},{immediate:!0,deep:!0}),{renderer:t,isReady:a,dispose:We,aspectRatio:K}}function ie(e){const t={nodes:{},materials:{}};return e&&e.traverse(a=>{a.name&&(t.nodes[a.name]=a),a.material&&!t.materials[a.material.name]&&(t.materials[a.material.name]=a.material)}),t}async function Te(e,t,a,n,o){const{logError:s}=x(),c=new e;o&&o(c),a&&a(c);const i=(Array.isArray(t)?t:[t]).map(u=>new Promise((p,h)=>{c.load(u,v=>{v.scene&&Object.assign(v,ie(v.scene)),p(v)},n,v=>h(s("[useLoader] - Failed to load resource",v)))}));return H(t)?await Promise.all(i):await i[0]}async function Ae(e){const t=new g.LoadingManager,a=new g.TextureLoader(t),n=o=>new Promise((s,c)=>{a.load(o,r=>s(r),()=>null,()=>{c(new Error("[useTextures] - Failed to load texture"))})});if(H(e)){const o=await Promise.all(e.map(s=>n(s)));return e.length>1?o:o[0]}else{const{map:o,displacementMap:s,normalMap:c,roughnessMap:r,metalnessMap:i,aoMap:u,alphaMap:p,matcap:h}=e;return{map:o?await n(o):null,displacementMap:s?await n(s):null,normalMap:c?await n(c):null,roughnessMap:r?await n(r):null,metalnessMap:i?await n(i):null,aoMap:u?await n(u):null,alphaMap:p?await n(p):null,matcap:h?await n(h):null}}}const se=e=>{const{state:t}=E(),a=l.computed(()=>{var d;return(d=t.canvas)==null?void 0:d.value}),{x:n,y:o}=f.usePointer({target:a}),{width:s,height:c,top:r,left:i}=f.useElementBounding(a),u=new g.Raycaster,p=({x:d,y:w})=>{if(a.value)return{x:(d-i.value)/s.value*2-1,y:-((w-r.value)/c.value)*2+1}},h=({x:d,y:w})=>{if(t.camera)return u.setFromCamera(new g.Vector2(d,w),t.camera),u.intersectObjects(e.value,!1)},v=d=>{const w=p({x:(d==null?void 0:d.clientX)??n.value,y:(d==null?void 0:d.clientY)??o.value});return w?h(w)||[]:[]},L=l.computed(()=>v()),M=f.createEventHook(),P=f.createEventHook(),C=(d,w)=>{d.trigger({event:w,intersects:v(w)})},O=d=>{C(P,d)};let b;const _=d=>{var w;b=(w=v(d)[0])==null?void 0:w.object},T=d=>{var w;d instanceof PointerEvent&&b===((w=v(d)[0])==null?void 0:w.object)&&C(M,d)},A=d=>P.trigger({event:d,intersects:[]}),q=l.watchEffect(()=>{a!=null&&a.value&&(a.value.addEventListener("pointerup",T),a.value.addEventListener("pointerdown",_),a.value.addEventListener("pointermove",O),a.value.addEventListener("pointerleave",A),q())});return l.onUnmounted(()=>{a!=null&&a.value&&(a.value.removeEventListener("pointerup",T),a.value.removeEventListener("pointerdown",_),a.value.removeEventListener("pointermove",O),a.value.removeEventListener("pointerleave",A))}),{intersects:L,onClick:d=>M.on(d).off,onPointerMove:d=>P.on(d).off}};function Ee(){const{logWarning:e}=x();function t(n,o,s){let c=null;return n.traverse(r=>{r[o]===s&&(c=r)}),c||e(`Child with ${o} '${s}' not found.`),c}function a(n,o){return t(n,"name",o)}return{seek:t,seekByName:a}}const ce=()=>{const e=l.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),t=r=>{Object.values(e).forEach(i=>i.delete(r))},a=r=>{const{onClick:i,onPointerMove:u,onPointerEnter:p,onPointerLeave:h}=r;i&&e.click.set(r,i),u&&e.pointerMove.set(r,u),p&&e.pointerEnter.set(r,p),h&&e.pointerLeave.set(r,h),r.addEventListener("removed",()=>{r.traverse(v=>{t(v)}),t(r)})},n=l.computed(()=>Se(Object.values(e).map(r=>Array.from(r.keys())).flat(),({uuid:r})=>r)),{onClick:o,onPointerMove:s}=se(n);o(({intersects:r,event:i})=>{var u;r.length&&((u=e.click.get(r[0].object))==null||u(r[0],i))});let c;return s(({intersects:r,event:i})=>{var L,M,P,C;const u=(L=r==null?void 0:r[0])==null?void 0:L.object,{pointerLeave:p,pointerEnter:h,pointerMove:v}=e;c&&c!==u&&((M=p.get(c))==null||M(c,i)),u&&(c!==u&&((P=h.get(u))==null||P(r[0],i)),(C=v.get(u))==null||C(r[0],i)),c=u||null}),{registerObject:a,deregisterObject:t}},G={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp",REGISTER_AT_POINTER_EVENT_HANDLER:"tres__registerAtPointerEventHandler"};function Ye(e){}let $=null,V=null;const{logError:ue}=x(),Re={createElement(e,t,a,n){var i,u;if(n||(n={}),n.args||(n.args=[]),e==="template"||Le(e))return null;let o=e.replace("Tres",""),s;if(e==="primitive"){(n==null?void 0:n.object)===void 0&&ue("Tres primitives need a prop 'object'");const p=n.object;o=p.type,s=Object.assign(p,{type:o,attach:n.attach,primitive:!0})}else{const p=z.value[o];p||ue(`${o} is not defined on the THREE namespace. Use extend to add it to the catalog.`),s=new p(...n.args)}s.isCamera&&(n!=null&&n.position||s.position.set(3,3,3),n!=null&&n.lookAt||s.lookAt(0,0,0)),(n==null?void 0:n.attach)===void 0&&(s.isMaterial?s.attach="material":s.isBufferGeometry&&(s.attach="geometry"));const{GEOMETRY_VIA_PROP:c,MATERIAL_VIA_PROP:r}=G;return s.isObject3D&&((i=n==null?void 0:n.material)!=null&&i.isMaterial&&(s.userData[r]=!0),(u=n==null?void 0:n.geometry)!=null&&u.isBufferGeometry&&(s.userData[c]=!0)),s},insert(e,t){var a,n,o,s,c,r,i;if(t&&t.isScene&&(V=t),(((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresGroup"||((n=e==null?void 0:e.__vnode)==null?void 0:n.type)==="TresObject3D")&&t===null&&!((s=(o=e==null?void 0:e.__vnode)==null?void 0:o.ctx)!=null&&s.asyncResolved)){$=e;return}else(c=e==null?void 0:e.__vnode)!=null&&c.type.includes("Controls")&&t===null&&($=V);t||(t=$),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"}),(i=(r=V==null?void 0:V.userData)==null?void 0:r[G.REGISTER_AT_POINTER_EVENT_HANDLER])==null||i.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,a;if(e){if(e.isObject3D){const n=e,o=s=>{var i,u;const{GEOMETRY_VIA_PROP:c,MATERIAL_VIA_PROP:r}=G;s.userData[r]||(i=s.material)==null||i.dispose(),s.userData[c]||(u=s.geometry)==null||u.dispose()};n.traverse(s=>{o(s)}),o(n)}(t=e.removeFromParent)==null||t.call(e),(a=e.dispose)==null||a.call(e)}},patchProp(e,t,a,n){if(e){let o=e,s=t,c=B(s),r=o==null?void 0:o[c];if(o.type==="BufferGeometry"){if(s==="args")return;o.setAttribute(B(s),new g.BufferAttribute(...n));return}if(s.includes("-")&&r===void 0){const u=s.split("-");r=u.reduce((p,h)=>p[B(h)],o),s=u.pop(),c=s.toLowerCase(),r!=null&&r.set||(o=u.reduce((p,h)=>p[B(h)],o))}let i=n;if(i===""&&(i=!0),X(r)){Array.isArray(i)?e[c](...i):e[c](i);return}!(r!=null&&r.set)&&!X(r)?o[c]=i:r.constructor===i.constructor&&(r!=null&&r.copy)?r==null||r.copy(i):Array.isArray(i)?r.set(...i):!r.isColor&&r.setScalar?r.setScalar(i):r.set(i)}},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:xe}=l.createRenderer(Re),ke=e=>{const t=xe(a);function a(){return e&&e.default?e.default():[]}return t};F(N);const{logWarning:le}=x(),Ve=l.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:a}){e.physicallyCorrectLights===!0&&le("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const n=l.computed(()=>e.disableRender!==!1&&e.disableRender!==void 0),o=l.ref(),s=l.ref(),c=new N.Scene,r=ce(),{setState:i}=E();c.userData[G.REGISTER_AT_POINTER_EVENT_HANDLER]=r.registerObject,i("scene",c),i("canvas",s),i("container",o),i("pointerEventHandler",r);const{onLoop:u,resume:p}=U();l.onMounted(()=>{P()}),l.onUnmounted(()=>{i("renderer",null)});const{activeCamera:h,pushCamera:v,clearCameras:L}=Z();function M(){const b=c.getObjectByProperty("isCamera",!0);if(b)v(b);else{le("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 P(){const{renderer:b}=oe(e);e.camera&&v(e.camera),u(()=>{var _;h.value&&!n.value&&((_=b.value)==null||_.render(c,h.value))})}let C;function O(){C=ke(t);const b=E();C.provide("useTres",b),C.provide(j,b),C.provide("extend",F),C.mount(c),M()}return O(),a({scene:c}),l.watch(()=>e.camera,b=>{b&&(L(),v(b))}),()=>l.h(l.h("div",{ref:o,"data-scene":c.uuid,key:c.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[l.h("div",{style:{width:"100%",height:"100%"}},[l.h("canvas",{ref:s,"data-scene":c.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),fe=l.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:a}){const n=J();return a(n),()=>l.h(Ve,e,t)}}),je=["TresCanvas","TresLeches","TresScene"],De={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!je.includes(e)||e==="primitive"}}},Ie={install(e){e.component("TresCanvas",fe)}};m.CameraType=Q,m.TRES_CONTEXT_KEY=j,m.TresCanvas=fe,m.catalogue=z,m.default=Ie,m.extend=F,m.isProd=Oe,m.normalizeColor=ae,m.normalizeVectorFlexibleParam=Me,m.templateCompilerOptions=De,m.trasverseObjects=ie,m.useCamera=Z,m.useLoader=Te,m.useLogger=x,m.usePointerEventHandler=ce,m.useRaycaster=se,m.useRenderLoop=U,m.useRenderer=oe,m.useSeek=Ee,m.useTexture=Ae,m.useTres=E,m.useTresProvider=J,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(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,m,f){"use strict";function ve(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const ge=ve(m),z=c.ref({}),G=e=>void Object.assign(z.value,e),K=e=>typeof e=="function",X=e=>!!e&&e.constructor===Array,b=["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 ye(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,a=Math.random()*4294967295|0,n=Math.random()*4294967295|0;return(b[e&255]+b[e>>8&255]+b[e>>16&255]+b[e>>24&255]+"-"+b[t&255]+b[t>>8&255]+"-"+b[t>>16&15|64]+b[t>>24&255]+"-"+b[a&63|128]+b[a>>8&255]+"-"+b[a>>16&255]+b[a>>24&255]+b[n&255]+b[n>>8&255]+b[n>>16&255]+b[n>>24&255]).toLowerCase()}const B=Symbol();function J(){const e=c.shallowReactive({uuid:ye(),camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,aspectRatio:void 0,pointerEventHandler:void 0});function t(r){return e[r]}function a(r,s){e[r]=s}const n={state:e,...c.toRefs(e),getState:t,setState:a};return c.provide(B,n),n}const k=()=>c.inject(B,{state:c.shallowReactive({camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,pointerEventHandler:void 0})});var H=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(H||{});const he=45;let x;function Q(){const{state:e,setState:t,aspectRatio:a}=k();function n(i="Perspective",u){var v,y,g;if(i==="Perspective"){const{near:L,far:M,fov:P}=u||{near:.1,far:1e3,fov:he};x=new m.PerspectiveCamera(P,((v=e.aspectRatio)==null?void 0:v.value)||window.innerWidth/window.innerHeight,L,M),(y=e.cameras)==null||y.push(x)}else{const{left:L,right:M,top:P,bottom:C,near:O,far:T}=u||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};x=new m.OrthographicCamera(L,M,P,C,O,T),(g=e.cameras)==null||g.push(x)}return e.camera=x,t("camera",e.camera),x}function r(){var i;e.camera instanceof m.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(i=e.camera)==null||i.updateProjectionMatrix()}function s(i){var u;(u=e.cameras)==null||u.push(i),i instanceof m.PerspectiveCamera&&e.aspectRatio&&(i.aspect=e.aspectRatio.value),i.updateProjectionMatrix(),t("camera",i)}function l(i){var u;((u=e.cameras)==null?void 0:u.length)===0&&s(i)}function o(){e.cameras=[]}return c.watchEffect(()=>{a!=null&&a.value&&r()}),{activeCamera:c.toRef(e,"camera"),createCamera:n,updateCamera:r,pushCamera:s,clearCameras:o,setFirstCamera:l}}const Z=f.createEventHook(),ee=f.createEventHook(),F=f.createEventHook(),R=new m.Clock;let j=0,D=0;const{pause:we,resume:be,isActive:Ce}=f.useRafFn(()=>{Z.trigger({delta:j,elapsed:D,clock:R}),ee.trigger({delta:j,elapsed:D,clock:R}),F.trigger({delta:j,elapsed:D,clock:R})},{immediate:!1});F.on(()=>{j=R.getDelta(),D=R.getElapsedTime()});function W(){return{onBeforeLoop:Z.on,onLoop:ee.on,onAfterLoop:F.on,pause:we,resume:be,isActive:Ce}}function _e(e){return typeof e=="number"?[e,e,e]:e instanceof m.Vector3?[e.x,e.y,e.z]:e}function te(e){return e instanceof m.Color?e:Array.isArray(e)?new m.Color(...e):new m.Color(e)}const $={realistic:{outputColorSpace:m.SRGBColorSpace,toneMapping:m.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:m.PCFSoftShadowMap}}},ae=(e,t)=>{for(const a of Object.keys(t))t[a]instanceof Object&&Object.assign(t[a],ae(e[a],t[a]));return Object.assign(e||{},t),e},Pe=Me("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,a)=>a.toUpperCase())}function Me(e,t){const a=Object.create(null),n=e.split(",");for(let r=0;r<n.length;r++)a[n[r]]=!0;return t?r=>!!a[r.toLowerCase()]:r=>!!a[r]}const Le=(e,t)=>{const a=new Set,n=[];for(const r of e){const s=t(r);a.has(s)||(a.add(s),n.push(r))}return n},Se=!0,ne="[TresJS ▲ ■ ●] ";function E(){function e(n,r){console.error(`${ne} ${n}`,r||"")}function t(n){console.warn(`${ne} ${n}`)}function a(n,r){}return{logError:e,logWarning:t,logMessage:a}}function oe(e){const t=c.shallowRef(),a=c.ref(!1),{alpha:n=!0,antialias:r=!0,depth:s,logarithmicDepthBuffer:l,failIfMajorPerformanceCaveat:o,precision:i,premultipliedAlpha:u,stencil:v,shadows:y=!1,shadowMapType:g=m.PCFShadowMap,useLegacyLights:L=!1,outputColorSpace:M=m.LinearSRGBColorSpace,toneMapping:P=m.NoToneMapping,toneMappingExposure:C=1,context:O=void 0,powerPreference:T="default",preserveDrawingBuffer:w=!1,clearColor:_,windowSize:A=!1,preset:Y=void 0}=c.toRefs(e),{state:d,setState:h}=k(),{width:ue,height:fe}=f.toValue(A)==!0||f.toValue(A)===""||f.toValue(A)==="true"?f.useWindowSize():f.useElementSize(d.container),{logError:ze,logWarning:Ge}=E(),{pixelRatio:de}=f.useDevicePixelRatio(),{pause:Fe,resume:We}=W(),q=c.computed(()=>ue.value/fe.value);setTimeout(()=>{var S;!f.toValue(A)&&!((S=d.canvas)!=null&&S.value.offsetHeight)&&Ge(`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 pe=()=>{t.value&&(t.value.setSize(ue.value,fe.value),t.value.setPixelRatio(Math.min(de.value,2)))},me=()=>{if(!t.value)return;const S=f.toValue(Y);if(S){S in $||ze("Renderer Preset must be one of these: "+Object.keys($).join(", ")),ae(t.value,$[S]);return}t.value.shadowMap.enabled=f.toValue(y),t.value.shadowMap.type=f.toValue(g),t.value.toneMapping=f.toValue(P)||m.NoToneMapping,t.value.toneMappingExposure=f.toValue(C),t.value.outputColorSpace=f.toValue(M)||m.LinearSRGBColorSpace,_!=null&&_.value&&t.value.setClearColor(te(f.toValue(_))),t.value.useLegacyLights=f.toValue(L)},$e=()=>{const S=f.unrefElement(d.canvas);S&&(t.value=new m.WebGLRenderer({canvas:S,alpha:f.toValue(n),antialias:f.toValue(r),context:f.toValue(O),depth:f.toValue(s),failIfMajorPerformanceCaveat:f.toValue(o),logarithmicDepthBuffer:f.toValue(l),powerPreference:f.toValue(T),precision:f.toValue(i),stencil:f.toValue(v),preserveDrawingBuffer:f.toValue(w),premultipliedAlpha:f.toValue(u)}),h("renderer",t.value),h("clock",new m.Clock),h("aspectRatio",q),me(),pe(),We(),a.value=!0)},Ue=()=>{t.value&&(t.value.dispose(),t.value=void 0,a.value=!1,Fe())};return c.watch([q,de],pe),c.watch([y,g,M,L,P,C,_],me),c.watch(()=>[d.canvas,d.container],()=>{f.unrefElement(d.canvas)&&f.unrefElement(d.container)&&$e()},{immediate:!0,deep:!0}),{renderer:t,isReady:a,dispose:Ue,aspectRatio:q}}function re(e){const t={nodes:{},materials:{}};return e&&e.traverse(a=>{a.name&&(t.nodes[a.name]=a),a.material&&!t.materials[a.material.name]&&(t.materials[a.material.name]=a.material)}),t}async function Oe(e,t,a,n,r){const{logError:s}=E(),l=new e;r&&r(l),a&&a(l);const i=(Array.isArray(t)?t:[t]).map(u=>new Promise((v,y)=>{l.load(u,g=>{g.scene&&Object.assign(g,re(g.scene)),v(g)},n,g=>y(s("[useLoader] - Failed to load resource",g)))}));return X(t)?await Promise.all(i):await i[0]}async function Te(e){const t=new m.LoadingManager,a=new m.TextureLoader(t),n=r=>new Promise((s,l)=>{a.load(r,o=>s(o),()=>null,()=>{l(new Error("[useTextures] - Failed to load texture"))})});if(X(e)){const r=await Promise.all(e.map(s=>n(s)));return e.length>1?r:r[0]}else{const{map:r,displacementMap:s,normalMap:l,roughnessMap:o,metalnessMap:i,aoMap:u,alphaMap:v,matcap:y}=e;return{map:r?await n(r):null,displacementMap:s?await n(s):null,normalMap:l?await n(l):null,roughnessMap:o?await n(o):null,metalnessMap:i?await n(i):null,aoMap:u?await n(u):null,alphaMap:v?await n(v):null,matcap:y?await n(y):null}}}const ie=e=>{const{state:t}=k(),a=c.computed(()=>{var d;return(d=t.canvas)==null?void 0:d.value}),{x:n,y:r}=f.usePointer({target:a}),{width:s,height:l,top:o,left:i}=f.useElementBounding(a),u=new m.Raycaster,v=({x:d,y:h})=>{if(a.value)return{x:(d-i.value)/s.value*2-1,y:-((h-o.value)/l.value)*2+1}},y=({x:d,y:h})=>{if(t.camera)return u.setFromCamera(new m.Vector2(d,h),t.camera),u.intersectObjects(e.value,!1)},g=d=>{const h=v({x:(d==null?void 0:d.clientX)??n.value,y:(d==null?void 0:d.clientY)??r.value});return h?y(h)||[]:[]},L=c.computed(()=>g()),M=f.createEventHook(),P=f.createEventHook(),C=(d,h)=>{d.trigger({event:h,intersects:g(h)})},O=d=>{C(P,d)};let T;const w=d=>{var h;T=(h=g(d)[0])==null?void 0:h.object},_=d=>{var h;d instanceof PointerEvent&&T===((h=g(d)[0])==null?void 0:h.object)&&C(M,d)},A=d=>P.trigger({event:d,intersects:[]}),Y=c.watchEffect(()=>{a!=null&&a.value&&(a.value.addEventListener("pointerup",_),a.value.addEventListener("pointerdown",w),a.value.addEventListener("pointermove",O),a.value.addEventListener("pointerleave",A),Y())});return c.onUnmounted(()=>{a!=null&&a.value&&(a.value.removeEventListener("pointerup",_),a.value.removeEventListener("pointerdown",w),a.value.removeEventListener("pointermove",O),a.value.removeEventListener("pointerleave",A))}),{intersects:L,onClick:d=>M.on(d).off,onPointerMove:d=>P.on(d).off}};function Ae(){const{logWarning:e}=E();function t(n,r,s){let l=null;return n.traverse(o=>{o[r]===s&&(l=o)}),l||e(`Child with ${r} '${s}' not found.`),l}function a(n,r){return t(n,"name",r)}return{seek:t,seekByName:a}}const se=()=>{const e=c.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),t=o=>{Object.values(e).forEach(i=>i.delete(o))},a=o=>{const{onClick:i,onPointerMove:u,onPointerEnter:v,onPointerLeave:y}=o;i&&e.click.set(o,i),u&&e.pointerMove.set(o,u),v&&e.pointerEnter.set(o,v),y&&e.pointerLeave.set(o,y),o.addEventListener("removed",()=>{o.traverse(g=>{t(g)}),t(o)})},n=c.computed(()=>Le(Object.values(e).map(o=>Array.from(o.keys())).flat(),({uuid:o})=>o)),{onClick:r,onPointerMove:s}=ie(n);r(({intersects:o,event:i})=>{var u;o.length&&((u=e.click.get(o[0].object))==null||u(o[0],i))});let l;return s(({intersects:o,event:i})=>{var L,M,P,C;const u=(L=o==null?void 0:o[0])==null?void 0:L.object,{pointerLeave:v,pointerEnter:y,pointerMove:g}=e;l&&l!==u&&((M=v.get(l))==null||M(l,i)),u&&(l!==u&&((P=y.get(u))==null||P(o[0],i)),(C=g.get(u))==null||C(o[0],i)),l=u||null}),{registerObject:a,deregisterObject:t}},N={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp",REGISTER_AT_POINTER_EVENT_HANDLER:"tres__registerAtPointerEventHandler"};function qe(e){}let U=null,V=null;const{logError:ce}=E(),ke={createElement(e,t,a,n){var i,u;if(n||(n={}),n.args||(n.args=[]),e==="template"||Pe(e))return null;let r=e.replace("Tres",""),s;if(e==="primitive"){(n==null?void 0:n.object)===void 0&&ce("Tres primitives need a prop 'object'");const v=n.object;r=v.type,s=Object.assign(v,{type:r,attach:n.attach,primitive:!0})}else{const v=z.value[r];v||ce(`${r} is not defined on the THREE namespace. Use extend to add it to the catalog.`),s=new v(...n.args)}s.isCamera&&(n!=null&&n.position||s.position.set(3,3,3),n!=null&&n.lookAt||s.lookAt(0,0,0)),(n==null?void 0:n.attach)===void 0&&(s.isMaterial?s.attach="material":s.isBufferGeometry&&(s.attach="geometry"));const{GEOMETRY_VIA_PROP:l,MATERIAL_VIA_PROP:o}=N;return s.isObject3D&&((i=n==null?void 0:n.material)!=null&&i.isMaterial&&(s.userData[o]=!0),(u=n==null?void 0:n.geometry)!=null&&u.isBufferGeometry&&(s.userData[l]=!0)),s},insert(e,t){var a,n,r,s,l,o,i;if(t&&t.isScene&&(V=t),(((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresGroup"||((n=e==null?void 0:e.__vnode)==null?void 0:n.type)==="TresObject3D")&&t===null&&!((s=(r=e==null?void 0:e.__vnode)==null?void 0:r.ctx)!=null&&s.asyncResolved)){U=e;return}else(l=e==null?void 0:e.__vnode)!=null&&l.type.includes("Controls")&&t===null&&(U=V);t||(t=U),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"}),(i=(o=V==null?void 0:V.userData)==null?void 0:o[N.REGISTER_AT_POINTER_EVENT_HANDLER])==null||i.call(o,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,a;if(e){if(e.isObject3D){const n=e,r=s=>{var i,u;const{GEOMETRY_VIA_PROP:l,MATERIAL_VIA_PROP:o}=N;s.userData[o]||(i=s.material)==null||i.dispose(),s.userData[l]||(u=s.geometry)==null||u.dispose()};n.traverse(s=>{r(s)}),r(n)}(t=e.removeFromParent)==null||t.call(e),(a=e.dispose)==null||a.call(e)}},patchProp(e,t,a,n){if(e){let r=e,s=t,l=I(s),o=r==null?void 0:r[l];if(r.type==="BufferGeometry"){if(s==="args")return;r.setAttribute(I(s),new m.BufferAttribute(...n));return}if(s.includes("-")&&o===void 0){const u=s.split("-");o=u.reduce((v,y)=>v[I(y)],r),s=u.pop(),l=s.toLowerCase(),o!=null&&o.set||(r=u.reduce((v,y)=>v[I(y)],r))}let i=n;if(i===""&&(i=!0),K(o)){Array.isArray(i)?e[l](...i):e[l](i);return}!(o!=null&&o.set)&&!K(o)?r[l]=i:o.constructor===i.constructor&&(o!=null&&o.copy)?o==null||o.copy(i):Array.isArray(i)?o.set(...i):!o.isColor&&o.setScalar?o.setScalar(i):o.set(i)}},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:xe}=c.createRenderer(ke),Ee=e=>{const t=xe(a);function a(){return e&&e.default?e.default():[]}return t};G(ge);const Re=["data-scene"],Ve={style:{width:"100%",height:"100%"}},Be=["data-scene"],je=c.defineComponent({__name:"TresScene",props:{shadows:{type:Boolean},shadowMapType:{},physicallyCorrectLights:{type:Boolean,default:!1},useLegacyLights:{type:Boolean},outputColorSpace:{},toneMapping:{},toneMappingExposure:{},context:{},powerPreference:{},preserveDrawingBuffer:{type:Boolean},clearColor:{},windowSize:{type:Boolean},preset:{},disableRender:{type:Boolean},camera:{}},setup(e,{expose:t}){const a=e,{logWarning:n}=E();a.physicallyCorrectLights===!0&&n("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const r=c.ref(),s=c.ref(),l=new m.Scene,o=se(),{setState:i}=k();l.userData[N.REGISTER_AT_POINTER_EVENT_HANDLER]=o.registerObject,i("scene",l),i("canvas",s),i("container",r),i("pointerEventHandler",o),i("appContext",c.getCurrentInstance());const{onLoop:u,resume:v}=W(),{activeCamera:y,pushCamera:g,clearCameras:L}=Q();c.onMounted(()=>{P()}),c.onUnmounted(()=>{i("renderer",null)});function M(){const w=l.getObjectByProperty("isCamera",!0);if(w)g(w);else{n("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");const _=new m.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);_.position.set(3,3,3),_.lookAt(0,0,0),g(_)}}function P(){const{renderer:w}=oe(a);a.camera&&g(a.camera),u(()=>{var _;y.value&&a.disableRender!==!0&&((_=w.value)==null||_.render(l,y.value))})}let C;const O=c.useSlots();function T(){C=Ee(O);const w=k();C.provide("useTres",w),C.provide(B,w),C.provide("extend",G),C.mount(l),M()}return T(),t({scene:l}),c.watch(()=>a.camera,w=>{w&&(L(),g(w))}),(w,_)=>(c.openBlock(),c.createElementBlock("div",{ref_key:"container",ref:r,key:c.unref(l).uuid,"data-scene":c.unref(l).uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[c.createElementVNode("div",Ve,[c.createElementVNode("canvas",{ref_key:"canvas",ref:s,"data-scene":c.unref(l).uuid,style:c.normalizeStyle({display:"block",width:"100%",height:"100%",position:w.windowSize?"fixed":"absolute",top:0,left:0})},null,12,Be)])],8,Re))}}),le=c.defineComponent({__name:"TresCanvas",props:{shadows:{type:Boolean},shadowMapType:{},physicallyCorrectLights:{type:Boolean},useLegacyLights:{type:Boolean},outputColorSpace:{},toneMapping:{},toneMappingExposure:{},context:{},powerPreference:{},preserveDrawingBuffer:{type:Boolean},clearColor:{},windowSize:{type:Boolean},preset:{},disableRender:{type:Boolean},camera:{}},setup(e,{expose:t}){const a=e,n=J();return t(n),(r,s)=>(c.openBlock(),c.createBlock(je,c.normalizeProps(c.guardReactiveProps(a)),{default:c.withCtx(()=>[c.renderSlot(r.$slots,"default")]),_:3},16))}}),De=["TresCanvas","TresLeches","TresScene"],Ie={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!De.includes(e)||e==="primitive"}}},Ne={install(e){e.component("TresCanvas",le)}};p.CameraType=H,p.TRES_CONTEXT_KEY=B,p.TresCanvas=le,p.catalogue=z,p.default=Ne,p.extend=G,p.isProd=Se,p.normalizeColor=te,p.normalizeVectorFlexibleParam=_e,p.templateCompilerOptions=Ie,p.trasverseObjects=re,p.useCamera=Q,p.useLoader=Oe,p.useLogger=E,p.usePointerEventHandler=se,p.useRaycaster=ie,p.useRenderLoop=W,p.useRenderer=oe,p.useSeek=Ae,p.useTexture=Te,p.useTres=k,p.useTresProvider=J,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/types/index.d.ts

@@ -123,7 +123,7 @@ interface RaycastableRepresentation {
 type EventProps<P> = P extends RaycastableRepresentation ? Partial<EventHandlers> : unknown;
 export interface VueProps<P> {
     children?: VNode[];
-    ref?: Ref<P>;
+    ref?: string | null | Ref<P>;
     key?: string;
 }
 type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<Overwrite<WithMathProps<P>, VueProps<P> & EventProps<P>>>;

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": "2.4.0",
+  "version": "2.4.1",
   "type": "module",
   "packageManager": "pnpm@8.3.1",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -55,6 +55,7 @@
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
+    "docs:preview": "vitepress preview docs",
     "docs:contributors": "esno scripts/update-contributors.ts"
   },
   "peerDependencies": {
@@ -70,7 +71,7 @@
     "@huntersofbook/plausible-vue": "^1.0.0",
     "@release-it/conventional-changelog": "^5.1.1",
     "@stackblitz/sdk": "^1.9.0",
-    "@tresjs/cientos": "2.1.4",
+    "@tresjs/cientos": "2.2.0",
     "@types/three": "^0.152.1",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
@@ -102,7 +103,7 @@
     "vite-plugin-inspect": "^0.7.29",
     "vite-plugin-require-transform": "^1.0.17",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-beta.3",
+    "vitepress": "1.0.0-beta.5",
     "vitest": "^0.32.2",
     "vue": "^3.3.4",
     "vue-demi": "^0.14.5"

package/dist/components/TresCanvas.d.ts

@@ -1,25 +0,0 @@
-import { ColorSpace, ShadowMapType, ToneMapping } from 'three';
-import { CameraType } from '../composables';
-import { RendererPresetsType } from '../composables/useRenderer/const';
-export interface TresCanvasProps {
-    shadows?: boolean;
-    shadowMapType?: ShadowMapType;
-    physicallyCorrectLights?: boolean;
-    useLegacyLights?: boolean;
-    outputColorSpace?: ColorSpace;
-    toneMapping?: ToneMapping;
-    toneMappingExposure?: number;
-    context?: WebGLRenderingContext;
-    powerPreference?: 'high-performance' | 'low-power' | 'default';
-    preserveDrawingBuffer?: boolean;
-    clearColor?: string;
-    windowSize?: boolean;
-    preset?: RendererPresetsType;
-    disableRender?: boolean;
-    camera?: CameraType;
-}
-/**
- * Vue component for rendering a Tres component.
- */
-export declare const TresCanvas: import("vue").DefineComponent<TresCanvasProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<TresCanvasProps>, {}, {}>;
-export default TresCanvas;

package/dist/components/TresScene.d.ts

@@ -1,22 +0,0 @@
-import { ColorSpace, ShadowMapType, ToneMapping } from 'three';
-import { CameraType } from '../composables';
-import { type RendererPresetsType } from '../composables/useRenderer/const';
-export interface TresSceneProps {
-    shadows?: boolean;
-    shadowMapType?: ShadowMapType;
-    physicallyCorrectLights?: boolean;
-    useLegacyLights?: boolean;
-    outputColorSpace?: ColorSpace;
-    toneMapping?: ToneMapping;
-    toneMappingExposure?: number;
-    context?: WebGLRenderingContext;
-    powerPreference?: 'high-performance' | 'low-power' | 'default';
-    preserveDrawingBuffer?: boolean;
-    clearColor?: string;
-    windowSize?: boolean;
-    preset?: RendererPresetsType;
-    disableRender?: boolean;
-    camera?: CameraType;
-}
-export declare const TresScene: import("vue").DefineComponent<TresSceneProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<TresSceneProps>, {}, {}>;
-export default TresScene;