@tresjs/core 0.4.0 → 1.0.0

package/dist/tres.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/core
- * version: v0.4.0
+ * version: v1.0.0
  * (c) 2022
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(u,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("@vueuse/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","three"],a):(u=typeof globalThis<"u"?globalThis:u||self,a(u.tres={},u.Vue,u.VueUseCore,u.Three))})(this,function(u,a,p,f){"use strict";function H(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const t=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,t.get?t:{enumerable:!0,get:()=>e[o]})}}return n.default=e,Object.freeze(n)}const ee=H(f);var F=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(F||{});const O={cameras:[]},ne=45;let b;function z(){const{width:e,height:n}=p.useWindowSize();function o(i="Perspective",c){if(i==="Perspective"){const{near:g,far:C,fov:w}=c||{near:.1,far:1e3,fov:ne};b=new f.PerspectiveCamera(w,t.value,g,C),O.cameras.push(b)}else{const{left:g,right:C,top:w,bottom:y,near:v,far:L}=c||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};b=new f.OrthographicCamera(g,C,w,y,v,L),O.cameras.push(b)}return O.cameras.push(b),b}const t=a.computed(()=>e.value/n.value),r=a.computed(()=>O.cameras[0]);function s(){r.value instanceof f.PerspectiveCamera&&(r.value.aspect=t.value),r.value.updateProjectionMatrix()}function m(i){const c=a.inject("camera");i&&c&&(c.value=i),O.cameras.push(i),i instanceof f.PerspectiveCamera&&(i.aspect=t.value),i.updateProjectionMatrix()}return a.watch(t,s),{activeCamera:r,createCamera:o,updateCamera:s,pushCamera:m}}let _={...ee};delete _.Scene;function R(){return{extend:n=>{_=Object.assign(_,n)},catalogue:_}}const te=e=>typeof e<"u",V=e=>!!e&&e.constructor===Array;function re(e){return typeof e=="number"?[e,e,e]:e instanceof f.Vector3?[e.x,e.y,e.z]:e}function $(e){return e instanceof f.Color?e:Array.isArray(e)?new f.Color(...e):new f.Color(e)}const W="[TresJS \u25B2 \u25A0 \u25CF] ";function q(){function e(t,r){console.error(`${W} ${t}`,r||"")}function n(t){console.warn(`${W} ${t}`)}function o(t,r){}return{logError:e,logWarning:n,logMessage:o}}const ae=["rotation","scale","position"];function N(){const{catalogue:e}=R(),{logMessage:n,logError:o}=q();function t(){return Object.entries(e).filter(([r,s])=>{var m,i;return(i=(m=s==null?void 0:s.prototype)==null?void 0:m.constructor)==null?void 0:i.toString().includes("class")}).map(([r,s])=>{const m=a.defineComponent({name:r,setup(i,{slots:c,attrs:g,...C}){n(r,{props:i,slots:c,attrs:g,ctx:C});let w;const{scene:y}=I(),{pushCamera:v}=z();function L(){if((c==null?void 0:c.default)&&(c==null?void 0:c.default())){const P=c.default().map(l=>{var h;let S;return(h=l==null?void 0:l.props)!=null&&h.args?S=new e[l.type.name](...l.props.args):S=new e[l.type.name],l!=null&&l.props&&j(l.props,S),S});w=new s(...P)}else g.args?w=new s(...g.args):w=new s;j(g,w),r==="PerspectiveCamera"||r==="OrtographicCamera"?v(w):y==null||y.value.add(w),n("Instance added",y),C.expose(w)}function j(P,l){Object.entries(P).forEach(([S,h])=>{const M=S.replace(/(-\w)/g,x=>x[1].toUpperCase());if(!(M==="args"||h===void 0)){ae.includes(S)&&h&&(h=re(h));try{l[M]&&te(l[M].set)?V(h)?l[M].set(...h):l[M].set(h):(h===""&&(h=!0),l[M]=h)}catch(x){o(`There was an error setting ${M} property`,x)}}}),P.ref&&(P.ref=l)}return L(),()=>{}}});return[r,m]})}return{createComponentInstances:t}}const k=p.createEventHook(),G=p.createEventHook(),J=p.createEventHook(),K=new f.Clock,{pause:oe,resume:se,isActive:ie}=p.useRafFn(()=>{const e=K.getElapsedTime(),n=K.getDelta();k.trigger({delta:n,elapsed:e}),G.trigger({delta:n,elapsed:e}),J.trigger({delta:n,elapsed:e})},{immediate:!1});function B(){return{onBeforeLoop:k.on,onLoop:G.on,onAfterLoop:J.on,pause:oe,resume:se,isActive:ie}}const ce=a.shallowRef(new f.Scene);function I(){return{scene:ce}}function ue(){const e=new f.LoadingManager,n=a.ref(e);return{loadingManager:e,loadingManagerRef:n}}async function le(e){const n=new f.LoadingManager,o=new f.TextureLoader(n),t=r=>new Promise((s,m)=>{o.load(r,i=>s(i),()=>null,()=>{m(new Error("[useTextures] - Failed to load texture"))})});if(V(e)){const r=await Promise.all(e.map(s=>t(s)));return e.length>1?r:r[0]}else{const{map:r,displacementMap:s,normalMap:m,roughnessMap:i,metalnessMap:c,aoMap:g}=e;return{map:r?await t(r):null,displacementMap:s?await t(s):null,normalMap:m?await t(m):null,roughnessMap:i?await t(i):null,metalnessMap:c?await t(c):null,aoMap:g?await t(g):null}}}const U=a.reactive({});function pe(){function e(o){return U[o]}function n(o,t){U[o]=t}return{state:U,...a.toRefs(U),getState:e,setState:n}}const d=a.shallowRef(),T=a.ref(!1);function Q(e,n,o){const{alpha:t=!1,antialias:r,depth:s,logarithmicDepthBuffer:m,failIfMajorPerformanceCaveat:i,precision:c,premultipliedAlpha:g,stencil:C,shadows:w=!1,shadowMapType:y=f.PCFShadowMap,physicallyCorrectLights:v=!1,outputEncoding:L=f.LinearEncoding,toneMapping:j=f.NoToneMapping,toneMappingExposure:P=1,context:l=void 0,powerPreference:S="default",preserveDrawingBuffer:h=!1,clearColor:M=$("#000000"),windowSize:x=!1}=o,{width:A,height:D}=x?p.useWindowSize():p.useElementSize(n),{pixelRatio:X}=p.useDevicePixelRatio(),{pause:he,resume:we}=B(),Ce=a.computed(()=>A.value/D.value),Y=()=>{!d.value||(d.value.setSize(A.value,D.value),d.value.setPixelRatio(X.value))},Z=()=>{!d.value||(d.value.shadowMap.enabled=p.resolveUnref(w),d.value.outputEncoding=p.resolveUnref(L),d.value.shadowMap.type=p.resolveUnref(y),d.value.physicallyCorrectLights=p.resolveUnref(v),d.value.toneMapping=p.resolveUnref(j),d.value.toneMappingExposure=p.resolveUnref(P),d.value.setClearColor($(p.resolveUnref(M))))},Me=()=>{const E=p.unrefElement(e);d.value||!E||(d.value=new f.WebGLRenderer({canvas:E,alpha:t,antialias:r,context:l,depth:s,failIfMajorPerformanceCaveat:i,logarithmicDepthBuffer:m,powerPreference:S,precision:c,stencil:C,preserveDrawingBuffer:h,premultipliedAlpha:g}),Z(),Y(),we(),T.value=!0)},ye=()=>{!d.value||(d.value.dispose(),d.value=void 0,T.value=!1,he())};return a.watch([A,D,X],Y),a.watch(()=>[w,y,L,v,j,P,M],Z),a.watch(()=>[e,n],()=>{p.unrefElement(e)&&p.unrefElement(n)&&Me()},{immediate:!0,deep:!0}),{renderer:d,isReady:T,dispose:ye,aspectRatio:Ce}}const fe=a.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:Boolean},setup(e,{slots:n,attrs:o}){const{logError:t}=q(),r=a.ref(),s=a.ref(),{renderer:m,dispose:i,aspectRatio:c}=Q(r,s,e),g=a.shallowRef();return a.provide("camera",g),a.provide("renderer",m),a.provide("aspect-ratio",c),n.default&&!n.default().some(C=>C.type.name==="Scene")&&t("TresCanvas must contain a Scene component."),n.default&&!n.default().some(C=>C.type.name==="PerspectiveCamera"||C.type.name==="OrtographicCamera")&&t("Scene must contain a Camera component."),a.onBeforeUnmount(()=>i()),()=>{if(n.default)return a.h("div",{ref:s,style:{position:"relative",width:"100%",height:"100vh",...o.style}},[a.h("canvas",{ref:r,style:{width:"100%",height:"100%",position:"absolute",top:0,left:0}}),n.default()])}}}),de=a.defineComponent({name:"Scene",setup(e,{slots:n}){const{scene:o}=I(),t=a.inject("renderer"),{activeCamera:r}=z(),{onLoop:s}=B();return a.provide("local-scene",o),s(()=>{(t==null?void 0:t.value)&&(r==null?void 0:r.value)&&(o==null?void 0:o.value)&&t.value.render(o==null?void 0:o.value,r.value)}),()=>{if(n.default)return n.default()}}}),me=Symbol("UseTresState"),ge={install(e){e.component("TresCanvas",fe),e.component("Scene",de);const{createComponentInstances:n}=N();n().forEach(([t,r])=>{e.component(t,r)})}};u.CameraType=F,u.UseTresStateSymbol=me,u.default=ge,u.useCamera=z,u.useCatalog=R,u.useInstanceCreator=N,u.useLoadingManager=ue,u.useRenderLoop=B,u.useRenderer=Q,u.useScene=I,u.useTexture=le,u.useTres=pe,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(u,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):(u=typeof globalThis<"u"?globalThis:u||self,o(u.tres={},u.Vue,u.VueUseCore,u.Three))})(this,function(u,o,p,g){"use strict";function te(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const ne=te(g);var V=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(V||{});const j={cameras:[]},re=45;let b;function z(){const{width:e,height:t}=p.useWindowSize(),{setState:n}=F();function r(c="Perspective",h){if(c==="Perspective"){const{near:f,far:w,fov:C}=h||{near:.1,far:1e3,fov:re};b=new g.PerspectiveCamera(C,a.value,f,w),j.cameras.push(b)}else{const{left:f,right:w,top:C,bottom:M,near:P,far:x}=h||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};b=new g.OrthographicCamera(f,w,C,M,P,x),j.cameras.push(b)}return j.cameras.push(b),b}const a=o.computed(()=>e.value/t.value),s=o.computed(()=>j.cameras[0]);function i(){s.value instanceof g.PerspectiveCamera&&(s.value.aspect=a.value),s.value.updateProjectionMatrix()}function l(c){const h=o.inject("camera");c&&h&&(h.value=c,n("camera",h.value)),j.cameras.push(c),c instanceof g.PerspectiveCamera&&(c.aspect=a.value),c.updateProjectionMatrix()}return o.watch(a,i),{activeCamera:s,createCamera:r,updateCamera:i,pushCamera:l}}let _={...ne};delete _.Scene;function k(){return{extend:t=>{_=Object.assign(_,t)},catalogue:_}}const ae=e=>typeof e<"u",B=e=>!!e&&e.constructor===Array;function oe(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function W(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}const N="[TresJS \u25B2 \u25A0 \u25CF] ";function I(){function e(r,a){console.error(`${N} ${r}`,a||"")}function t(r){console.warn(`${N} ${r}`)}function n(r,a){}return{logError:e,logWarning:t,logMessage:n}}const se=["rotation","scale","position"];function q(e){const{logMessage:t,logError:n}=I();function r(a){return Object.entries(a).filter(([s,i])=>{var l,c;return(c=(l=i==null?void 0:i.prototype)==null?void 0:l.constructor)==null?void 0:c.toString().includes("class")}).map(([s,i])=>{const l=`${e}${s}`,c=o.defineComponent({name:l,setup(h,{slots:f,attrs:w,...C}){t(l,{props:h,slots:f,attrs:w,ctx:C});let M;const{scene:P}=D(),{pushCamera:x}=z();function U(){if((f==null?void 0:f.default)&&(f==null?void 0:f.default())){const O=f.default().map(m=>{var S;let v;const y=m.type.name.replace(e,"");return(S=m==null?void 0:m.props)!=null&&S.args?v=new a[y](...m.props.args):v=new a[y],m!=null&&m.props&&A(m.props,v),v});M=new i(...O)}else w.args?M=new i(...w.args):M=new i;A(w,M),l.includes("Camera")&&x(M),M.isObject3D&&(P==null||P.value.add(M)),t("Instance added",P),C.expose(M)}function A(O,m){Object.entries(O).forEach(([v,y])=>{const S=v.replace(/(-\w)/g,L=>L[1].toUpperCase());if(!(S==="args"||y===void 0)){se.includes(v)&&y&&(y=oe(y));try{m[S]&&ae(m[S].set)?B(y)?m[S].set(...y):m[S].set(y):(y===""&&(y=!0),m[S]=y)}catch(L){n(`There was an error setting ${S} property`,L)}}}),O.ref&&(O.ref=m)}return U(),()=>{}}});return[l,c]})}return{createComponentInstances:r}}const G=p.createEventHook(),J=p.createEventHook(),K=p.createEventHook(),Q=new g.Clock,{pause:ie,resume:ce,isActive:ue}=p.useRafFn(()=>{const e=Q.getElapsedTime(),t=Q.getDelta();G.trigger({delta:t,elapsed:e}),J.trigger({delta:t,elapsed:e}),K.trigger({delta:t,elapsed:e})},{immediate:!1});function $(){return{onBeforeLoop:G.on,onLoop:J.on,onAfterLoop:K.on,pause:ie,resume:ce,isActive:ue}}const le=o.shallowRef(new g.Scene);function D(){return{scene:le}}function X(e){const t={nodes:{},materials:{}};return e&&e.traverse(n=>{n.name&&(t.nodes[n.name]=n),n.material&&!t.materials[n.material.name]&&(t.materials[n.material.name]=n.material)}),t}async function fe(e,t,n,r,a){const{logError:s}=I(),i=new e;a&&a(i),n&&n(e);const c=(Array.isArray(t)?t:[t]).map(h=>new Promise((f,w)=>{i.load(h,C=>{C.scene&&Object.assign(C,X(C.scene)),f(C)},r,C=>w(s("[useLoader] - Failed to load resource",C)))}));return B(t)?await Promise.all(c):await c[0]}async function pe(e){const t=new g.LoadingManager,n=new g.TextureLoader(t),r=a=>new Promise((s,i)=>{n.load(a,l=>s(l),()=>null,()=>{i(new Error("[useTextures] - Failed to load texture"))})});if(B(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:i,roughnessMap:l,metalnessMap:c,aoMap:h}=e;return{map:a?await r(a):null,displacementMap:s?await r(s):null,normalMap:i?await r(i):null,roughnessMap:l?await r(l):null,metalnessMap:c?await r(c):null,aoMap:h?await r(h):null}}}const T=o.reactive({});function F(){function e(n){return T[n]}function t(n,r){T[n]=r}return{state:T,...o.toRefs(T),getState:e,setState:t}}const d=o.shallowRef(),R=o.ref(!1);function Y(e,t,n){const{alpha:r=!1,antialias:a,depth:s,logarithmicDepthBuffer:i,failIfMajorPerformanceCaveat:l,precision:c,premultipliedAlpha:h,stencil:f,shadows:w=!1,shadowMapType:C=g.PCFShadowMap,physicallyCorrectLights:M=!1,outputEncoding:P=g.LinearEncoding,toneMapping:x=g.NoToneMapping,toneMappingExposure:U=1,context:A=void 0,powerPreference:O="default",preserveDrawingBuffer:m=!1,clearColor:v=W("#000000"),windowSize:y=!1}=n,{width:S,height:L}=y?p.useWindowSize():p.useElementSize(t),{pixelRatio:Z}=p.useDevicePixelRatio(),{pause:we,resume:Ce}=$(),ye=o.computed(()=>S.value/L.value),E=()=>{!d.value||(d.value.setSize(S.value,L.value),d.value.setPixelRatio(Z.value))},H=()=>{!d.value||(d.value.shadowMap.enabled=p.resolveUnref(w),d.value.outputEncoding=p.resolveUnref(P),d.value.shadowMap.type=p.resolveUnref(C),d.value.physicallyCorrectLights=p.resolveUnref(M),d.value.toneMapping=p.resolveUnref(x),d.value.toneMappingExposure=p.resolveUnref(U),d.value.setClearColor(W(p.resolveUnref(v))))},Se=()=>{const ee=p.unrefElement(e);if(d.value||!ee)return;d.value=new g.WebGLRenderer({canvas:ee,alpha:r,antialias:a,context:A,depth:s,failIfMajorPerformanceCaveat:l,logarithmicDepthBuffer:i,powerPreference:O,precision:c,stencil:f,preserveDrawingBuffer:m,premultipliedAlpha:h});const{setState:ve}=F();ve("renderer",d.value),H(),E(),Ce(),R.value=!0},Me=()=>{!d.value||(d.value.dispose(),d.value=void 0,R.value=!1,we())};return o.watch([S,L,Z],E),o.watch(()=>[w,C,P,M,x,U,v],H),o.watch(()=>[e,t],()=>{p.unrefElement(e)&&p.unrefElement(t)&&Se()},{immediate:!0,deep:!0}),{renderer:d,isReady:R,dispose:Me,aspectRatio:ye}}const de=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:Boolean},setup(e,{slots:t,attrs:n}){const{logError:r}=I(),a=o.ref(),s=o.ref(),{renderer:i,dispose:l,aspectRatio:c}=Y(a,s,e),h=o.shallowRef();return o.provide("camera",h),o.provide("renderer",i),o.provide("aspect-ratio",c),t.default&&!t.default().some(f=>f.type.name==="Scene")&&r("TresCanvas must contain a Scene component."),t.default&&!t.default().some(f=>{var w;return(w=f.type.name)==null?void 0:w.includes("Camera")})&&r("Scene must contain a Camera component."),o.onBeforeUnmount(()=>l()),()=>{if(t.default)return o.h("div",{ref:s,style:{position:"relative",width:"100%",height:"100vh",...n.style}},[o.h("canvas",{ref:a,style:{width:"100%",height:"100%",position:"absolute",top:0,left:0}}),t.default()])}}}),me=o.defineComponent({name:"Scene",setup(e,{slots:t}){const{scene:n}=D(),r=o.inject("renderer"),{activeCamera:a}=z(),{onLoop:s}=$();return o.provide("local-scene",n),s(()=>{(r==null?void 0:r.value)&&(a==null?void 0:a.value)&&(n==null?void 0:n.value)&&r.value.render(n==null?void 0:n.value,a.value)}),()=>{if(t.default)return t.default()}}}),ge=Symbol("UseTresState"),he={install(e,t){const n=(t==null?void 0:t.prefix)||"Tres";e.component(`${n}Canvas`,de),e.component(`${n}Scene`,me);const{catalogue:r}=k(),{createComponentInstances:a}=q(n);a(t!=null&&t.extends?{...r,...t.extends}:r).forEach(([i,l])=>{e.component(i,l)})}};u.CameraType=V,u.UseTresStateSymbol=ge,u.default=he,u.trasverseObjects=X,u.useCamera=z,u.useCatalogue=k,u.useInstanceCreator=q,u.useLoader=fe,u.useRenderLoop=$,u.useRenderer=Y,u.useScene=D,u.useTexture=pe,u.useTres=F,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/types/index.d.ts

@@ -1,14 +1,11 @@
-import { Object3D } from 'three';
-import { VNode, VNodeTypes } from 'vue';
-export declare type TresInstance = Object3D<Event> & {
-    [key: string]: any;
-};
-export declare type TresVNodeType = VNodeTypes & {
-    name?: string | Array<string>;
-    __name?: string;
-    setup?: (props: Readonly<any>) => void;
-};
-export declare type TresVNode = VNode & {
-    children?: Array<VNode>;
-    type: TresVNodeType;
-};
+import { Object3D } from 'three'
+import { VNode, VNodeTypes } from 'vue'
+
+export type TresInstance = Object3D<Event> & { [key: string]: any }
+
+export type TresVNodeType = VNodeTypes & {
+  name?: string | Array<string>
+  __name?: string
+  setup?: (props: Readonly<any>) => void
+}
+export type TresVNode = VNode & { children?: Array<VNode>; type: TresVNodeType }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -30,6 +30,7 @@
     "threejs-vue"
   ],
   "dependencies": {
+    "three": "^0.146.0",
     "vue": "^3.2.45"
   },
   "peerDependencies": {
@@ -38,7 +39,8 @@
   "devDependencies": {
     "@alvarosabu/utils": "^2.2.0",
     "@histoire/plugin-vue": "0.11.7",
-    "@tresjs/cientos": "^0.3.0",
+    "@tresjs/cientos": "^1.0.0",
+    "@types/three": "^0.146.0",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitest/coverage-c8": "^0.25.1",
     "@vitest/ui": "^0.25.1",
@@ -54,6 +56,7 @@
     "vite": "^3.2.3",
     "vite-plugin-banner": "^0.6.1",
     "vite-plugin-dts": "^1.7.0",
+    "vite-plugin-glsl": "^0.5.3",
     "vite-plugin-require-transform": "^1.0.4",
     "vitest": "^0.25.1",
     "vue-demi": "^0.13.11"