@tresjs/core 2.0.0-rc.4 → 2.1.0

package/dist/tres.umd.cjs

@@ -1,9 +1,9 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-rc.4
+ * version: v2.1.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,u){"use strict";function Ce(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 H=Ce(m),$=c.ref({uuid:m.MathUtils.generateUUID()}),q=e=>void Object.assign($.value,e);var ee=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(ee||{});const Me=45;let A;function K(){const{state:e,setState:t,aspectRatio:o}=L();function a(s="Perspective",l){var p,h,b;if(s==="Perspective"){const{near:C,far:P,fov:y}=l||{near:.1,far:1e3,fov:Me};A=new m.PerspectiveCamera(y,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,C,P),(h=e.cameras)==null||h.push(A)}else{const{left:C,right:P,top:y,bottom:V,near:_,far:I}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};A=new m.OrthographicCamera(C,P,y,V,_,I),(b=e.cameras)==null||b.push(A)}return e.camera=A,t("camera",e.camera),A}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 f(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:f}}const te=u.createEventHook(),ae=u.createEventHook(),X=u.createEventHook(),D=new m.Clock;let G=0,z=0;const{pause:Se,resume:Pe,isActive:Le}=u.useRafFn(()=>{te.trigger({delta:G,elapsed:z,clock:D}),ae.trigger({delta:G,elapsed:z,clock:D}),X.trigger({delta:G,elapsed:z,clock:D})},{immediate:!1});X.on(()=>{G=D.getDelta(),z=D.getElapsedTime()});function J(){return{onBeforeLoop:te.on,onLoop:ae.on,onAfterLoop:X.on,pause:Se,resume:Pe,isActive:Le}}function _e(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}}},ne=(e,t)=>{for(const o of Object.keys(t))t[o]instanceof Object&&Object.assign(t[o],ne(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 F(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]}function re(e){var be,ye;const t=c.shallowRef(),o=c.ref(!1),{alpha:a=!0,antialias:n=!0,depth:r,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:i,precision:s,premultipliedAlpha:l,stencil:p,shadows:h=!1,shadowMapType:b=m.PCFShadowMap,useLegacyLights:C=!1,outputColorSpace:P=m.LinearSRGBColorSpace,toneMapping:y=m.NoToneMapping,toneMappingExposure:V=1,context:_=void 0,powerPreference:I="default",preserveDrawingBuffer:R=!1,clearColor:g,windowSize:M=!1,preset:S=void 0}=c.toRefs(e),{state:w,setState:k}=L(),{width:B,height:O}=u.toValue(M)==!0||u.toValue(M)===""||u.toValue(M)==="true"?u.useWindowSize():u.useElementSize(w.container),{logError:W,logWarning:E}=T(),{pixelRatio:x}=u.useDevicePixelRatio(),{pause:N,resume:Y}=J(),Z=c.computed(()=>B.value/O.value);!u.toValue(M)&&((ye=(be=w.container)==null?void 0:be.value)==null?void 0:ye.offsetHeight)===0&&E(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
-You could set windowSize=true to force the canvas to be the size of the window.`);const he=()=>{t.value&&(t.value.setSize(B.value,O.value),t.value.setPixelRatio(Math.min(x.value,2)))},we=()=>{if(!t.value)return;const j=u.toValue(S);if(j){j in Q||W("Renderer Preset must be one of these: "+Object.keys(Q).join(", ")),ne(t.value,Q[j]);return}t.value.shadowMap.enabled=u.toValue(h),t.value.shadowMap.type=u.toValue(b),t.value.toneMapping=u.toValue(y)||m.NoToneMapping,t.value.toneMappingExposure=u.toValue(V),t.value.outputColorSpace=u.toValue(P)||m.LinearSRGBColorSpace,g!=null&&g.value&&t.value.setClearColor(_e(u.toValue(g))),t.value.useLegacyLights=u.toValue(C)},We=()=>{const j=u.unrefElement(w.canvas);j&&(t.value=new m.WebGLRenderer({canvas:j,alpha:u.toValue(a),antialias:u.toValue(n),context:u.toValue(_),depth:u.toValue(r),failIfMajorPerformanceCaveat:u.toValue(i),logarithmicDepthBuffer:u.toValue(f),powerPreference:u.toValue(I),precision:u.toValue(s),stencil:u.toValue(p),preserveDrawingBuffer:u.toValue(R),premultipliedAlpha:u.toValue(l)}),k("renderer",t.value),k("clock",new m.Clock),k("aspectRatio",Z),we(),he(),Y(),o.value=!0)},Ee=()=>{t.value&&(t.value.dispose(),t.value=void 0,o.value=!1,N())};return c.watch([Z,x],he),c.watch([h,b,P,C,y,V,g],we),c.watch(()=>[w.canvas,w.container],()=>{u.unrefElement(w.canvas)&&u.unrefElement(w.container)&&We()},{immediate:!0,deep:!0}),{renderer:t,isReady:o,dispose:Ee,aspectRatio:Z}}const oe=e=>typeof e=="function",Ae=e=>typeof e=="string",ie=e=>!!e&&e.constructor===Array;function se(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 Te(e,t,o,a,n){const{logError:r}=T(),f=new e;n&&n(f),o&&o(f);const s=(Array.isArray(t)?t:[t]).map(l=>new Promise((p,h)=>{f.load(l,b=>{b.scene&&Object.assign(b,se(b.scene)),p(b)},a,b=>h(r("[useLoader] - Failed to load resource",b)))}));return ie(t)?await Promise.all(s):await s[0]}async function Ve(e){const t=new m.LoadingManager,o=new m.TextureLoader(t),a=n=>new Promise((r,f)=>{o.load(n,i=>r(i),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(ie(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:f,roughnessMap:i,metalnessMap:s,aoMap:l,alphaMap:p,matcap:h}=e;return{map:n?await a(n):null,displacementMap:r?await a(r):null,normalMap:f?await a(f):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:h?await a(h):null}}}const v=["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 Re(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,o=Math.random()*4294967295|0,a=Math.random()*4294967295|0;return(v[e&255]+v[e>>8&255]+v[e>>16&255]+v[e>>24&255]+"-"+v[t&255]+v[t>>8&255]+"-"+v[t>>16&15|64]+v[t>>24&255]+"-"+v[o&63|128]+v[o>>8&255]+"-"+v[o>>16&255]+v[o>>24&255]+v[a&255]+v[a>>8&255]+v[a>>16&255]+v[a>>24&255]).toLowerCase()}const U=Symbol();function ce(){const e=c.shallowReactive({uuid:Re(),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(U,a),a}const L=()=>c.inject(U,{state:c.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});function ue(){var f;const e=c.shallowRef(new m.Raycaster),t=c.ref(new m.Vector2),o=c.ref(null),{setState:a,state:n}=L();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(f=n==null?void 0:n.renderer)==null||f.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}}const ke=!0,fe="[TresJS ▲ ■ ●] ";function T(){function e(a,n){console.error(`${fe} ${a}`,n||"")}function t(a){console.warn(`${fe} ${a}`)}function o(a,n){}return{logError:e,logWarning:t,logMessage:o}}function je(){const{logWarning:e}=T();function t(a,n,r){let f=null;return a.traverse(i=>{i[n]===r&&(f=i)}),f||e(`Child with ${n} '${r}' not found.`),f}function o(a,n){return t(a,"name",n)}return{seek:t,seekByName:o}}const De=/^on[^a-z]/,Ie=e=>De.test(e);function Ye(e){}let le=null;const de={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp"},{logError:me}=T();let pe=!0;const Be={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&&me("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||me(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`),r=new p(...a.args)}if(r.isCamera&&pe){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),pe=!1}(a==null?void 0:a.attach)===void 0&&(r.isMaterial?r.attach="material":r.isBufferGeometry&&(r.attach="geometry"));const{GEOMETRY_VIA_PROP:f,MATERIAL_VIA_PROP:i}=de;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[f]=!0)),r.events={},r},insert(e,t){var o,a,n,r;if((((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)){le=e;return}t||(t=le),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:f,MATERIAL_VIA_PROP:i}=de;r.userData[i]||(s=r.material)==null||s.dispose(),r.userData[f]||(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,f=F(r),i=n==null?void 0:n[f];if(n.type==="BufferGeometry"){if(r==="args")return;n.setAttribute(F(r),new m.BufferAttribute(...a));return}if(r.includes("-")&&i===void 0){const l=r.split("-");i=l.reduce((p,h)=>p[F(h)],n),r=l.pop(),f=r.toLowerCase(),i!=null&&i.set||(n=l.reduce((p,h)=>p[F(h)],n))}Ie(r)&&(e.events[r]=a);let s=a;if(s===""&&(s=!0),oe(i)){Array.isArray(s)?e[f](...s):e[f](s);return}!(i!=null&&i.set)&&!oe(i)?n[f]=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:Ge}=c.createRenderer(Be),ze=e=>{const t=Ge(o);function o(){return e&&e.default?e.default():[]}return t};q(H);const{logWarning:ge}=T(),Fe=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 H.Scene,{setState:f}=L();f("scene",r),f("canvas",n),f("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=>Ae(y.type)&&y.type.includes("Camera"))||e.camera,i.value||ge("No camera found in the scene, please add one!")),c.onMounted(()=>{b()}),c.onUnmounted(()=>{f("renderer",null)});const{activeCamera:l,pushCamera:p,clearCameras:h}=K();function b(){const{renderer:y}=re(e);e.camera&&p(e.camera);const{onLoop:V}=J(),{raycaster:_,pointer:I}=ue();let R=null,g=null;c.watchEffect(()=>{l.value&&_.value.setFromCamera(I.value,l.value)}),V(()=>{var M,S,w,k,B,O,W,E,x,N;if(l.value&&e.disableRender!==!0&&((M=y.value)==null||M.render(r,l.value)),_.value){const Y=_.value.intersectObjects(r.children);Y.length>0?(g=Y[0],R===null&&((k=(w=(S=g.object)==null?void 0:S.events)==null?void 0:w.onPointerEnter)==null||k.call(w,g)),(W=(O=(B=g.object)==null?void 0:B.events)==null?void 0:O.onPointerMove)==null||W.call(O,g)):R!==null&&((N=(x=(E=g==null?void 0:g.object)==null?void 0:E.events)==null?void 0:x.onPointerLeave)==null||N.call(x,R),g=null),R=g}}),u.useEventListener(n.value,"click",()=>{var M,S,w;g!==null&&((w=(S=(M=g.object)==null?void 0:M.events)==null?void 0:S.onClick)==null||w.call(S,g))})}let C;function P(){C=ze(t),C.provide("useTres",L()),C.provide(U,L()),C.provide("extend",q),C.mount(r)}return P(),o({scene:r}),c.watch(()=>e.camera,y=>{y&&(h(),p(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}})])]))}}),ve=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=ce();return o(a),()=>c.h(Fe,e,t)}}),Ue={install(e){e.component("TresCanvas",ve)}};d.CameraType=ee,d.TRES_CONTEXT_KEY=U,d.TresCanvas=ve,d.catalogue=$,d.default=Ue,d.extend=q,d.isProd=ke,d.trasverseObjects=se,d.useCamera=K,d.useLoader=Te,d.useLogger=T,d.useRaycaster=ue,d.useRenderLoop=J,d.useRenderer=re,d.useSeek=je,d.useTexture=Ve,d.useTres=L,d.useTresProvider=ce,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(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,u){"use strict";function Ce(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 H=Ce(m),ee=e=>typeof e=="function",Me=e=>typeof e=="string",te=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 Se(){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 F=Symbol();function ae(){const e=c.shallowReactive({uuid:Se(),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(F,a),a}const x=()=>c.inject(F,{state:c.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});var ne=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(ne||{});const Pe=45;let A;function K(){const{state:e,setState:t,aspectRatio:o}=x();function a(s="Perspective",l){var p,v,w;if(s==="Perspective"){const{near:P,far:L,fov:C}=l||{near:.1,far:1e3,fov:Pe};A=new m.PerspectiveCamera(C,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,P,L),(v=e.cameras)==null||v.push(A)}else{const{left:P,right:L,top:C,bottom:V,near:y,far:_}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};A=new m.OrthographicCamera(P,L,C,V,y,_),(w=e.cameras)==null||w.push(A)}return e.camera=A,t("camera",e.camera),A}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 f(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:f}}const re=u.createEventHook(),oe=u.createEventHook(),X=u.createEventHook(),I=new m.Clock;let E=0,W=0;const{pause:Le,resume:_e,isActive:Oe}=u.useRafFn(()=>{re.trigger({delta:E,elapsed:W,clock:I}),oe.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:re.on,onLoop:oe.on,onAfterLoop:X.on,pause:Le,resume:_e,isActive:Oe}}function xe(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}}},ie=(e,t)=>{for(const o of Object.keys(t))t[o]instanceof Object&&Object.assign(t[o],ie(e[o],t[o]));return Object.assign(e||{},t),e},Ae=Te("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 Te(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 Ve=!0,se="[TresJS ▲ ■ ●] ";function T(){function e(a,n){console.error(`${se} ${a}`,n||"")}function t(a){console.warn(`${se} ${a}`)}function o(a,n){}return{logError:e,logWarning:t,logMessage:o}}function ce(e){var be,ye;const t=c.shallowRef(),o=c.ref(!1),{alpha:a=!0,antialias:n=!0,depth:r,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:i,precision:s,premultipliedAlpha:l,stencil:p,shadows:v=!1,shadowMapType:w=m.PCFShadowMap,useLegacyLights:P=!1,outputColorSpace:L=m.LinearSRGBColorSpace,toneMapping:C=m.NoToneMapping,toneMappingExposure:V=1,context:y=void 0,powerPreference:_="default",preserveDrawingBuffer:Z=!1,clearColor:S,windowSize:g=!1,preset:O=void 0}=c.toRefs(e),{state:b,setState:M}=x(),{width:B,height:G}=u.toValue(g)==!0||u.toValue(g)===""||u.toValue(g)==="true"?u.useWindowSize():u.useElementSize(b.container),{logError:R,logWarning:U}=T(),{pixelRatio:z}=u.useDevicePixelRatio(),{pause:k,resume:Y}=J(),j=c.computed(()=>B.value/G.value);!u.toValue(g)&&((ye=(be=b.container)==null?void 0:be.value)==null?void 0:ye.offsetHeight)===0&&U(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
+You could set windowSize=true to force the canvas to be the size of the window.`);const he=()=>{t.value&&(t.value.setSize(B.value,G.value),t.value.setPixelRatio(Math.min(z.value,2)))},we=()=>{if(!t.value)return;const D=u.toValue(O);if(D){D in Q||R("Renderer Preset must be one of these: "+Object.keys(Q).join(", ")),ie(t.value,Q[D]);return}t.value.shadowMap.enabled=u.toValue(v),t.value.shadowMap.type=u.toValue(w),t.value.toneMapping=u.toValue(C)||m.NoToneMapping,t.value.toneMappingExposure=u.toValue(V),t.value.outputColorSpace=u.toValue(L)||m.LinearSRGBColorSpace,S!=null&&S.value&&t.value.setClearColor(xe(u.toValue(S))),t.value.useLegacyLights=u.toValue(P)},We=()=>{const D=u.unrefElement(b.canvas);D&&(t.value=new m.WebGLRenderer({canvas:D,alpha:u.toValue(a),antialias:u.toValue(n),context:u.toValue(y),depth:u.toValue(r),failIfMajorPerformanceCaveat:u.toValue(i),logarithmicDepthBuffer:u.toValue(f),powerPreference:u.toValue(_),precision:u.toValue(s),stencil:u.toValue(p),preserveDrawingBuffer:u.toValue(Z),premultipliedAlpha:u.toValue(l)}),M("renderer",t.value),M("clock",new m.Clock),M("aspectRatio",j),we(),he(),Y(),o.value=!0)},Ne=()=>{t.value&&(t.value.dispose(),t.value=void 0,o.value=!1,k())};return c.watch([j,z],he),c.watch([v,w,L,P,C,V,S],we),c.watch(()=>[b.canvas,b.container],()=>{u.unrefElement(b.canvas)&&u.unrefElement(b.container)&&We()},{immediate:!0,deep:!0}),{renderer:t,isReady:o,dispose:Ne,aspectRatio:j}}function ue(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 Re(e,t,o,a,n){const{logError:r}=T(),f=new e;n&&n(f),o&&o(f);const s=(Array.isArray(t)?t:[t]).map(l=>new Promise((p,v)=>{f.load(l,w=>{w.scene&&Object.assign(w,ue(w.scene)),p(w)},a,w=>v(r("[useLoader] - Failed to load resource",w)))}));return te(t)?await Promise.all(s):await s[0]}async function ke(e){const t=new m.LoadingManager,o=new m.TextureLoader(t),a=n=>new Promise((r,f)=>{o.load(n,i=>r(i),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(te(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:f,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:f?await a(f):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 fe(){var f;const e=c.shallowRef(new m.Raycaster),t=c.ref(new m.Vector2),o=c.ref(null),{setState:a,state:n}=x();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(f=n==null?void 0:n.renderer)==null||f.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 je(){const{logWarning:e}=T();function t(a,n,r){let f=null;return a.traverse(i=>{i[n]===r&&(f=i)}),f||e(`Child with ${n} '${r}' not found.`),f}function o(a,n){return t(a,"name",n)}return{seek:t,seekByName:o}}const De=/^on[^a-z]/,Ie=e=>De.test(e);function Ye(e){}let le=null;const de={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp"},{logError:me}=T();let pe=!0;const Be={createElement(e,t,o,a){var s,l;if(a||(a={}),a.args||(a.args=[]),e==="template"||Ae(e))return null;let n=e.replace("Tres",""),r;if(e==="primitive"){(a==null?void 0:a.object)===void 0&&me("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||me(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`),r=new p(...a.args)}if(r.isCamera&&pe){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),pe=!1}(a==null?void 0:a.attach)===void 0&&(r.isMaterial?r.attach="material":r.isBufferGeometry&&(r.attach="geometry"));const{GEOMETRY_VIA_PROP:f,MATERIAL_VIA_PROP:i}=de;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[f]=!0)),r.events={},r},insert(e,t){var o,a,n,r;if((((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)){le=e;return}t||(t=le),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:f,MATERIAL_VIA_PROP:i}=de;r.userData[i]||(s=r.material)==null||s.dispose(),r.userData[f]||(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,f=N(r),i=n==null?void 0:n[f];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(),f=r.toLowerCase(),i!=null&&i.set||(n=l.reduce((p,v)=>p[N(v)],n))}if(Ie(r)){const l=r;e.events[l]=a}let s=a;if(s===""&&(s=!0),ee(i)){Array.isArray(s)?e[f](...s):e[f](s);return}!(i!=null&&i.set)&&!ee(i)?n[f]=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:Ge}=c.createRenderer(Be),ze=e=>{const t=Ge(o);function o(){return e&&e.default?e.default():[]}return t};q(H);const{logWarning:ve}=T(),Fe=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&&ve("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=c.ref(),n=c.ref(),r=new H.Scene,{setState:f}=x();f("scene",r),f("canvas",n),f("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=>Me(y.type)&&y.type.includes("Camera"))||e.camera,i.value||ve("No camera found in the scene, please add one!"));const{onLoop:l,resume:p}=J();c.onMounted(()=>{L()}),c.onUnmounted(()=>{f("renderer",null)});const{activeCamera:v,pushCamera:w,clearCameras:P}=K();function L(){const{renderer:y}=ce(e);e.camera&&w(e.camera);const{raycaster:_,pointer:Z}=fe();let S=null,g=null;c.watchEffect(()=>{v.value&&_.value.setFromCamera(Z.value,v.value)}),l(()=>{var O,b,M,B,G,R,U,z,k,Y;if(v.value&&e.disableRender!==!0&&((O=y.value)==null||O.render(r,v.value)),_.value){const j=_.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=(G=g.object)==null?void 0:G.events)==null?void 0:R.onPointerMove)==null||U.call(R,g)):S!==null&&((Y=(k=(z=g==null?void 0:g.object)==null?void 0:z.events)==null?void 0:k.onPointerLeave)==null||Y.call(k,S),g=null),S=g}}),u.useEventListener(n.value,"click",()=>{var O,b,M;g!==null&&((M=(b=(O=g.object)==null?void 0:O.events)==null?void 0:b.onClick)==null||M.call(b,g))})}let C;function V(){C=ze(t);const y=x();C.provide("useTres",y),C.provide(F,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}})])]))}}),ge=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=ae();return o(a),()=>c.h(Fe,e,t)}}),Ee={install(e){e.component("TresCanvas",ge)}};d.CameraType=ne,d.TRES_CONTEXT_KEY=F,d.TresCanvas=ge,d.catalogue=$,d.default=Ee,d.extend=q,d.isProd=Ve,d.trasverseObjects=ue,d.useCamera=K,d.useLoader=Re,d.useLogger=T,d.useRaycaster=fe,d.useRenderLoop=J,d.useRenderer=ce,d.useSeek=je,d.useTexture=ke,d.useTres=x,d.useTresProvider=ae,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/types/index.d.ts

@@ -1,66 +1,147 @@
-import './tres-components';
-import { Color, Intersection, Object3D, Vector2, Vector3, Event } from 'three';
-import { VNode, VNodeTypes } from 'vue';
-export type TresInstance = Object3D<Event> & {
-    [key: string]: any;
+import type * as THREE from 'three';
+import { DefineComponent, Ref, VNode } from 'vue';
+export type AttachFnType<O = any> = (parent: any, self: O) => () => void;
+export type AttachType<O = any> = string | AttachFnType<O>;
+export type ConstructorRepresentation = new (...args: any[]) => any;
+export type NonFunctionKeys<P> = {
+    [K in keyof P]-?: P[K] extends Function ? never : K;
+}[keyof P];
+export type Overwrite<P, O> = Omit<P, NonFunctionKeys<O>> & O;
+export type Properties<T> = Pick<T, NonFunctionKeys<T>>;
+export type Mutable<P> = {
+    [K in keyof P]: P[K] | Readonly<P[K]>;
 };
-export type TresObject = {
-    /**
-     * A Vector3 | Array | scalar representing the object's local position. Default is (0, 0, 0).
-     *
-     * @type {TresVectorProp}
-     */
-    position?: TresVectorProp;
-    /**
-     * A Vector3 | Array | scalar representing the object's local rotation. Default is (0, 0, 0).
-     *
-     * @type {TresVectorProp}
-     */
-    rotation?: TresVectorProp;
-    /**
-     * A Vector3 | Array | scalar representing the object's local scale. Default is (0, 0, 0).
-     *
-     * @type {TresVectorProp}
-     */
-    scale?: TresVectorProp;
-    /**
-     * Color of the material, by default set to white (0xffffff).
-     *
-     * @type {TresColor}
-     */
-    color?: TresColor;
-    opacity?: number;
+export type Args<T> = T extends ConstructorRepresentation ? ConstructorParameters<T> : any[];
+export interface TresCatalogue {
+    [name: string]: ConstructorRepresentation;
+}
+export type TresCamera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
+export interface InstanceProps<T = any, P = any> {
+    args?: Args<P>;
+    object?: T;
     visible?: boolean;
-    attach: string;
-    parent: TresObject | null;
+    dispose?: null;
+    attach?: AttachType<T>;
+}
+interface TresBaseObject {
+    attach?: string;
+    events: EventHandlers;
+    removeFromParent?: () => void;
     dispose?: () => void;
-    __previousAttach?: string;
-    [key: string]: any;
-};
-export type TresCatalogue = Record<string, any>;
-export type TresVNodeType = VNodeTypes & {
-    name?: string | Array<string>;
-    __name?: string;
-    setup?: (props: Readonly<any>) => void;
-};
-export type TresVNode = VNode & {
-    children?: Array<VNode | {
-        default: any;
-    }>;
-    type: TresVNodeType;
+    [prop: string]: any;
+}
+export interface TresObject3D extends THREE.Object3D {
+    geometry?: THREE.BufferGeometry & TresBaseObject;
+    material?: THREE.Material & TresBaseObject;
+    userData: {
+        MATERIAL_VIA_PROP: boolean;
+        GEOMETRY_VIA_PROP: boolean;
+    } & {
+        [key: string]: any;
+    };
+}
+export type TresObject = TresBaseObject & (TresObject3D | THREE.BufferGeometry | THREE.Material | THREE.Fog);
+export interface Intersection extends THREE.Intersection {
+    /** The event source (the object which registered the handler) */
+    eventObject: TresObject;
+}
+export interface IntersectionEvent<TSourceEvent> extends Intersection {
+    /** The event source (the object which registered the handler) */
+    eventObject: TresObject;
+    /** An array of intersections */
+    intersections: Intersection[];
+    /** vec3.set(pointer.x, pointer.y, 0).unproject(camera) */
+    unprojectedPoint: THREE.Vector3;
+    /** Normalized event coordinates */
+    pointer: THREE.Vector2;
+    /** Delta between first click and this event */
+    delta: number;
+    /** The ray that pierced it */
+    ray: THREE.Ray;
+    /** The camera that was used by the raycaster */
+    camera: TresCamera;
+    /** stopPropagation will stop underlying handlers from firing */
+    stopPropagation: () => void;
+    /** The original host event */
+    nativeEvent: TSourceEvent;
+    /** If the event was stopped by calling stopPropagation */
+    stopped: boolean;
+}
+export type ThreeEvent<TEvent> = IntersectionEvent<TEvent> & Properties<TEvent>;
+export type DomEvent = PointerEvent | MouseEvent | WheelEvent;
+export interface Events {
+    onClick: EventListener;
+    onContextMenu: EventListener;
+    onDoubleClick: EventListener;
+    onWheel: EventListener;
+    onPointerDown: EventListener;
+    onPointerUp: EventListener;
+    onPointerLeave: EventListener;
+    onPointerMove: EventListener;
+    onPointerCancel: EventListener;
+    onLostPointerCapture: EventListener;
+}
+export interface EventHandlers {
+    onClick?: (event: ThreeEvent<MouseEvent>) => void;
+    onContextMenu?: (event: ThreeEvent<MouseEvent>) => void;
+    onDoubleClick?: (event: ThreeEvent<MouseEvent>) => void;
+    onPointerUp?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerDown?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerOver?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerOut?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerEnter?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerLeave?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerMove?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerMissed?: (event: MouseEvent) => void;
+    onPointerCancel?: (event: ThreeEvent<PointerEvent>) => void;
+    onWheel?: (event: ThreeEvent<WheelEvent>) => void;
+}
+interface MathRepresentation {
+    set(...args: number[]): any;
+}
+interface VectorRepresentation extends MathRepresentation {
+    setScalar(s: number): any;
+}
+export interface VectorCoordinates {
+    x: number;
+    y: number;
+    z: number;
+}
+export type MathType<T extends MathRepresentation | THREE.Euler> = T extends THREE.Color ? ConstructorParameters<typeof THREE.Color> | THREE.ColorRepresentation : T extends VectorRepresentation | THREE.Layers | THREE.Euler ? T | Parameters<T['set']> | number | VectorCoordinates : T | Parameters<T['set']>;
+export type TresVector2 = MathType<THREE.Vector2>;
+export type TresVector3 = MathType<THREE.Vector3>;
+export type TresVector4 = MathType<THREE.Vector4>;
+export type TresColor = MathType<THREE.Color>;
+export type TresLayers = MathType<THREE.Layers>;
+export type TresQuaternion = MathType<THREE.Quaternion>;
+export type TresEuler = MathType<THREE.Euler>;
+type WithMathProps<P> = {
+    [K in keyof P]: P[K] extends MathRepresentation | THREE.Euler ? MathType<P[K]> : P[K];
 };
-export type TresAttributes = Record<string, any> & {
-    args?: number[];
+interface RaycastableRepresentation {
+    raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void;
+}
+type EventProps<P> = P extends RaycastableRepresentation ? Partial<EventHandlers> : unknown;
+export interface VueProps<P> {
+    children?: VNode[];
+    ref?: Ref<P>;
+    key?: string;
+}
+type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<Overwrite<WithMathProps<P>, VueProps<P> & EventProps<P>>>;
+export type ThreeElement<T extends ConstructorRepresentation> = Mutable<Overwrite<ElementProps<T>, Omit<InstanceProps<InstanceType<T>, T>, 'object'>>>;
+type ThreeExports = typeof THREE;
+type ThreeInstancesImpl = {
+    [K in keyof ThreeExports as Uncapitalize<K>]: ThreeExports[K] extends ConstructorRepresentation ? ThreeElement<ThreeExports[K]> : never;
 };
-export type TresVectorProp = Vector2 | Vector3 | number[] | number;
-export type TresColor = string | number | Color | number[];
-export interface TresEvent extends Intersection<Object3D<Event>> {
-    object: Object3D & {
-        events?: Record<string, any>;
+export interface ThreeInstances extends ThreeInstancesImpl {
+    primitive: Omit<ThreeElement<any>, 'args'> & {
+        object: object;
     };
-    distance: number;
-    faceIndex?: number | undefined;
-    point: Vector3;
-    uv?: Vector2;
-    events?: Record<string, any>;
 }
+type TresComponents = {
+    [K in keyof ThreeInstances as `Tres${Capitalize<string & K>}`]: DefineComponent<ThreeInstances[K]>;
+};
+declare module 'vue' {
+    type GlobalComponents = TresComponents;
+}
+export {};

package/package.json

@@ -1,32 +1,38 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "2.0.0-rc.4",
+  "version": "2.1.0",
   "type": "module",
   "packageManager": "pnpm@8.3.1",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
-  "files": [
-    "dist"
-  ],
   "license": "MIT",
-  "main": "./dist/tres.umd.cjs",
-  "module": "./dist/tres.js",
-  "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./dist/tres.js",
-      "require": "./dist/tres.umd.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/tres.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts"
+    },
+    "./composables": {
+      "types": "./dist/composables/index.d.ts"
     },
     "./types": {
-      "require": "./dist/index.d.ts",
-      "import": "./dist/index.d.ts"
+      "types": "./dist/types/index.d.ts"
     },
-    "./components": {
-      "types": "./dist/types/tres-components.d.ts"
+    "./utils": {
+      "types": "./dist/utils/index.d.ts"
     },
-    "./styles": "./dist/style.css",
-    "./*": "./dist/tres.js"
+    "./*": "./*"
   },
+  "main": "./dist/tres.js",
+  "module": "./dist/tres.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "*.d.ts"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -38,9 +44,7 @@
     "threejs-vue"
   ],
   "scripts": {
-    "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview",
     "playground": "cd playground && npm run dev",
     "test": "vitest",
     "test:ci": "vitest run",
@@ -65,20 +69,19 @@
     "@huntersofbook/plausible-vue": "^1.0.0",
     "@release-it/conventional-changelog": "^5.1.1",
     "@stackblitz/sdk": "^1.9.0",
-    "@tresjs/cientos": "2.0.0-rc.1",
-    "@tresjs/core": "2.0.0-rc.2",
+    "@tresjs/cientos": "2.0.0",
     "@types/three": "^0.152.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
-    "@vitejs/plugin-vue": "^4.2.1",
-    "@vitest/coverage-c8": "^0.30.1",
-    "@vitest/ui": "^0.30.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitest/coverage-c8": "^0.31.1",
+    "@vitest/ui": "^0.31.1",
     "@vue/test-utils": "^2.3.2",
-    "eslint": "^8.39.0",
+    "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.11.0",
+    "eslint-plugin-vue": "^9.13.0",
     "gsap": "^3.11.5",
-    "happy-dom": "^9.10.7",
+    "happy-dom": "^9.18.3",
     "jsdom": "^22.0.0",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.0",
@@ -88,17 +91,17 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-visualizer": "^5.9.0",
     "three": "^0.152.2",
-    "unocss": "^0.51.8",
+    "unocss": "^0.51.13",
     "unplugin": "^1.3.1",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.3.4",
+    "vite": "^4.3.7",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "2.3.0",
-    "vite-plugin-inspect": "^0.7.24",
+    "vite-plugin-inspect": "^0.7.26",
     "vite-plugin-require-transform": "^1.0.12",
     "vite-svg-loader": "^4.0.0",
     "vitepress": "1.0.0-alpha.75",
-    "vitest": "^0.30.1",
-    "vue-demi": "^0.14.0"
+    "vitest": "^0.31.1",
+    "vue-demi": "^0.14.4"
   }
 }

package/types.d.ts

@@ -0,0 +1 @@
+export * from './dist/types/index.js'

package/utils.d.ts

@@ -0,0 +1 @@
+export * from './dist/utils/index.js'