@tresjs/core 3.1.0 → 3.2.0

package/dist/tres.umd.cjs

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

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-import { DefineComponent, Ref, VNode } from 'vue';
+import type { DefineComponent, Ref, VNode } from 'vue';
 import type * as THREE from 'three';
 import type { EventProps as PointerEventHandlerEventProps } from '../composables/usePointerEventHandler';
 export type AttachFnType<O = any> = (parent: any, self: O) => () => void;
@@ -46,6 +46,8 @@ export interface TresScene extends THREE.Scene {
         tres__deregisterCamera?: (camera: THREE.Camera) => void;
         tres__registerAtPointerEventHandler?: (object: THREE.Object3D & PointerEventHandlerEventProps) => void;
         tres__deregisterAtPointerEventHandler?: (object: THREE.Object3D) => void;
+        tres__registerBlockingObjectAtPointerEventHandler?: (object: THREE.Object3D) => void;
+        tres__deregisterBlockingObjectAtPointerEventHandler?: (object: THREE.Object3D) => void;
         [key: string]: any;
     };
 }

package/dist/utils/normalize.d.ts

@@ -1,4 +1,5 @@
-import { Vector3, Color, ColorRepresentation } from 'three';
+import type { ColorRepresentation } from 'three';
+import { Vector3, Color } from 'three';
 export type SizeFlexibleParams = number[] | {
     width: number;
     height: number;

package/package.json

@@ -1,11 +1,18 @@
 {
   "name": "@tresjs/core",
-  "description": "Declarative ThreeJS using Vue Components",
-  "version": "3.1.0",
   "type": "module",
+  "version": "3.2.0",
   "packageManager": "pnpm@8.3.1",
+  "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
+  "keywords": [
+    "vue",
+    "3d",
+    "threejs",
+    "three",
+    "threejs-vue"
+  ],
   "sideEffects": false,
   "exports": {
     ".": {
@@ -36,13 +43,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "keywords": [
-    "vue",
-    "3d",
-    "threejs",
-    "three",
-    "threejs-vue"
-  ],
   "scripts": {
     "build": "vite build",
     "playground": "cd playground && npm run dev",
@@ -72,6 +72,7 @@
     "@release-it/conventional-changelog": "^7.0.0",
     "@stackblitz/sdk": "^1.9.0",
     "@tresjs/cientos": "3.1.0",
+    "@tresjs/eslint-config-vue": "^0.1.1",
     "@types/three": "^0.155.1",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",