@tresjs/core 1.7.0 → 1.8.0
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/core/useCamera/index.d.ts +70 -5
- package/dist/core/useCatalogue/index.d.ts +14 -0
- package/dist/core/useInstanceCreator/index.d.ts +7 -0
- package/dist/core/useLoader/index.d.ts +30 -0
- package/dist/core/useRaycaster/index.d.ts +31 -65
- package/dist/core/useRenderer/component.d.ts +13 -5
- package/dist/core/useRenderer/const.d.ts +0 -1
- package/dist/core/useRenderer/index.d.ts +10 -1
- package/dist/core/useScene/index.d.ts +6 -0
- package/dist/core/useTexture/index.d.ts +38 -0
- package/dist/core/useTres/index.d.ts +85 -2
- package/dist/tres.js +323 -279
- package/dist/tres.umd.cjs +2 -2
- package/package.json +9 -8
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v1.
|
|
3
|
+
* version: v1.8.0
|
|
4
4
|
* (c) 2023
|
|
5
5
|
* description: Declarative ThreeJS using Vue Components
|
|
6
6
|
* author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
|
|
7
7
|
*/
|
|
8
|
-
(function(h,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("@vueuse/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","three"],o):(h=typeof globalThis<"u"?globalThis:h||self,o(h.tres={},h.Vue,h.VueUseCore,h.Three))})(this,function(h,o,f,p){"use strict";function ge(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const te=ge(p);var ne=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(ne||{});const B={cameras:[]},he=45;let x;function K(){const{state:e,setState:t}=U();function r(g="Perspective",n){var i;if(g==="Perspective"){const{near:l,far:s,fov:u}=n||{near:.1,far:1e3,fov:he};x=new p.PerspectiveCamera(u,((i=e.aspectRatio)==null?void 0:i.value)||1,l,s),B.cameras.push(x)}else{const{left:l,right:s,top:u,bottom:m,near:P,far:y}=n||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};x=new p.OrthographicCamera(l,s,u,m,P,y),B.cameras.push(x)}return B.cameras.push(x),x}const a=o.computed(()=>B.cameras[0]);t("camera",a);function c(){a.value instanceof p.PerspectiveCamera&&e.aspectRatio&&(a.value.aspect=e.aspectRatio.value),a.value.updateProjectionMatrix()}function d(g){B.cameras.push(g),g instanceof p.PerspectiveCamera&&e.aspectRatio&&(g.aspect=e.aspectRatio.value),g.updateProjectionMatrix()}return e.aspectRatio&&o.watch(e.aspectRatio,c),{activeCamera:a,createCamera:r,updateCamera:c,pushCamera:d}}const re="[TresJS ▲ ■ ●] ";function I(){function e(a,c){console.error(`${re} ${a}`,c||"")}function t(a){console.warn(`${re} ${a}`)}function r(a,c){}return{logError:e,logWarning:t,logMessage:r}}const $=o.ref({...te,uuid:te.MathUtils.generateUUID()});delete $.value.Scene;let A;function J(e,t="Tres"){const{logError:r}=I();!A&&e&&(A=e);const{createComponentInstances:a}=X(t);return{extend:d=>{if(!d){r("No objects provided to extend catalogue");return}$.value=Object.assign($.value,d);const g=a(o.ref(d));A&&g.forEach(([n,i])=>{A._context.components[n]||A.component(n,i)})},catalogue:$}}const k=e=>typeof e<"u",we=e=>typeof e=="function",z=e=>!!e&&e.constructor===Array;function ye(e){return typeof e=="number"?[e,e,e]:e instanceof p.Vector3?[e.x,e.y,e.z]:e}function ve(e){return e instanceof p.Color?e:Array.isArray(e)?new p.Color(...e):new p.Color(e)}const Ce=["rotation","scale","position"];function X(e){const{logError:t}=I();function r(n,i){k(n)&&k(i)&&Object.entries(n).forEach(([l,s])=>{const u=l.replace(/(-\w)/g,m=>m[1].toUpperCase());i.setAttribute(u,new p.BufferAttribute(...s))})}function a(n,i){k(n)&&k(i)&&Object.entries(n).forEach(([l,s])=>{const u=l.replace(/(-\w)/g,m=>m[1].toUpperCase());if(!(u==="args"||s===void 0)){Ce.includes(u)&&s&&(s=ye(s)),n.ref&&(n.ref=i);try{if(i[u]&&k(i[u].set))i[u].set(...z(s)?s:[s]);else{if(s===""&&(s=!0),we(i[u])){if(l==="center"&&!s)return;i[u](...z(s)?s:[s]);return}i[u]=s}}catch(m){t(`There was an error setting ${u} property`,m)}}})}function c(n){var s,u;const i=/^Symbol\(Fragment\)$/g,l=/^Symbol\(Text\)$/g;if(i.test(n.type.toString()))return n.children.map(m=>c(m));if(l.test(n.type.toString()))return;{const m=n.type.name.replace(e,""),{catalogue:P}=J(),y=o.inject("catalogue")||P;let v;if(y)if((s=n.children)!=null&&s.default){const L=n.children.default().map(D=>c(D));v=new y.value[m](...L.flat().filter(Boolean))}else(u=n==null?void 0:n.props)!=null&&u.args?y!=null&&y.value[m]?v=new y.value[m](...n.props.args):t(`There is no ${m} in the catalogue`,y==null?void 0:y.value.uuid):v=new y.value[m];return n!=null&&n.props&&(m==="BufferGeometry"?r(n.props,v):a(n.props,v)),v}}function d(n,i,l){if(l.default&&(l!=null&&l.default())){const s=l.default().map(u=>c(u));if(n.name==="Group"){const u=new n;return s.forEach(m=>{u.add(m)}),u}else return new n(...s.flat().filter(Boolean))}else return i.args?new n(...i.args):new n}function g(n){return Object.entries(n.value).filter(([i,l])=>{var s,u;return(u=(s=l==null?void 0:l.prototype)==null?void 0:s.constructor)==null?void 0:u.toString().includes("class")}).map(([i,l])=>{const s=`${e}${i}`,u=o.defineComponent({name:s,setup(m,{slots:P,attrs:y,...v}){const{state:L}=U(),{onLoop:D}=V(),C=L.scene,W=L.raycaster,{pushCamera:O}=K();let S=d(l,y,P);a(y,S),(S instanceof p.PerspectiveCamera||S instanceof p.OrthographicCamera)&&O(S),S.isObject3D&&(C==null||C.add(S));let b=null,M=null;if(S instanceof p.Mesh){D(()=>{if(S&&W&&(C!=null&&C.children)){const q=W.intersectObjects(C==null?void 0:C.children);q.length>0?(M=q[0],(b===null||b.object.uuid!==(M==null?void 0:M.object.uuid))&&v.emit("pointer-enter",M),v.emit("pointer-move",M)):(M=null,b!==null&&v.emit("pointer-leave",b)),b=M}});const G=f.useEventListener(window,"click",()=>{v.emit("click",b)});o.onUnmounted(()=>{G()})}return C&&S instanceof p.Fog&&(C.fog=S),v.expose(S),()=>{}}});return[s,u]})}return{createComponentInstances:g,processProps:a,createInstanceFromVNode:c}}const ae=f.createEventHook(),oe=f.createEventHook(),Y=f.createEventHook(),_=new p.Clock;let N=0,R=0;const{pause:Se,resume:Me,isActive:Pe}=f.useRafFn(()=>{ae.trigger({delta:N,elapsed:R,clock:_}),oe.trigger({delta:N,elapsed:R,clock:_}),Y.trigger({delta:N,elapsed:R,clock:_})},{immediate:!1});Y.on(()=>{N=_.getDelta(),R=_.getElapsedTime()});function V(){return{onBeforeLoop:ae.on,onLoop:oe.on,onAfterLoop:Y.on,pause:Se,resume:Me,isActive:Pe}}const be=o.shallowRef(new p.Scene);function se(){return{scene:be}}function ie(e){const t={nodes:{},materials:{}};return e&&e.traverse(r=>{r.name&&(t.nodes[r.name]=r),r.material&&!t.materials[r.material.name]&&(t.materials[r.material.name]=r.material)}),t}async function Ue(e,t,r,a,c){const{logError:d}=I(),g=new e;c&&c(g),r&&r(g);const i=(Array.isArray(t)?t:[t]).map(l=>new Promise((s,u)=>{g.load(l,m=>{m.scene&&Object.assign(m,ie(m.scene)),s(m)},a,m=>u(d("[useLoader] - Failed to load resource",m)))}));return z(t)?await Promise.all(i):await i[0]}async function Le(e){const t=new p.LoadingManager,r=new p.TextureLoader(t),a=c=>new Promise((d,g)=>{r.load(c,n=>d(n),()=>null,()=>{g(new Error("[useTextures] - Failed to load texture"))})});if(z(e)){const c=await Promise.all(e.map(d=>a(d)));return e.length>1?c:c[0]}else{const{map:c,displacementMap:d,normalMap:g,roughnessMap:n,metalnessMap:i,aoMap:l}=e;return{map:c?await a(c):null,displacementMap:d?await a(d):null,normalMap:g?await a(g):null,roughnessMap:n?await a(n):null,metalnessMap:i?await a(i):null,aoMap:l?await a(l):null}}}const T=o.shallowReactive({});function U(){function e(r){return T[r]}function t(r,a){T[r]=a}return{state:T,...o.toRefs(T),getState:e,setState:t}}const Q=o.shallowRef(new p.Raycaster),F=o.ref(new p.Vector2),ce=o.ref(null);function le(){const{setState:e}=U();e("raycaster",Q.value),e("pointer",F),e("currentInstance",ce),o.provide("raycaster",Q),o.provide("pointer",F),o.provide("currentInstance",ce);function t(r){F.value.x=r.clientX/window.innerWidth*2-1,F.value.y=-(r.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",t),o.onUnmounted(()=>{window.removeEventListener("pointermove",t)}),{raycaster:Q,pointer:F}}const Z={realistic:{physicallyCorrectLights:!0,outputEncoding:p.sRGBEncoding,toneMapping:p.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:p.PCFSoftShadowMap}}},ue=(e,t)=>{for(const r of Object.keys(t))t[r]instanceof Object&&Object.assign(t[r],ue(e[r],t[r]));return Object.assign(e||{},t),e},w=o.shallowRef(),E=o.ref(!1);function fe(e,t,r){const{alpha:a=!0,antialias:c=!0,depth:d,logarithmicDepthBuffer:g,failIfMajorPerformanceCaveat:n,precision:i,premultipliedAlpha:l,stencil:s,shadows:u=!1,shadowMapType:m=p.PCFShadowMap,physicallyCorrectLights:P=!1,outputEncoding:y=p.LinearEncoding,toneMapping:v=p.NoToneMapping,toneMappingExposure:L=1,context:D=void 0,powerPreference:C="default",preserveDrawingBuffer:W=!1,clearColor:O,windowSize:S=!1,preset:b=void 0}=o.toRefs(r),{width:M,height:G}=f.resolveUnref(S)?f.useWindowSize():f.useElementSize(t),{logError:q}=I(),{pixelRatio:pe}=f.useDevicePixelRatio(),{pause:Ie,resume:Ae}=V(),H=o.computed(()=>M.value/G.value),de=()=>{w.value&&(w.value.setSize(M.value,G.value),w.value.setPixelRatio(Math.min(pe.value,2)))},me=()=>{if(!w.value)return;const j=f.resolveUnref(b);if(j){j in Z||q("Renderer Preset must be one of these: "+Object.keys(Z).join(", ")),ue(w.value,Z[j]);return}w.value.shadowMap.enabled=f.resolveUnref(u),w.value.shadowMap.type=f.resolveUnref(m),w.value.toneMapping=f.resolveUnref(v)||p.NoToneMapping,w.value.toneMappingExposure=f.resolveUnref(L),w.value.outputEncoding=f.resolveUnref(y)||p.LinearEncoding,O!=null&&O.value&&w.value.setClearColor(ve(f.resolveUnref(O))),w.value.physicallyCorrectLights=f.resolveUnref(P)},ke=()=>{const j=f.unrefElement(e);if(w.value||!j)return;w.value=new p.WebGLRenderer({canvas:j,alpha:f.resolveUnref(a),antialias:f.resolveUnref(c),context:f.resolveUnref(D),depth:f.resolveUnref(d),failIfMajorPerformanceCaveat:f.resolveUnref(n),logarithmicDepthBuffer:f.resolveUnref(g),powerPreference:f.resolveUnref(C),precision:f.resolveUnref(i),stencil:f.resolveUnref(s),preserveDrawingBuffer:f.resolveUnref(W),premultipliedAlpha:f.resolveUnref(l)});const{setState:ee}=U();ee("renderer",w.value),ee("clock",new p.Clock),ee("aspectRatio",H),me(),de(),Ae(),E.value=!0},_e=()=>{w.value&&(w.value.dispose(),w.value=void 0,E.value=!1,Ie())};return o.watch([H,pe],de),o.watch([u,m,y,P,v,L,O],me),o.watch(()=>[e,t],()=>{f.unrefElement(e)&&f.unrefElement(t)&&ke()},{immediate:!0,deep:!0}),{renderer:w,isReady:E,dispose:_e,aspectRatio:H}}const Oe=o.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Number,physicallyCorrectLights:Boolean,outputEncoding:Number,toneMapping:Number,toneMappingExposure:Number,context:Object,powerPreference:String,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:{type:Boolean,default:!1},preset:String},setup(e,{slots:t,attrs:r}){const{logError:a}=I(),c=o.ref(),d=o.ref(),{renderer:g,dispose:n,aspectRatio:i}=fe(c,d,e);return o.provide("aspect-ratio",i),o.provide("renderer",g),t.default&&!t.default().some(l=>l.type.name==="Scene")&&a("TresCanvas must contain a Scene component."),t.default&&!t.default().some(l=>{var s;return(s=l.type.name)==null?void 0:s.includes("Camera")})&&a("Scene must contain a Camera component."),o.onBeforeUnmount(()=>n()),()=>{if(t.default)return o.h("div",{ref:d,style:{position:"relative",width:"100%",height:"100vh",...r.style}},[o.h("canvas",{ref:c,style:{width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}}),t.default()])}}}),xe=o.defineComponent({name:"Scene",setup(e,{slots:t}){const{setState:r}=U(),{scene:a}=se(),c=o.inject("renderer"),{activeCamera:d}=K(),{raycaster:g,pointer:n}=le(),{onLoop:i}=V();return o.provide("local-scene",a),r("scene",a.value),i(()=>{g.value.setFromCamera(n.value,d.value),c!=null&&c.value&&(d!=null&&d.value)&&(a!=null&&a.value)&&c.value.render(a==null?void 0:a.value,d.value)}),()=>{if(t.default)return t.default()}}}),je=Symbol("UseTresState"),Be={install(e,t){const r=(t==null?void 0:t.prefix)||"Tres";e.component(`${r}Canvas`,Oe),e.component(`${r}Scene`,xe);const{catalogue:a,extend:c}=J(e,r);e.provide("catalogue",a),e.provide("extend",c),e.provide("useTres",U());const{createComponentInstances:d}=X(r);d(a).forEach(([n,i])=>{e.component(n,i)})}};h.CameraType=ne,h.UseTresStateSymbol=je,h.default=Be,h.trasverseObjects=ie,h.useCamera=K,h.useCatalogue=J,h.useInstanceCreator=X,h.useLoader=Ue,h.useRaycaster=le,h.useRenderLoop=V,h.useRenderer=fe,h.useScene=se,h.useTexture=Le,h.useTres=U,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
8
|
+
(function(C,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("@vueuse/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","three"],i):(C=typeof globalThis<"u"?globalThis:C||self,i(C.tres={},C.Vue,C.VueUseCore,C.Three))})(this,function(C,i,u,p){"use strict";function he(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const ee=he(p);var te=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(te||{});const we=45;let x;function G(){const{state:e,setState:t}=O();function r(d="Perspective",n){var a,f,c;if(d==="Perspective"){const{near:s,far:m,fov:y}=n||{near:.1,far:1e3,fov:we};x=new p.PerspectiveCamera(y,((a=e.aspectRatio)==null?void 0:a.value)||window.innerWidth/window.innerHeight,s,m),(f=e.cameras)==null||f.push(x)}else{const{left:s,right:m,top:y,bottom:M,near:g,far:h}=n||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};x=new p.OrthographicCamera(s,m,y,M,g,h),(c=e.cameras)==null||c.push(x)}return e.camera=x,t("camera",e.camera),x}function o(){var d;e.camera instanceof p.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(d=e.camera)==null||d.updateProjectionMatrix()}function l(d){var n;(n=e.cameras)==null||n.push(d),d instanceof p.PerspectiveCamera&&e.aspectRatio&&(d.aspect=e.aspectRatio.value),d.updateProjectionMatrix(),t("camera",d)}function w(){e.cameras=[]}return e.aspectRatio&&i.watch(e.aspectRatio,o),{activeCamera:i.toRef(e,"camera"),createCamera:r,updateCamera:o,pushCamera:l,clearCameras:w}}const ne="[TresJS ▲ ■ ●] ";function j(){function e(o,l){console.error(`${ne} ${o}`,l||"")}function t(o){console.warn(`${ne} ${o}`)}function r(o,l){}return{logError:e,logWarning:t,logMessage:r}}const k=i.ref({...ee,uuid:ee.MathUtils.generateUUID()});delete k.value.Scene;let B;function K(e,t="Tres"){const{logError:r}=j();!B&&e&&(B=e);const{createComponentInstances:o}=q(t);return{extend:w=>{if(!w){r("No objects provided to extend catalogue");return}k.value=Object.assign(k.value,w);const d=o(i.ref(w));B&&d.forEach(([n,a])=>{B._context.components[n]||B.component(n,a)})},catalogue:k}}const U=e=>typeof e<"u",ye=e=>typeof e=="function",F=e=>!!e&&e.constructor===Array;function Ce(e){return typeof e=="number"?[e,e,e]:e instanceof p.Vector3?[e.x,e.y,e.z]:e}function ve(e){return e instanceof p.Color?e:Array.isArray(e)?new p.Color(...e):new p.Color(e)}const re=["rotation","scale","position"],Se=["X","Y","Z"],Me=["color"],Le=["r","g","b"];function q(e){const{logError:t}=j();function r(n,a){U(n)&&U(a)&&Object.entries(n).forEach(([f,c])=>{const s=f.replace(/(-\w)/g,m=>m[1].toUpperCase());a.setAttribute(s,new p.BufferAttribute(...c))})}function o(n,a){U(n)&&U(a)&&Object.entries(n).forEach(([f,c])=>{const s=f.replace(/(-\w)/g,h=>h[1].toUpperCase());let m,y,M,g;if(!(s==="args"||c===void 0)){re.includes(s)&&c?c=Ce(c):re.forEach(h=>{s.startsWith(h)&&s.length===h.length+1&&(m=h,y=s.substring(h.length),Se.includes(y)||t(`There was an error setting ${f} property, ${y} is not a valid axis for ${m}`))}),Me.forEach(h=>{s.startsWith(h)&&s.length===h.length+1&&(M=h,g=s.substring(h.length).toLowerCase(),Le.includes(g)||t(`There was an error setting ${f} property , ${g} is not a valid axis for ${M}`))}),n.ref&&(n.ref=a);try{if(a[s]&&U(a[s].set))a[s].set(...F(c)?c:[c]);else if(m&&a[m])U(a[m][`set${y}`])?a[m][`set${y}`](c):U(a[`rotate${y}`])&&a[`rotate${y}`](c);else if(M&&g&&a[M]&&a[M][g])a[M][g]=c;else{if(c===""&&(c=!0),ye(a[s])){if(f==="center"&&!c)return;a[s](...F(c)?c:[c]);return}a[s]=c}}catch(h){t(`There was an error setting ${s} property`,h)}}})}function l(n){var s,m;const a=/^Symbol\(Fragment\)$/g,f=/^Symbol\(Text\)$/g,c=/^Symbol\(Comment\)$/g;if(a.test(n.type.toString()))return n.children.map(y=>l(y));if(f.test(n.type.toString())||c.test(n.type.toString()))return;{const y=n.type.name.replace(e,""),{catalogue:M}=K(),g=i.inject("catalogue")||M;let h;if(g)if((s=n.children)!=null&&s.default){const $=n.children.default().map(L=>l(L));h=new g.value[y](...$.flat().filter(Boolean))}else(m=n==null?void 0:n.props)!=null&&m.args?g!=null&&g.value[y]?h=new g.value[y](...n.props.args):t(`There is no ${y} in the catalogue`,g==null?void 0:g.value.uuid):h=new g.value[y];return n!=null&&n.props&&(y==="BufferGeometry"?r(n.props,h):o(n.props,h)),h}}function w(n,a,f){if(f.default&&(f!=null&&f.default())){const c=f.default().map(s=>l(s));if(n.name==="Group"){const s=new n;return c.forEach(m=>{s.add(m)}),s}else return new n(...c.flat().filter(Boolean))}else return a.args?new n(...a.args):new n}function d(n){return Object.entries(n.value).filter(([a,f])=>{var c,s;return(s=(c=f==null?void 0:f.prototype)==null?void 0:c.constructor)==null?void 0:s.toString().includes("class")}).map(([a,f])=>{const c=`${e}${a}`,s=i.defineComponent({name:c,setup(m,{slots:y,attrs:M,...g}){const{state:h}=O(),{onLoop:$}=N(),L=h.scene,W=h.raycaster,{pushCamera:Q}=G();let S=w(f,M,y);o(M,S),(S instanceof p.PerspectiveCamera||S instanceof p.OrthographicCamera)&&Q(S),S.isObject3D&&(L==null||L.add(S));let P=null,b=null;if(S instanceof p.Mesh){$(()=>{if(S&&W&&(L!=null&&L.children)){const _=W.intersectObjects(L==null?void 0:L.children);_.length>0?(b=_[0],(P===null||P.object.uuid!==(b==null?void 0:b.object.uuid))&&g.emit("pointer-enter",b),g.emit("pointer-move",b)):(b=null,P!==null&&g.emit("pointer-leave",P)),P=b}});const T=u.useEventListener(window,"click",()=>{g.emit("click",P)});i.onUnmounted(()=>{T()})}return L&&S instanceof p.Fog&&(L.fog=S),g.expose(S),()=>{}}});return[c,s]})}return{createComponentInstances:d,processProps:o,createInstanceFromVNode:l}}const ae=u.createEventHook(),oe=u.createEventHook(),X=u.createEventHook(),I=new p.Clock;let D=0,z=0;const{pause:be,resume:Pe,isActive:Ue}=u.useRafFn(()=>{ae.trigger({delta:D,elapsed:z,clock:I}),oe.trigger({delta:D,elapsed:z,clock:I}),X.trigger({delta:D,elapsed:z,clock:I})},{immediate:!1});X.on(()=>{D=I.getDelta(),z=I.getElapsedTime()});function N(){return{onBeforeLoop:ae.on,onLoop:oe.on,onAfterLoop:X.on,pause:be,resume:Pe,isActive:Ue}}const Oe=i.shallowRef(new p.Scene);function ie(){return{scene:Oe}}function se(e){const t={nodes:{},materials:{}};return e&&e.traverse(r=>{r.name&&(t.nodes[r.name]=r),r.material&&!t.materials[r.material.name]&&(t.materials[r.material.name]=r.material)}),t}async function xe(e,t,r,o,l){const{logError:w}=j(),d=new e;l&&l(d),r&&r(d);const a=(Array.isArray(t)?t:[t]).map(f=>new Promise((c,s)=>{d.load(f,m=>{m.scene&&Object.assign(m,se(m.scene)),c(m)},o,m=>s(w("[useLoader] - Failed to load resource",m)))}));return F(t)?await Promise.all(a):await a[0]}async function $e(e){const t=new p.LoadingManager,r=new p.TextureLoader(t),o=l=>new Promise((w,d)=>{r.load(l,n=>w(n),()=>null,()=>{d(new Error("[useTextures] - Failed to load texture"))})});if(F(e)){const l=await Promise.all(e.map(w=>o(w)));return e.length>1?l:l[0]}else{const{map:l,displacementMap:w,normalMap:d,roughnessMap:n,metalnessMap:a,aoMap:f}=e;return{map:l?await o(l):null,displacementMap:w?await o(w):null,normalMap:d?await o(d):null,roughnessMap:n?await o(n):null,metalnessMap:a?await o(a):null,aoMap:f?await o(f):null}}}const V=i.shallowReactive({camera:void 0,cameras:[],aspectRatio:i.computed(()=>window.innerWidth/window.innerHeight)});function O(){function e(r){return V[r]}function t(r,o){V[r]=o}return{state:V,...i.toRefs(V),getState:e,setState:t}}const Y=i.shallowRef(new p.Raycaster),R=i.ref(new p.Vector2),ce=i.ref(null);function le(){const{setState:e}=O();e("raycaster",Y.value),e("pointer",R),e("currentInstance",ce),i.provide("raycaster",Y),i.provide("pointer",R),i.provide("currentInstance",ce);function t(r){R.value.x=r.clientX/window.innerWidth*2-1,R.value.y=-(r.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",t),i.onUnmounted(()=>{window.removeEventListener("pointermove",t)}),{raycaster:Y,pointer:R}}const J={realistic:{outputEncoding:p.sRGBEncoding,toneMapping:p.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:p.PCFSoftShadowMap}}},fe=(e,t)=>{for(const r of Object.keys(t))t[r]instanceof Object&&Object.assign(t[r],fe(e[r],t[r]));return Object.assign(e||{},t),e},v=i.shallowRef(),Z=i.ref(!1);function ue(e,t,r){const{alpha:o=!0,antialias:l=!0,depth:w,logarithmicDepthBuffer:d,failIfMajorPerformanceCaveat:n,precision:a,premultipliedAlpha:f,stencil:c,shadows:s=!1,shadowMapType:m=p.PCFShadowMap,physicallyCorrectLights:y=!1,useLegacyLights:M=!1,outputEncoding:g=p.LinearEncoding,toneMapping:h=p.NoToneMapping,toneMappingExposure:$=1,context:L=void 0,powerPreference:W="default",preserveDrawingBuffer:Q=!1,clearColor:S,windowSize:P=!1,preset:b=void 0}=i.toRefs(r),{width:T,height:_}=u.resolveUnref(P)?u.useWindowSize():u.useElementSize(t),{logError:_e}=j(),{pixelRatio:de}=u.useDevicePixelRatio(),{pause:ke,resume:Fe}=N(),E=i.computed(()=>T.value/_.value),me=()=>{v.value&&(v.value.setSize(T.value,_.value),v.value.setPixelRatio(Math.min(de.value,2)))},ge=()=>{if(!v.value)return;const A=u.resolveUnref(b);if(A){A in J||_e("Renderer Preset must be one of these: "+Object.keys(J).join(", ")),fe(v.value,J[A]);return}v.value.shadowMap.enabled=u.resolveUnref(s),v.value.shadowMap.type=u.resolveUnref(m),v.value.toneMapping=u.resolveUnref(h)||p.NoToneMapping,v.value.toneMappingExposure=u.resolveUnref($),v.value.outputEncoding=u.resolveUnref(g)||p.LinearEncoding,S!=null&&S.value&&v.value.setClearColor(ve(u.resolveUnref(S))),v.value.useLegacyLights=u.resolveUnref(M)},De=()=>{const A=u.unrefElement(e);if(v.value||!A)return;v.value=new p.WebGLRenderer({canvas:A,alpha:u.resolveUnref(o),antialias:u.resolveUnref(l),context:u.resolveUnref(L),depth:u.resolveUnref(w),failIfMajorPerformanceCaveat:u.resolveUnref(n),logarithmicDepthBuffer:u.resolveUnref(d),powerPreference:u.resolveUnref(W),precision:u.resolveUnref(a),stencil:u.resolveUnref(c),preserveDrawingBuffer:u.resolveUnref(Q),premultipliedAlpha:u.resolveUnref(f)});const{setState:H}=O();H("renderer",v.value),H("clock",new p.Clock),H("aspectRatio",E),ge(),me(),Fe(),Z.value=!0},ze=()=>{v.value&&(v.value.dispose(),v.value=void 0,Z.value=!1,ke())};return i.watch([E,de],me),i.watch([s,m,g,M,h,$,S],ge),i.watch(()=>[e,t],()=>{u.unrefElement(e)&&u.unrefElement(t)&&De()},{immediate:!0,deep:!0}),{renderer:v,isReady:Z,dispose:ze,aspectRatio:E}}const{logError:pe,logWarning:Ae}=j(),je=i.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Number,physicallyCorrectLights:{type:Boolean,default:!1,validator:e=>(e&&Ae("physicallyCorrectLights is deprecated. Use useLegacyLights instead."),!0)},useLegacyLights:Boolean,outputEncoding:Number,toneMapping:Number,toneMappingExposure:Number,context:Object,powerPreference:String,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:{type:Boolean,default:!1},preset:String},setup(e,{slots:t,attrs:r}){const o=i.ref(),l=i.ref(),{renderer:w,dispose:d,aspectRatio:n}=ue(o,l,e);return i.provide("aspect-ratio",n),i.provide("renderer",w),t.default&&!t.default().some(a=>a.type.name==="Scene")&&pe("TresCanvas must contain a Scene component."),t.default&&!t.default().some(a=>{var f;return(f=a.type.name)==null?void 0:f.includes("Camera")})&&pe("Scene must contain a Camera component."),i.onBeforeUnmount(()=>d()),()=>{if(t.default)return i.h("div",{ref:l,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",pointerEvents:"auto",touchAction:"none",...r.style}},[i.h("div",{style:{width:"100%",height:"100%"}},[i.h("canvas",{ref:o,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}}),t.default()])])}}}),Be=i.defineComponent({name:"Scene",setup(e,{slots:t}){const{setState:r}=O(),{scene:o}=ie(),l=i.inject("renderer"),{activeCamera:w}=G(),{raycaster:d,pointer:n}=le(),{onLoop:a}=N();return i.provide("local-scene",o),r("scene",o.value),a(()=>{w.value&&(d.value.setFromCamera(n.value,w.value),l!=null&&l.value&&w&&(o!=null&&o.value)&&l.value.render(o==null?void 0:o.value,w.value))}),()=>{if(t.default)return t.default()}}}),Ie=Symbol("UseTresState"),Re={install(e,t){const r=(t==null?void 0:t.prefix)||"Tres";e.component(`${r}Canvas`,je),e.component(`${r}Scene`,Be);const{catalogue:o,extend:l}=K(e,r);e.provide("catalogue",o),e.provide("extend",l),e.provide("useTres",O());const{createComponentInstances:w}=q(r);w(o).forEach(([n,a])=>{e.component(n,a)})}};C.CameraType=te,C.UseTresStateSymbol=Ie,C.default=Re,C.trasverseObjects=se,C.useCamera=G,C.useCatalogue=K,C.useInstanceCreator=q,C.useLoader=xe,C.useRaycaster=le,C.useRenderLoop=N,C.useRenderer=ue,C.useScene=ie,C.useTexture=$e,C.useTres=O,Object.defineProperties(C,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tresjs/core",
|
|
3
3
|
"description": "Declarative ThreeJS using Vue Components",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.8.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
7
7
|
"files": [
|
|
@@ -42,25 +42,26 @@
|
|
|
42
42
|
"@vueuse/core": "^9.13.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@tresjs/cientos": "^1.
|
|
45
|
+
"@tresjs/cientos": "^1.8.0",
|
|
46
46
|
"@types/three": "latest",
|
|
47
47
|
"@vitejs/plugin-vue": "^4.0.0",
|
|
48
|
-
"@vitest/coverage-c8": "^0.28.
|
|
49
|
-
"@vitest/ui": "^0.28.
|
|
50
|
-
"
|
|
51
|
-
"happy-dom": "^8.
|
|
48
|
+
"@vitest/coverage-c8": "^0.28.5",
|
|
49
|
+
"@vitest/ui": "^0.28.5",
|
|
50
|
+
"@vue/test-utils": "^2.3.0",
|
|
51
|
+
"happy-dom": "^8.7.1",
|
|
52
|
+
"jsdom": "^21.1.0",
|
|
52
53
|
"kolorist": "^1.7.0",
|
|
53
54
|
"pathe": "^1.1.0",
|
|
54
55
|
"rollup-plugin-analyzer": "^4.0.0",
|
|
55
56
|
"rollup-plugin-visualizer": "^5.9.0",
|
|
56
57
|
"three": "latest",
|
|
57
|
-
"vite": "^4.1.
|
|
58
|
+
"vite": "^4.1.4",
|
|
58
59
|
"vite-plugin-banner": "^0.7.0",
|
|
59
60
|
"vite-plugin-dts": "2.0.0-beta.1",
|
|
60
61
|
"vite-plugin-glsl": "^1.1.2",
|
|
61
62
|
"vite-plugin-inspect": "^0.7.15",
|
|
62
63
|
"vite-plugin-require-transform": "^1.0.9",
|
|
63
|
-
"vitest": "^0.28.
|
|
64
|
+
"vitest": "^0.28.5",
|
|
64
65
|
"vue-demi": "^0.13.11"
|
|
65
66
|
},
|
|
66
67
|
"scripts": {
|