@tresjs/core 1.6.0 → 1.6.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.
|
@@ -4,8 +4,8 @@ export declare enum CameraType {
|
|
|
4
4
|
Perspective = "Perspective",
|
|
5
5
|
Orthographic = "Orthographic"
|
|
6
6
|
}
|
|
7
|
-
export
|
|
8
|
-
export
|
|
7
|
+
export type Camera = PerspectiveCamera | OrthographicCamera;
|
|
8
|
+
export type CameraState = {
|
|
9
9
|
cameras: Array<Camera>;
|
|
10
10
|
};
|
|
11
11
|
export interface PerspectiveCameraOptions {
|
|
@@ -2,12 +2,12 @@ import { Object3D } from 'three';
|
|
|
2
2
|
export interface TresLoader<T> extends THREE.Loader {
|
|
3
3
|
load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): unknown;
|
|
4
4
|
}
|
|
5
|
-
export
|
|
6
|
-
export
|
|
5
|
+
export type LoaderProto<T> = new (...args: any) => TresLoader<T extends unknown ? any : T>;
|
|
6
|
+
export type LoaderReturnType<T, L extends LoaderProto<T>> = T extends unknown ? Awaited<ReturnType<InstanceType<L>['loadAsync']>> : T;
|
|
7
7
|
export declare function trasverseObjects(object: Object3D): {
|
|
8
8
|
[key: string]: any;
|
|
9
9
|
};
|
|
10
|
-
export
|
|
10
|
+
export type Extensions<T extends {
|
|
11
11
|
prototype: LoaderProto<any>;
|
|
12
12
|
}> = (loader: T['prototype']) => void;
|
|
13
13
|
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>>;
|
|
@@ -83,4 +83,4 @@ export declare function useRenderer(canvas: MaybeElementRef, container: MaybeEle
|
|
|
83
83
|
dispose: () => void;
|
|
84
84
|
aspectRatio: import("vue").ComputedRef<number>;
|
|
85
85
|
};
|
|
86
|
-
export
|
|
86
|
+
export type UseRendererReturn = ReturnType<typeof useRenderer>;
|
package/dist/tres.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v1.6.
|
|
3
|
+
* version: v1.6.2
|
|
4
4
|
* (c) 2023
|
|
5
5
|
* description: Declarative ThreeJS using Vue Components
|
|
6
6
|
* author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
|
|
@@ -99,7 +99,10 @@ function Ge(e) {
|
|
|
99
99
|
}
|
|
100
100
|
const He = ["rotation", "scale", "position"];
|
|
101
101
|
function ve(e) {
|
|
102
|
-
const {
|
|
102
|
+
const {
|
|
103
|
+
/* logMessage, */
|
|
104
|
+
logError: n
|
|
105
|
+
} = G();
|
|
103
106
|
function r(t, i) {
|
|
104
107
|
O(t) && O(i) && Object.entries(t).forEach(([u, a]) => {
|
|
105
108
|
const c = u.replace(/(-\w)/g, (l) => l[1].toUpperCase());
|
|
@@ -431,7 +434,7 @@ const nt = X({
|
|
|
431
434
|
return n.default();
|
|
432
435
|
};
|
|
433
436
|
}
|
|
434
|
-
}), ut = Symbol("UseTresState"), rt = "1.6.
|
|
437
|
+
}), ut = Symbol("UseTresState"), rt = "1.6.2", lt = {
|
|
435
438
|
install(e, n) {
|
|
436
439
|
const r = (n == null ? void 0 : n.prefix) || "Tres";
|
|
437
440
|
e.component(`${r}Canvas`, Ze), e.component(`${r}Scene`, nt);
|
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v1.6.
|
|
3
|
+
* version: v1.6.2
|
|
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,m){"use strict";function ue(e){const n=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(n,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const Z=ue(m);var E=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(E||{});const j={cameras:[]},fe=45;let O;function G(){const e=o.inject("aspect-ratio"),{setState:n}=N();function r(d="Perspective",t){if(d==="Perspective"){const{near:s,far:u,fov:i}=t||{near:.1,far:1e3,fov:fe};O=new m.PerspectiveCamera(i,(e==null?void 0:e.value)||1,s,u),j.cameras.push(O)}else{const{left:s,right:u,top:i,bottom:l,near:p,far:U}=t||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};O=new m.OrthographicCamera(s,u,i,l,p,U),j.cameras.push(O)}return j.cameras.push(O),O}const a=o.computed(()=>j.cameras[0]);function c(){a.value instanceof m.PerspectiveCamera&&e&&(a.value.aspect=e.value),a.value.updateProjectionMatrix()}function g(d){const t=o.inject("camera");d&&t&&(t.value=d,n("camera",t.value)),j.cameras.push(d),d instanceof m.PerspectiveCamera&&e&&(d.aspect=e.value),d.updateProjectionMatrix()}return e&&o.watch(e,c),{activeCamera:a,createCamera:r,updateCamera:c,pushCamera:g}}const H="[TresJS ▲ ■ ●] ";function D(){function e(a,c){console.error(`${H} ${a}`,c||"")}function n(a){console.warn(`${H} ${a}`)}function r(a,c){}return{logError:e,logWarning:n,logMessage:r}}const $=o.ref({...Z,uuid:Z.MathUtils.generateUUID()});delete $.value.Scene;let _;function K(e,n="Tres"){const{logError:r}=D();!_&&e&&(_=e);const{createComponentInstances:a}=J(n);return{extend:g=>{if(!g){r("No objects provided to extend catalogue");return}$.value=Object.assign($.value,g);const d=a(o.ref(g));_&&d.forEach(([t,s])=>{_._context.components[t]||_.component(t,s)})},catalogue:$}}const A=e=>typeof e<"u",pe=e=>typeof e=="function",k=e=>!!e&&e.constructor===Array;function de(e){return typeof e=="number"?[e,e,e]:e instanceof m.Vector3?[e.x,e.y,e.z]:e}function me(e){return e instanceof m.Color?e:Array.isArray(e)?new m.Color(...e):new m.Color(e)}const ge=["rotation","scale","position"];function J(e){const{logError:n}=D();function r(t,s){A(t)&&A(s)&&Object.entries(t).forEach(([u,i])=>{const l=u.replace(/(-\w)/g,p=>p[1].toUpperCase());s.setAttribute(l,new m.BufferAttribute(...i))})}function a(t,s){A(t)&&A(s)&&Object.entries(t).forEach(([u,i])=>{const l=u.replace(/(-\w)/g,p=>p[1].toUpperCase());if(!(l==="args"||i===void 0)){ge.includes(l)&&i&&(i=de(i)),t.ref&&(t.ref=s);try{if(s[l]&&A(s[l].set))s[l].set(...k(i)?i:[i]);else{if(i===""&&(i=!0),pe(s[l])){if(u==="center"&&!i)return;s[l](...k(i)?i:[i]);return}s[l]=i}}catch(p){n(`There was an error setting ${l} property`,p)}}})}function c(t){var i,l;const s=/^Symbol\(Fragment\)$/g,u=/^Symbol\(Text\)$/g;if(s.test(t.type.toString()))return t.children.map(p=>c(p));if(u.test(t.type.toString()))return;{const p=t.type.name.replace(e,""),{catalogue:U}=K(),v=o.inject("catalogue")||U;let y;if(v)if((i=t.children)!=null&&i.default){const x=t.children.default().map(I=>c(I));y=new v.value[p](...x.flat().filter(Boolean))}else(l=t==null?void 0:t.props)!=null&&l.args?v!=null&&v.value[p]?y=new v.value[p](...t.props.args):n(`There is no ${p} in the catalogue`,v==null?void 0:v.value.uuid):y=new v.value[p];return t!=null&&t.props&&(p==="BufferGeometry"?r(t.props,y):a(t.props,y)),y}}function g(t,s,u){if(u.default&&(u!=null&&u.default())){const i=u.default().map(l=>c(l));if(t.name==="Group"){const l=new t;return i.forEach(p=>{l.add(p)}),l}else return new t(...i.flat().filter(Boolean))}else return s.args?new t(...s.args):new t}function d(t){return Object.entries(t.value).filter(([s,u])=>{var i,l;return(l=(i=u==null?void 0:u.prototype)==null?void 0:i.constructor)==null?void 0:l.toString().includes("class")}).map(([s,u])=>{const i=`${e}${s}`,l=o.defineComponent({name:i,setup(p,{slots:U,attrs:v,...y}){const{scene:x}=Y(),{onLoop:I}=T(),M=o.inject("local-scene")||x,L=o.inject("raycaster"),{pushCamera:b}=G();let C=g(u,v,U);a(v,C),(C instanceof m.PerspectiveCamera||C instanceof m.OrthographicCamera)&&b(C),C.isObject3D&&(M==null||M.value.add(C));let P=null,S=null;if(C.isMesh){I(()=>{if(C&&(L!=null&&L.value)){const q=L==null?void 0:L.value.intersectObjects(M.value.children);q.length>0?(S=q[0],(P===null||P.object.uuid!==(S==null?void 0:S.object.uuid))&&y.emit("pointer-enter",S),y.emit("pointer-move",S)):(S=null,P!==null&&y.emit("pointer-leave",P)),P=S}});const W=f.useEventListener(window,"click",()=>{y.emit("click",P)});o.onUnmounted(()=>{W()})}return M!=null&&M.value&&C.isFog&&(M.value.fog=C),y.expose(C),()=>{}}});return[i,l]})}return{createComponentInstances:d,processProps:a,createInstanceFromVNode:c}}const ee=f.createEventHook(),te=f.createEventHook(),X=f.createEventHook(),B=new m.Clock;let F=0,z=0;const{pause:he,resume:we,isActive:ve}=f.useRafFn(()=>{ee.trigger({delta:F,elapsed:z,clock:B}),te.trigger({delta:F,elapsed:z,clock:B}),X.trigger({delta:F,elapsed:z,clock:B})},{immediate:!1});X.on(()=>{F=B.getDelta(),z=B.getElapsedTime()});function T(){return{onBeforeLoop:ee.on,onLoop:te.on,onAfterLoop:X.on,pause:he,resume:we,isActive:ve}}const ye=o.shallowRef(new m.Scene);function Y(){return{scene:ye}}function ne(e){const n={nodes:{},materials:{}};return e&&e.traverse(r=>{r.name&&(n.nodes[r.name]=r),r.material&&!n.materials[r.material.name]&&(n.materials[r.material.name]=r.material)}),n}async function Ce(e,n,r,a,c){const{logError:g}=D(),d=new e;c&&c(d),r&&r(d);const s=(Array.isArray(n)?n:[n]).map(u=>new Promise((i,l)=>{d.load(u,p=>{p.scene&&Object.assign(p,ne(p.scene)),i(p)},a,p=>l(g("[useLoader] - Failed to load resource",p)))}));return k(n)?await Promise.all(s):await s[0]}async function Se(e){const n=new m.LoadingManager,r=new m.TextureLoader(n),a=c=>new Promise((g,d)=>{r.load(c,t=>g(t),()=>null,()=>{d(new Error("[useTextures] - Failed to load texture"))})});if(k(e)){const c=await Promise.all(e.map(g=>a(g)));return e.length>1?c:c[0]}else{const{map:c,displacementMap:g,normalMap:d,roughnessMap:t,metalnessMap:s,aoMap:u}=e;return{map:c?await a(c):null,displacementMap:g?await a(g):null,normalMap:d?await a(d):null,roughnessMap:t?await a(t):null,metalnessMap:s?await a(s):null,aoMap:u?await a(u):null}}}const V=o.shallowReactive({});function N(){function e(r){return V[r]}function n(r,a){V[r]=a}return{state:V,...o.toRefs(V),getState:e,setState:n}}const w=o.shallowRef(),Q=o.ref(!1);function re(e,n,r){const{alpha:a=!0,antialias:c=!0,depth:g,logarithmicDepthBuffer:d,failIfMajorPerformanceCaveat:t,precision:s,premultipliedAlpha:u,stencil:i,shadows:l=!1,shadowMapType:p=m.PCFShadowMap,physicallyCorrectLights:U=!1,outputEncoding:v=m.LinearEncoding,toneMapping:y=m.NoToneMapping,toneMappingExposure:x=1,context:I=void 0,powerPreference:M="default",preserveDrawingBuffer:L=!1,clearColor:b,windowSize:C=!1}=o.toRefs(r),{width:P,height:S}=f.resolveUnref(C)?f.useWindowSize():f.useElementSize(n),{pixelRatio:W}=f.useDevicePixelRatio(),{pause:q,resume:je}=T(),ae=o.computed(()=>P.value/S.value),ie=()=>{w.value&&(w.value.setSize(P.value,S.value),w.value.setPixelRatio(Math.min(W.value,2)))},se=()=>{w.value&&(w.value.shadowMap.enabled=f.resolveUnref(l),w.value.shadowMap.type=f.resolveUnref(p),w.value.toneMapping=f.resolveUnref(y)||m.NoToneMapping,w.value.toneMappingExposure=f.resolveUnref(x),w.value.outputEncoding=f.resolveUnref(v)||m.LinearEncoding,b!=null&&b.value&&w.value.setClearColor(me(f.resolveUnref(b))),w.value.physicallyCorrectLights=f.resolveUnref(U))},_e=()=>{const ce=f.unrefElement(e);if(w.value||!ce)return;w.value=new m.WebGLRenderer({canvas:ce,alpha:f.resolveUnref(a),antialias:f.resolveUnref(c),context:f.resolveUnref(I),depth:f.resolveUnref(g),failIfMajorPerformanceCaveat:f.resolveUnref(t),logarithmicDepthBuffer:f.resolveUnref(d),powerPreference:f.resolveUnref(M),precision:f.resolveUnref(s),stencil:f.resolveUnref(i),preserveDrawingBuffer:f.resolveUnref(L),premultipliedAlpha:f.resolveUnref(u)});const{setState:le}=N();le("renderer",w.value),le("clock",new m.Clock),se(),ie(),je(),Q.value=!0},Ae=()=>{w.value&&(w.value.dispose(),w.value=void 0,Q.value=!1,q())};return o.watch([ae,W],ie),o.watch([l,p,v,U,y,x,b],se),o.watch(()=>[e,n],()=>{f.unrefElement(e)&&f.unrefElement(n)&&_e()},{immediate:!0,deep:!0}),{renderer:w,isReady:Q,dispose:Ae,aspectRatio:ae}}const Me=o.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Object,physicallyCorrectLights:Boolean,outputEncoding:Object,toneMapping:Object,toneMappingExposure:Number,context:Object,powerPreference:Object,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:{type:Boolean,default:!1}},setup(e,{slots:n,attrs:r}){const{logError:a}=D(),c=o.ref(),g=o.ref(),{renderer:d,dispose:t,aspectRatio:s}=re(c,g,e);o.provide("aspect-ratio",s),o.provide("renderer",d);const u=o.shallowRef();return o.provide("camera",u),n.default&&!n.default().some(i=>i.type.name==="Scene")&&a("TresCanvas must contain a Scene component."),n.default&&!n.default().some(i=>{var l;return(l=i.type.name)==null?void 0:l.includes("Camera")})&&a("Scene must contain a Camera component."),o.onBeforeUnmount(()=>t()),()=>{if(n.default)return o.h("div",{ref:g,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}}),n.default()])}}}),oe=o.shallowRef(new m.Raycaster),R=o.ref(new m.Vector2),Pe=o.ref(null);function Ue(){o.provide("raycaster",oe),o.provide("pointer",R),o.provide("currentInstance",Pe);function e(n){R.value.x=n.clientX/window.innerWidth*2-1,R.value.y=-(n.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",e),o.onUnmounted(()=>{window.removeEventListener("pointermove",e)}),{raycaster:oe,pointer:R}}const Le=o.defineComponent({name:"Scene",setup(e,{slots:n}){const{scene:r}=Y(),a=o.inject("renderer"),{activeCamera:c}=G(),{raycaster:g,pointer:d}=Ue(),{onLoop:t}=T();return o.provide("local-scene",r),t(()=>{g.value.setFromCamera(d.value,c.value),a!=null&&a.value&&(c!=null&&c.value)&&(r!=null&&r.value)&&a.value.render(r==null?void 0:r.value,c.value)}),()=>{if(n.default)return n.default()}}}),be=Symbol("UseTresState"),Oe="1.6.0",xe={install(e,n){const r=(n==null?void 0:n.prefix)||"Tres";e.component(`${r}Canvas`,Me),e.component(`${r}Scene`,Le);const{catalogue:a,extend:c}=K(e,r);e.provide("catalogue",a),e.provide("extend",c),e.provide("useTres",N());const{createComponentInstances:g}=J(r);g(a).forEach(([t,s])=>{e.component(t,s)}),window.__TRES__={app:e,version:Oe}}};h.CameraType=E,h.UseTresStateSymbol=be,h.default=xe,h.trasverseObjects=ne,h.useCamera=G,h.useCatalogue=K,h.useInstanceCreator=J,h.useLoader=Ce,h.useRenderLoop=T,h.useRenderer=re,h.useScene=Y,h.useTexture=Se,h.useTres=N,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
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,m){"use strict";function ue(e){const n=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(n,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const Z=ue(m);var E=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(E||{});const j={cameras:[]},fe=45;let O;function G(){const e=o.inject("aspect-ratio"),{setState:n}=N();function r(d="Perspective",t){if(d==="Perspective"){const{near:s,far:u,fov:i}=t||{near:.1,far:1e3,fov:fe};O=new m.PerspectiveCamera(i,(e==null?void 0:e.value)||1,s,u),j.cameras.push(O)}else{const{left:s,right:u,top:i,bottom:l,near:p,far:U}=t||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};O=new m.OrthographicCamera(s,u,i,l,p,U),j.cameras.push(O)}return j.cameras.push(O),O}const a=o.computed(()=>j.cameras[0]);function c(){a.value instanceof m.PerspectiveCamera&&e&&(a.value.aspect=e.value),a.value.updateProjectionMatrix()}function g(d){const t=o.inject("camera");d&&t&&(t.value=d,n("camera",t.value)),j.cameras.push(d),d instanceof m.PerspectiveCamera&&e&&(d.aspect=e.value),d.updateProjectionMatrix()}return e&&o.watch(e,c),{activeCamera:a,createCamera:r,updateCamera:c,pushCamera:g}}const H="[TresJS ▲ ■ ●] ";function D(){function e(a,c){console.error(`${H} ${a}`,c||"")}function n(a){console.warn(`${H} ${a}`)}function r(a,c){}return{logError:e,logWarning:n,logMessage:r}}const $=o.ref({...Z,uuid:Z.MathUtils.generateUUID()});delete $.value.Scene;let _;function K(e,n="Tres"){const{logError:r}=D();!_&&e&&(_=e);const{createComponentInstances:a}=J(n);return{extend:g=>{if(!g){r("No objects provided to extend catalogue");return}$.value=Object.assign($.value,g);const d=a(o.ref(g));_&&d.forEach(([t,s])=>{_._context.components[t]||_.component(t,s)})},catalogue:$}}const A=e=>typeof e<"u",pe=e=>typeof e=="function",k=e=>!!e&&e.constructor===Array;function de(e){return typeof e=="number"?[e,e,e]:e instanceof m.Vector3?[e.x,e.y,e.z]:e}function me(e){return e instanceof m.Color?e:Array.isArray(e)?new m.Color(...e):new m.Color(e)}const ge=["rotation","scale","position"];function J(e){const{logError:n}=D();function r(t,s){A(t)&&A(s)&&Object.entries(t).forEach(([u,i])=>{const l=u.replace(/(-\w)/g,p=>p[1].toUpperCase());s.setAttribute(l,new m.BufferAttribute(...i))})}function a(t,s){A(t)&&A(s)&&Object.entries(t).forEach(([u,i])=>{const l=u.replace(/(-\w)/g,p=>p[1].toUpperCase());if(!(l==="args"||i===void 0)){ge.includes(l)&&i&&(i=de(i)),t.ref&&(t.ref=s);try{if(s[l]&&A(s[l].set))s[l].set(...k(i)?i:[i]);else{if(i===""&&(i=!0),pe(s[l])){if(u==="center"&&!i)return;s[l](...k(i)?i:[i]);return}s[l]=i}}catch(p){n(`There was an error setting ${l} property`,p)}}})}function c(t){var i,l;const s=/^Symbol\(Fragment\)$/g,u=/^Symbol\(Text\)$/g;if(s.test(t.type.toString()))return t.children.map(p=>c(p));if(u.test(t.type.toString()))return;{const p=t.type.name.replace(e,""),{catalogue:U}=K(),v=o.inject("catalogue")||U;let y;if(v)if((i=t.children)!=null&&i.default){const x=t.children.default().map(I=>c(I));y=new v.value[p](...x.flat().filter(Boolean))}else(l=t==null?void 0:t.props)!=null&&l.args?v!=null&&v.value[p]?y=new v.value[p](...t.props.args):n(`There is no ${p} in the catalogue`,v==null?void 0:v.value.uuid):y=new v.value[p];return t!=null&&t.props&&(p==="BufferGeometry"?r(t.props,y):a(t.props,y)),y}}function g(t,s,u){if(u.default&&(u!=null&&u.default())){const i=u.default().map(l=>c(l));if(t.name==="Group"){const l=new t;return i.forEach(p=>{l.add(p)}),l}else return new t(...i.flat().filter(Boolean))}else return s.args?new t(...s.args):new t}function d(t){return Object.entries(t.value).filter(([s,u])=>{var i,l;return(l=(i=u==null?void 0:u.prototype)==null?void 0:i.constructor)==null?void 0:l.toString().includes("class")}).map(([s,u])=>{const i=`${e}${s}`,l=o.defineComponent({name:i,setup(p,{slots:U,attrs:v,...y}){const{scene:x}=Y(),{onLoop:I}=T(),M=o.inject("local-scene")||x,L=o.inject("raycaster"),{pushCamera:b}=G();let C=g(u,v,U);a(v,C),(C instanceof m.PerspectiveCamera||C instanceof m.OrthographicCamera)&&b(C),C.isObject3D&&(M==null||M.value.add(C));let P=null,S=null;if(C.isMesh){I(()=>{if(C&&(L!=null&&L.value)){const q=L==null?void 0:L.value.intersectObjects(M.value.children);q.length>0?(S=q[0],(P===null||P.object.uuid!==(S==null?void 0:S.object.uuid))&&y.emit("pointer-enter",S),y.emit("pointer-move",S)):(S=null,P!==null&&y.emit("pointer-leave",P)),P=S}});const W=f.useEventListener(window,"click",()=>{y.emit("click",P)});o.onUnmounted(()=>{W()})}return M!=null&&M.value&&C.isFog&&(M.value.fog=C),y.expose(C),()=>{}}});return[i,l]})}return{createComponentInstances:d,processProps:a,createInstanceFromVNode:c}}const ee=f.createEventHook(),te=f.createEventHook(),X=f.createEventHook(),B=new m.Clock;let F=0,z=0;const{pause:he,resume:we,isActive:ve}=f.useRafFn(()=>{ee.trigger({delta:F,elapsed:z,clock:B}),te.trigger({delta:F,elapsed:z,clock:B}),X.trigger({delta:F,elapsed:z,clock:B})},{immediate:!1});X.on(()=>{F=B.getDelta(),z=B.getElapsedTime()});function T(){return{onBeforeLoop:ee.on,onLoop:te.on,onAfterLoop:X.on,pause:he,resume:we,isActive:ve}}const ye=o.shallowRef(new m.Scene);function Y(){return{scene:ye}}function ne(e){const n={nodes:{},materials:{}};return e&&e.traverse(r=>{r.name&&(n.nodes[r.name]=r),r.material&&!n.materials[r.material.name]&&(n.materials[r.material.name]=r.material)}),n}async function Ce(e,n,r,a,c){const{logError:g}=D(),d=new e;c&&c(d),r&&r(d);const s=(Array.isArray(n)?n:[n]).map(u=>new Promise((i,l)=>{d.load(u,p=>{p.scene&&Object.assign(p,ne(p.scene)),i(p)},a,p=>l(g("[useLoader] - Failed to load resource",p)))}));return k(n)?await Promise.all(s):await s[0]}async function Se(e){const n=new m.LoadingManager,r=new m.TextureLoader(n),a=c=>new Promise((g,d)=>{r.load(c,t=>g(t),()=>null,()=>{d(new Error("[useTextures] - Failed to load texture"))})});if(k(e)){const c=await Promise.all(e.map(g=>a(g)));return e.length>1?c:c[0]}else{const{map:c,displacementMap:g,normalMap:d,roughnessMap:t,metalnessMap:s,aoMap:u}=e;return{map:c?await a(c):null,displacementMap:g?await a(g):null,normalMap:d?await a(d):null,roughnessMap:t?await a(t):null,metalnessMap:s?await a(s):null,aoMap:u?await a(u):null}}}const V=o.shallowReactive({});function N(){function e(r){return V[r]}function n(r,a){V[r]=a}return{state:V,...o.toRefs(V),getState:e,setState:n}}const w=o.shallowRef(),Q=o.ref(!1);function re(e,n,r){const{alpha:a=!0,antialias:c=!0,depth:g,logarithmicDepthBuffer:d,failIfMajorPerformanceCaveat:t,precision:s,premultipliedAlpha:u,stencil:i,shadows:l=!1,shadowMapType:p=m.PCFShadowMap,physicallyCorrectLights:U=!1,outputEncoding:v=m.LinearEncoding,toneMapping:y=m.NoToneMapping,toneMappingExposure:x=1,context:I=void 0,powerPreference:M="default",preserveDrawingBuffer:L=!1,clearColor:b,windowSize:C=!1}=o.toRefs(r),{width:P,height:S}=f.resolveUnref(C)?f.useWindowSize():f.useElementSize(n),{pixelRatio:W}=f.useDevicePixelRatio(),{pause:q,resume:je}=T(),ae=o.computed(()=>P.value/S.value),ie=()=>{w.value&&(w.value.setSize(P.value,S.value),w.value.setPixelRatio(Math.min(W.value,2)))},se=()=>{w.value&&(w.value.shadowMap.enabled=f.resolveUnref(l),w.value.shadowMap.type=f.resolveUnref(p),w.value.toneMapping=f.resolveUnref(y)||m.NoToneMapping,w.value.toneMappingExposure=f.resolveUnref(x),w.value.outputEncoding=f.resolveUnref(v)||m.LinearEncoding,b!=null&&b.value&&w.value.setClearColor(me(f.resolveUnref(b))),w.value.physicallyCorrectLights=f.resolveUnref(U))},_e=()=>{const ce=f.unrefElement(e);if(w.value||!ce)return;w.value=new m.WebGLRenderer({canvas:ce,alpha:f.resolveUnref(a),antialias:f.resolveUnref(c),context:f.resolveUnref(I),depth:f.resolveUnref(g),failIfMajorPerformanceCaveat:f.resolveUnref(t),logarithmicDepthBuffer:f.resolveUnref(d),powerPreference:f.resolveUnref(M),precision:f.resolveUnref(s),stencil:f.resolveUnref(i),preserveDrawingBuffer:f.resolveUnref(L),premultipliedAlpha:f.resolveUnref(u)});const{setState:le}=N();le("renderer",w.value),le("clock",new m.Clock),se(),ie(),je(),Q.value=!0},Ae=()=>{w.value&&(w.value.dispose(),w.value=void 0,Q.value=!1,q())};return o.watch([ae,W],ie),o.watch([l,p,v,U,y,x,b],se),o.watch(()=>[e,n],()=>{f.unrefElement(e)&&f.unrefElement(n)&&_e()},{immediate:!0,deep:!0}),{renderer:w,isReady:Q,dispose:Ae,aspectRatio:ae}}const Me=o.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Object,physicallyCorrectLights:Boolean,outputEncoding:Object,toneMapping:Object,toneMappingExposure:Number,context:Object,powerPreference:Object,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:{type:Boolean,default:!1}},setup(e,{slots:n,attrs:r}){const{logError:a}=D(),c=o.ref(),g=o.ref(),{renderer:d,dispose:t,aspectRatio:s}=re(c,g,e);o.provide("aspect-ratio",s),o.provide("renderer",d);const u=o.shallowRef();return o.provide("camera",u),n.default&&!n.default().some(i=>i.type.name==="Scene")&&a("TresCanvas must contain a Scene component."),n.default&&!n.default().some(i=>{var l;return(l=i.type.name)==null?void 0:l.includes("Camera")})&&a("Scene must contain a Camera component."),o.onBeforeUnmount(()=>t()),()=>{if(n.default)return o.h("div",{ref:g,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}}),n.default()])}}}),oe=o.shallowRef(new m.Raycaster),R=o.ref(new m.Vector2),Pe=o.ref(null);function Ue(){o.provide("raycaster",oe),o.provide("pointer",R),o.provide("currentInstance",Pe);function e(n){R.value.x=n.clientX/window.innerWidth*2-1,R.value.y=-(n.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",e),o.onUnmounted(()=>{window.removeEventListener("pointermove",e)}),{raycaster:oe,pointer:R}}const Le=o.defineComponent({name:"Scene",setup(e,{slots:n}){const{scene:r}=Y(),a=o.inject("renderer"),{activeCamera:c}=G(),{raycaster:g,pointer:d}=Ue(),{onLoop:t}=T();return o.provide("local-scene",r),t(()=>{g.value.setFromCamera(d.value,c.value),a!=null&&a.value&&(c!=null&&c.value)&&(r!=null&&r.value)&&a.value.render(r==null?void 0:r.value,c.value)}),()=>{if(n.default)return n.default()}}}),be=Symbol("UseTresState"),Oe="1.6.2",xe={install(e,n){const r=(n==null?void 0:n.prefix)||"Tres";e.component(`${r}Canvas`,Me),e.component(`${r}Scene`,Le);const{catalogue:a,extend:c}=K(e,r);e.provide("catalogue",a),e.provide("extend",c),e.provide("useTres",N());const{createComponentInstances:g}=J(r);g(a).forEach(([t,s])=>{e.component(t,s)}),window.__TRES__={app:e,version:Oe}}};h.CameraType=E,h.UseTresStateSymbol=be,h.default=xe,h.trasverseObjects=ne,h.useCamera=G,h.useCatalogue=K,h.useInstanceCreator=J,h.useLoader=Ce,h.useRenderLoop=T,h.useRenderer=re,h.useScene=Y,h.useTexture=Se,h.useTres=N,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Vector3, Color } from 'three';
|
|
2
|
-
export
|
|
2
|
+
export type SizeFlexibleParams = number[] | {
|
|
3
3
|
width: number;
|
|
4
4
|
height: number;
|
|
5
5
|
};
|
|
@@ -12,6 +12,6 @@ export interface Vector2PropInterface {
|
|
|
12
12
|
export interface Vector3PropInterface extends Vector2PropInterface {
|
|
13
13
|
z?: number;
|
|
14
14
|
}
|
|
15
|
-
export
|
|
15
|
+
export type VectorFlexibleParams = Vector3 | number[] | Vector3PropInterface | number;
|
|
16
16
|
export declare function normalizeVectorFlexibleParam(value: VectorFlexibleParams): Array<number>;
|
|
17
17
|
export declare function normalizeColor(value: Color | Array<number> | string | number): Color;
|
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.6.
|
|
4
|
+
"version": "1.6.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
7
7
|
"files": [
|
|
@@ -29,35 +29,32 @@
|
|
|
29
29
|
"three",
|
|
30
30
|
"threejs-vue"
|
|
31
31
|
],
|
|
32
|
-
"dependencies": {
|
|
33
|
-
"three": "^0.148.0",
|
|
34
|
-
"vue": "^3.2.45"
|
|
35
|
-
},
|
|
36
32
|
"peerDependencies": {
|
|
37
|
-
"
|
|
33
|
+
"vue": "^3.2.47",
|
|
34
|
+
"three": "latest",
|
|
35
|
+
"@vueuse/core": "^9.12.0"
|
|
38
36
|
},
|
|
39
37
|
"devDependencies": {
|
|
40
38
|
"@alvarosabu/utils": "^2.2.0",
|
|
41
39
|
"@tresjs/cientos": "^1.6.0",
|
|
42
|
-
"@types/three": "
|
|
40
|
+
"@types/three": "latest",
|
|
43
41
|
"@vitejs/plugin-vue": "^4.0.0",
|
|
44
|
-
"@vitest/coverage-c8": "^0.
|
|
45
|
-
"@vitest/ui": "^0.
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"release-it": "^15.5.1",
|
|
42
|
+
"@vitest/coverage-c8": "^0.28.4",
|
|
43
|
+
"@vitest/ui": "^0.28.4",
|
|
44
|
+
"gl": "6.0.2",
|
|
45
|
+
"happy-dom": "^8.2.6",
|
|
46
|
+
"kolorist": "^1.7.0",
|
|
47
|
+
"pathe": "^1.1.0",
|
|
48
|
+
"release-it": "^15.6.0",
|
|
52
49
|
"rollup-plugin-analyzer": "^4.0.0",
|
|
53
|
-
"rollup-plugin-visualizer": "^5.
|
|
54
|
-
"unplugin-vue-components": "^0.
|
|
55
|
-
"vite": "^4.
|
|
50
|
+
"rollup-plugin-visualizer": "^5.9.0",
|
|
51
|
+
"unplugin-vue-components": "^0.23.0",
|
|
52
|
+
"vite": "^4.1.1",
|
|
56
53
|
"vite-plugin-banner": "^0.7.0",
|
|
57
|
-
"vite-plugin-dts": "^1.7.
|
|
58
|
-
"vite-plugin-glsl": "^1.1.
|
|
59
|
-
"vite-plugin-require-transform": "^1.0.
|
|
60
|
-
"vitest": "^0.
|
|
54
|
+
"vite-plugin-dts": "^1.7.2",
|
|
55
|
+
"vite-plugin-glsl": "^1.1.2",
|
|
56
|
+
"vite-plugin-require-transform": "^1.0.9",
|
|
57
|
+
"vitest": "^0.28.4",
|
|
61
58
|
"vue-demi": "^0.13.11"
|
|
62
59
|
},
|
|
63
60
|
"scripts": {
|