@tresjs/core 4.0.0-next.0 → 4.0.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +3 -17
- package/dist/{components → src/components}/TresCanvas.vue.d.ts +10 -2
- package/dist/{composables → src/composables}/useCamera/index.d.ts +366 -399
- package/dist/src/composables/usePointerEventHandler/index.d.ts +17 -0
- package/dist/{composables → src/composables}/useRenderer/const.d.ts +4 -0
- package/dist/{composables → src/composables}/useRenderer/index.d.ts +8 -3
- package/dist/src/composables/useSizes/index.d.ts +11 -0
- package/dist/src/composables/useTresContextProvider/index.d.ts +75 -0
- package/dist/src/core/nodeOps.d.ts +4 -0
- package/dist/src/directives/index.d.ts +5 -0
- package/dist/src/directives/vAlwaysLookAt.d.ts +6 -0
- package/dist/src/directives/vDistanceTo.d.ts +6 -0
- package/dist/src/directives/vLightHelper.d.ts +6 -0
- package/dist/src/directives/vLog.d.ts +6 -0
- package/dist/src/index.d.ts +18 -0
- package/dist/{types → src/types}/index.d.ts +20 -16
- package/dist/{utils → src/utils}/index.d.ts +3 -2
- package/dist/tres.js +866 -587
- package/dist/tres.umd.cjs +3 -3
- package/package.json +30 -29
- package/dist/composables/useLoader/index.d.ts +0 -44
- package/dist/composables/usePointerEventHandler/index.d.ts +0 -19
- package/dist/composables/useRaycaster/index.d.ts +0 -18
- package/dist/composables/useSeek/index.d.ts +0 -19
- package/dist/composables/useTresContextProvider/index.d.ts +0 -44
- package/dist/core/nodeOps.d.ts +0 -3
- package/dist/core/renderer.d.ts +0 -5
- /package/dist/{components → src/components}/index.d.ts +0 -0
- /package/dist/{composables → src/composables}/index.d.ts +0 -0
- /package/dist/{composables → src/composables}/useLogger.d.ts +0 -0
- /package/dist/{composables → src/composables}/useRenderLoop/index.d.ts +0 -0
- /package/dist/{composables → src/composables}/useTexture/index.d.ts +0 -0
- /package/dist/{core → src/core}/catalogue.d.ts +0 -0
- /package/dist/{core → src/core}/revision.d.ts +0 -0
- /package/dist/{devtools → src/devtools}/highlight.d.ts +0 -0
- /package/dist/{devtools → src/devtools}/index.d.ts +0 -0
- /package/dist/{devtools → src/devtools}/plugin.d.ts +0 -0
- /package/dist/{devtools → src/devtools}/utils.d.ts +0 -0
- /package/dist/{utils → src/utils}/normalize.d.ts +0 -0
- /package/dist/{utils → src/utils}/perf.d.ts +0 -0
- /package/dist/{utils → src/utils}/template-compiler-options.d.ts +0 -0
- /package/dist/{utils → src/utils}/test-utils.d.ts +0 -0
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v4.0.0-next.
|
|
4
|
-
* (c)
|
|
3
|
+
* version: v4.0.0-next.2
|
|
4
|
+
* (c) 2024
|
|
5
5
|
* description: Declarative ThreeJS using Vue Components
|
|
6
6
|
* author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
|
|
7
7
|
*/
|
|
8
|
-
(function(g,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):(g=typeof globalThis<"u"?globalThis:g||self,u(g.tres={},g.Vue,g.Three,g.VueUseCore))})(this,function(g,u,v,y){"use strict";var st=Object.defineProperty;var it=(g,u,v)=>u in g?st(g,u,{enumerable:!0,configurable:!0,writable:!0,value:v}):g[u]=v;var H=(g,u,v)=>(it(g,typeof u!="symbol"?u+"":u,v),v);function ve(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 q=ve(v),Q=({sizes:e,scene:n})=>{const t=u.ref([]),r=u.computed(()=>t.value[0]),a=(i,l=!1)=>{t.value.some(({uuid:f})=>f===i.uuid)||(l?o(i):t.value.push(i))},s=i=>{t.value=t.value.filter(({uuid:l})=>l!==i.uuid)},o=i=>{const l=i instanceof v.Camera?i:t.value.find(p=>p.uuid===i);if(!l)return;const f=t.value.filter(({uuid:p})=>p!==l.uuid);t.value=[l,...f]};return u.watchEffect(()=>{e.aspectRatio.value&&t.value.forEach(i=>{i instanceof v.PerspectiveCamera&&(i.aspect=e.aspectRatio.value),(i instanceof v.PerspectiveCamera||i instanceof v.OrthographicCamera)&&i.updateProjectionMatrix()})}),n.userData.tres__registerCamera=a,n.userData.tres__deregisterCamera=s,u.onUnmounted(()=>{t.value=[]}),{camera:r,cameras:t,registerCamera:a,deregisterCamera:s,setCameraActive:o}},Y=y.createEventHook(),J=y.createEventHook(),F=y.createEventHook(),E=new v.Clock;let B=0,j=0;const{pause:he,resume:ye,isActive:we}=y.useRafFn(()=>{Y.trigger({delta:B,elapsed:j,clock:E}),J.trigger({delta:B,elapsed:j,clock:E}),F.trigger({delta:B,elapsed:j,clock:E})},{immediate:!1});F.on(()=>{B=E.getDelta(),j=E.getElapsedTime()});const G=()=>({onBeforeLoop:Y.on,onLoop:J.on,onAfterLoop:F.on,pause:he,resume:ye,isActive:we}),_e=!0,K="[TresJS ▲ ■ ●] ";function D(){function e(r,a){console.error(`${K} ${r}`,a||"")}function n(r){console.warn(`${K} ${r}`)}function t(r,a){}return{logError:e,logWarning:n,logMessage:t}}function be(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)}class Ce extends q.Mesh{constructor(...t){super(...t);H(this,"type","HightlightMesh");H(this,"createTime");this.createTime=Date.now()}onBeforeRender(){const r=(Date.now()-this.createTime)/1e3,o=1+.07*Math.sin(2.5*r);this.scale.set(o,o,o)}}const Z=(e,n)=>{for(const t of Object.keys(n))n[t]instanceof Object&&Object.assign(n[t],Z(e[t],n[t]));return Object.assign(e||{},n),e},Me=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 ee(e){return e&&e.nodeType===1}function V(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 Se=(e,n)=>{const t=new Set,r=[];for(const a of e){const s=n(a);t.has(s)||(t.add(s),r.push(a))}return r},te=(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)},ke=(e,n,t)=>{const r=Array.isArray(n)?n:n.match(/([^[.\]])+/g);r&&r.reduce((a,s,o)=>(a[s]===void 0&&(a[s]={}),o===r.length-1&&(a[s]=t),a[s]),e)};function re(e,n){if(ee(e)&&ee(n)){const a=e.attributes,s=n.attributes;return a.length!==s.length?!1:Array.from(a).every(({name:o,value:i})=>n.getAttribute(o)===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)||!re(e[a],n[a]))return!1;return!0}function Oe(e,n){if(!Array.isArray(e)||!Array.isArray(n)||e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!re(e[t],n[t]))return!1;return!0}const Ae=Array.isArray;function Le(e,n,t,r){const a=l=>{if(l.uuid===n)return l;for(const f of l.children){const p=a(f);if(p)return p}},s=a(e);if(!s){console.warn("Object with UUID not found in the scene.");return}let o=s;for(let l=0;l<t.length-1;l++)if(o[t[l]]!==void 0)o=o[t[l]];else{console.warn(`Property path is not valid: ${t.join(".")}`);return}const i=t[t.length-1];o[i]!==void 0?o[i]=r:console.warn(`Property path is not valid: ${t.join(".")}`)}function De(e){const n=new v.MeshBasicMaterial({color:11003607,transparent:!0,opacity:.2,depthTest:!1,side:v.DoubleSide});return new Ce(e.geometry.clone(),n)}const Te=Number.parseInt(v.REVISION.replace("dev","")),I={realistic:{shadows:!0,physicallyCorrectLights:!0,outputColorSpace:v.SRGBColorSpace,toneMapping:v.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:v.PCFSoftShadowMap}}};function ne({scene:e,canvas:n,options:t,disableRender:r,contextParts:{sizes:a,camera:s}}){const o=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 v.WebGLRenderer(o.value));u.watch(o,()=>{i.value.dispose(),i.value=new v.WebGLRenderer(o.value)}),u.watchEffect(()=>{i.value.setSize(a.width.value,a.height.value)});const{pixelRatio:l}=y.useDevicePixelRatio();u.watchEffect(()=>{i.value.setPixelRatio(l.value)});const{logError:f}=D(),d=(()=>{const m=new v.WebGLRenderer,C={shadowMap:{enabled:m.shadowMap.enabled,type:m.shadowMap.type},toneMapping:m.toneMapping,toneMappingExposure:m.toneMappingExposure,outputColorSpace:m.outputColorSpace};return m.dispose(),C})();u.watchEffect(()=>{const m=y.toValue(t.preset);m&&(m in I||f(`Renderer Preset must be one of these: ${Object.keys(I).join(", ")}`),Z(i.value,I[m]));const C=(O,A)=>{const P=y.toValue(O),L=()=>{if(m)return te(I[m],A)};if(P!==void 0)return P;const b=L();return b!==void 0?b:te(d,A)},h=(O,A)=>ke(i.value,A,C(O,A));h(t.shadows,"shadowMap.enabled"),h(t.toneMapping,"toneMapping"),h(t.shadowMapType,"shadowMap.type"),Te<150&&h(!t.useLegacyLights,"physicallyCorrectLights"),h(t.outputColorSpace,"outputColorSpace"),h(t.toneMappingExposure,"toneMappingExposure");const k=C(t.clearColor,"clearColor");k&&i.value.setClearColor(k?X(k):new v.Color(0))});const{pause:c,resume:_,onLoop:M}=G();return M(()=>{s.value&&!y.toValue(r)&&i.value.render(e,s.value)}),_(),u.onUnmounted(()=>{c(),i.value.dispose(),i.value.forceContextLoss()}),{renderer:i}}const oe=e=>typeof e=="function",Ee=e=>!!e&&e.constructor===Array;function ae(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 xe(e,n,t,r,a){const{logError:s}=D(),o=new e;a&&a(o),t&&t(o);const l=(Array.isArray(n)?n:[n]).map(f=>new Promise((p,d)=>{o.load(f,c=>{c.scene&&Object.assign(c,ae(c.scene)),p(c)},r,c=>d(s("[useLoader] - Failed to load resource",c)))}));return Ee(n)?await Promise.all(l):await l[0]}async function Be(e){const n=new v.LoadingManager,t=new v.TextureLoader(n),r=a=>new Promise((s,o)=>{t.load(a,i=>s(i),()=>null,()=>{o(new Error("[useTextures] - Failed to load texture"))})});if(Ae(e)){const a=await Promise.all(e.map(s=>r(s)));return e.length>1?a:a[0]}else{const{map:a,displacementMap:s,normalMap:o,roughnessMap:i,metalnessMap:l,aoMap:f,alphaMap:p,matcap:d}=e;return{map:a?await r(a):null,displacementMap:s?await r(s):null,normalMap:o?await r(o):null,roughnessMap:i?await r(i):null,metalnessMap:l?await r(l):null,aoMap:f?await r(f):null,alphaMap:p?await r(p):null,matcap:d?await r(d):null}}}const se=(e,{renderer:n,camera:t,raycaster:r})=>{const a=u.computed(()=>n.value.domElement),{x:s,y:o}=y.usePointer({target:a}),{width:i,height:l,top:f,left:p}=y.useElementBounding(a),d=({x:b,y:S})=>{if(a.value)return{x:(b-p.value)/i.value*2-1,y:-((S-f.value)/l.value)*2+1}},c=({x:b,y:S})=>{if(t.value)return r.value.setFromCamera(new v.Vector2(b,S),t.value),r.value.intersectObjects(e.value,!1)},_=b=>{const S=d({x:(b==null?void 0:b.clientX)??s.value,y:(b==null?void 0:b.clientY)??o.value});return S?c(S)||[]:[]},M=u.computed(()=>_()),m=y.createEventHook(),C=y.createEventHook(),h=(b,S)=>{b.trigger({event:S,intersects:_(S)})},k=b=>{h(C,b)};let O;const A=b=>{var S;O=(S=_(b)[0])==null?void 0:S.object},P=b=>{var S;b instanceof PointerEvent&&O===((S=_(b)[0])==null?void 0:S.object)&&h(m,b)},L=b=>C.trigger({event:b,intersects:[]});return a.value.addEventListener("pointerup",P),a.value.addEventListener("pointerdown",A),a.value.addEventListener("pointermove",k),a.value.addEventListener("pointerleave",L),u.onUnmounted(()=>{a!=null&&a.value&&(a.value.removeEventListener("pointerup",P),a.value.removeEventListener("pointerdown",A),a.value.removeEventListener("pointermove",k),a.value.removeEventListener("pointerleave",L))}),{intersects:M,onClick:b=>m.on(b).off,onPointerMove:b=>C.on(b).off}};function je(){const{logWarning:e}=D();function n(s,o,i){let l=null;return s.traverse(f=>{f[o]===i&&(l=f)}),l||e(`Child with ${o} '${i}' not found.`),l}function t(s,o,i){const l=[];return s.traverse(f=>{f[o].includes(i)&&l.push(f)}),l.length||e(`Children with ${o} '${i}' not found.`),l}function r(s,o){return n(s,"name",o)}function a(s,o){return t(s,"name",o)}return{seek:n,seekByName:r,seekAll:t,seekAllByName:a}}const ie=({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=c=>{r.value.add(c)},s=c=>{r.value.delete(c)},o=c=>{Object.values(t).forEach(_=>_.delete(c)),s(c)},i=c=>{const{onClick:_,onPointerMove:M,onPointerEnter:m,onPointerLeave:C}=c;_&&t.click.set(c,_),M&&t.pointerMove.set(c,M),m&&t.pointerEnter.set(c,m),C&&t.pointerLeave.set(c,C)};e.userData.tres__registerAtPointerEventHandler=i,e.userData.tres__deregisterAtPointerEventHandler=o,e.userData.tres__registerBlockingObjectAtPointerEventHandler=a,e.userData.tres__deregisterBlockingObjectAtPointerEventHandler=s;const l=u.computed(()=>Se([...Array.from(r.value),...Object.values(t).map(c=>Array.from(c.keys())).flat()],({uuid:c})=>c)),{onClick:f,onPointerMove:p}=se(l,n);f(({intersects:c,event:_})=>{var M;c.length&&((M=t.click.get(c[0].object))==null||M(c[0],_))});let d;return p(({intersects:c,event:_})=>{var k,O,A,P;const M=(k=c==null?void 0:c[0])==null?void 0:k.object,{pointerLeave:m,pointerEnter:C,pointerMove:h}=t;d&&d!==M&&((O=m.get(d))==null||O(d,_)),M&&(d!==M&&((A=C.get(M))==null||A(c[0],_)),(P=h.get(M))==null||P(c[0],_)),d=M||null}),{registerObject:i,deregisterObject:o}};function le(e){let n=0;return e.traverse(t=>{if(t.isMesh&&t.geometry){const r=t.geometry,a=r.attributes.position.count*3*Float32Array.BYTES_PER_ELEMENT,s=r.index?r.index.count*Uint32Array.BYTES_PER_ELEMENT:0,o=r.attributes.normal?r.attributes.normal.count*3*Float32Array.BYTES_PER_ELEMENT:0,i=r.attributes.uv?r.attributes.uv.count*2*Float32Array.BYTES_PER_ELEMENT:0,l=a+s+o+i;n+=l}}),n}function Ve(e){return(e/1024).toFixed(2)}const N=u.ref({}),U=e=>Object.assign(N.value,e);function ue({scene:e,canvas:n,windowSize:t,disableRender:r,rendererOptions:a}){const s=u.computed(()=>y.toValue(t)?y.useWindowSize():y.useElementSize(y.toValue(n).parentElement)),o=u.computed(()=>s.value.width.value),i=u.computed(()=>s.value.height.value),l=u.computed(()=>o.value/i.value),f={height:i,width:o,aspectRatio:l},p=u.shallowRef(e),{camera:d,cameras:c,registerCamera:_,deregisterCamera:M,setCameraActive:m}=Q({sizes:f,scene:e}),{renderer:C}=ne({scene:e,canvas:n,options:a,contextParts:{sizes:f,camera:d},disableRender:r}),h={sizes:f,scene:p,camera:d,cameras:u.readonly(c),renderer:C,raycaster:u.shallowRef(new v.Raycaster),controls:u.ref(null),perf:{maxFrames:160,fps:{value:0,accumulator:[]},memory:{currentMem:0,allocatedMem:0,accumulator:[]}},extend:U,registerCamera:_,setCameraActive:m,deregisterCamera:M};u.provide("useTres",h);const k=100,O=y.useFps({every:k}),{isSupported:A,memory:P}=y.useMemory({interval:k}),L=160;let b=performance.now();const S=({timestamp:$})=>{h.scene.value&&(h.perf.memory.allocatedMem=le(h.scene.value)),$-b>=k&&(b=$,h.perf.fps.accumulator.push(O.value),h.perf.fps.accumulator.length>L&&h.perf.fps.accumulator.shift(),h.perf.fps.value=O.value,A.value&&P.value&&(h.perf.memory.accumulator.push(P.value.usedJSHeapSize/1024/1024),h.perf.memory.accumulator.length>L&&h.perf.memory.accumulator.shift(),h.perf.memory.currentMem=h.perf.memory.accumulator.reduce((ot,at)=>ot+at,0)/h.perf.memory.accumulator.length))};let W=0;const rt=1,{pause:nt,resume:ft}=y.useRafFn(({delta:$})=>{window.__TRES__DEVTOOLS__&&(S({timestamp:performance.now()}),W+=$,W>=rt&&(window.__TRES__DEVTOOLS__.cb(h),W=0))},{immediate:!0});return u.onUnmounted(()=>{nt()}),h}function ce(){const e=u.inject("useTres");if(!e)throw new Error("useTresContext must be used together with useTresContextProvider");return e}const Ie=ce;function ut(e){}let w=null;const{logError:fe}=D(),R=["onClick","onPointerMove","onPointerEnter","onPointerLeave"],Ne={createElement(e,n,t,r){var o,i;if(r||(r={}),r.args||(r.args=[]),e==="template"||Me(e))return null;let a=e.replace("Tres",""),s;if(e==="primitive"){(r==null?void 0:r.object)===void 0&&fe("Tres primitives need a prop 'object'");const l=r.object;a=l.type,s=Object.assign(l,{type:a,attach:r.attach,primitive:!0})}else{const l=N.value[a];l||fe(`${a} is not defined on the THREE namespace. Use extend to add it to the catalog.`),s=new l(...r.args)}return s.isCamera&&(r!=null&&r.position||s.position.set(3,3,3),r!=null&&r.lookAt||s.lookAt(0,0,0)),(r==null?void 0:r.attach)===void 0&&(s.isMaterial?s.attach="material":s.isBufferGeometry&&(s.attach="geometry")),s.isObject3D&&((o=r==null?void 0:r.material)!=null&&o.isMaterial&&(s.userData.tres__materialViaProp=!0),(i=r==null?void 0:r.geometry)!=null&&i.isBufferGeometry&&(s.userData.tres__geometryViaProp=!0)),s.userData={...s.userData,tres__name:a},s},insert(e,n){var r,a,s,o;n&&n.isScene&&(w=n);const t=n||w;if(e!=null&&e.isObject3D){if(e!=null&&e.isCamera){if(!(w!=null&&w.userData.tres__registerCamera))throw"could not find tres__registerCamera on scene's userData";(a=w==null?void 0:(r=w.userData).tres__registerCamera)==null||a.call(r,e)}if(e&&R.some(i=>e[i])){if(!(w!=null&&w.userData.tres__registerAtPointerEventHandler))throw"could not find tres__registerAtPointerEventHandler on scene's userData";(o=w==null?void 0:(s=w.userData).tres__registerAtPointerEventHandler)==null||o.call(s,e)}}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 n,t;if(e){if(e.isObject3D){const r=e,a=f=>{var d,c;const p=f;f.userData.tres__materialViaProp||((d=p.material)==null||d.dispose(),p.material=void 0),f.userData.tres__geometryViaProp||((c=p.geometry)==null||c.dispose(),p.geometry=void 0)},s=w==null?void 0:w.userData.tres__deregisterAtPointerEventHandler,o=w==null?void 0:w.userData.tres__deregisterBlockingObjectAtPointerEventHandler,i=f=>{var p,d;if(!o)throw"could not find tres__deregisterBlockingObjectAtPointerEventHandler on scene's userData";if((d=w==null?void 0:(p=w.userData).tres__deregisterBlockingObjectAtPointerEventHandler)==null||d.call(p,f),!s)throw"could not find tres__deregisterAtPointerEventHandler on scene's userData";f&&R.some(c=>f[c])&&(s==null||s(f))},l=f=>{const p=w==null?void 0:w.userData.tres__deregisterCamera;if(!p)throw"could not find tres__deregisterCamera on scene's userData";f.isCamera&&(p==null||p(f))};(n=e.removeFromParent)==null||n.call(e),r.traverse(f=>{a(f),l(f),i==null||i(f)}),a(r),l(r),i==null||i(r)}(t=e.dispose)==null||t.call(e)}},patchProp(e,n,t,r){var a,s,o,i;if(e){let l=e,f=n;if(e.isObject3D&&f==="blocks-pointer-events"){r||r===""?(s=w==null?void 0:(a=w.userData).tres__registerBlockingObjectAtPointerEventHandler)==null||s.call(a,e):(i=w==null?void 0:(o=w.userData).tres__deregisterBlockingObjectAtPointerEventHandler)==null||i.call(o,e);return}let p=V(f),d=l==null?void 0:l[p];if(f==="args"){const _=e,M=t??[],m=r??[],C=e.userData.tres__name||e.type;C&&M.length&&!Oe(M,m)&&(l=Object.assign(_,new N.value[C](...r)));return}if(l.type==="BufferGeometry"){if(f==="args")return;l.setAttribute(V(f),new v.BufferAttribute(...r));return}if(f.includes("-")&&d===void 0){const _=f.split("-");d=_.reduce((M,m)=>M[V(m)],l),f=_.pop(),p=f.toLowerCase(),d!=null&&d.set||(l=_.reduce((M,m)=>M[V(m)],l))}let c=r;if(c===""&&(c=!0),oe(d)){R.includes(n)||(Array.isArray(c)?e[p](...c):e[p](c));return}!(d!=null&&d.set)&&!oe(d)?l[p]=c:d.constructor===c.constructor&&(d!=null&&d.copy)?d==null||d.copy(c):Array.isArray(c)?d.set(...c):!d.isColor&&d.setScalar?d.setScalar(c):d.set(c)}},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:Ue}=u.createRenderer(Ne);U(q);function $e(){return de().__VUE_DEVTOOLS_GLOBAL_HOOK__}function de(){return typeof navigator<"u"&&typeof window<"u"?window:typeof global<"u"?global:{}}const Fe=typeof Proxy=="function",Ge="devtools-plugin:setup",Re="plugin:settings:set";let T,z;function ze(){var e;return T!==void 0||(typeof window<"u"&&window.performance?(T=!0,z=window.performance):typeof global<"u"&&(!((e=global.perf_hooks)===null||e===void 0)&&e.performance)?(T=!0,z=global.perf_hooks.performance):T=!1),T}function We(){return ze()?z.now():Date.now()}class He{constructor(n,t){this.target=null,this.targetQueue=[],this.onQueue=[],this.plugin=n,this.hook=t;const r={};if(n.settings)for(const o in n.settings){const i=n.settings[o];r[o]=i.defaultValue}const a=`__vue-devtools-plugin-settings__${n.id}`;let s=Object.assign({},r);try{const o=localStorage.getItem(a),i=JSON.parse(o);Object.assign(s,i)}catch{}this.fallbacks={getSettings(){return s},setSettings(o){try{localStorage.setItem(a,JSON.stringify(o))}catch{}s=o},now(){return We()}},t&&t.on(Re,(o,i)=>{o===this.plugin.id&&this.fallbacks.setSettings(i)}),this.proxiedOn=new Proxy({},{get:(o,i)=>this.target?this.target.on[i]:(...l)=>{this.onQueue.push({method:i,args:l})}}),this.proxiedTarget=new Proxy({},{get:(o,i)=>this.target?this.target[i]:i==="on"?this.proxiedOn:Object.keys(this.fallbacks).includes(i)?(...l)=>(this.targetQueue.push({method:i,args:l,resolve:()=>{}}),this.fallbacks[i](...l)):(...l)=>new Promise(f=>{this.targetQueue.push({method:i,args:l,resolve:f})})})}async setRealTarget(n){this.target=n;for(const t of this.onQueue)this.target.on[t.method](...t.args);for(const t of this.targetQueue)t.resolve(await this.target[t.method](...t.args))}}function qe(e,n){const t=e,r=de(),a=$e(),s=Fe&&t.enableEarlyProxy;if(a&&(r.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__||!s))a.emit(Ge,e,n);else{const o=s?new He(t,a):null;(r.__VUE_DEVTOOLS_PLUGINS__=r.__VUE_DEVTOOLS_PLUGINS__||[]).push({pluginDescriptor:t,setupFn:n,proxy:o}),o&&n(o.proxiedTarget)}}function Qe(e,n){const t=`▲ ■ ●${e}`;typeof __VUE_DEVTOOLS_TOAST__=="function"?__VUE_DEVTOOLS_TOAST__(t,n):n==="error"?console.error(t):n==="warn"?console.warn(t):console.log(t)}const me=e=>{const n={id:e.uuid,label:e.type,children:[],tags:[]};e.name!==""&&n.tags.push({label:e.name,textColor:5750629,backgroundColor:15793395});const t=le(e);return t>0&&n.tags.push({label:`${Ve(t)} KB`,textColor:15707189,backgroundColor:16775644,tooltip:"Memory usage"}),e.type.includes("Light")&&(n.tags.push({label:`${e.intensity}`,textColor:9738662,backgroundColor:16316922,tooltip:"Intensity"}),n.tags.push({label:`#${e.color.getHexString()}`,textColor:9738662,backgroundColor:16316922,tooltip:"Color"})),e.type.includes("Camera")&&(n.tags.push({label:`${e.fov}°`,textColor:9738662,backgroundColor:16316922,tooltip:"Field of view"}),n.tags.push({label:`x: ${Math.round(e.position.x)} y: ${Math.round(e.position.y)} z: ${Math.round(e.position.z)}`,textColor:9738662,backgroundColor:16316922,tooltip:"Position"})),n};function pe(e,n){e.children.forEach(t=>{if(t.type==="HightlightMesh")return;const r=me(t);n.children.push(r),pe(t,r)})}const Ye=[],x="tres:inspector",Je=u.reactive({sceneGraph:null});function Ke(e,n){qe({id:"dev.esm.tres",label:"TresJS 🪐",logo:"https://raw.githubusercontent.com/Tresjs/tres/main/public/favicon.svg",packageName:"tresjs",homepage:"https://tresjs.org",componentStateTypes:Ye,app:e},t=>{typeof t.now!="function"&&Qe("You seem to be using an outdated version of Vue Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://devtools.vuejs.org/guide/installation.html."),t.addInspector({id:x,label:"TresJS 🪐",icon:"account_tree",treeFilterPlaceholder:"Search instances"}),setInterval(()=>{t.sendInspectorTree(x)},1e3),setInterval(()=>{t.notifyComponentUpdate()},5e3),t.on.getInspectorTree(s=>{if(s.inspectorId===x){const o=me(n.scene.value);pe(n.scene.value,o),Je.sceneGraph=o,s.rootNodes=[o]}});let r=null,a=null;t.on.getInspectorState(s=>{if(s.inspectorId===x){const[o]=n.scene.value.getObjectsByProperty("uuid",s.nodeId);if(!o)return;if(a&&r&&r.parent&&a.remove(r),o.isMesh){const i=De(o);o.add(i),r=i,a=o}s.state={object:[{key:"uuid",editable:!0,value:o.uuid},{key:"name",editable:!0,value:o.name},{key:"type",editable:!0,value:o.type},{key:"position",editable:!0,value:o.position},{key:"rotation",editable:!0,value:o.rotation},{key:"scale",editable:!0,value:o.scale},{key:"geometry",value:o.geometry},{key:"material",value:o.material},{key:"color",editable:!0,value:o.color},{key:"intensity",editable:!0,value:o.intensity},{key:"castShadow",editable:!0,value:o.castShadow},{key:"receiveShadow",editable:!0,value:o.receiveShadow},{key:"frustumCulled",editable:!0,value:o.frustumCulled},{key:"matrixAutoUpdate",editable:!0,value:o.matrixAutoUpdate},{key:"matrixWorldNeedsUpdate",editable:!0,value:o.matrixWorldNeedsUpdate},{key:"matrixWorld",value:o.matrixWorld},{key:"visible",editable:!0,value:o.visible}]}}}),t.on.editInspectorState(s=>{s.inspectorId===x&&Le(n.scene.value,s.nodeId,s.path,s.state.value)})})}const Xe=["data-scene"],ge=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,{expose:n}){var M;const t=e,{logWarning:r}=D(),a=u.ref(),s=u.shallowRef(new v.Scene),{resume:o}=G(),i=u.useSlots(),l=(M=u.getCurrentInstance())==null?void 0:M.appContext.app,f=m=>u.defineComponent({setup(){var h;const C=(h=u.getCurrentInstance())==null?void 0:h.appContext;return C&&(C.app=l),u.provide("useTres",m),u.provide("extend",U),typeof window<"u"&&Ke(C.app,m),()=>u.h(u.Fragment,null,i!=null&&i.default?i.default():[])}}),p=m=>{const C=f(m);Ue(u.h(C),s.value)},d=(m,C=!1)=>{s.value.children=[],C&&(m.renderer.value.dispose(),m.renderer.value.renderLists.dispose(),m.renderer.value.forceContextLoss()),p(m),o()},c=u.computed(()=>t.disableRender),_=u.shallowRef(null);return n({context:_,dispose:()=>d(_.value,!0)}),u.onMounted(()=>{const m=a;_.value=ue({scene:s.value,canvas:m,windowSize:t.windowSize,disableRender:c,rendererOptions:t}),ie({scene:s.value,contextParts:_.value});const{registerCamera:C,camera:h,cameras:k,deregisterCamera:O}=_.value;p(_.value);const A=()=>{const P=new v.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);P.position.set(3,3,3),P.lookAt(0,0,0),C(P);const L=u.watchEffect(()=>{k.value.length>=2&&(P.removeFromParent(),O(P),L==null||L())})};u.watch(()=>t.camera,(P,L)=>{P&&C(P),L&&(L.removeFromParent(),O(L))},{immediate:!0}),h.value||(r("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."),A())}),(m,C)=>(u.openBlock(),u.createElementBlock("canvas",{ref_key:"canvas",ref:a,"data-scene":s.value.uuid,class:u.normalizeClass(m.$attrs.class),style:u.normalizeStyle({display:"block",width:"100%",height:"100%",position:m.windowSize?"fixed":"relative",top:0,left:0,pointerEvents:"auto",touchAction:"none",...m.$attrs.style})},null,14,Xe))}}),Ze=["TresCanvas","TresLeches","TresScene"],et={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!Ze.includes(e)||e==="primitive"}}},tt={install(e){e.component("TresCanvas",ge)}};g.TresCanvas=ge,g.catalogue=N,g.default=tt,g.extend=U,g.isProd=_e,g.normalizeColor=X,g.normalizeVectorFlexibleParam=be,g.templateCompilerOptions=et,g.trasverseObjects=ae,g.useCamera=Q,g.useLoader=xe,g.useLogger=D,g.usePointerEventHandler=ie,g.useRaycaster=se,g.useRenderLoop=G,g.useRenderer=ne,g.useSeek=je,g.useTexture=Be,g.useTres=Ie,g.useTresContext=ce,g.useTresContextProvider=ue,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
8
|
+
(function(M,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):(M=typeof globalThis<"u"?globalThis:M||self,c(M.tres={},M.Vue,M.Three,M.VueUseCore))})(this,function(M,c,g,_){"use strict";var _t=Object.defineProperty;var Ct=(M,c,g)=>c in M?_t(M,c,{enumerable:!0,configurable:!0,writable:!0,value:g}):M[c]=g;var X=(M,c,g)=>(Ct(M,typeof c!="symbol"?c+"":c,g),g);function ke(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const Z=ke(g),Pe={name:"@tresjs/core",type:"module",version:"4.0.0-next.2",packageManager:"pnpm@8.10.2",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:!1,exports:{".":{types:"./dist/index.d.ts",require:"./dist/tres.umd.cjs",import:"./dist/tres.js"},"./components":{types:"./dist/components/index.d.ts"},"./composables":{types:"./dist/composables/index.d.ts"},"./types":{types:"./dist/types/index.d.ts"},"./utils":{types:"./dist/utils/index.d.ts"},"./*":"./*"},main:"./dist/tres.js",module:"./dist/tres.js",types:"./dist/index.d.ts",files:["dist","*.d.ts"],publishConfig:{access:"public"},scripts:{dev:"cd playground && npm run dev",build:"vite build",playground:"cd playground && npm run dev",test:"vitest","test:ci":"vitest run","test:ui":"vitest --ui",release:"release-it",coverage:"vitest run --coverage",lint:"eslint . --ext .js,.jsx,.ts,.tsx,.vue","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:{three:">=0.133",vue:">=3.4"},dependencies:{"@alvarosabu/utils":"^3.2.0","@vue/devtools-api":"^6.6.1","@vueuse/core":"^10.9.0"},devDependencies:{"@release-it/conventional-changelog":"^8.0.1","@stackblitz/sdk":"^1.9.0","@tresjs/cientos":"3.8.0","@tresjs/eslint-config-vue":"^0.2.1","@types/three":"^0.162.0","@typescript-eslint/eslint-plugin":"^7.4.0","@typescript-eslint/parser":"^7.4.0","@vitejs/plugin-vue":"^5.0.4","@vitest/coverage-c8":"^0.33.0","@vitest/ui":"^1.4.0","@vue/test-utils":"^2.4.5",eslint:"^8.57.0","eslint-plugin-vue":"^9.24.0",esno:"^4.7.0",gsap:"^3.12.5",jsdom:"^24.0.0",kolorist:"^1.8.0",ohmyfetch:"^0.4.21",pathe:"^1.1.2","release-it":"^17.1.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-copy":"^3.5.0","rollup-plugin-visualizer":"^5.12.0",three:"^0.162.0",unocss:"^0.58.7",unplugin:"^1.10.0","unplugin-vue-components":"^0.26.0",vite:"^5.2.6","vite-plugin-banner":"^0.7.1","vite-plugin-dts":"3.7.3","vite-plugin-inspect":"^0.8.3","vite-plugin-require-transform":"^1.0.21","vite-svg-loader":"^5.1.0",vitepress:"1.0.1",vitest:"^1.4.0",vue:"^3.4.21","vue-demi":"^0.14.7"}},ee=({sizes:e,scene:r})=>{const t=c.ref([]),o=c.computed(()=>t.value[0]),i=(s,u=!1)=>{t.value.some(({uuid:d})=>d===s.uuid)||(u?n(s):t.value.push(s))},l=s=>{t.value=t.value.filter(({uuid:u})=>u!==s.uuid)},n=s=>{const u=s instanceof g.Camera?s:t.value.find(p=>p.uuid===s);if(!u)return;const d=t.value.filter(({uuid:p})=>p!==u.uuid);t.value=[u,...d]};return c.watchEffect(()=>{e.aspectRatio.value&&t.value.forEach(s=>{!s.manual&&(s instanceof g.PerspectiveCamera||Le(s))&&(s instanceof g.PerspectiveCamera?s.aspect=e.aspectRatio.value:(s.left=e.width.value*-.5,s.right=e.width.value*.5,s.top=e.height.value*.5,s.bottom=e.height.value*-.5),s.updateProjectionMatrix())})}),c.onUnmounted(()=>{t.value=[]}),{camera:o,cameras:t,registerCamera:i,deregisterCamera:l,setCameraActive:n}};function Le(e){return e.hasOwnProperty("isOrthographicCamera")&&e.isOrthographicCamera}const te=_.createEventHook(),ne=_.createEventHook(),J=_.createEventHook(),$=new g.Clock;let E=0,F=0;const{pause:Ae,resume:Oe,isActive:xe}=_.useRafFn(()=>{te.trigger({delta:E,elapsed:F,clock:$}),ne.trigger({delta:E,elapsed:F,clock:$}),J.trigger({delta:E,elapsed:F,clock:$})},{immediate:!1});J.on(()=>{E=$.getDelta(),F=$.getElapsedTime()});const N=()=>({onBeforeLoop:te.on,onLoop:ne.on,onAfterLoop:J.on,pause:Ae,resume:Oe,isActive:xe}),Te=!0,re="[TresJS ▲ ■ ●] ";function A(){function e(o,i){console.error(`${re} ${o}`,i||"")}function r(o){console.warn(`${re} ${o}`)}function t(o,i){}return{logError:e,logWarning:r,logMessage:t}}function Be(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function oe(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}class je extends Z.Mesh{constructor(...t){super(...t);X(this,"type","HightlightMesh");X(this,"createTime");this.createTime=Date.now()}onBeforeRender(){const o=(Date.now()-this.createTime)/1e3,n=1+.07*Math.sin(2.5*o);this.scale.set(n,n,n)}}const se=(e,r)=>{for(const t of Object.keys(r))r[t]instanceof Object&&Object.assign(r[t],se(e[t],r[t]));return Object.assign(e||{},r),e},De=Ie("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 ie(e){return e&&e.nodeType===1}function U(e){return e.replace(/-([a-z])/g,(r,t)=>t.toUpperCase())}function Ie(e,r){const t=Object.create(null),o=e.split(",");for(let i=0;i<o.length;i++)t[o[i]]=!0;return r?i=>!!t[i.toLowerCase()]:i=>!!t[i]}const $e=(e,r)=>{const t=new Set,o=[];for(const i of e){const l=r(i);t.has(l)||(t.add(l),o.push(i))}return o},ae=(e,r)=>{if(!r)return;const t=Array.isArray(r)?r:r.match(/([^[.\]])+/g);return t==null?void 0:t.reduce((o,i)=>o&&o[i],e)},Ve=(e,r,t)=>{const o=Array.isArray(r)?r:r.match(/([^[.\]])+/g);o&&o.reduce((i,l,n)=>(i[l]===void 0&&(i[l]={}),n===o.length-1&&(i[l]=t),i[l]),e)};function le(e,r){if(ie(e)&&ie(r)){const i=e.attributes,l=r.attributes;return i.length!==l.length?!1:Array.from(i).every(({name:n,value:s})=>r.getAttribute(n)===s)}if(e===r)return!0;if(e===null||typeof e!="object"||r===null||typeof r!="object")return!1;const t=Object.keys(e),o=Object.keys(r);if(t.length!==o.length)return!1;for(const i of t)if(!o.includes(i)||!le(e[i],r[i]))return!1;return!0}function Ee(e,r){if(!Array.isArray(e)||!Array.isArray(r)||e.length!==r.length)return!1;for(let t=0;t<e.length;t++)if(!le(e[t],r[t]))return!1;return!0}const Fe=Array.isArray;function Ne(e,r,t,o){const i=u=>{if(u.uuid===r)return u;for(const d of u.children){const p=i(d);if(p)return p}},l=i(e);if(!l){console.warn("Object with UUID not found in the scene.");return}let n=l;for(let u=0;u<t.length-1;u++)if(n[t[u]]!==void 0)n=n[t[u]];else{console.warn(`Property path is not valid: ${t.join(".")}`);return}const s=t[t.length-1];n[s]!==void 0?n[s]=o:console.warn(`Property path is not valid: ${t.join(".")}`)}function Ue(e){const r=new g.MeshBasicMaterial({color:11003607,transparent:!0,opacity:.2,depthTest:!1,side:g.DoubleSide});return new je(e.geometry.clone(),r)}function ue(e){var t;let r=e.value;return e.value&&((t=e.value)!=null&&t.isMesh)&&(r=e.value.position),Array.isArray(e.value)&&(r=new g.Vector3(...r)),r}const We=Number.parseInt(g.REVISION.replace("dev","")),W={realistic:{shadows:!0,physicallyCorrectLights:!0,outputColorSpace:g.SRGBColorSpace,toneMapping:g.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:g.PCFSoftShadowMap}},flat:{toneMapping:g.NoToneMapping,toneMappingExposure:1}};function ce({scene:e,canvas:r,options:t,disableRender:o,emit:i,contextParts:{sizes:l,camera:n,render:s,invalidate:u,advance:d}}){const p=c.computed(()=>({alpha:_.toValue(t.alpha)??!0,depth:_.toValue(t.depth),canvas:_.unrefElement(r),context:_.toValue(t.context),stencil:_.toValue(t.stencil),antialias:_.toValue(t.antialias)??!0,precision:_.toValue(t.precision),powerPreference:_.toValue(t.powerPreference),premultipliedAlpha:_.toValue(t.premultipliedAlpha),preserveDrawingBuffer:_.toValue(t.preserveDrawingBuffer),logarithmicDepthBuffer:_.toValue(t.logarithmicDepthBuffer),failIfMajorPerformanceCaveat:_.toValue(t.failIfMajorPerformanceCaveat)})),a=c.shallowRef(new g.WebGLRenderer(p.value));function y(){t.renderMode==="on-demand"&&u()}c.watch(p,()=>{a.value.dispose(),a.value=new g.WebGLRenderer(p.value),y()}),c.watch([l.width,l.height],()=>{a.value.setSize(l.width.value,l.height.value),y()},{immediate:!0}),c.watch(()=>t.clearColor,y);const{pixelRatio:f}=_.useDevicePixelRatio();c.watch(f,()=>{a.value.setPixelRatio(f.value)});const{logError:w}=A(),{resume:b,onLoop:m}=N();m(()=>{n.value&&!_.toValue(o)&&s.frames.value>0&&(a.value.render(e,n.value),i("render",a.value)),s.priority.value=0,_.toValue(t.renderMode)==="always"?s.frames.value=1:s.frames.value=Math.max(0,s.frames.value-1)}),b();const v=(()=>{const k=new g.WebGLRenderer,C={shadowMap:{enabled:k.shadowMap.enabled,type:k.shadowMap.type},toneMapping:k.toneMapping,toneMappingExposure:k.toneMappingExposure,outputColorSpace:k.outputColorSpace};return k.dispose(),C})(),P=_.toValue(t.renderMode);return P==="on-demand"&&u(),P==="manual"&&setTimeout(()=>{d()},1),c.watchEffect(()=>{const k=_.toValue(t.preset);k&&(k in W||w(`Renderer Preset must be one of these: ${Object.keys(W).join(", ")}`),se(a.value,W[k])),P==="always"&&(s.frames.value=Math.max(1,s.frames.value));const C=(j,T)=>{const D=_.toValue(j),H=()=>{if(k)return ae(W[k],T)};if(D!==void 0)return D;const q=H();return q!==void 0?q:ae(v,T)},S=(j,T)=>Ve(a.value,T,C(j,T));S(t.shadows,"shadowMap.enabled"),S(t.toneMapping??g.ACESFilmicToneMapping,"toneMapping"),S(t.shadowMapType,"shadowMap.type"),We<150&&S(!t.useLegacyLights,"physicallyCorrectLights"),S(t.outputColorSpace,"outputColorSpace"),S(t.toneMappingExposure,"toneMappingExposure");const L=C(t.clearColor,"clearColor");L&&a.value.setClearColor(L?oe(L):new g.Color(0))}),c.onUnmounted(()=>{a.value.dispose(),a.value.forceContextLoss()}),{renderer:a}}const Q=e=>typeof e=="function",Ge=e=>!!e&&e.constructor===Array;function de(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 ze(e,r,t,o,i){const{logError:l}=A(),n=new e;i&&i(n),t&&t(n);const u=(Array.isArray(r)?r:[r]).map(d=>new Promise((p,a)=>{n.load(d,y=>{y.scene&&Object.assign(y,de(y.scene)),p(y)},o,y=>a(l("[useLoader] - Failed to load resource",y)))}));return Ge(r)?await Promise.all(u):await u[0]}async function Re(e){const r=new g.LoadingManager,t=new g.TextureLoader(r),o=i=>new Promise((l,n)=>{t.load(i,s=>l(s),()=>null,()=>{n(new Error("[useTextures] - Failed to load texture"))})});if(Fe(e)){const i=await Promise.all(e.map(l=>o(l)));return e.length>1?i:i[0]}else{const{map:i,displacementMap:l,normalMap:n,roughnessMap:s,metalnessMap:u,aoMap:d,alphaMap:p,matcap:a}=e;return{map:i?await o(i):null,displacementMap:l?await o(l):null,normalMap:n?await o(n):null,roughnessMap:s?await o(s):null,metalnessMap:u?await o(u):null,aoMap:d?await o(d):null,alphaMap:p?await o(p):null,matcap:a?await o(a):null}}}const fe=(e,r)=>{const t=c.computed(()=>r.renderer.value.domElement),{x:o,y:i}=_.usePointer({target:t}),{width:l,height:n,top:s,left:u}=_.useElementBounding(t),d=({x:C,y:S})=>{if(t.value)return{x:(C-u.value)/l.value*2-1,y:-((S-s.value)/n.value)*2+1}},p=({x:C,y:S})=>{if(r.camera.value)return r.raycaster.value.setFromCamera(new g.Vector2(C,S),r.camera.value),r.raycaster.value.intersectObjects(e.value,!1)},a=C=>{const S=d({x:(C==null?void 0:C.clientX)??o.value,y:(C==null?void 0:C.clientY)??i.value});return S?p(S)||[]:[]},y=c.computed(()=>a()),f=_.createEventHook(),w=_.createEventHook(),b=(C,S)=>{C.trigger({event:S,intersects:a(S)})},m=C=>{b(w,C)};let h;const v=C=>{var S;h=(S=a(C)[0])==null?void 0:S.object},P=C=>{var S;C instanceof PointerEvent&&h===((S=a(C)[0])==null?void 0:S.object)&&b(f,C)},k=C=>w.trigger({event:C,intersects:[]});return t.value.addEventListener("pointerup",P),t.value.addEventListener("pointerdown",v),t.value.addEventListener("pointermove",m),t.value.addEventListener("pointerleave",k),c.onUnmounted(()=>{t!=null&&t.value&&(t.value.removeEventListener("pointerup",P),t.value.removeEventListener("pointerdown",v),t.value.removeEventListener("pointermove",m),t.value.removeEventListener("pointerleave",k))}),{intersects:y,onClick:C=>f.on(C).off,onPointerMove:C=>w.on(C).off}};function qe(){const{logWarning:e}=A();function r(l,n,s){let u=null;return l.traverse(d=>{d[n]===s&&(u=d)}),u||e(`Child with ${n} '${s}' not found.`),u}function t(l,n,s){const u=[];return l.traverse(d=>{d[n].includes(s)&&u.push(d)}),u.length||e(`Children with ${n} '${s}' not found.`),u}function o(l,n){return r(l,"name",n)}function i(l,n){return t(l,"name",n)}return{seek:r,seekByName:o,seekAll:t,seekAllByName:i}}const pe=e=>{const r=c.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),t=c.ref(new Set),o=a=>{t.value.add(a)},i=a=>{t.value.delete(a)},l=a=>{Object.values(r).forEach(y=>y.delete(a)),i(a)},n=a=>{const{onClick:y,onPointerMove:f,onPointerEnter:w,onPointerLeave:b}=a;y&&r.click.set(a,y),f&&r.pointerMove.set(a,f),w&&r.pointerEnter.set(a,w),b&&r.pointerLeave.set(a,b)},s=c.computed(()=>$e([...Array.from(t.value),...Object.values(r).map(a=>Array.from(a.keys())).flat()],({uuid:a})=>a));e.registerObjectAtPointerEventHandler=n,e.deregisterObjectAtPointerEventHandler=l,e.registerBlockingObjectAtPointerEventHandler=o,e.deregisterBlockingObjectAtPointerEventHandler=i;const{onClick:u,onPointerMove:d}=fe(s,e);u(({intersects:a,event:y})=>{var f;a.length&&((f=r.click.get(a[0].object))==null||f(a[0],y))});let p;return d(({intersects:a,event:y})=>{var h,v,P,k;const f=(h=a==null?void 0:a[0])==null?void 0:h.object,{pointerLeave:w,pointerEnter:b,pointerMove:m}=r;p&&p!==f&&((v=w.get(p))==null||v(p,y)),f&&(p!==f&&((P=b.get(f))==null||P(a[0],y)),(k=m.get(f))==null||k(a[0],y)),p=f||null}),{registerObject:n,deregisterObject:l,registerBlockingObject:o,deregisterBlockingObject:i}};function me(e){let r=0;return e.traverse(t=>{if(t.isMesh&&t.geometry){const o=t.geometry,i=o.attributes.position.count*3*Float32Array.BYTES_PER_ELEMENT,l=o.index?o.index.count*Uint32Array.BYTES_PER_ELEMENT:0,n=o.attributes.normal?o.attributes.normal.count*3*Float32Array.BYTES_PER_ELEMENT:0,s=o.attributes.uv?o.attributes.uv.count*2*Float32Array.BYTES_PER_ELEMENT:0,u=i+l+n+s;r+=u}}),r}function Je(e){return(e/1024).toFixed(2)}const G=c.ref({}),z=e=>Object.assign(G.value,e);function Qe(e,r,t=10){const o=_.toValue(e)?_.useWindowSize():_.useElementSize(c.computed(()=>_.toValue(r).parentElement)),i=c.readonly(_.refDebounced(o.width,t)),l=c.readonly(_.refDebounced(o.height,t)),n=c.computed(()=>i.value/l.value);return{height:l,width:i,aspectRatio:n}}function ge({scene:e,canvas:r,windowSize:t,disableRender:o,rendererOptions:i,emit:l}){const{logWarning:n}=A(),s=c.shallowRef(e),u=Qe(t,r),{camera:d,cameras:p,registerCamera:a,deregisterCamera:y,setCameraActive:f}=ee({sizes:u,scene:e}),w={mode:c.ref(i.renderMode||"always"),priority:c.ref(0),frames:c.ref(0),maxFrames:60,canBeInvalidated:c.computed(()=>w.mode.value==="on-demand"&&w.frames.value===0)};function b(I=1){i.renderMode==="on-demand"?w.frames.value=Math.min(w.maxFrames,w.frames.value+I):n("`invalidate` can only be used when `renderMode` is set to `on-demand`")}function m(){i.renderMode==="manual"?w.frames.value=1:n("`advance` can only be used when `renderMode` is set to `manual`")}const{renderer:h}=ce({scene:e,canvas:r,options:i,emit:l,contextParts:{sizes:u,camera:d,render:w,invalidate:b,advance:m},disableRender:o}),v={sizes:u,scene:s,camera:d,cameras:c.readonly(p),renderer:h,raycaster:c.shallowRef(new g.Raycaster),controls:c.ref(null),perf:{maxFrames:160,fps:{value:0,accumulator:[]},memory:{currentMem:0,allocatedMem:0,accumulator:[]}},render:w,advance:m,extend:z,invalidate:b,registerCamera:a,setCameraActive:f,deregisterCamera:y};c.provide("useTres",v),v.scene.value.__tres={root:v};const P=100,k=_.useFps({every:P}),{isSupported:C,memory:S}=_.useMemory({interval:P}),L=160;let j=performance.now();const T=({timestamp:I})=>{v.scene.value&&(v.perf.memory.allocatedMem=me(v.scene.value)),I-j>=P&&(j=I,v.perf.fps.accumulator.push(k.value),v.perf.fps.accumulator.length>L&&v.perf.fps.accumulator.shift(),v.perf.fps.value=k.value,C.value&&S.value&&(v.perf.memory.accumulator.push(S.value.usedJSHeapSize/1024/1024),v.perf.memory.accumulator.length>L&&v.perf.memory.accumulator.shift(),v.perf.memory.currentMem=v.perf.memory.accumulator.reduce((bt,Mt)=>bt+Mt,0)/v.perf.memory.accumulator.length))};let D=0;const H=1,{pause:q}=_.useRafFn(({delta:I})=>{window.__TRES__DEVTOOLS__&&(T({timestamp:performance.now()}),D+=I,D>=H&&(window.__TRES__DEVTOOLS__.cb(v),D=0))},{immediate:!0});return c.onUnmounted(()=>{q()}),v}function he(){const e=c.inject("useTres");if(!e)throw new Error("useTresContext must be used together with useTresContextProvider");return e}const Ye=he;function zt(e){}const{logError:ve}=A(),Y=["onClick","onPointerMove","onPointerEnter","onPointerLeave"];function ye(e){const r=e.__tres.root;r&&r.render&&r.render.canBeInvalidated.value&&r.invalidate()}const Ke=()=>{let e=null;function r(n,s,u,d){if(d||(d={}),d.args||(d.args=[]),n==="template"||De(n))return null;let p=n.replace("Tres",""),a;if(n==="primitive"){(d==null?void 0:d.object)===void 0&&ve("Tres primitives need a prop 'object'");const y=d.object;p=y.type,a=Object.assign(y.clone(),{type:p})}else{const y=G.value[p];y||ve(`${p} is not defined on the THREE namespace. Use extend to add it to the catalog.`),a=new y(...d.args)}return a?(a.isCamera&&(d!=null&&d.position||a.position.set(3,3,3),d!=null&&d.lookAt||a.lookAt(0,0,0)),(d==null?void 0:d.attach)===void 0&&(a.isMaterial?a.attach="material":a.isBufferGeometry&&(a.attach="geometry")),a.__tres={...a.__tres,type:p,memoizedProps:d,eventCount:0,disposable:!0,primitive:n==="primitive"},a.isObject3D&&(d!=null&&d.material||d!=null&&d.geometry)&&(a.__tres.disposable=!1),a):null}function t(n,s){if(!n)return;s&&s.isScene&&(e=s),e&&(n.__tres.root=e.__tres.root);const u=s||e;if(n!=null&&n.isObject3D){const{registerCamera:d,registerObjectAtPointerEventHandler:p}=n.__tres.root;n!=null&&n.isCamera&&d(n),n&&Y.some(a=>n[a])&&p(n)}n!=null&&n.isObject3D&&(u!=null&&u.isObject3D)?(u.add(n),n.dispatchEvent({type:"added"})):n!=null&&n.isFog?u.fog=n:typeof(n==null?void 0:n.attach)=="string"&&(n.__previousAttach=n[u==null?void 0:u.attach],u&&(u[n.attach]=n))}function o(n){var p,a;if(!n)return;const s=n.__tres;n.parent=n.parent||e;const{deregisterObjectAtPointerEventHandler:u,deregisterBlockingObjectAtPointerEventHandler:d}=s.root;if(n.isObject3D){const y=b=>{var h,v;const m=b;s.disposable&&((h=m.material)==null||h.dispose(),m.material=void 0,(v=m.geometry)==null||v.dispose(),m.geometry=void 0)},f=b=>{d(b),b&&Y.some(m=>b[m])&&(u==null||u(b))},w=b=>{const m=n.__tres.root.deregisterCamera;b.isCamera&&(m==null||m(b))};(p=n.removeFromParent)==null||p.call(n),n.traverse(b=>{y(b),w(b),f==null||f(b)}),y(n),w(n),f==null||f(n),ye(n),(a=n.dispose)==null||a.call(n)}}function i(n,s,u,d){if(n){let p=n,a=s;if(n.__tres.primitive&&a==="object"&&u!==null){const b=r("primitive",void 0,void 0,{object:d});for(const m in b){if(m==="uuid")continue;const h=n[m],v=b[m];!(h!=null&&h.set)&&!Q(h)?n[m]=v:h.constructor===v.constructor&&(h!=null&&h.copy)?h==null||h.copy(v):Array.isArray(v)?h.set(...v):!h.isColor&&h.setScalar?h.setScalar(v):h.set(v)}b.__tres.root=e==null?void 0:e.__tres.root,b.isGroup?(n.geometry=void 0,n.material=void 0):delete n.isGroup}if(n.__tres.root){const{registerBlockingObjectAtPointerEventHandler:b,deregisterBlockingObjectAtPointerEventHandler:m}=n.__tres.root;if(n.isObject3D&&a==="blocks-pointer-events"){d||d===""?b(n):m(n);return}}let y=U(a),f=p==null?void 0:p[y];if(a==="args"){const b=n,m=u??[],h=d??[],v=n.__tres.type||n.type;v&&m.length&&!Ee(m,h)&&(p=Object.assign(b,new G.value[v](...d)));return}if(p.type==="BufferGeometry"){if(a==="args")return;p.setAttribute(U(a),new g.BufferAttribute(...d));return}if(a.includes("-")&&f===void 0){const b=a.split("-");f=b.reduce((m,h)=>m[U(h)],p),a=b.pop(),y=a.toLowerCase(),f!=null&&f.set||(p=b.reduce((m,h)=>m[U(h)],p))}let w=d;if(w===""&&(w=!0),Q(f)){Y.includes(s)||(Array.isArray(w)?n[y](...w):n[y](w));return}!(f!=null&&f.set)&&!Q(f)?p[y]=w:f.constructor===w.constructor&&(f!=null&&f.copy)?f==null||f.copy(w):Array.isArray(w)?f.set(...w):!f.isColor&&f.setScalar?f.setScalar(w):f.set(w),ye(n)}}function l(n){return(n==null?void 0:n.parent)||null}return{insert:t,remove:o,createElement:r,patchProp:i,parentNode:l,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}};function He(){return we().__VUE_DEVTOOLS_GLOBAL_HOOK__}function we(){return typeof navigator<"u"&&typeof window<"u"?window:typeof globalThis<"u"?globalThis:{}}const Xe=typeof Proxy=="function",Ze="devtools-plugin:setup",et="plugin:settings:set";let B,K;function tt(){var e;return B!==void 0||(typeof window<"u"&&window.performance?(B=!0,K=window.performance):typeof globalThis<"u"&&(!((e=globalThis.perf_hooks)===null||e===void 0)&&e.performance)?(B=!0,K=globalThis.perf_hooks.performance):B=!1),B}function nt(){return tt()?K.now():Date.now()}class rt{constructor(r,t){this.target=null,this.targetQueue=[],this.onQueue=[],this.plugin=r,this.hook=t;const o={};if(r.settings)for(const n in r.settings){const s=r.settings[n];o[n]=s.defaultValue}const i=`__vue-devtools-plugin-settings__${r.id}`;let l=Object.assign({},o);try{const n=localStorage.getItem(i),s=JSON.parse(n);Object.assign(l,s)}catch{}this.fallbacks={getSettings(){return l},setSettings(n){try{localStorage.setItem(i,JSON.stringify(n))}catch{}l=n},now(){return nt()}},t&&t.on(et,(n,s)=>{n===this.plugin.id&&this.fallbacks.setSettings(s)}),this.proxiedOn=new Proxy({},{get:(n,s)=>this.target?this.target.on[s]:(...u)=>{this.onQueue.push({method:s,args:u})}}),this.proxiedTarget=new Proxy({},{get:(n,s)=>this.target?this.target[s]:s==="on"?this.proxiedOn:Object.keys(this.fallbacks).includes(s)?(...u)=>(this.targetQueue.push({method:s,args:u,resolve:()=>{}}),this.fallbacks[s](...u)):(...u)=>new Promise(d=>{this.targetQueue.push({method:s,args:u,resolve:d})})})}async setRealTarget(r){this.target=r;for(const t of this.onQueue)this.target.on[t.method](...t.args);for(const t of this.targetQueue)t.resolve(await this.target[t.method](...t.args))}}function ot(e,r){const t=e,o=we(),i=He(),l=Xe&&t.enableEarlyProxy;if(i&&(o.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__||!l))i.emit(Ze,e,r);else{const n=l?new rt(t,i):null;(o.__VUE_DEVTOOLS_PLUGINS__=o.__VUE_DEVTOOLS_PLUGINS__||[]).push({pluginDescriptor:t,setupFn:r,proxy:n}),n&&r(n.proxiedTarget)}}function st(e,r){const t=`▲ ■ ●${e}`;typeof __VUE_DEVTOOLS_TOAST__=="function"?__VUE_DEVTOOLS_TOAST__(t,r):r==="error"?console.error(t):r==="warn"?console.warn(t):console.log(t)}const be=e=>{const r={id:e.uuid,label:e.type,children:[],tags:[]};e.name!==""&&r.tags.push({label:e.name,textColor:5750629,backgroundColor:15793395});const t=me(e);return t>0&&r.tags.push({label:`${Je(t)} KB`,textColor:15707189,backgroundColor:16775644,tooltip:"Memory usage"}),e.type.includes("Light")&&(r.tags.push({label:`${e.intensity}`,textColor:9738662,backgroundColor:16316922,tooltip:"Intensity"}),r.tags.push({label:`#${e.color.getHexString()}`,textColor:9738662,backgroundColor:16316922,tooltip:"Color"})),e.type.includes("Camera")&&(r.tags.push({label:`${e.fov}°`,textColor:9738662,backgroundColor:16316922,tooltip:"Field of view"}),r.tags.push({label:`x: ${Math.round(e.position.x)} y: ${Math.round(e.position.y)} z: ${Math.round(e.position.z)}`,textColor:9738662,backgroundColor:16316922,tooltip:"Position"})),r};function Me(e,r){e.children.forEach(t=>{if(t.type==="HightlightMesh")return;const o=be(t);r.children.push(o),Me(t,o)})}const it=[],V="tres:inspector",at=c.reactive({sceneGraph:null});function lt(e,r){ot({id:"dev.esm.tres",label:"TresJS 🪐",logo:"https://raw.githubusercontent.com/Tresjs/tres/main/public/favicon.svg",packageName:"tresjs",homepage:"https://tresjs.org",componentStateTypes:it,app:e},t=>{typeof t.now!="function"&&st("You seem to be using an outdated version of Vue Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://devtools.vuejs.org/guide/installation.html."),t.addInspector({id:V,label:"TresJS 🪐",icon:"account_tree",treeFilterPlaceholder:"Search instances"}),setInterval(()=>{t.sendInspectorTree(V)},1e3),setInterval(()=>{t.notifyComponentUpdate()},5e3),t.on.getInspectorTree(l=>{if(l.inspectorId===V){const n=be(r.scene.value);Me(r.scene.value,n),at.sceneGraph=n,l.rootNodes=[n]}});let o=null,i=null;t.on.getInspectorState(l=>{if(l.inspectorId===V){const[n]=r.scene.value.getObjectsByProperty("uuid",l.nodeId);if(!n)return;if(i&&o&&o.parent&&i.remove(o),n.isMesh){const s=Ue(n);n.add(s),o=s,i=n}l.state={object:[{key:"uuid",editable:!0,value:n.uuid},{key:"name",editable:!0,value:n.name},{key:"type",editable:!0,value:n.type},{key:"position",editable:!0,value:n.position},{key:"rotation",editable:!0,value:n.rotation},{key:"scale",editable:!0,value:n.scale},{key:"geometry",value:n.geometry},{key:"material",value:n.material},{key:"color",editable:!0,value:n.color},{key:"intensity",editable:!0,value:n.intensity},{key:"castShadow",editable:!0,value:n.castShadow},{key:"receiveShadow",editable:!0,value:n.receiveShadow},{key:"frustumCulled",editable:!0,value:n.frustumCulled},{key:"matrixAutoUpdate",editable:!0,value:n.matrixAutoUpdate},{key:"matrixWorldNeedsUpdate",editable:!0,value:n.matrixWorldNeedsUpdate},{key:"matrixWorld",value:n.matrixWorld},{key:"visible",editable:!0,value:n.visible}]}}}),t.on.editInspectorState(l=>{l.inspectorId===V&&Ne(r.scene.value,l.nodeId,l.path,l.state.value)})})}const ut=["data-scene","data-tres"],_e=c.defineComponent({__name:"TresCanvas",props:{shadows:{type:Boolean,default:void 0},clearColor:{},toneMapping:{},shadowMapType:{},useLegacyLights:{type:Boolean,default:void 0},outputColorSpace:{},toneMappingExposure:{},renderMode:{default:"always"},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}},emits:["render"],setup(e,{expose:r,emit:t}){var b;const o=e,i=t,l=c.ref(),n=c.shallowRef(new g.Scene),{resume:s}=N(),u=c.useSlots(),d=(b=c.getCurrentInstance())==null?void 0:b.appContext.app;z(Z);const p=m=>c.defineComponent({setup(){var v;const h=(v=c.getCurrentInstance())==null?void 0:v.appContext;return h&&(h.app=d),c.provide("useTres",m),c.provide("extend",z),typeof window<"u"&<(h==null?void 0:h.app,m),()=>c.h(c.Fragment,null,u!=null&&u.default?u.default():[])}}),a=m=>{const h=p(m),{render:v}=c.createRenderer(Ke());v(c.h(h),n.value)},y=(m,h=!1)=>{n.value.children=[],h&&(m.renderer.value.dispose(),m.renderer.value.renderLists.dispose(),m.renderer.value.forceContextLoss()),a(m),s()},f=c.computed(()=>o.disableRender),w=c.shallowRef(null);return r({context:w,dispose:()=>y(w.value,!0)}),c.onMounted(()=>{const m=l;w.value=ge({scene:n.value,canvas:m,windowSize:o.windowSize??!1,disableRender:f.value??!1,rendererOptions:o,emit:i}),pe(w.value);const{registerCamera:h,camera:v,cameras:P,deregisterCamera:k}=w.value;a(w.value);const C=()=>{const S=new g.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);S.position.set(3,3,3),S.lookAt(0,0,0),h(S);const L=c.watchEffect(()=>{P.value.length>=2&&(S.removeFromParent(),k(S),L==null||L())})};c.watch(()=>o.camera,(S,L)=>{S&&h(S),L&&(L.removeFromParent(),k(L))},{immediate:!0}),v.value||C()}),(m,h)=>(c.openBlock(),c.createElementBlock("canvas",{ref_key:"canvas",ref:l,"data-scene":n.value.uuid,class:c.normalizeClass(m.$attrs.class),"data-tres":`tresjs ${c.unref(Pe).version}`,style:c.normalizeStyle({display:"block",width:"100%",height:"100%",position:m.windowSize?"fixed":"relative",top:0,left:0,pointerEvents:"auto",touchAction:"none",...m.$attrs.style})},null,14,ut))}}),ct=["TresCanvas","TresLeches","TresScene"],dt={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!ct.includes(e)||e==="primitive"}}},ft={mounted:(e,r)=>{if(r.arg){console.log(`v-log:${r.arg}`,e[r.arg]);return}console.log("v-log",e)}};class Ce extends g.Line{constructor(r,t){const o=[1,1,0,-1,1,0,-1,-1,0,1,-1,0,1,1,0],i=new g.BufferGeometry;i.setAttribute("position",new g.Float32BufferAttribute(o,3)),i.computeBoundingSphere();const l=new g.LineBasicMaterial({fog:!1});super(i,l),this.light=r,this.color=t,this.type="RectAreaLightHelper";const n=[1,1,0,-1,1,0,-1,-1,0,1,1,0,-1,-1,0,1,-1,0],s=new g.BufferGeometry;s.setAttribute("position",new g.Float32BufferAttribute(n,3)),s.computeBoundingSphere(),this.add(new g.Mesh(s,new g.MeshBasicMaterial({side:g.BackSide,fog:!1})))}updateMatrixWorld(){if(this.scale.set(.5*this.light.width,.5*this.light.height,1),this.color!==void 0)this.material.color.set(this.color),this.children[0].material.color.set(this.color);else{this.material.color.copy(this.light.color).multiplyScalar(this.light.intensity);const r=this.material.color,t=Math.max(r.r,r.g,r.b);t>1&&r.multiplyScalar(1/t),this.children[0].material.color.copy(this.material.color)}this.matrixWorld.extractRotation(this.light.matrixWorld).scale(this.scale).copyPosition(this.light.matrixWorld),this.children[0].matrixWorld.copy(this.matrixWorld)}dispose(){this.geometry.dispose(),this.material.dispose(),this.children[0].geometry.dispose(),this.children[0].material.dispose()}}const{logWarning:Se}=A();let R,x;const pt={DirectionalLight:g.DirectionalLightHelper,PointLight:g.PointLightHelper,SpotLight:g.SpotLightHelper,HemisphereLight:g.HemisphereLightHelper,RectAreaLight:Ce},mt={mounted:e=>{if(!e.isLight){Se(`${e.type} is not a light`);return}R=pt[e.type],e.parent.add(new R(e,1,e.color.getHex()))},updated:e=>{x=e.parent.children.find(r=>r instanceof R),!(x instanceof Ce)&&x.update()},unmounted:e=>{if(!e.isLight){Se(`${e.type} is not a light`);return}x=e.parent.children.find(r=>r instanceof R),x&&x.dispose&&x.dispose(),e.parent.remove(x)}},{logWarning:gt}=A(),ht={updated:(e,r)=>{const t=ue(r);if(!t){gt(`v-always-look-at: problem with binding value: ${r.value}`);return}const{onLoop:o}=N();o(()=>{e.lookAt(t)})}},{logWarning:vt}=A(),yt={updated:(e,r)=>{var i;const t=ue(r);if(!t){vt(`v-distance-to: problem with binding value: ${r.value}`);return}O&&(O.dispose(),e.parent.remove(O));const o=t.clone().sub(e.position);o.normalize(),O=new g.ArrowHelper(o,e.position,e.position.distanceTo(t),16776960),e.parent.add(O),console.table([["Distance:",e.position.distanceTo(t)],[`origin: ${e.name||e.type}`,`x:${e.position.x}, y:${e.position.y}, z:${(i=e.position)==null?void 0:i.z}`],[`Destiny: ${e.name||e.type}`,`x:${t.x}, y:${t.y}, z:${t==null?void 0:t.z}`]])},unmounted:e=>{O==null||O.dispose(),e.parent.remove(O)}};let O=null;const wt={install(e){e.component("TresCanvas",_e)}};M.TresCanvas=_e,M.catalogue=G,M.default=wt,M.extend=z,M.isProd=Te,M.normalizeColor=oe,M.normalizeVectorFlexibleParam=Be,M.templateCompilerOptions=dt,M.trasverseObjects=de,M.useCamera=ee,M.useLoader=ze,M.useLogger=A,M.usePointerEventHandler=pe,M.useRaycaster=fe,M.useRenderLoop=N,M.useRenderer=ce,M.useSeek=qe,M.useTexture=Re,M.useTres=Ye,M.useTresContext=he,M.useTresContextProvider=ge,M.vAlwaysLookAt=ht,M.vDistanceTo=yt,M.vLightHelper=mt,M.vLog=ft,Object.defineProperties(M,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tresjs/core",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "4.0.0-next.
|
|
4
|
+
"version": "4.0.0-next.2",
|
|
5
5
|
"packageManager": "pnpm@8.10.2",
|
|
6
6
|
"description": "Declarative ThreeJS using Vue Components",
|
|
7
7
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
@@ -62,49 +62,50 @@
|
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
64
|
"three": ">=0.133",
|
|
65
|
-
"vue": ">=3.
|
|
65
|
+
"vue": ">=3.4"
|
|
66
66
|
},
|
|
67
67
|
"dependencies": {
|
|
68
|
-
"@alvarosabu/utils": "^3.
|
|
69
|
-
"@
|
|
68
|
+
"@alvarosabu/utils": "^3.2.0",
|
|
69
|
+
"@vue/devtools-api": "^6.6.1",
|
|
70
|
+
"@vueuse/core": "^10.9.0"
|
|
70
71
|
},
|
|
71
72
|
"devDependencies": {
|
|
72
73
|
"@release-it/conventional-changelog": "^8.0.1",
|
|
73
74
|
"@stackblitz/sdk": "^1.9.0",
|
|
74
|
-
"@tresjs/cientos": "3.
|
|
75
|
+
"@tresjs/cientos": "3.8.0",
|
|
75
76
|
"@tresjs/eslint-config-vue": "^0.2.1",
|
|
76
|
-
"@types/three": "^0.
|
|
77
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
78
|
-
"@typescript-eslint/parser": "^
|
|
79
|
-
"@vitejs/plugin-vue": "^
|
|
77
|
+
"@types/three": "^0.162.0",
|
|
78
|
+
"@typescript-eslint/eslint-plugin": "^7.4.0",
|
|
79
|
+
"@typescript-eslint/parser": "^7.4.0",
|
|
80
|
+
"@vitejs/plugin-vue": "^5.0.4",
|
|
80
81
|
"@vitest/coverage-c8": "^0.33.0",
|
|
81
|
-
"@vitest/ui": "^1.0
|
|
82
|
-
"@vue/test-utils": "^2.4.
|
|
83
|
-
"eslint": "^8.
|
|
84
|
-
"eslint-plugin-vue": "^9.
|
|
85
|
-
"esno": "^4.
|
|
86
|
-
"gsap": "^3.12.
|
|
87
|
-
"jsdom": "^
|
|
82
|
+
"@vitest/ui": "^1.4.0",
|
|
83
|
+
"@vue/test-utils": "^2.4.5",
|
|
84
|
+
"eslint": "^8.57.0",
|
|
85
|
+
"eslint-plugin-vue": "^9.24.0",
|
|
86
|
+
"esno": "^4.7.0",
|
|
87
|
+
"gsap": "^3.12.5",
|
|
88
|
+
"jsdom": "^24.0.0",
|
|
88
89
|
"kolorist": "^1.8.0",
|
|
89
90
|
"ohmyfetch": "^0.4.21",
|
|
90
|
-
"pathe": "^1.1.
|
|
91
|
-
"release-it": "^17.
|
|
91
|
+
"pathe": "^1.1.2",
|
|
92
|
+
"release-it": "^17.1.1",
|
|
92
93
|
"rollup-plugin-analyzer": "^4.0.0",
|
|
93
94
|
"rollup-plugin-copy": "^3.5.0",
|
|
94
|
-
"rollup-plugin-visualizer": "^5.
|
|
95
|
-
"three": "^0.
|
|
96
|
-
"unocss": "^0.58.
|
|
97
|
-
"unplugin": "^1.
|
|
95
|
+
"rollup-plugin-visualizer": "^5.12.0",
|
|
96
|
+
"three": "^0.162.0",
|
|
97
|
+
"unocss": "^0.58.7",
|
|
98
|
+
"unplugin": "^1.10.0",
|
|
98
99
|
"unplugin-vue-components": "^0.26.0",
|
|
99
|
-
"vite": "^5.
|
|
100
|
+
"vite": "^5.2.6",
|
|
100
101
|
"vite-plugin-banner": "^0.7.1",
|
|
101
|
-
"vite-plugin-dts": "3.
|
|
102
|
-
"vite-plugin-inspect": "^0.8.
|
|
102
|
+
"vite-plugin-dts": "3.7.3",
|
|
103
|
+
"vite-plugin-inspect": "^0.8.3",
|
|
103
104
|
"vite-plugin-require-transform": "^1.0.21",
|
|
104
105
|
"vite-svg-loader": "^5.1.0",
|
|
105
|
-
"vitepress": "1.0.
|
|
106
|
-
"vitest": "^1.0
|
|
107
|
-
"vue": "^3.
|
|
108
|
-
"vue-demi": "^0.14.
|
|
106
|
+
"vitepress": "1.0.1",
|
|
107
|
+
"vitest": "^1.4.0",
|
|
108
|
+
"vue": "^3.4.21",
|
|
109
|
+
"vue-demi": "^0.14.7"
|
|
109
110
|
}
|
|
110
111
|
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import type { Object3D } from 'three';
|
|
2
|
-
export interface TresLoader<T> extends THREE.Loader {
|
|
3
|
-
load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): unknown;
|
|
4
|
-
loadAsync(url: string, onProgress?: (event: ProgressEvent) => void): Promise<T>;
|
|
5
|
-
}
|
|
6
|
-
export type LoaderProto<T> = new (...args: any) => TresLoader<T extends unknown ? any : T>;
|
|
7
|
-
export type LoaderReturnType<T, L extends LoaderProto<T>> = T extends unknown ? Awaited<ReturnType<InstanceType<L>['loadAsync']>> : T;
|
|
8
|
-
/**
|
|
9
|
-
* Traverse an object and return all the nodes and materials
|
|
10
|
-
*
|
|
11
|
-
* @export
|
|
12
|
-
* @param {Object3D} object
|
|
13
|
-
* @return { [key: string]: any }
|
|
14
|
-
*/
|
|
15
|
-
export declare function trasverseObjects(object: Object3D): {
|
|
16
|
-
[key: string]: any;
|
|
17
|
-
};
|
|
18
|
-
export type Extensions<T extends {
|
|
19
|
-
prototype: LoaderProto<any>;
|
|
20
|
-
}> = (loader: T['prototype']) => void;
|
|
21
|
-
/**
|
|
22
|
-
* Load resources using THREE loaders and return the result as a promise
|
|
23
|
-
*
|
|
24
|
-
* @see https://tresjs.org/api/composables.html#useloader
|
|
25
|
-
* @see https://threejs.org/docs/index.html?q=loader#api/en/loaders/Loader
|
|
26
|
-
*
|
|
27
|
-
* ```ts
|
|
28
|
-
* import { useLoader } from '@tresjs/core'
|
|
29
|
-
* import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
|
|
30
|
-
*
|
|
31
|
-
* const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
|
|
32
|
-
* ```
|
|
33
|
-
*
|
|
34
|
-
* @export
|
|
35
|
-
* @template T
|
|
36
|
-
* @template U
|
|
37
|
-
* @param {T} Loader
|
|
38
|
-
* @param {U} url
|
|
39
|
-
* @param {Extensions<T>} [extensions]
|
|
40
|
-
* @param {(event: ProgressEvent<EventTarget>) => void} [onProgress]
|
|
41
|
-
* @param {(proto: TresLoader<T>) => void} [cb]
|
|
42
|
-
* @return {*}
|
|
43
|
-
*/
|
|
44
|
-
export declare function useLoader<T extends LoaderProto<T>, U extends string | string[]>(Loader: T, url: U, extensions?: Extensions<T>, onProgress?: (event: ProgressEvent<EventTarget>) => void, cb?: (proto: TresLoader<T>) => void): Promise<U extends any[] ? LoaderReturnType<T, T>[] : LoaderReturnType<T, T>>;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import type { Intersection, Event, Object3D } from 'three';
|
|
2
|
-
import type { TresScene } from 'src/types';
|
|
3
|
-
import type { TresContext } from '../useTresContextProvider';
|
|
4
|
-
type CallbackFn = (intersection: Intersection<Object3D<Event>>, event: PointerEvent) => void;
|
|
5
|
-
type CallbackFnPointerLeave = (object: Object3D<Event>, event: PointerEvent) => void;
|
|
6
|
-
export interface EventProps {
|
|
7
|
-
onClick?: CallbackFn;
|
|
8
|
-
onPointerEnter?: CallbackFn;
|
|
9
|
-
onPointerMove?: CallbackFn;
|
|
10
|
-
onPointerLeave?: CallbackFnPointerLeave;
|
|
11
|
-
}
|
|
12
|
-
export declare const usePointerEventHandler: ({ scene, contextParts }: {
|
|
13
|
-
scene: TresScene;
|
|
14
|
-
contextParts: Pick<TresContext, 'renderer' | 'camera' | 'raycaster'>;
|
|
15
|
-
}) => {
|
|
16
|
-
registerObject: (object: Object3D & EventProps) => void;
|
|
17
|
-
deregisterObject: (object: Object3D) => void;
|
|
18
|
-
};
|
|
19
|
-
export {};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import type { Object3D, type Intersection } from 'three';
|
|
2
|
-
import type { Ref } from 'vue';
|
|
3
|
-
import { type TresContext } from '../useTresContextProvider';
|
|
4
|
-
export type Intersects = Intersection<THREE.Object3D<THREE.Event>>[];
|
|
5
|
-
interface PointerMoveEventPayload {
|
|
6
|
-
intersects?: Intersects;
|
|
7
|
-
event: PointerEvent;
|
|
8
|
-
}
|
|
9
|
-
interface PointerClickEventPayload {
|
|
10
|
-
intersects: Intersects;
|
|
11
|
-
event: PointerEvent;
|
|
12
|
-
}
|
|
13
|
-
export declare const useRaycaster: (objects: Ref<THREE.Object3D[]>, { renderer, camera, raycaster }: Pick<TresContext, 'renderer' | 'camera' | 'raycaster'>) => {
|
|
14
|
-
intersects: import("vue").ComputedRef<Intersects>;
|
|
15
|
-
onClick: (fn: (value: PointerClickEventPayload) => void) => () => void;
|
|
16
|
-
onPointerMove: (fn: (value: PointerMoveEventPayload) => void) => () => void;
|
|
17
|
-
};
|
|
18
|
-
export {};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Seek composable return type
|
|
3
|
-
*
|
|
4
|
-
* @export
|
|
5
|
-
* @interface UseSeekReturn
|
|
6
|
-
*/
|
|
7
|
-
export interface UseSeekReturn {
|
|
8
|
-
seek: (parent: THREE.Scene | THREE.Object3D, property: string, value: string) => THREE.Object3D | null;
|
|
9
|
-
seekByName: (parent: THREE.Scene | THREE.Object3D, value: string) => THREE.Object3D | null;
|
|
10
|
-
seekAll: (parent: THREE.Scene | THREE.Object3D, property: string, value: string) => THREE.Object3D[];
|
|
11
|
-
seekAllByName: (parent: THREE.Scene | THREE.Object3D, value: string) => THREE.Object3D[];
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* Composable that provides utilities to easily traverse and navigate through complex scenes and object children graphs
|
|
15
|
-
*
|
|
16
|
-
* @export
|
|
17
|
-
* @return {*} {UseSeekReturn}
|
|
18
|
-
*/
|
|
19
|
-
export declare function useSeek(): UseSeekReturn;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import type { Camera, EventDispatcher, Scene, WebGLRenderer } from 'three';
|
|
2
|
-
import { Raycaster } from 'three';
|
|
3
|
-
import type { ComputedRef, DeepReadonly, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
|
|
4
|
-
import type { UseRendererOptions } from '../useRenderer';
|
|
5
|
-
export interface TresContext {
|
|
6
|
-
scene: ShallowRef<Scene>;
|
|
7
|
-
sizes: {
|
|
8
|
-
height: Ref<number>;
|
|
9
|
-
width: Ref<number>;
|
|
10
|
-
aspectRatio: ComputedRef<number>;
|
|
11
|
-
};
|
|
12
|
-
extend: (objects: any) => void;
|
|
13
|
-
camera: ComputedRef<Camera | undefined>;
|
|
14
|
-
cameras: DeepReadonly<Ref<Camera[]>>;
|
|
15
|
-
controls: Ref<(EventDispatcher & {
|
|
16
|
-
enabled: boolean;
|
|
17
|
-
}) | null>;
|
|
18
|
-
renderer: ShallowRef<WebGLRenderer>;
|
|
19
|
-
raycaster: ShallowRef<Raycaster>;
|
|
20
|
-
perf: {
|
|
21
|
-
maxFrames: number;
|
|
22
|
-
fps: {
|
|
23
|
-
value: number;
|
|
24
|
-
accumulator: number[];
|
|
25
|
-
};
|
|
26
|
-
memory: {
|
|
27
|
-
currentMem: number;
|
|
28
|
-
allocatedMem: number;
|
|
29
|
-
accumulator: number[];
|
|
30
|
-
};
|
|
31
|
-
};
|
|
32
|
-
registerCamera: (camera: Camera) => void;
|
|
33
|
-
setCameraActive: (cameraOrUuid: Camera | string) => void;
|
|
34
|
-
deregisterCamera: (camera: Camera) => void;
|
|
35
|
-
}
|
|
36
|
-
export declare function useTresContextProvider({ scene, canvas, windowSize, disableRender, rendererOptions, }: {
|
|
37
|
-
scene: Scene;
|
|
38
|
-
canvas: MaybeRef<HTMLCanvasElement>;
|
|
39
|
-
windowSize: MaybeRefOrGetter<boolean>;
|
|
40
|
-
disableRender: MaybeRefOrGetter<boolean>;
|
|
41
|
-
rendererOptions: UseRendererOptions;
|
|
42
|
-
}): TresContext;
|
|
43
|
-
export declare function useTresContext(): TresContext;
|
|
44
|
-
export declare const useTres: typeof useTresContext;
|
package/dist/core/nodeOps.d.ts
DELETED
package/dist/core/renderer.d.ts
DELETED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|