@tresjs/core 2.0.0-beta.10 → 2.0.0-beta.11
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/README.md +24 -7
- package/dist/tres.js +3 -3
- package/dist/tres.umd.cjs +3 -3
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,13 +1,30 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/v/@tresjs/core/beta?color=%2382DBCA" alt="npm package"></a>
|
|
5
|
+
<a href="https://discord.gg/tfY9aSNT"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
|
|
6
|
+
</p>
|
|
7
|
+
|
|
8
|
+
# TresJS `@tresjs/core`
|
|
2
9
|
|
|
3
10
|
> Declarative ThreeJS using Vue Components
|
|
4
11
|
|
|
5
12
|
- 💡 Build 3D scene as they were Vue components
|
|
6
13
|
- ⚡️ Powered by Vite
|
|
7
|
-
- 🥰 It brings all the updated features of ThreeJS right
|
|
14
|
+
- 🥰 It brings all the updated features of ThreeJS right away regardless the version
|
|
8
15
|
- 🦾 Fully Typed
|
|
9
16
|
|
|
10
|
-
Tres (Spanish word for "three", pronounced `/tres/` ) is a way of creating ThreeJS scenes with Vue components in a declarative fashion.
|
|
17
|
+
Tres (Spanish word for "three", pronounced `/tres/` ) is a way of creating ThreeJS scenes with Vue components in a declarative fashion.
|
|
18
|
+
|
|
19
|
+
It's build on-top of a [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) and it's powered by Vite.
|
|
20
|
+
|
|
21
|
+
The goal is to provide the Vue's community an easy way of building 3D scenes with Vue, always up to date with the latest ThreeJS features and with 0-to-none mantainance.
|
|
22
|
+
|
|
23
|
+
## Installation
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
pnpm install @tresjs/core@beta three
|
|
27
|
+
```
|
|
11
28
|
|
|
12
29
|
## Docs
|
|
13
30
|
|
|
@@ -19,10 +36,10 @@ Checkout the [docs](https://tresjs.org)
|
|
|
19
36
|
|
|
20
37
|
## Ecosystem
|
|
21
38
|
|
|
22
|
-
| Package | Version
|
|
23
|
-
| --------------------------- |
|
|
24
|
-
| [Tres](packages/tres) |  |  |  |
|
|
42
|
+
| [Cientos](packages/cientos) |  |
|
|
26
43
|
|
|
27
44
|
## Contribution
|
|
28
45
|
|
package/dist/tres.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v2.0.0-beta.
|
|
3
|
+
* version: v2.0.0-beta.11
|
|
4
4
|
* (c) 2023
|
|
5
5
|
* description: Declarative ThreeJS using Vue Components
|
|
6
6
|
* author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
|
|
@@ -353,8 +353,8 @@ const se = {
|
|
|
353
353
|
return r.isObject3D && ((s = a == null ? void 0 : a.material) != null && s.isMaterial && (r.userData[i] = !0), (l = a == null ? void 0 : a.geometry) != null && l.isBufferGeometry && (r.userData[c] = !0)), r.events = {}, r;
|
|
354
354
|
},
|
|
355
355
|
insert(e, t) {
|
|
356
|
-
var o, a;
|
|
357
|
-
if (((e == null ? void 0 : e.__vnode.type) === "TresGroup" || (e == null ? void 0 : e.__vnode.type) === "TresObject3D") && t === null && !((
|
|
356
|
+
var o, a, n, r;
|
|
357
|
+
if ((((o = e == null ? void 0 : e.__vnode) == null ? void 0 : o.type) === "TresGroup" || ((a = e == null ? void 0 : e.__vnode) == null ? void 0 : a.type) === "TresObject3D") && t === null && !((r = (n = e == null ? void 0 : e.__vnode) == null ? void 0 : n.ctx) != null && r.asyncResolved)) {
|
|
358
358
|
ie = e;
|
|
359
359
|
return;
|
|
360
360
|
}
|
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v2.0.0-beta.
|
|
3
|
+
* version: v2.0.0-beta.11
|
|
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(d,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],s):(d=typeof globalThis<"u"?globalThis:d||self,s(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,s,m,f){"use strict";function be(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const
|
|
9
|
-
You could set windowSize=true to force the canvas to be the size of the window.`);const pe=()=>{t.value&&(t.value.setSize(I.value,A.value),t.value.setPixelRatio(Math.min(me.value,2)))},ve=()=>{if(!t.value)return;const j=f.resolveUnref(G);if(j){j in X||V("Renderer Preset must be one of these: "+Object.keys(X).join(", ")),te(t.value,X[j]);return}t.value.shadowMap.enabled=f.resolveUnref(h),t.value.shadowMap.type=f.resolveUnref(v),t.value.toneMapping=f.resolveUnref(k)||m.NoToneMapping,t.value.toneMappingExposure=f.resolveUnref(C),t.value.outputEncoding=f.resolveUnref(_)||m.LinearEncoding,w!=null&&w.value&&t.value.setClearColor(Pe(f.resolveUnref(w))),t.value.useLegacyLights=f.resolveUnref(L)},Ge=()=>{const j=f.unrefElement(y.canvas);j&&(t.value=new m.WebGLRenderer({canvas:j,alpha:f.resolveUnref(n),antialias:f.resolveUnref(a),context:f.resolveUnref(b),depth:f.resolveUnref(i),failIfMajorPerformanceCaveat:f.resolveUnref(o),logarithmicDepthBuffer:f.resolveUnref(l),powerPreference:f.resolveUnref(O),precision:f.resolveUnref(c),stencil:f.resolveUnref(u),preserveDrawingBuffer:f.resolveUnref(P),premultipliedAlpha:f.resolveUnref(p)}),R("renderer",t.value),R("clock",new m.Clock),R("aspectRatio",J),ve(),pe(),Fe(),r.value=!0)},Ve=()=>{t.value&&(t.value.dispose(),t.value=void 0,r.value=!1,ze())};return s.watch([J,me],pe),s.watch([h,v,_,L,k,C,w],ve),s.watch(()=>[y.canvas,y.container],()=>{f.unrefElement(y.canvas)&&f.unrefElement(y.container)&&Ge()},{immediate:!0,deep:!0}),{renderer:t,isReady:r,dispose:Ve,aspectRatio:J}}const Se=e=>typeof e=="string",ae=e=>!!e&&e.constructor===Array;function re(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 Oe(e,t,r,n,a){const{logError:i}=U(),l=new e;a&&a(l),r&&r(l);const c=(Array.isArray(t)?t:[t]).map(p=>new Promise((u,h)=>{l.load(p,v=>{v.scene&&Object.assign(v,re(v.scene)),u(v)},n,v=>h(i("[useLoader] - Failed to load resource",v)))}));return ae(t)?await Promise.all(c):await c[0]}async function xe(e){const t=new m.LoadingManager,r=new m.TextureLoader(t),n=a=>new Promise((i,l)=>{r.load(a,o=>i(o),()=>null,()=>{l(new Error("[useTextures] - Failed to load texture"))})});if(ae(e)){const a=await Promise.all(e.map(i=>n(i)));return e.length>1?a:a[0]}else{const{map:a,displacementMap:i,normalMap:l,roughnessMap:o,metalnessMap:c,aoMap:p,alphaMap:u,matcap:h}=e;return{map:a?await n(a):null,displacementMap:i?await n(i):null,normalMap:l?await n(l):null,roughnessMap:o?await n(o):null,metalnessMap:c?await n(c):null,aoMap:p?await n(p):null,alphaMap:u?await n(u):null,matcap:h?await n(h):null}}}const g=["00","01","02","03","04","05","06","07","08","09","0a","0b","0c","0d","0e","0f","10","11","12","13","14","15","16","17","18","19","1a","1b","1c","1d","1e","1f","20","21","22","23","24","25","26","27","28","29","2a","2b","2c","2d","2e","2f","30","31","32","33","34","35","36","37","38","39","3a","3b","3c","3d","3e","3f","40","41","42","43","44","45","46","47","48","49","4a","4b","4c","4d","4e","4f","50","51","52","53","54","55","56","57","58","59","5a","5b","5c","5d","5e","5f","60","61","62","63","64","65","66","67","68","69","6a","6b","6c","6d","6e","6f","70","71","72","73","74","75","76","77","78","79","7a","7b","7c","7d","7e","7f","80","81","82","83","84","85","86","87","88","89","8a","8b","8c","8d","8e","8f","90","91","92","93","94","95","96","97","98","99","9a","9b","9c","9d","9e","9f","a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","aa","ab","ac","ad","ae","af","b0","b1","b2","b3","b4","b5","b6","b7","b8","b9","ba","bb","bc","bd","be","bf","c0","c1","c2","c3","c4","c5","c6","c7","c8","c9","ca","cb","cc","cd","ce","cf","d0","d1","d2","d3","d4","d5","d6","d7","d8","d9","da","db","dc","dd","de","df","e0","e1","e2","e3","e4","e5","e6","e7","e8","e9","ea","eb","ec","ed","ee","ef","f0","f1","f2","f3","f4","f5","f6","f7","f8","f9","fa","fb","fc","fd","fe","ff"];function Ae(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,r=Math.random()*4294967295|0,n=Math.random()*4294967295|0;return(g[e&255]+g[e>>8&255]+g[e>>16&255]+g[e>>24&255]+"-"+g[t&255]+g[t>>8&255]+"-"+g[t>>16&15|64]+g[t>>24&255]+"-"+g[r&63|128]+g[r>>8&255]+"-"+g[r>>16&255]+g[r>>24&255]+g[n&255]+g[n>>8&255]+g[n>>16&255]+g[n>>24&255]).toLowerCase()}const F=Symbol();function ie(){const e=s.shallowReactive({uuid:Ae(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:s.computed(()=>window.innerWidth/window.innerHeight)});function t(a){return e[a]}function r(a,i){e[a]=i}const n={state:e,...s.toRefs(e),getState:t,setState:r};return s.provide(F,n),n}const S=()=>s.inject(F,{state:s.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});function oe(){var l;const e=s.shallowRef(new m.Raycaster),t=s.ref(new m.Vector2),r=s.ref(null),{setState:n,state:a}=S();n("raycaster",e.value),n("pointer",t),n("currentInstance",r);function i(o){t.value.x=o.clientX/window.innerWidth*2-1,t.value.y=-(o.clientY/window.innerHeight)*2+1}return(l=a==null?void 0:a.renderer)==null||l.domElement.addEventListener("pointermove",i),s.onUnmounted(()=>{var o;(o=a==null?void 0:a.renderer)==null||o.domElement.removeEventListener("pointermove",i)}),{raycaster:e,pointer:t}}const Te=!0,se="[TresJS ▲ ■ ●] ";function U(){function e(n,a){console.error(`${se} ${n}`,a||"")}function t(n){console.warn(`${se} ${n}`)}function r(n,a){}return{logError:e,logWarning:t,logMessage:r}}function Ue(){const{logWarning:e}=U();function t(n,a,i){let l=null;return n.traverse(o=>{o[a]===i&&(l=o)}),l||e(`Child with ${a} '${i}' not found.`),l}function r(n,a){return t(n,"name",a)}return{seek:t,seekByName:r}}const ke=/^on[^a-z]/,Re=e=>ke.test(e);function Ne(e){}let ce=null;const fe={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp"},{logError:le}=U(),je={createElement(e,t,r,n){var c,p;if(n||(n={}),n.args||(n.args=[]),e==="template"||Le(e))return null;let a=e.replace("Tres",""),i;if(e==="primitive"){(n==null?void 0:n.object)===void 0&&le("Tres primitives need a prop 'object'");const u=n.object;a=u.type,i=Object.assign(u,{type:a,attach:n.attach,primitive:!0})}else{const u=N.value[a];u||le(`${a} is not defined on the THREE namespace. Use extend to add it to the catalog.`),i=new u(...n.args)}if(i.isCamera){n!=null&&n.position||i.position.set(3,3,3),n!=null&&n.lookAt||i.lookAt(0,0,0);const{pushCamera:u}=$();u(i)}(n==null?void 0:n.attach)===void 0&&(i.isMaterial?i.attach="material":i.isBufferGeometry&&(i.attach="geometry"));const{GEOMETRY_VIA_PROP:l,MATERIAL_VIA_PROP:o}=fe;return i.isObject3D&&((c=n==null?void 0:n.material)!=null&&c.isMaterial&&(i.userData[o]=!0),(p=n==null?void 0:n.geometry)!=null&&p.isBufferGeometry&&(i.userData[l]=!0)),i.events={},i},insert(e,t){var r,n;if(((e==null?void 0:e.__vnode.type)==="TresGroup"||(e==null?void 0:e.__vnode.type)==="TresObject3D")&&t===null&&!((n=(r=e==null?void 0:e.__vnode)==null?void 0:r.ctx)!=null&&n.asyncResolved)){ce=e;return}t||(t=ce),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"})):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 t,r;if(e){if(e.isObject3D){const n=e,a=i=>{var c,p;const{GEOMETRY_VIA_PROP:l,MATERIAL_VIA_PROP:o}=fe;i.userData[o]||(c=i.material)==null||c.dispose(),i.userData[l]||(p=i.geometry)==null||p.dispose()};n.traverse(i=>a(i)),a(n)}(t=e.removeFromParent)==null||t.call(e),(r=e.dispose)==null||r.call(e)}},patchProp(e,t,r,n){if(e){let a=e,i=t,l=z(i),o=a==null?void 0:a[l];if(a.type==="BufferGeometry"){a.setAttribute(z(i),new m.BufferAttribute(...n));return}if(i.includes("-")&&o===void 0){const p=i.split("-");o=p.reduce((u,h)=>u[z(h)],a),i=p.pop(),l=i.toLowerCase(),o!=null&&o.set||(a=p.reduce((u,h)=>u[z(h)],a))}Re(i)&&(e.events[i]=n);let c=n;if(c===""&&(c=!0),f.isFunction(o)){Array.isArray(c)?e[l](...c):e[l](c);return}!(o!=null&&o.set)&&!f.isFunction(o)?a[l]=c:o.constructor===c.constructor&&(o!=null&&o.copy)?o==null||o.copy(c):Array.isArray(c)?o.set(...c):!o.isColor&&o.setScalar?o.setScalar(c):o.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},{createApp:De}=s.createRenderer(je),Ie=e=>{const t=De(r);function r(){return e&&e.default?e.default():[]}return t};Y(Q);const{logWarning:ue}=U(),Ee=s.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender"],setup(e,{slots:t,expose:r}){e.physicallyCorrectLights===!0&&ue("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const n=s.ref(),a=s.ref(),i=new Q.Scene,{setState:l}=S();l("scene",i),l("canvas",a),l("container",n);const o=s.ref(),c=t&&t.default&&t.default();(c==null?void 0:c.length)>0&&(o.value=c.some(v=>Se(v.type)&&v.type.includes("Camera")),o.value||ue("No camera found in the scene, please add one!")),s.onMounted(()=>{p()}),s.onUnmounted(()=>{l("renderer",null)});function p(){const{renderer:v}=ne(e),{activeCamera:M}=$(),{onLoop:L}=K(),{raycaster:_,pointer:k}=oe();let C=null,b=null;s.watchEffect(()=>{M.value&&_.value.setFromCamera(k.value,M.value)}),L(()=>{var O,P,w,x,G,y,R,I,A,V;if(M.value&&e.disableRender!==!0&&e.disableRender!==""&&((O=v.value)==null||O.render(i,M.value)),_.value){const W=_.value.intersectObjects(i.children);W.length>0?(b=W[0],C===null&&((x=(w=(P=b.object)==null?void 0:P.events)==null?void 0:w.onPointerEnter)==null||x.call(w,b)),(R=(y=(G=b.object)==null?void 0:G.events)==null?void 0:y.onPointerMove)==null||R.call(y,b)):C!==null&&((V=(A=(I=b==null?void 0:b.object)==null?void 0:I.events)==null?void 0:A.onPointerLeave)==null||V.call(A,C),b=null),C=b}}),f.useEventListener(a.value,"click",()=>{var O,P,w;b!==null&&((w=(P=(O=b.object)==null?void 0:O.events)==null?void 0:P.onClick)==null||w.call(P,b))})}let u;function h(){u=Ie(t),u.provide("useTres",S()),u.provide(F,S()),u.provide("extend",Y),u.mount(i)}return h(),r({scene:i}),()=>s.h(s.h("div",{ref:n,"data-scene":i.uuid,key:i.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[s.h("div",{style:{width:"100%",height:"100%"}},[s.h("canvas",{ref:a,"data-scene":i.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),de=s.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender"],setup(e,{slots:t,expose:r}){const n=ie();return r(n),()=>s.h(Ee,e,t)}}),Be={install(e){e.component("TresCanvas",de)}};d.CameraType=Z,d.TRES_CONTEXT_KEY=F,d.TresCanvas=de,d.catalogue=N,d.default=Be,d.extend=Y,d.isProd=Te,d.trasverseObjects=re,d.useCamera=$,d.useLoader=Oe,d.useLogger=U,d.useRaycaster=oe,d.useRenderLoop=K,d.useRenderer=ne,d.useSeek=Ue,d.useTexture=xe,d.useTres=S,d.useTresProvider=ie,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
8
|
+
(function(d,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],s):(d=typeof globalThis<"u"?globalThis:d||self,s(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,s,m,f){"use strict";function be(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const n=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,n.get?n:{enumerable:!0,get:()=>e[i]})}}return t.default=e,Object.freeze(t)}const Q=be(m),N=s.ref({uuid:m.MathUtils.generateUUID()}),Y=e=>void Object.assign(N.value,e);var Z=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(Z||{});const we=45;let T;function $(){const{state:e,setState:t,aspectRatio:i}=S();function n(o="Perspective",c){var p,u,h;if(o==="Perspective"){const{near:v,far:M,fov:L}=c||{near:.1,far:1e3,fov:we};T=new m.PerspectiveCamera(L,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,v,M),(u=e.cameras)==null||u.push(T)}else{const{left:v,right:M,top:L,bottom:_,near:k,far:C}=c||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};T=new m.OrthographicCamera(v,M,L,_,k,C),(h=e.cameras)==null||h.push(T)}return e.camera=T,t("camera",e.camera),T}function a(){var o;e.camera instanceof m.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(o=e.camera)==null||o.updateProjectionMatrix()}function r(o){var c;(c=e.cameras)==null||c.push(o),o instanceof m.PerspectiveCamera&&e.aspectRatio&&(o.aspect=e.aspectRatio.value),o.updateProjectionMatrix(),t("camera",o)}function l(){e.cameras=[]}return s.watchEffect(()=>{i!=null&&i.value&&a()}),{activeCamera:s.toRef(e,"camera"),createCamera:n,updateCamera:a,pushCamera:r,clearCameras:l}}const H=f.createEventHook(),ee=f.createEventHook(),q=f.createEventHook(),D=new m.Clock;let E=0,B=0;const{pause:ye,resume:Me,isActive:Ce}=f.useRafFn(()=>{H.trigger({delta:E,elapsed:B,clock:D}),ee.trigger({delta:E,elapsed:B,clock:D}),q.trigger({delta:E,elapsed:B,clock:D})},{immediate:!1});q.on(()=>{E=D.getDelta(),B=D.getElapsedTime()});function K(){return{onBeforeLoop:H.on,onLoop:ee.on,onAfterLoop:q.on,pause:ye,resume:Me,isActive:Ce}}function Pe(e){return e instanceof m.Color?e:Array.isArray(e)?new m.Color(...e):new m.Color(e)}const X={realistic:{outputEncoding:m.sRGBEncoding,toneMapping:m.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:m.PCFSoftShadowMap}}},te=(e,t)=>{for(const i of Object.keys(t))t[i]instanceof Object&&Object.assign(t[i],te(e[i],t[i]));return Object.assign(e||{},t),e},Le=_e("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 z(e){return e.replace(/-([a-z])/g,(t,i)=>i.toUpperCase())}function _e(e,t){const i=Object.create(null),n=e.split(",");for(let a=0;a<n.length;a++)i[n[a]]=!0;return t?a=>!!i[a.toLowerCase()]:a=>!!i[a]}function ne(e){var ge,he;const t=s.shallowRef(),i=s.ref(!1),{alpha:n=!0,antialias:a=!0,depth:r,logarithmicDepthBuffer:l,failIfMajorPerformanceCaveat:o,precision:c,premultipliedAlpha:p,stencil:u,shadows:h=!1,shadowMapType:v=m.PCFShadowMap,physicallyCorrectLights:M=!1,useLegacyLights:L=!1,outputEncoding:_=m.LinearEncoding,toneMapping:k=m.NoToneMapping,toneMappingExposure:C=1,context:b=void 0,powerPreference:O="default",preserveDrawingBuffer:P=!1,clearColor:w,windowSize:x=!1,preset:G=void 0}=s.toRefs(e),{state:y,setState:R}=S(),{width:I,height:A}=f.resolveUnref(x)==!0||f.resolveUnref(x)===""||f.resolveUnref(x)==="true"?f.useWindowSize():f.useElementSize(y.container),{logError:V,logWarning:W}=U(),{pixelRatio:me}=f.useDevicePixelRatio(),{pause:ze,resume:Fe}=K(),J=s.computed(()=>I.value/A.value);!f.resolveUnref(x)&&((he=(ge=y.container)==null?void 0:ge.value)==null?void 0:he.offsetHeight)===0&&W(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
|
|
9
|
+
You could set windowSize=true to force the canvas to be the size of the window.`);const pe=()=>{t.value&&(t.value.setSize(I.value,A.value),t.value.setPixelRatio(Math.min(me.value,2)))},ve=()=>{if(!t.value)return;const j=f.resolveUnref(G);if(j){j in X||V("Renderer Preset must be one of these: "+Object.keys(X).join(", ")),te(t.value,X[j]);return}t.value.shadowMap.enabled=f.resolveUnref(h),t.value.shadowMap.type=f.resolveUnref(v),t.value.toneMapping=f.resolveUnref(k)||m.NoToneMapping,t.value.toneMappingExposure=f.resolveUnref(C),t.value.outputEncoding=f.resolveUnref(_)||m.LinearEncoding,w!=null&&w.value&&t.value.setClearColor(Pe(f.resolveUnref(w))),t.value.useLegacyLights=f.resolveUnref(L)},Ge=()=>{const j=f.unrefElement(y.canvas);j&&(t.value=new m.WebGLRenderer({canvas:j,alpha:f.resolveUnref(n),antialias:f.resolveUnref(a),context:f.resolveUnref(b),depth:f.resolveUnref(r),failIfMajorPerformanceCaveat:f.resolveUnref(o),logarithmicDepthBuffer:f.resolveUnref(l),powerPreference:f.resolveUnref(O),precision:f.resolveUnref(c),stencil:f.resolveUnref(u),preserveDrawingBuffer:f.resolveUnref(P),premultipliedAlpha:f.resolveUnref(p)}),R("renderer",t.value),R("clock",new m.Clock),R("aspectRatio",J),ve(),pe(),Fe(),i.value=!0)},Ve=()=>{t.value&&(t.value.dispose(),t.value=void 0,i.value=!1,ze())};return s.watch([J,me],pe),s.watch([h,v,_,L,k,C,w],ve),s.watch(()=>[y.canvas,y.container],()=>{f.unrefElement(y.canvas)&&f.unrefElement(y.container)&&Ge()},{immediate:!0,deep:!0}),{renderer:t,isReady:i,dispose:Ve,aspectRatio:J}}const Se=e=>typeof e=="string",ae=e=>!!e&&e.constructor===Array;function re(e){const t={nodes:{},materials:{}};return e&&e.traverse(i=>{i.name&&(t.nodes[i.name]=i),i.material&&!t.materials[i.material.name]&&(t.materials[i.material.name]=i.material)}),t}async function Oe(e,t,i,n,a){const{logError:r}=U(),l=new e;a&&a(l),i&&i(l);const c=(Array.isArray(t)?t:[t]).map(p=>new Promise((u,h)=>{l.load(p,v=>{v.scene&&Object.assign(v,re(v.scene)),u(v)},n,v=>h(r("[useLoader] - Failed to load resource",v)))}));return ae(t)?await Promise.all(c):await c[0]}async function xe(e){const t=new m.LoadingManager,i=new m.TextureLoader(t),n=a=>new Promise((r,l)=>{i.load(a,o=>r(o),()=>null,()=>{l(new Error("[useTextures] - Failed to load texture"))})});if(ae(e)){const a=await Promise.all(e.map(r=>n(r)));return e.length>1?a:a[0]}else{const{map:a,displacementMap:r,normalMap:l,roughnessMap:o,metalnessMap:c,aoMap:p,alphaMap:u,matcap:h}=e;return{map:a?await n(a):null,displacementMap:r?await n(r):null,normalMap:l?await n(l):null,roughnessMap:o?await n(o):null,metalnessMap:c?await n(c):null,aoMap:p?await n(p):null,alphaMap:u?await n(u):null,matcap:h?await n(h):null}}}const g=["00","01","02","03","04","05","06","07","08","09","0a","0b","0c","0d","0e","0f","10","11","12","13","14","15","16","17","18","19","1a","1b","1c","1d","1e","1f","20","21","22","23","24","25","26","27","28","29","2a","2b","2c","2d","2e","2f","30","31","32","33","34","35","36","37","38","39","3a","3b","3c","3d","3e","3f","40","41","42","43","44","45","46","47","48","49","4a","4b","4c","4d","4e","4f","50","51","52","53","54","55","56","57","58","59","5a","5b","5c","5d","5e","5f","60","61","62","63","64","65","66","67","68","69","6a","6b","6c","6d","6e","6f","70","71","72","73","74","75","76","77","78","79","7a","7b","7c","7d","7e","7f","80","81","82","83","84","85","86","87","88","89","8a","8b","8c","8d","8e","8f","90","91","92","93","94","95","96","97","98","99","9a","9b","9c","9d","9e","9f","a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","aa","ab","ac","ad","ae","af","b0","b1","b2","b3","b4","b5","b6","b7","b8","b9","ba","bb","bc","bd","be","bf","c0","c1","c2","c3","c4","c5","c6","c7","c8","c9","ca","cb","cc","cd","ce","cf","d0","d1","d2","d3","d4","d5","d6","d7","d8","d9","da","db","dc","dd","de","df","e0","e1","e2","e3","e4","e5","e6","e7","e8","e9","ea","eb","ec","ed","ee","ef","f0","f1","f2","f3","f4","f5","f6","f7","f8","f9","fa","fb","fc","fd","fe","ff"];function Ae(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,i=Math.random()*4294967295|0,n=Math.random()*4294967295|0;return(g[e&255]+g[e>>8&255]+g[e>>16&255]+g[e>>24&255]+"-"+g[t&255]+g[t>>8&255]+"-"+g[t>>16&15|64]+g[t>>24&255]+"-"+g[i&63|128]+g[i>>8&255]+"-"+g[i>>16&255]+g[i>>24&255]+g[n&255]+g[n>>8&255]+g[n>>16&255]+g[n>>24&255]).toLowerCase()}const F=Symbol();function ie(){const e=s.shallowReactive({uuid:Ae(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:s.computed(()=>window.innerWidth/window.innerHeight)});function t(a){return e[a]}function i(a,r){e[a]=r}const n={state:e,...s.toRefs(e),getState:t,setState:i};return s.provide(F,n),n}const S=()=>s.inject(F,{state:s.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});function oe(){var l;const e=s.shallowRef(new m.Raycaster),t=s.ref(new m.Vector2),i=s.ref(null),{setState:n,state:a}=S();n("raycaster",e.value),n("pointer",t),n("currentInstance",i);function r(o){t.value.x=o.clientX/window.innerWidth*2-1,t.value.y=-(o.clientY/window.innerHeight)*2+1}return(l=a==null?void 0:a.renderer)==null||l.domElement.addEventListener("pointermove",r),s.onUnmounted(()=>{var o;(o=a==null?void 0:a.renderer)==null||o.domElement.removeEventListener("pointermove",r)}),{raycaster:e,pointer:t}}const Te=!0,se="[TresJS ▲ ■ ●] ";function U(){function e(n,a){console.error(`${se} ${n}`,a||"")}function t(n){console.warn(`${se} ${n}`)}function i(n,a){}return{logError:e,logWarning:t,logMessage:i}}function Ue(){const{logWarning:e}=U();function t(n,a,r){let l=null;return n.traverse(o=>{o[a]===r&&(l=o)}),l||e(`Child with ${a} '${r}' not found.`),l}function i(n,a){return t(n,"name",a)}return{seek:t,seekByName:i}}const ke=/^on[^a-z]/,Re=e=>ke.test(e);function Ne(e){}let ce=null;const fe={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp"},{logError:le}=U(),je={createElement(e,t,i,n){var c,p;if(n||(n={}),n.args||(n.args=[]),e==="template"||Le(e))return null;let a=e.replace("Tres",""),r;if(e==="primitive"){(n==null?void 0:n.object)===void 0&&le("Tres primitives need a prop 'object'");const u=n.object;a=u.type,r=Object.assign(u,{type:a,attach:n.attach,primitive:!0})}else{const u=N.value[a];u||le(`${a} is not defined on the THREE namespace. Use extend to add it to the catalog.`),r=new u(...n.args)}if(r.isCamera){n!=null&&n.position||r.position.set(3,3,3),n!=null&&n.lookAt||r.lookAt(0,0,0);const{pushCamera:u}=$();u(r)}(n==null?void 0:n.attach)===void 0&&(r.isMaterial?r.attach="material":r.isBufferGeometry&&(r.attach="geometry"));const{GEOMETRY_VIA_PROP:l,MATERIAL_VIA_PROP:o}=fe;return r.isObject3D&&((c=n==null?void 0:n.material)!=null&&c.isMaterial&&(r.userData[o]=!0),(p=n==null?void 0:n.geometry)!=null&&p.isBufferGeometry&&(r.userData[l]=!0)),r.events={},r},insert(e,t){var i,n,a,r;if((((i=e==null?void 0:e.__vnode)==null?void 0:i.type)==="TresGroup"||((n=e==null?void 0:e.__vnode)==null?void 0:n.type)==="TresObject3D")&&t===null&&!((r=(a=e==null?void 0:e.__vnode)==null?void 0:a.ctx)!=null&&r.asyncResolved)){ce=e;return}t||(t=ce),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"})):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 t,i;if(e){if(e.isObject3D){const n=e,a=r=>{var c,p;const{GEOMETRY_VIA_PROP:l,MATERIAL_VIA_PROP:o}=fe;r.userData[o]||(c=r.material)==null||c.dispose(),r.userData[l]||(p=r.geometry)==null||p.dispose()};n.traverse(r=>a(r)),a(n)}(t=e.removeFromParent)==null||t.call(e),(i=e.dispose)==null||i.call(e)}},patchProp(e,t,i,n){if(e){let a=e,r=t,l=z(r),o=a==null?void 0:a[l];if(a.type==="BufferGeometry"){a.setAttribute(z(r),new m.BufferAttribute(...n));return}if(r.includes("-")&&o===void 0){const p=r.split("-");o=p.reduce((u,h)=>u[z(h)],a),r=p.pop(),l=r.toLowerCase(),o!=null&&o.set||(a=p.reduce((u,h)=>u[z(h)],a))}Re(r)&&(e.events[r]=n);let c=n;if(c===""&&(c=!0),f.isFunction(o)){Array.isArray(c)?e[l](...c):e[l](c);return}!(o!=null&&o.set)&&!f.isFunction(o)?a[l]=c:o.constructor===c.constructor&&(o!=null&&o.copy)?o==null||o.copy(c):Array.isArray(c)?o.set(...c):!o.isColor&&o.setScalar?o.setScalar(c):o.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},{createApp:De}=s.createRenderer(je),Ie=e=>{const t=De(i);function i(){return e&&e.default?e.default():[]}return t};Y(Q);const{logWarning:ue}=U(),Ee=s.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender"],setup(e,{slots:t,expose:i}){e.physicallyCorrectLights===!0&&ue("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const n=s.ref(),a=s.ref(),r=new Q.Scene,{setState:l}=S();l("scene",r),l("canvas",a),l("container",n);const o=s.ref(),c=t&&t.default&&t.default();(c==null?void 0:c.length)>0&&(o.value=c.some(v=>Se(v.type)&&v.type.includes("Camera")),o.value||ue("No camera found in the scene, please add one!")),s.onMounted(()=>{p()}),s.onUnmounted(()=>{l("renderer",null)});function p(){const{renderer:v}=ne(e),{activeCamera:M}=$(),{onLoop:L}=K(),{raycaster:_,pointer:k}=oe();let C=null,b=null;s.watchEffect(()=>{M.value&&_.value.setFromCamera(k.value,M.value)}),L(()=>{var O,P,w,x,G,y,R,I,A,V;if(M.value&&e.disableRender!==!0&&e.disableRender!==""&&((O=v.value)==null||O.render(r,M.value)),_.value){const W=_.value.intersectObjects(r.children);W.length>0?(b=W[0],C===null&&((x=(w=(P=b.object)==null?void 0:P.events)==null?void 0:w.onPointerEnter)==null||x.call(w,b)),(R=(y=(G=b.object)==null?void 0:G.events)==null?void 0:y.onPointerMove)==null||R.call(y,b)):C!==null&&((V=(A=(I=b==null?void 0:b.object)==null?void 0:I.events)==null?void 0:A.onPointerLeave)==null||V.call(A,C),b=null),C=b}}),f.useEventListener(a.value,"click",()=>{var O,P,w;b!==null&&((w=(P=(O=b.object)==null?void 0:O.events)==null?void 0:P.onClick)==null||w.call(P,b))})}let u;function h(){u=Ie(t),u.provide("useTres",S()),u.provide(F,S()),u.provide("extend",Y),u.mount(r)}return h(),i({scene:r}),()=>s.h(s.h("div",{ref:n,"data-scene":r.uuid,key:r.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[s.h("div",{style:{width:"100%",height:"100%"}},[s.h("canvas",{ref:a,"data-scene":r.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),de=s.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender"],setup(e,{slots:t,expose:i}){const n=ie();return i(n),()=>s.h(Ee,e,t)}}),Be={install(e){e.component("TresCanvas",de)}};d.CameraType=Z,d.TRES_CONTEXT_KEY=F,d.TresCanvas=de,d.catalogue=N,d.default=Be,d.extend=Y,d.isProd=Te,d.trasverseObjects=re,d.useCamera=$,d.useLoader=Oe,d.useLogger=U,d.useRaycaster=oe,d.useRenderLoop=K,d.useRenderer=ne,d.useSeek=Ue,d.useTexture=xe,d.useTres=S,d.useTresProvider=ie,Object.defineProperties(d,{__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": "2.0.0-beta.
|
|
4
|
+
"version": "2.0.0-beta.11",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"packageManager": "pnpm@8.2.0",
|
|
7
7
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
@@ -61,12 +61,12 @@
|
|
|
61
61
|
"@vueuse/core": "^9.13.0"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@tresjs/core": "2.0.0-beta.
|
|
64
|
+
"@tresjs/core": "2.0.0-beta.10",
|
|
65
65
|
"@alvarosabu/prettier-config": "^1.3.0",
|
|
66
66
|
"@huntersofbook/plausible-vue": "^1.0.0",
|
|
67
67
|
"@release-it/conventional-changelog": "^5.1.1",
|
|
68
68
|
"@stackblitz/sdk": "^1.9.0",
|
|
69
|
-
"@tresjs/cientos": "2.0.0-beta.
|
|
69
|
+
"@tresjs/cientos": "2.0.0-beta.3",
|
|
70
70
|
"@types/three": "latest",
|
|
71
71
|
"@typescript-eslint/eslint-plugin": "^5.58.0",
|
|
72
72
|
"@typescript-eslint/parser": "^5.58.0",
|