@tresjs/core 2.4.0 → 2.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/TresCanvas.vue.d.ts +147 -0
- package/dist/components/TresScene.vue.d.ts +128 -0
- package/dist/components/index.d.ts +2 -1
- package/dist/composables/useCamera/index.d.ts +4 -3
- package/dist/tres.js +376 -394
- package/dist/tres.umd.cjs +3 -3
- package/dist/types/index.d.ts +1 -1
- package/dist/utils/test-utils.d.ts +1 -0
- package/package.json +4 -3
- package/dist/components/TresCanvas.d.ts +0 -25
- package/dist/components/TresScene.d.ts +0 -22
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v2.4.
|
|
3
|
+
* version: v2.4.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(
|
|
9
|
-
You could set windowSize=true to force the canvas to be the size of the window.`)},1e3);const ve=()=>{t.value&&(t.value.setSize(de.value,me.value),t.value.setPixelRatio(Math.min(pe.value,2)))},ge=()=>{if(!t.value)return;const S=f.toValue(q);if(S){S in Y||Be("Renderer Preset must be one of these: "+Object.keys(Y).join(", ")),ne(t.value,Y[S]);return}t.value.shadowMap.enabled=f.toValue(h),t.value.shadowMap.type=f.toValue(v),t.value.toneMapping=f.toValue(P)||g.NoToneMapping,t.value.toneMappingExposure=f.toValue(C),t.value.outputColorSpace=f.toValue(M)||g.LinearSRGBColorSpace,T!=null&&T.value&&t.value.setClearColor(ae(f.toValue(T))),t.value.useLegacyLights=f.toValue(L)},Fe=()=>{const S=f.unrefElement(d.canvas);S&&(t.value=new g.WebGLRenderer({canvas:S,alpha:f.toValue(n),antialias:f.toValue(o),context:f.toValue(O),depth:f.toValue(s),failIfMajorPerformanceCaveat:f.toValue(r),logarithmicDepthBuffer:f.toValue(c),powerPreference:f.toValue(b),precision:f.toValue(i),stencil:f.toValue(p),preserveDrawingBuffer:f.toValue(_),premultipliedAlpha:f.toValue(u)}),w("renderer",t.value),w("clock",new g.Clock),w("aspectRatio",K),ge(),ve(),ze(),a.value=!0)},We=()=>{t.value&&(t.value.dispose(),t.value=void 0,a.value=!1,Ne())};return l.watch([K,pe],ve),l.watch([h,v,M,L,P,C,T],ge),l.watch(()=>[d.canvas,d.container],()=>{f.unrefElement(d.canvas)&&f.unrefElement(d.container)&&Fe()},{immediate:!0,deep:!0}),{renderer:t,isReady:a,dispose:We,aspectRatio:K}}function ie(e){const t={nodes:{},materials:{}};return e&&e.traverse(a=>{a.name&&(t.nodes[a.name]=a),a.material&&!t.materials[a.material.name]&&(t.materials[a.material.name]=a.material)}),t}async function Te(e,t,a,n,o){const{logError:s}=x(),c=new e;o&&o(c),a&&a(c);const i=(Array.isArray(t)?t:[t]).map(u=>new Promise((p,h)=>{c.load(u,v=>{v.scene&&Object.assign(v,ie(v.scene)),p(v)},n,v=>h(s("[useLoader] - Failed to load resource",v)))}));return H(t)?await Promise.all(i):await i[0]}async function Ae(e){const t=new g.LoadingManager,a=new g.TextureLoader(t),n=o=>new Promise((s,c)=>{a.load(o,r=>s(r),()=>null,()=>{c(new Error("[useTextures] - Failed to load texture"))})});if(H(e)){const o=await Promise.all(e.map(s=>n(s)));return e.length>1?o:o[0]}else{const{map:o,displacementMap:s,normalMap:c,roughnessMap:r,metalnessMap:i,aoMap:u,alphaMap:p,matcap:h}=e;return{map:o?await n(o):null,displacementMap:s?await n(s):null,normalMap:c?await n(c):null,roughnessMap:r?await n(r):null,metalnessMap:i?await n(i):null,aoMap:u?await n(u):null,alphaMap:p?await n(p):null,matcap:h?await n(h):null}}}const se=e=>{const{state:t}=E(),a=l.computed(()=>{var d;return(d=t.canvas)==null?void 0:d.value}),{x:n,y:o}=f.usePointer({target:a}),{width:s,height:c,top:r,left:i}=f.useElementBounding(a),u=new g.Raycaster,p=({x:d,y:w})=>{if(a.value)return{x:(d-i.value)/s.value*2-1,y:-((w-r.value)/c.value)*2+1}},h=({x:d,y:w})=>{if(t.camera)return u.setFromCamera(new g.Vector2(d,w),t.camera),u.intersectObjects(e.value,!1)},v=d=>{const w=p({x:(d==null?void 0:d.clientX)??n.value,y:(d==null?void 0:d.clientY)??o.value});return w?h(w)||[]:[]},L=l.computed(()=>v()),M=f.createEventHook(),P=f.createEventHook(),C=(d,w)=>{d.trigger({event:w,intersects:v(w)})},O=d=>{C(P,d)};let b;const _=d=>{var w;b=(w=v(d)[0])==null?void 0:w.object},T=d=>{var w;d instanceof PointerEvent&&b===((w=v(d)[0])==null?void 0:w.object)&&C(M,d)},A=d=>P.trigger({event:d,intersects:[]}),q=l.watchEffect(()=>{a!=null&&a.value&&(a.value.addEventListener("pointerup",T),a.value.addEventListener("pointerdown",_),a.value.addEventListener("pointermove",O),a.value.addEventListener("pointerleave",A),q())});return l.onUnmounted(()=>{a!=null&&a.value&&(a.value.removeEventListener("pointerup",T),a.value.removeEventListener("pointerdown",_),a.value.removeEventListener("pointermove",O),a.value.removeEventListener("pointerleave",A))}),{intersects:L,onClick:d=>M.on(d).off,onPointerMove:d=>P.on(d).off}};function Ee(){const{logWarning:e}=x();function t(n,o,s){let c=null;return n.traverse(r=>{r[o]===s&&(c=r)}),c||e(`Child with ${o} '${s}' not found.`),c}function a(n,o){return t(n,"name",o)}return{seek:t,seekByName:a}}const ce=()=>{const e=l.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),t=r=>{Object.values(e).forEach(i=>i.delete(r))},a=r=>{const{onClick:i,onPointerMove:u,onPointerEnter:p,onPointerLeave:h}=r;i&&e.click.set(r,i),u&&e.pointerMove.set(r,u),p&&e.pointerEnter.set(r,p),h&&e.pointerLeave.set(r,h),r.addEventListener("removed",()=>{r.traverse(v=>{t(v)}),t(r)})},n=l.computed(()=>Se(Object.values(e).map(r=>Array.from(r.keys())).flat(),({uuid:r})=>r)),{onClick:o,onPointerMove:s}=se(n);o(({intersects:r,event:i})=>{var u;r.length&&((u=e.click.get(r[0].object))==null||u(r[0],i))});let c;return s(({intersects:r,event:i})=>{var L,M,P,C;const u=(L=r==null?void 0:r[0])==null?void 0:L.object,{pointerLeave:p,pointerEnter:h,pointerMove:v}=e;c&&c!==u&&((M=p.get(c))==null||M(c,i)),u&&(c!==u&&((P=h.get(u))==null||P(r[0],i)),(C=v.get(u))==null||C(r[0],i)),c=u||null}),{registerObject:a,deregisterObject:t}},G={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp",REGISTER_AT_POINTER_EVENT_HANDLER:"tres__registerAtPointerEventHandler"};function Ye(e){}let $=null,V=null;const{logError:ue}=x(),Re={createElement(e,t,a,n){var i,u;if(n||(n={}),n.args||(n.args=[]),e==="template"||Le(e))return null;let o=e.replace("Tres",""),s;if(e==="primitive"){(n==null?void 0:n.object)===void 0&&ue("Tres primitives need a prop 'object'");const p=n.object;o=p.type,s=Object.assign(p,{type:o,attach:n.attach,primitive:!0})}else{const p=z.value[o];p||ue(`${o} is not defined on the THREE namespace. Use extend to add it to the catalog.`),s=new p(...n.args)}s.isCamera&&(n!=null&&n.position||s.position.set(3,3,3),n!=null&&n.lookAt||s.lookAt(0,0,0)),(n==null?void 0:n.attach)===void 0&&(s.isMaterial?s.attach="material":s.isBufferGeometry&&(s.attach="geometry"));const{GEOMETRY_VIA_PROP:c,MATERIAL_VIA_PROP:r}=G;return s.isObject3D&&((i=n==null?void 0:n.material)!=null&&i.isMaterial&&(s.userData[r]=!0),(u=n==null?void 0:n.geometry)!=null&&u.isBufferGeometry&&(s.userData[c]=!0)),s},insert(e,t){var a,n,o,s,c,r,i;if(t&&t.isScene&&(V=t),(((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresGroup"||((n=e==null?void 0:e.__vnode)==null?void 0:n.type)==="TresObject3D")&&t===null&&!((s=(o=e==null?void 0:e.__vnode)==null?void 0:o.ctx)!=null&&s.asyncResolved)){$=e;return}else(c=e==null?void 0:e.__vnode)!=null&&c.type.includes("Controls")&&t===null&&($=V);t||(t=$),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"}),(i=(r=V==null?void 0:V.userData)==null?void 0:r[G.REGISTER_AT_POINTER_EVENT_HANDLER])==null||i.call(r,e)):e!=null&&e.isFog?t.fog=e:typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e))},remove(e){var t,a;if(e){if(e.isObject3D){const n=e,o=s=>{var i,u;const{GEOMETRY_VIA_PROP:c,MATERIAL_VIA_PROP:r}=G;s.userData[r]||(i=s.material)==null||i.dispose(),s.userData[c]||(u=s.geometry)==null||u.dispose()};n.traverse(s=>{o(s)}),o(n)}(t=e.removeFromParent)==null||t.call(e),(a=e.dispose)==null||a.call(e)}},patchProp(e,t,a,n){if(e){let o=e,s=t,c=B(s),r=o==null?void 0:o[c];if(o.type==="BufferGeometry"){if(s==="args")return;o.setAttribute(B(s),new g.BufferAttribute(...n));return}if(s.includes("-")&&r===void 0){const u=s.split("-");r=u.reduce((p,h)=>p[B(h)],o),s=u.pop(),c=s.toLowerCase(),r!=null&&r.set||(o=u.reduce((p,h)=>p[B(h)],o))}let i=n;if(i===""&&(i=!0),X(r)){Array.isArray(i)?e[c](...i):e[c](i);return}!(r!=null&&r.set)&&!X(r)?o[c]=i:r.constructor===i.constructor&&(r!=null&&r.copy)?r==null||r.copy(i):Array.isArray(i)?r.set(...i):!r.isColor&&r.setScalar?r.setScalar(i):r.set(i)}},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:xe}=l.createRenderer(Re),ke=e=>{const t=xe(a);function a(){return e&&e.default?e.default():[]}return t};F(N);const{logWarning:le}=x(),Ve=l.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:a}){e.physicallyCorrectLights===!0&&le("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const n=l.computed(()=>e.disableRender!==!1&&e.disableRender!==void 0),o=l.ref(),s=l.ref(),c=new N.Scene,r=ce(),{setState:i}=E();c.userData[G.REGISTER_AT_POINTER_EVENT_HANDLER]=r.registerObject,i("scene",c),i("canvas",s),i("container",o),i("pointerEventHandler",r);const{onLoop:u,resume:p}=U();l.onMounted(()=>{P()}),l.onUnmounted(()=>{i("renderer",null)});const{activeCamera:h,pushCamera:v,clearCameras:L}=Z();function M(){const b=c.getObjectByProperty("isCamera",!0);if(b)v(b);else{le("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");const _=new N.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);_.position.set(3,3,3),_.lookAt(0,0,0),v(_)}}function P(){const{renderer:b}=oe(e);e.camera&&v(e.camera),u(()=>{var _;h.value&&!n.value&&((_=b.value)==null||_.render(c,h.value))})}let C;function O(){C=ke(t);const b=E();C.provide("useTres",b),C.provide(j,b),C.provide("extend",F),C.mount(c),M()}return O(),a({scene:c}),l.watch(()=>e.camera,b=>{b&&(L(),v(b))}),()=>l.h(l.h("div",{ref:o,"data-scene":c.uuid,key:c.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[l.h("div",{style:{width:"100%",height:"100%"}},[l.h("canvas",{ref:s,"data-scene":c.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),fe=l.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:a}){const n=J();return a(n),()=>l.h(Ve,e,t)}}),je=["TresCanvas","TresLeches","TresScene"],De={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!je.includes(e)||e==="primitive"}}},Ie={install(e){e.component("TresCanvas",fe)}};m.CameraType=Q,m.TRES_CONTEXT_KEY=j,m.TresCanvas=fe,m.catalogue=z,m.default=Ie,m.extend=F,m.isProd=Oe,m.normalizeColor=ae,m.normalizeVectorFlexibleParam=Me,m.templateCompilerOptions=De,m.trasverseObjects=ie,m.useCamera=Z,m.useLoader=Te,m.useLogger=x,m.usePointerEventHandler=ce,m.useRaycaster=se,m.useRenderLoop=U,m.useRenderer=oe,m.useSeek=Ee,m.useTexture=Ae,m.useTres=E,m.useTresProvider=J,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
8
|
+
(function(p,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],c):(p=typeof globalThis<"u"?globalThis:p||self,c(p.tres={},p.Vue,p.Three,p.VueUseCore))})(this,function(p,c,v,f){"use strict";function ve(e){const a=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(a,o,t.get?t:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const ge=ve(v),F=c.ref({}),W=e=>void Object.assign(F.value,e),X=e=>typeof e=="function",J=e=>!!e&&e.constructor===Array,C=["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 ye(){const e=Math.random()*4294967295|0,a=Math.random()*4294967295|0,o=Math.random()*4294967295|0,t=Math.random()*4294967295|0;return(C[e&255]+C[e>>8&255]+C[e>>16&255]+C[e>>24&255]+"-"+C[a&255]+C[a>>8&255]+"-"+C[a>>16&15|64]+C[a>>24&255]+"-"+C[o&63|128]+C[o>>8&255]+"-"+C[o>>16&255]+C[o>>24&255]+C[t&255]+C[t>>8&255]+C[t>>16&255]+C[t>>24&255]).toLowerCase()}const j=Symbol();function H(){const e=c.shallowReactive({uuid:ye(),camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,aspectRatio:void 0,pointerEventHandler:void 0});function a(r){return e[r]}function o(r,s){e[r]=s}const t={state:e,...c.toRefs(e),getState:a,setState:o};return c.provide(j,t),t}const x=()=>c.inject(j,{state:c.shallowReactive({camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,pointerEventHandler:void 0})});var Q=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(Q||{});const he=45;let E;function Z(){const{state:e,setState:a,aspectRatio:o}=x();function t(i="Perspective",u){var m,g,y;if(i==="Perspective"){const{near:_,far:L,fov:M}=u||{near:.1,far:1e3,fov:he};E=new v.PerspectiveCamera(M,((m=e.aspectRatio)==null?void 0:m.value)||window.innerWidth/window.innerHeight,_,L),(g=e.cameras)==null||g.push(E)}else{const{left:_,right:L,top:M,bottom:w,near:T,far:A}=u||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};E=new v.OrthographicCamera(_,L,M,w,T,A),(y=e.cameras)==null||y.push(E)}return e.camera=E,a("camera",e.camera),E}function r(){var i;e.camera instanceof v.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(i=e.camera)==null||i.updateProjectionMatrix()}function s(i){var u;(u=e.cameras)==null||u.push(i),i instanceof v.PerspectiveCamera&&e.aspectRatio&&(i.aspect=e.aspectRatio.value),i.updateProjectionMatrix(),a("camera",i)}function l(i){var u;((u=e.cameras)==null?void 0:u.length)===0&&s(i)}function n(){e.cameras=[]}return c.watchEffect(()=>{o!=null&&o.value&&r()}),{activeCamera:c.toRef(e,"camera"),createCamera:t,updateCamera:r,pushCamera:s,clearCameras:n,setFirstCamera:l}}const ee=f.createEventHook(),te=f.createEventHook(),$=f.createEventHook(),V=new v.Clock;let D=0,I=0;const{pause:we,resume:be,isActive:Ce}=f.useRafFn(()=>{ee.trigger({delta:D,elapsed:I,clock:V}),te.trigger({delta:D,elapsed:I,clock:V}),$.trigger({delta:D,elapsed:I,clock:V})},{immediate:!1});$.on(()=>{D=V.getDelta(),I=V.getElapsedTime()});function U(){return{onBeforeLoop:ee.on,onLoop:te.on,onAfterLoop:$.on,pause:we,resume:be,isActive:Ce}}function _e(e){return typeof e=="number"?[e,e,e]:e instanceof v.Vector3?[e.x,e.y,e.z]:e}function ae(e){return e instanceof v.Color?e:Array.isArray(e)?new v.Color(...e):new v.Color(e)}const Y={realistic:{outputColorSpace:v.SRGBColorSpace,toneMapping:v.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:v.PCFSoftShadowMap}}},ne=(e,a)=>{for(const o of Object.keys(a))a[o]instanceof Object&&Object.assign(a[o],ne(e[o],a[o]));return Object.assign(e||{},a),e},Pe=Me("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 N(e){return e.replace(/-([a-z])/g,(a,o)=>o.toUpperCase())}function Me(e,a){const o=Object.create(null),t=e.split(",");for(let r=0;r<t.length;r++)o[t[r]]=!0;return a?r=>!!o[r.toLowerCase()]:r=>!!o[r]}const Le=(e,a)=>{const o=new Set,t=[];for(const r of e){const s=a(r);o.has(s)||(o.add(s),t.push(r))}return t},Se=!0,oe="[TresJS ▲ ■ ●] ";function R(){function e(t,r){console.error(`${oe} ${t}`,r||"")}function a(t){console.warn(`${oe} ${t}`)}function o(t,r){}return{logError:e,logWarning:a,logMessage:o}}function re(e){const a=c.shallowRef(),o=c.ref(!1),{alpha:t=!0,antialias:r=!0,depth:s,logarithmicDepthBuffer:l,failIfMajorPerformanceCaveat:n,precision:i,premultipliedAlpha:u,stencil:m,shadows:g=!1,shadowMapType:y=v.PCFShadowMap,useLegacyLights:_=!1,outputColorSpace:L=v.LinearSRGBColorSpace,toneMapping:M=v.NoToneMapping,toneMappingExposure:w=1,context:T=void 0,powerPreference:A="default",preserveDrawingBuffer:b=!1,clearColor:P,windowSize:k=!1,preset:G=void 0}=c.toRefs(e),{state:S,setState:d}=x(),{width:h,height:fe}=f.toValue(k)==!0||f.toValue(k)===""||f.toValue(k)==="true"?f.useWindowSize():f.useElementSize(S.container),{logError:ze,logWarning:Ge}=R(),{pixelRatio:de}=f.useDevicePixelRatio(),{pause:Fe,resume:We}=U(),K=c.computed(()=>h.value/fe.value);setTimeout(()=>{var O;!f.toValue(k)&&!((O=S.canvas)!=null&&O.value.offsetHeight)&&Ge(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
|
|
9
|
+
You could set windowSize=true to force the canvas to be the size of the window.`)},1e3);const pe=()=>{a.value&&(a.value.setSize(h.value,fe.value),a.value.setPixelRatio(Math.min(de.value,2)))},me=()=>{if(!a.value)return;const O=f.toValue(G);if(O){O in Y||ze("Renderer Preset must be one of these: "+Object.keys(Y).join(", ")),ne(a.value,Y[O]);return}a.value.shadowMap.enabled=f.toValue(g),a.value.shadowMap.type=f.toValue(y),a.value.toneMapping=f.toValue(M)||v.NoToneMapping,a.value.toneMappingExposure=f.toValue(w),a.value.outputColorSpace=f.toValue(L)||v.LinearSRGBColorSpace,P!=null&&P.value&&a.value.setClearColor(ae(f.toValue(P))),a.value.useLegacyLights=f.toValue(_)},$e=()=>{const O=f.unrefElement(S.canvas);O&&(a.value=new v.WebGLRenderer({canvas:O,alpha:f.toValue(t),antialias:f.toValue(r),context:f.toValue(T),depth:f.toValue(s),failIfMajorPerformanceCaveat:f.toValue(n),logarithmicDepthBuffer:f.toValue(l),powerPreference:f.toValue(A),precision:f.toValue(i),stencil:f.toValue(m),preserveDrawingBuffer:f.toValue(b),premultipliedAlpha:f.toValue(u)}),d("renderer",a.value),d("clock",new v.Clock),d("aspectRatio",K),me(),pe(),We(),o.value=!0)},Ue=()=>{a.value&&(a.value.dispose(),a.value=void 0,o.value=!1,Fe())};return c.watch([K,de],pe),c.watch([g,y,L,_,M,w,P],me),c.watch(()=>[S.canvas,S.container],()=>{f.unrefElement(S.canvas)&&f.unrefElement(S.container)&&$e()},{immediate:!0,deep:!0}),{renderer:a,isReady:o,dispose:Ue,aspectRatio:K}}function ie(e){const a={nodes:{},materials:{}};return e&&e.traverse(o=>{o.name&&(a.nodes[o.name]=o),o.material&&!a.materials[o.material.name]&&(a.materials[o.material.name]=o.material)}),a}async function Oe(e,a,o,t,r){const{logError:s}=R(),l=new e;r&&r(l),o&&o(l);const i=(Array.isArray(a)?a:[a]).map(u=>new Promise((m,g)=>{l.load(u,y=>{y.scene&&Object.assign(y,ie(y.scene)),m(y)},t,y=>g(s("[useLoader] - Failed to load resource",y)))}));return J(a)?await Promise.all(i):await i[0]}async function Te(e){const a=new v.LoadingManager,o=new v.TextureLoader(a),t=r=>new Promise((s,l)=>{o.load(r,n=>s(n),()=>null,()=>{l(new Error("[useTextures] - Failed to load texture"))})});if(J(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:l,roughnessMap:n,metalnessMap:i,aoMap:u,alphaMap:m,matcap:g}=e;return{map:r?await t(r):null,displacementMap:s?await t(s):null,normalMap:l?await t(l):null,roughnessMap:n?await t(n):null,metalnessMap:i?await t(i):null,aoMap:u?await t(u):null,alphaMap:m?await t(m):null,matcap:g?await t(g):null}}}const se=e=>{const{state:a,setState:o}=x(),t=c.computed(()=>{var d;return(d=a.canvas)==null?void 0:d.value}),{x:r,y:s}=f.usePointer({target:t}),{width:l,height:n,top:i,left:u}=f.useElementBounding(t),m=new v.Raycaster;o("raycaster",m);const g=({x:d,y:h})=>{if(t.value)return{x:(d-u.value)/l.value*2-1,y:-((h-i.value)/n.value)*2+1}},y=({x:d,y:h})=>{if(a.camera)return m.setFromCamera(new v.Vector2(d,h),a.camera),m.intersectObjects(e.value,!1)},_=d=>{const h=g({x:(d==null?void 0:d.clientX)??r.value,y:(d==null?void 0:d.clientY)??s.value});return h?y(h)||[]:[]},L=c.computed(()=>_()),M=f.createEventHook(),w=f.createEventHook(),T=(d,h)=>{d.trigger({event:h,intersects:_(h)})},A=d=>{T(w,d)};let b;const P=d=>{var h;b=(h=_(d)[0])==null?void 0:h.object},k=d=>{var h;d instanceof PointerEvent&&b===((h=_(d)[0])==null?void 0:h.object)&&T(M,d)},G=d=>w.trigger({event:d,intersects:[]}),S=c.watchEffect(()=>{t!=null&&t.value&&(t.value.addEventListener("pointerup",k),t.value.addEventListener("pointerdown",P),t.value.addEventListener("pointermove",A),t.value.addEventListener("pointerleave",G),S())});return c.onUnmounted(()=>{t!=null&&t.value&&(t.value.removeEventListener("pointerup",k),t.value.removeEventListener("pointerdown",P),t.value.removeEventListener("pointermove",A),t.value.removeEventListener("pointerleave",G))}),{intersects:L,onClick:d=>M.on(d).off,onPointerMove:d=>w.on(d).off}};function Ae(){const{logWarning:e}=R();function a(t,r,s){let l=null;return t.traverse(n=>{n[r]===s&&(l=n)}),l||e(`Child with ${r} '${s}' not found.`),l}function o(t,r){return a(t,"name",r)}return{seek:a,seekByName:o}}const ce=()=>{const e=c.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),a=n=>{Object.values(e).forEach(i=>i.delete(n))},o=n=>{const{onClick:i,onPointerMove:u,onPointerEnter:m,onPointerLeave:g}=n;i&&e.click.set(n,i),u&&e.pointerMove.set(n,u),m&&e.pointerEnter.set(n,m),g&&e.pointerLeave.set(n,g),n.addEventListener("removed",()=>{n.traverse(y=>{a(y)}),a(n)})},t=c.computed(()=>Le(Object.values(e).map(n=>Array.from(n.keys())).flat(),({uuid:n})=>n)),{onClick:r,onPointerMove:s}=se(t);r(({intersects:n,event:i})=>{var u;n.length&&((u=e.click.get(n[0].object))==null||u(n[0],i))});let l;return s(({intersects:n,event:i})=>{var _,L,M,w;const u=(_=n==null?void 0:n[0])==null?void 0:_.object,{pointerLeave:m,pointerEnter:g,pointerMove:y}=e;l&&l!==u&&((L=m.get(l))==null||L(l,i)),u&&(l!==u&&((M=g.get(u))==null||M(n[0],i)),(w=y.get(u))==null||w(n[0],i)),l=u||null}),{registerObject:o,deregisterObject:a}},z={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp",REGISTER_AT_POINTER_EVENT_HANDLER:"tres__registerAtPointerEventHandler"};function qe(e){}let q=null,B=null;const{logError:le}=R(),ke={createElement(e,a,o,t){var i,u;if(t||(t={}),t.args||(t.args=[]),e==="template"||Pe(e))return null;let r=e.replace("Tres",""),s;if(e==="primitive"){(t==null?void 0:t.object)===void 0&&le("Tres primitives need a prop 'object'");const m=t.object;r=m.type,s=Object.assign(m,{type:r,attach:t.attach,primitive:!0})}else{const m=F.value[r];m||le(`${r} is not defined on the THREE namespace. Use extend to add it to the catalog.`),s=new m(...t.args)}s.isCamera&&(t!=null&&t.position||s.position.set(3,3,3),t!=null&&t.lookAt||s.lookAt(0,0,0)),(t==null?void 0:t.attach)===void 0&&(s.isMaterial?s.attach="material":s.isBufferGeometry&&(s.attach="geometry"));const{GEOMETRY_VIA_PROP:l,MATERIAL_VIA_PROP:n}=z;return s.isObject3D&&((i=t==null?void 0:t.material)!=null&&i.isMaterial&&(s.userData[n]=!0),(u=t==null?void 0:t.geometry)!=null&&u.isBufferGeometry&&(s.userData[l]=!0)),s},insert(e,a){var o,t,r,s,l,n,i;if(a&&a.isScene&&(B=a),(((o=e==null?void 0:e.__vnode)==null?void 0:o.type)==="TresGroup"||((t=e==null?void 0:e.__vnode)==null?void 0:t.type)==="TresObject3D")&&a===null&&!((s=(r=e==null?void 0:e.__vnode)==null?void 0:r.ctx)!=null&&s.asyncResolved)){q=e;return}else(l=e==null?void 0:e.__vnode)!=null&&l.type.includes("Controls")&&a===null&&(q=B);a||(a=q),e!=null&&e.isObject3D&&(a!=null&&a.isObject3D)?(a.add(e),e.dispatchEvent({type:"added"}),(i=(n=B==null?void 0:B.userData)==null?void 0:n[z.REGISTER_AT_POINTER_EVENT_HANDLER])==null||i.call(n,e)):e!=null&&e.isFog?a.fog=e:typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[a==null?void 0:a.attach],a&&(a[e.attach]=e))},remove(e){var a,o;if(e){if(e.isObject3D){const t=e,r=s=>{var i,u;const{GEOMETRY_VIA_PROP:l,MATERIAL_VIA_PROP:n}=z;s.userData[n]||(i=s.material)==null||i.dispose(),s.userData[l]||(u=s.geometry)==null||u.dispose()};t.traverse(s=>{r(s)}),r(t)}(a=e.removeFromParent)==null||a.call(e),(o=e.dispose)==null||o.call(e)}},patchProp(e,a,o,t){if(e){let r=e,s=a,l=N(s),n=r==null?void 0:r[l];if(r.type==="BufferGeometry"){if(s==="args")return;r.setAttribute(N(s),new v.BufferAttribute(...t));return}if(s.includes("-")&&n===void 0){const u=s.split("-");n=u.reduce((m,g)=>m[N(g)],r),s=u.pop(),l=s.toLowerCase(),n!=null&&n.set||(r=u.reduce((m,g)=>m[N(g)],r))}let i=t;if(i===""&&(i=!0),X(n)){Array.isArray(i)?e[l](...i):e[l](i);return}!(n!=null&&n.set)&&!X(n)?r[l]=i:n.constructor===i.constructor&&(n!=null&&n.copy)?n==null||n.copy(i):Array.isArray(i)?n.set(...i):!n.isColor&&n.setScalar?n.setScalar(i):n.set(i)}},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:xe}=c.createRenderer(ke),Ee=e=>{const a=xe(o);function o(){return e&&e.default?e.default():[]}return a};W(ge);const Re=["data-scene"],Ve={style:{width:"100%",height:"100%"}},Be=["data-scene"],je=c.defineComponent({__name:"TresScene",props:{shadows:{type:Boolean},shadowMapType:{},physicallyCorrectLights:{type:Boolean,default:!1},useLegacyLights:{type:Boolean},outputColorSpace:{},toneMapping:{},toneMappingExposure:{},context:{},powerPreference:{},preserveDrawingBuffer:{type:Boolean},clearColor:{},windowSize:{type:Boolean},preset:{},disableRender:{type:Boolean},camera:{}},setup(e,{expose:a}){const o=e,{logWarning:t}=R();o.physicallyCorrectLights===!0&&t("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const r=c.ref(),s=c.ref(),l=new v.Scene,n=ce(),{setState:i}=x();l.userData[z.REGISTER_AT_POINTER_EVENT_HANDLER]=n.registerObject,i("scene",l),i("canvas",s),i("container",r),i("pointerEventHandler",n),i("appContext",c.getCurrentInstance());const{onLoop:u,resume:m}=U(),{activeCamera:g,pushCamera:y,clearCameras:_}=Z();c.onMounted(()=>{M()}),c.onUnmounted(()=>{i("renderer",null)});function L(){const b=l.getObjectByProperty("isCamera",!0);if(b)y(b);else{t("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");const P=new v.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);P.position.set(3,3,3),P.lookAt(0,0,0),y(P)}}function M(){const{renderer:b}=re(o);o.camera&&y(o.camera),u(()=>{var P;g.value&&o.disableRender!==!0&&((P=b.value)==null||P.render(l,g.value))})}let w;const T=c.useSlots();function A(){w=Ee(T);const b=x();w.provide("useTres",b),w.provide(j,b),w.provide("extend",W),w.mount(l),L()}return A(),a({scene:l}),c.watch(()=>o.camera,b=>{b&&(_(),y(b))}),(b,P)=>(c.openBlock(),c.createElementBlock("div",{ref_key:"container",ref:r,key:c.unref(l).uuid,"data-scene":c.unref(l).uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[c.createElementVNode("div",Ve,[c.createElementVNode("canvas",{ref_key:"canvas",ref:s,"data-scene":c.unref(l).uuid,style:c.normalizeStyle({display:"block",width:"100%",height:"100%",position:b.windowSize?"fixed":"absolute",top:0,left:0})},null,12,Be)])],8,Re))}}),ue=c.defineComponent({__name:"TresCanvas",props:{shadows:{type:Boolean},shadowMapType:{},physicallyCorrectLights:{type:Boolean},useLegacyLights:{type:Boolean},outputColorSpace:{},toneMapping:{},toneMappingExposure:{},context:{},powerPreference:{},preserveDrawingBuffer:{type:Boolean},clearColor:{},windowSize:{type:Boolean},preset:{},disableRender:{type:Boolean},camera:{}},setup(e,{expose:a}){const o=e,t=H();return a(t),(r,s)=>(c.openBlock(),c.createBlock(je,c.normalizeProps(c.guardReactiveProps(o)),{default:c.withCtx(()=>[c.renderSlot(r.$slots,"default")]),_:3},16))}}),De=["TresCanvas","TresLeches","TresScene"],Ie={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!De.includes(e)||e==="primitive"}}},Ne={install(e){e.component("TresCanvas",ue)}};p.CameraType=Q,p.TRES_CONTEXT_KEY=j,p.TresCanvas=ue,p.catalogue=F,p.default=Ne,p.extend=W,p.isProd=Se,p.normalizeColor=ae,p.normalizeVectorFlexibleParam=_e,p.templateCompilerOptions=Ie,p.trasverseObjects=ie,p.useCamera=Z,p.useLoader=Oe,p.useLogger=R,p.usePointerEventHandler=ce,p.useRaycaster=se,p.useRenderLoop=U,p.useRenderer=re,p.useSeek=Ae,p.useTexture=Te,p.useTres=x,p.useTresProvider=H,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/types/index.d.ts
CHANGED
|
@@ -123,7 +123,7 @@ interface RaycastableRepresentation {
|
|
|
123
123
|
type EventProps<P> = P extends RaycastableRepresentation ? Partial<EventHandlers> : unknown;
|
|
124
124
|
export interface VueProps<P> {
|
|
125
125
|
children?: VNode[];
|
|
126
|
-
ref?: Ref<P>;
|
|
126
|
+
ref?: string | null | Ref<P>;
|
|
127
127
|
key?: string;
|
|
128
128
|
}
|
|
129
129
|
type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<Overwrite<WithMathProps<P>, VueProps<P> & EventProps<P>>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function withSetup(composable: any): (import("vue").App<Element> | undefined)[];
|
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.4.
|
|
4
|
+
"version": "2.4.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"packageManager": "pnpm@8.3.1",
|
|
7
7
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
@@ -55,6 +55,7 @@
|
|
|
55
55
|
"docs:dev": "vitepress dev docs",
|
|
56
56
|
"docs:build": "vitepress build docs",
|
|
57
57
|
"docs:serve": "vitepress serve docs",
|
|
58
|
+
"docs:preview": "vitepress preview docs",
|
|
58
59
|
"docs:contributors": "esno scripts/update-contributors.ts"
|
|
59
60
|
},
|
|
60
61
|
"peerDependencies": {
|
|
@@ -70,7 +71,7 @@
|
|
|
70
71
|
"@huntersofbook/plausible-vue": "^1.0.0",
|
|
71
72
|
"@release-it/conventional-changelog": "^5.1.1",
|
|
72
73
|
"@stackblitz/sdk": "^1.9.0",
|
|
73
|
-
"@tresjs/cientos": "2.
|
|
74
|
+
"@tresjs/cientos": "2.2.0",
|
|
74
75
|
"@types/three": "^0.152.1",
|
|
75
76
|
"@typescript-eslint/eslint-plugin": "^5.60.0",
|
|
76
77
|
"@typescript-eslint/parser": "^5.60.0",
|
|
@@ -102,7 +103,7 @@
|
|
|
102
103
|
"vite-plugin-inspect": "^0.7.29",
|
|
103
104
|
"vite-plugin-require-transform": "^1.0.17",
|
|
104
105
|
"vite-svg-loader": "^4.0.0",
|
|
105
|
-
"vitepress": "1.0.0-beta.
|
|
106
|
+
"vitepress": "1.0.0-beta.5",
|
|
106
107
|
"vitest": "^0.32.2",
|
|
107
108
|
"vue": "^3.3.4",
|
|
108
109
|
"vue-demi": "^0.14.5"
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { ColorSpace, ShadowMapType, ToneMapping } from 'three';
|
|
2
|
-
import { CameraType } from '../composables';
|
|
3
|
-
import { RendererPresetsType } from '../composables/useRenderer/const';
|
|
4
|
-
export interface TresCanvasProps {
|
|
5
|
-
shadows?: boolean;
|
|
6
|
-
shadowMapType?: ShadowMapType;
|
|
7
|
-
physicallyCorrectLights?: boolean;
|
|
8
|
-
useLegacyLights?: boolean;
|
|
9
|
-
outputColorSpace?: ColorSpace;
|
|
10
|
-
toneMapping?: ToneMapping;
|
|
11
|
-
toneMappingExposure?: number;
|
|
12
|
-
context?: WebGLRenderingContext;
|
|
13
|
-
powerPreference?: 'high-performance' | 'low-power' | 'default';
|
|
14
|
-
preserveDrawingBuffer?: boolean;
|
|
15
|
-
clearColor?: string;
|
|
16
|
-
windowSize?: boolean;
|
|
17
|
-
preset?: RendererPresetsType;
|
|
18
|
-
disableRender?: boolean;
|
|
19
|
-
camera?: CameraType;
|
|
20
|
-
}
|
|
21
|
-
/**
|
|
22
|
-
* Vue component for rendering a Tres component.
|
|
23
|
-
*/
|
|
24
|
-
export declare const TresCanvas: import("vue").DefineComponent<TresCanvasProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<TresCanvasProps>, {}, {}>;
|
|
25
|
-
export default TresCanvas;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { ColorSpace, ShadowMapType, ToneMapping } from 'three';
|
|
2
|
-
import { CameraType } from '../composables';
|
|
3
|
-
import { type RendererPresetsType } from '../composables/useRenderer/const';
|
|
4
|
-
export interface TresSceneProps {
|
|
5
|
-
shadows?: boolean;
|
|
6
|
-
shadowMapType?: ShadowMapType;
|
|
7
|
-
physicallyCorrectLights?: boolean;
|
|
8
|
-
useLegacyLights?: boolean;
|
|
9
|
-
outputColorSpace?: ColorSpace;
|
|
10
|
-
toneMapping?: ToneMapping;
|
|
11
|
-
toneMappingExposure?: number;
|
|
12
|
-
context?: WebGLRenderingContext;
|
|
13
|
-
powerPreference?: 'high-performance' | 'low-power' | 'default';
|
|
14
|
-
preserveDrawingBuffer?: boolean;
|
|
15
|
-
clearColor?: string;
|
|
16
|
-
windowSize?: boolean;
|
|
17
|
-
preset?: RendererPresetsType;
|
|
18
|
-
disableRender?: boolean;
|
|
19
|
-
camera?: CameraType;
|
|
20
|
-
}
|
|
21
|
-
export declare const TresScene: import("vue").DefineComponent<TresSceneProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<TresSceneProps>, {}, {}>;
|
|
22
|
-
export default TresScene;
|