@tresjs/core 2.4.0-next.3 → 2.4.0-next.5
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 +162 -63
- package/dist/composables/index.d.ts +1 -1
- package/dist/composables/useCamera/index.d.ts +3212 -6
- package/dist/composables/usePointerEventHandler/index.d.ts +4 -2
- package/dist/composables/useRaycaster/index.d.ts +4 -3
- package/dist/composables/useRenderLoop/index.d.ts +1 -1
- package/dist/composables/useRenderer/index.d.ts +25 -32
- package/dist/composables/useTresContextProvider/index.d.ts +25 -0
- package/dist/core/nodeOps.d.ts +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/tres.js +446 -437
- package/dist/tres.umd.cjs +2 -2
- package/dist/types/index.d.ts +13 -4
- package/package.json +1 -1
- package/dist/composables/useCamera/old.d.ts +0 -98
- package/dist/composables/useTres/index.d.ts +0 -142
- package/dist/keys.d.ts +0 -6
- package/dist/provider/index.d.ts +0 -20
- package/dist/utils/test-utils.d.ts +0 -1
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v2.4.0-next.
|
|
3
|
+
* version: v2.4.0-next.5
|
|
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,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],u):(d=typeof globalThis<"u"?globalThis:d||self,u(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,u,g,f){"use strict";function ue(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const t=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,t.get?t:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const le=ue(g);function Y(e){const n=u.shallowReactive([]),a=u.computed(()=>n.find(i=>i.userData.IS_ACTIVE_CAMERA));function t(i,s=!0){n.push(i),s&&r(i.uuid)}function r(i){const s=n.find(o=>o.uuid===i);s&&(n.forEach(o=>o.userData.IS_ACTIVE_CAMERA=!1),s.userData.IS_ACTIVE_CAMERA=!0)}return u.watchEffect(()=>{var i;(i=e.aspectRatio)!=null&&i.value&&(console.log("camera watcher aspectRatio",e.aspectRatio.value),n.forEach(s=>{s instanceof g.PerspectiveCamera&&(s.aspect=e.aspectRatio.value),s.updateProjectionMatrix()}))}),{cameras:n,camera:a,addCamera:t,setCameraToActive:r}}const K=f.createEventHook(),X=f.createEventHook(),I=f.createEventHook(),E=new g.Clock;let R=0,x=0;const{pause:fe,resume:de,isActive:me}=f.useRafFn(()=>{K.trigger({delta:R,elapsed:x,clock:E}),X.trigger({delta:R,elapsed:x,clock:E}),I.trigger({delta:R,elapsed:x,clock:E})},{immediate:!1});I.on(()=>{R=E.getDelta(),x=E.getElapsedTime()});function z(){return{onBeforeLoop:K.on,onLoop:X.on,onAfterLoop:I.on,pause:fe,resume:de,isActive:me}}function pe(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function J(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}const G={realistic:{outputColorSpace:g.SRGBColorSpace,toneMapping:g.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:g.PCFSoftShadowMap}}},Q=(e,n)=>{for(const a of Object.keys(n))n[a]instanceof Object&&Object.assign(n[a],Q(e[a],n[a]));return Object.assign(e||{},n),e},ve=ge("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 k(e){return e.replace(/-([a-z])/g,(n,a)=>a.toUpperCase())}function ge(e,n){const a=Object.create(null),t=e.split(",");for(let r=0;r<t.length;r++)a[t[r]]=!0;return n?r=>!!a[r.toLowerCase()]:r=>!!a[r]}const we=(e,n)=>{const a=new Set,t=[];for(const r of e){const i=n(r);a.has(i)||(a.add(i),t.push(r))}return t},be=!0,Z="[TresJS ▲ ■ ●] ";function A(){function e(t,r){console.error(`${Z} ${t}`,r||"")}function n(t){console.warn(`${Z} ${t}`)}function a(t,r){}return{logError:e,logWarning:n,logMessage:a}}function H(e,n,a){const t=u.shallowRef(),r=u.ref(!1),{alpha:i=!0,antialias:s=!0,depth:o,logarithmicDepthBuffer:c,failIfMajorPerformanceCaveat:l,precision:p,premultipliedAlpha:w,stencil:v,shadows:_=!1,shadowMapType:M=g.PCFShadowMap,useLegacyLights:h=!1,outputColorSpace:C=g.LinearSRGBColorSpace,toneMapping:P=g.NoToneMapping,toneMappingExposure:O=1,context:V=void 0,powerPreference:j="default",preserveDrawingBuffer:B=!1,clearColor:S,windowSize:m=!1,preset:b=void 0}=u.toRefs(a),{cameras:Ue,setRenderer:je,sizes:q}=n,{logError:Be,logWarning:$e}=A(),{pixelRatio:D}=f.useDevicePixelRatio(),{pause:De,resume:Ie}=z(),se=()=>{t.value&&(t.value.setSize(q.width.value,q.height.value),t.value.setPixelRatio(Math.min(D.value,2)))},ce=()=>{if(!t.value)return;const T=f.toValue(b);if(T){T in G||Be("Renderer Preset must be one of these: "+Object.keys(G).join(", ")),Q(t.value,G[T]);return}t.value.shadowMap.enabled=f.toValue(_),t.value.shadowMap.type=f.toValue(M),t.value.toneMapping=f.toValue(P)||g.NoToneMapping,t.value.toneMappingExposure=f.toValue(O),t.value.outputColorSpace=f.toValue(C)||g.LinearSRGBColorSpace,S!=null&&S.value&&t.value.setClearColor(J(f.toValue(S))),t.value.useLegacyLights=f.toValue(h)},ze=()=>{const T=f.unrefElement(e);console.count("init renderer"),T&&(t.value=new g.WebGLRenderer({canvas:T,alpha:f.toValue(i),antialias:f.toValue(s),context:f.toValue(V),depth:f.toValue(o),failIfMajorPerformanceCaveat:f.toValue(l),logarithmicDepthBuffer:f.toValue(c),powerPreference:f.toValue(j),precision:f.toValue(p),stencil:f.toValue(v),preserveDrawingBuffer:f.toValue(B),premultipliedAlpha:f.toValue(w)}),je(t.value),ce(),se(),Ie(),r.value=!0)},Ge=()=>{t.value&&(t.value.dispose(),t.value=void 0,r.value=!1,De())};return u.watchEffect(()=>{var T;((T=q.aspectRatio)!=null&&T.value||D!=null&&D.value)&&se()}),u.watch([_,M,C,h,P,O,S],ce),u.watch(e,()=>{f.unrefElement(e)&&ze()},{immediate:!0,deep:!0}),{renderer:t,isReady:r,dispose:Ge}}const ee=e=>typeof e=="function",te=e=>!!e&&e.constructor===Array;function ne(e){const n={nodes:{},materials:{}};return e&&e.traverse(a=>{a.name&&(n.nodes[a.name]=a),a.material&&!n.materials[a.material.name]&&(n.materials[a.material.name]=a.material)}),n}async function ye(e,n,a,t,r){const{logError:i}=A(),s=new e;r&&r(s),a&&a(s);const c=(Array.isArray(n)?n:[n]).map(l=>new Promise((p,w)=>{s.load(l,v=>{v.scene&&Object.assign(v,ne(v.scene)),p(v)},t,v=>w(i("[useLoader] - Failed to load resource",v)))}));return te(n)?await Promise.all(c):await c[0]}async function Ce(e){const n=new g.LoadingManager,a=new g.TextureLoader(n),t=r=>new Promise((i,s)=>{a.load(r,o=>i(o),()=>null,()=>{s(new Error("[useTextures] - Failed to load texture"))})});if(te(e)){const r=await Promise.all(e.map(i=>t(i)));return e.length>1?r:r[0]}else{const{map:r,displacementMap:i,normalMap:s,roughnessMap:o,metalnessMap:c,aoMap:l,alphaMap:p,matcap:w}=e;return{map:r?await t(r):null,displacementMap:i?await t(i):null,normalMap:s?await t(s):null,roughnessMap:o?await t(o):null,metalnessMap:c?await t(c):null,aoMap:l?await t(l):null,alphaMap:p?await t(p):null,matcap:w?await t(w):null}}}const y=["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 he(){const e=Math.random()*4294967295|0,n=Math.random()*4294967295|0,a=Math.random()*4294967295|0,t=Math.random()*4294967295|0;return(y[e&255]+y[e>>8&255]+y[e>>16&255]+y[e>>24&255]+"-"+y[n&255]+y[n>>8&255]+"-"+y[n>>16&15|64]+y[n>>24&255]+"-"+y[a&63|128]+y[a>>8&255]+"-"+y[a>>16&255]+y[a>>24&255]+y[t&255]+y[t>>8&255]+y[t>>16&255]+y[t>>24&255]).toLowerCase()}const N=Symbol();function Me(){const e=u.shallowReactive({uuid:he(),camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,aspectRatio:void 0,pointerEventHandler:void 0});function n(r){return e[r]}function a(r,i){e[r]=i}const t={state:e,...u.toRefs(e),getState:n,setState:a};return u.provide(N,t),t}const ae=()=>u.inject(N,{state:u.shallowReactive({camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,pointerEventHandler:void 0})}),oe=e=>{const{state:n}=ae(),a=u.computed(()=>{var m;return(m=n.canvas)==null?void 0:m.value}),{x:t,y:r}=f.usePointer({target:a}),{width:i,height:s,top:o,left:c}=f.useElementBounding(a),l=new g.Raycaster,p=({x:m,y:b})=>{if(a.value)return{x:(m-c.value)/i.value*2-1,y:-((b-o.value)/s.value)*2+1}},w=({x:m,y:b})=>{if(n.camera)return l.setFromCamera(new g.Vector2(m,b),n.camera),l.intersectObjects(e.value,!1)},v=m=>{const b=p({x:(m==null?void 0:m.clientX)??t.value,y:(m==null?void 0:m.clientY)??r.value});return b?w(b)||[]:[]},_=u.computed(()=>v()),M=f.createEventHook(),h=f.createEventHook(),C=(m,b)=>{m.trigger({event:b,intersects:v(b)})},P=m=>{C(h,m)};let O;const V=m=>{var b;O=(b=v(m)[0])==null?void 0:b.object},j=m=>{var b;m instanceof PointerEvent&&O===((b=v(m)[0])==null?void 0:b.object)&&C(M,m)},B=m=>h.trigger({event:m,intersects:[]}),S=u.watchEffect(()=>{a!=null&&a.value&&(a.value.addEventListener("pointerup",j),a.value.addEventListener("pointerdown",V),a.value.addEventListener("pointermove",P),a.value.addEventListener("pointerleave",B),S())});return u.onUnmounted(()=>{a!=null&&a.value&&(a.value.removeEventListener("pointerup",j),a.value.removeEventListener("pointerdown",V),a.value.removeEventListener("pointermove",P),a.value.removeEventListener("pointerleave",B))}),{intersects:_,onClick:m=>M.on(m).off,onPointerMove:m=>h.on(m).off}};function Pe(){const{logWarning:e}=A();function n(t,r,i){let s=null;return t.traverse(o=>{o[r]===i&&(s=o)}),s||e(`Child with ${r} '${i}' not found.`),s}function a(t,r){return n(t,"name",r)}return{seek:n,seekByName:a}}const _e=()=>{const e=u.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),n=o=>{Object.values(e).forEach(c=>c.delete(o))},a=o=>{const{onClick:c,onPointerMove:l,onPointerEnter:p,onPointerLeave:w}=o;c&&e.click.set(o,c),l&&e.pointerMove.set(o,l),p&&e.pointerEnter.set(o,p),w&&e.pointerLeave.set(o,w),o.addEventListener("removed",()=>{o.traverse(v=>{n(v)}),n(o)})},t=u.computed(()=>we(Object.values(e).map(o=>Array.from(o.keys())).flat(),({uuid:o})=>o)),{onClick:r,onPointerMove:i}=oe(t);r(({intersects:o,event:c})=>{var l;o.length&&((l=e.click.get(o[0].object))==null||l(o[0],c))});let s;return i(({intersects:o,event:c})=>{var _,M,h,C;const l=(_=o==null?void 0:o[0])==null?void 0:_.object,{pointerLeave:p,pointerEnter:w,pointerMove:v}=e;s&&s!==l&&((M=p.get(s))==null||M(s,c)),l&&(s!==l&&((h=w.get(l))==null||h(o[0],c)),(C=v.get(l))==null||C(o[0],c)),s=l||null}),{registerObject:a,deregisterObject:n}},{logError:Te}=A();function Ae(e,n,a){var h;e||Te("A scene most be provided to the TresProvider");const{width:t,height:r}=f.toValue(a.windowSize)==!0||f.toValue(a.windowSize)===""||f.toValue(a.windowSize)==="true"||n.value===void 0?f.useWindowSize():f.useElementSize((h=n.value)==null?void 0:h.parentElement),i=u.computed(()=>t.value/r.value),s={height:r,width:t,aspectRatio:i},o=u.shallowRef(e),{camera:c,cameras:l,addCamera:p,setCameraToActive:w}=Y(s),v=u.shallowRef(null);function _(C){v.value||(v.value=C)}const M={scene:u.readonly(o),cameras:u.readonly(l),camera:c,addCamera:p,setCameraToActive:w,renderer:u.readonly(v),setRenderer:_,sizes:s};return u.provide("useTres",M),M}function Se(){const e=u.inject("useTres");if(!e)throw new Error("useTresContext must be used within a TresProvider");return e}const F=u.ref({}),W=e=>void Object.assign(F.value,e),U={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp",REGISTER_AT_POINTER_EVENT_HANDLER:"tres__registerAtPointerEventHandler"};function Fe(e){}let $=null,L=null;const{logError:re}=A(),Ee={createElement(e,n,a,t){var c,l;if(t||(t={}),t.args||(t.args=[]),e==="template"||ve(e))return null;let r=e.replace("Tres",""),i;if(e==="primitive"){(t==null?void 0:t.object)===void 0&&re("Tres primitives need a prop 'object'");const p=t.object;r=p.type,i=Object.assign(p,{type:r,attach:t.attach,primitive:!0})}else{const p=F.value[r];p||re(`${r} is not defined on the THREE namespace. Use extend to add it to the catalog.`),i=new p(...t.args)}i.isCamera&&(t!=null&&t.position||i.position.set(3,3,3),t!=null&&t.lookAt||i.lookAt(0,0,0)),(t==null?void 0:t.attach)===void 0&&(i.isMaterial?i.attach="material":i.isBufferGeometry&&(i.attach="geometry"));const{GEOMETRY_VIA_PROP:s,MATERIAL_VIA_PROP:o}=U;return i.isObject3D&&((c=t==null?void 0:t.material)!=null&&c.isMaterial&&(i.userData[o]=!0),(l=t==null?void 0:t.geometry)!=null&&l.isBufferGeometry&&(i.userData[s]=!0)),i},insert(e,n){var a,t,r,i,s,o,c;if(n&&n.isScene&&(L=n),(((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresGroup"||((t=e==null?void 0:e.__vnode)==null?void 0:t.type)==="TresObject3D")&&n===null&&!((i=(r=e==null?void 0:e.__vnode)==null?void 0:r.ctx)!=null&&i.asyncResolved)){$=e;return}else(s=e==null?void 0:e.__vnode)!=null&&s.type.includes("Controls")&&n===null&&($=L);n||(n=$),e!=null&&e.isObject3D&&(n!=null&&n.isObject3D)?(n.add(e),e.dispatchEvent({type:"added"}),(c=(o=L==null?void 0:L.userData)==null?void 0:o[U.REGISTER_AT_POINTER_EVENT_HANDLER])==null||c.call(o,e)):e!=null&&e.isFog?n.fog=e:typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[n==null?void 0:n.attach],n&&(n[e.attach]=e))},remove(e){var n,a;if(e){if(e.isObject3D){const t=e,r=i=>{var c,l;const{GEOMETRY_VIA_PROP:s,MATERIAL_VIA_PROP:o}=U;i.userData[o]||(c=i.material)==null||c.dispose(),i.userData[s]||(l=i.geometry)==null||l.dispose()};t.traverse(i=>{r(i)}),r(t)}(n=e.removeFromParent)==null||n.call(e),(a=e.dispose)==null||a.call(e)}},patchProp(e,n,a,t){if(e){let r=e,i=n,s=k(i),o=r==null?void 0:r[s];if(r.type==="BufferGeometry"){if(i==="args")return;r.setAttribute(k(i),new g.BufferAttribute(...t));return}if(i.includes("-")&&o===void 0){const l=i.split("-");o=l.reduce((p,w)=>p[k(w)],r),i=l.pop(),s=i.toLowerCase(),o!=null&&o.set||(r=l.reduce((p,w)=>p[k(w)],r))}let c=t;if(c===""&&(c=!0),ee(o)){Array.isArray(c)?e[s](...c):e[s](c);return}!(o!=null&&o.set)&&!ee(o)?r[s]=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:Le}=u.createRenderer(Ee),Oe=e=>{const n=Le(a);function a(){return e&&e.default?e.default():[]}return n};W(le);const Re=["data-scene"],ie=u.defineComponent({__name:"TresCanvas",props:{shadows:{type:Boolean},shadowMapType:{},useLegacyLights:{type:Boolean},outputColorSpace:{},toneMapping:{},toneMappingExposure:{},context:{},powerPreference:{},preserveDrawingBuffer:{type:Boolean},clearColor:{},windowSize:{type:Boolean},preset:{},disableRender:{type:Boolean},camera:{}},setup(e){const n=e,{logWarning:a}=A(),t=u.ref(),r=u.shallowRef(new g.Scene),{onLoop:i}=z(),s=u.useSlots();function o(){const c=Ae(r.value,t,n),{addCamera:l,camera:p,clearCameras:w}=c;let v;function _(){v=Oe(s),v.provide("useTres",c),v.provide("extend",W),v.mount(r.value),h()}_();const{renderer:M}=H(t,c,n);n.camera&&l(n.camera),i(()=>{var C;p.value&&n.disableRender!==!0&&((C=M.value)==null||C.render(r.value,p.value))});function h(){const C=r.value.getObjectByProperty("isCamera",!0);if(C)l(C);else{a("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");const P=new g.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);P.position.set(3,3,3),P.lookAt(0,0,0),l(P)}u.watch(()=>n.camera,P=>{P&&(w(),l(P))})}}return u.onMounted(()=>{o()}),u.onUnmounted(()=>{}),(c,l)=>(u.openBlock(),u.createElementBlock("canvas",{ref_key:"canvas",ref:t,"data-scene":r.value.uuid,style:u.normalizeStyle({display:"block",width:"100%",height:"100%",position:c.windowSize?"fixed":"relative",top:0,left:0,pointerEvents:"auto",touchAction:"none",zIndex:1})},null,12,Re))}}),xe=["TresCanvas","TresLeches","TresScene"],ke={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!xe.includes(e)||e==="primitive"}}},Ve={install(e){e.component("TresCanvas",ie)}};d.TRES_CONTEXT_KEY=N,d.TresCanvas=ie,d.catalogue=F,d.default=Ve,d.extend=W,d.isProd=be,d.normalizeColor=J,d.normalizeVectorFlexibleParam=pe,d.templateCompilerOptions=ke,d.trasverseObjects=ne,d.useCamera=Y,d.useLoader=ye,d.useLogger=A,d.usePointerEventHandler=_e,d.useRaycaster=oe,d.useRenderLoop=z,d.useRenderer=H,d.useSeek=Pe,d.useTexture=Ce,d.useTres=ae,d.useTresContext=Se,d.useTresProvider=Me,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
8
|
+
(function(d,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],f):(d=typeof globalThis<"u"?globalThis:d||self,f(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,f,g,p){"use strict";function ae(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const ne=ae(g),E=f.ref({}),j=e=>void Object.assign(E.value,e),W=e=>typeof e=="function",$=e=>!!e&&e.constructor===Array;function I({sizes:e,scene:r}){const t=f.ref([]),a=f.computed(()=>t.value.find(({userData:n})=>n.tres__isActiveCamera)),o=(n,i=!0)=>{t.value.some(({uuid:m})=>m===n.uuid)||(t.value.push(n),i&&l(n))},u=n=>{if(n.userData.tres__isActiveCamera){const i=t.value[t.value.length-1];i&&l(i.uuid)}t.value=t.value.filter(({uuid:i})=>i!==n.uuid)},l=n=>{const i=n instanceof g.Camera?n:t.value.find(c=>c.uuid===n);if(!i)return;t.value.forEach(({userData:c})=>c.tres__isActiveCamera=!1);const m=i;m.userData.tres__isActiveCamera=!0},s=()=>{t.value=[]};return f.watchEffect(()=>{e.aspectRatio.value&&t.value.forEach(n=>{n instanceof g.PerspectiveCamera&&(n.aspect=e.aspectRatio.value),(n instanceof g.PerspectiveCamera||n instanceof g.OrthographicCamera)&&n.updateProjectionMatrix()})}),r.userData.tres__registerCamera=o,r.userData.tres__deregisterCamera=u,f.onUnmounted(()=>{s()}),{camera:a,cameras:t,addCamera:o,removeCamera:u,setCameraActive:l}}const q=p.createEventHook(),N=p.createEventHook(),z=p.createEventHook(),D=new g.Clock;let V=0,B=0;const{pause:re,resume:oe,isActive:se}=p.useRafFn(()=>{q.trigger({delta:V,elapsed:B,clock:D}),N.trigger({delta:V,elapsed:B,clock:D}),z.trigger({delta:V,elapsed:B,clock:D})},{immediate:!1});z.on(()=>{V=D.getDelta(),B=D.getElapsedTime()});const F=()=>({onBeforeLoop:q.on,onLoop:N.on,onAfterLoop:z.on,pause:re,resume:oe,isActive:se}),G={realistic:{outputColorSpace:g.SRGBColorSpace,toneMapping:g.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:g.PCFSoftShadowMap}}},U=(e,r)=>{for(const t of Object.keys(r))r[t]instanceof Object&&Object.assign(r[t],U(e[t],r[t]));return Object.assign(e||{},r),e},ie=ue("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 T(e){return e.replace(/-([a-z])/g,(r,t)=>t.toUpperCase())}function ue(e,r){const t=Object.create(null),a=e.split(",");for(let o=0;o<a.length;o++)t[a[o]]=!0;return r?o=>!!t[o.toLowerCase()]:o=>!!t[o]}const le=(e,r)=>{const t=new Set,a=[];for(const o of e){const u=r(o);t.has(u)||(t.add(u),a.push(o))}return a},ce=!0,J="[TresJS ▲ ■ ●] ";function k(){function e(a,o){console.error(`${J} ${a}`,o||"")}function r(a){console.warn(`${J} ${a}`)}function t(a,o){}return{logError:e,logWarning:r,logMessage:t}}function fe(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function K(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}function X({scene:e,canvas:r,options:t,disableRender:a,contextParts:{sizes:o,camera:u}}){const l=f.computed(()=>({alpha:p.toValue(t.alpha),depth:p.toValue(t.depth),canvas:p.unrefElement(r),context:p.toValue(t.context),stencil:p.toValue(t.stencil),antialias:p.toValue(t.antialias)===void 0?!0:p.toValue(t.antialias),precision:p.toValue(t.precision),powerPreference:p.toValue(t.powerPreference),premultipliedAlpha:p.toValue(t.premultipliedAlpha),preserveDrawingBuffer:p.toValue(t.preserveDrawingBuffer),logarithmicDepthBuffer:p.toValue(t.logarithmicDepthBuffer),failIfMajorPerformanceCaveat:p.toValue(t.failIfMajorPerformanceCaveat)})),s=f.shallowRef(new g.WebGLRenderer(l.value));f.watch(l,()=>{s.value.dispose(),s.value=new g.WebGLRenderer(l.value)}),f.watchEffect(()=>{s.value.setSize(o.width.value,o.height.value)});const{pixelRatio:n}=p.useDevicePixelRatio();f.watchEffect(()=>{s.value.setPixelRatio(n.value)});const{logError:i}=k(),c=(()=>{const y=new g.WebGLRenderer,w={shadowMap:{enabled:y.shadowMap.enabled,type:y.shadowMap.type},toneMapping:y.toneMapping,toneMappingExposure:y.toneMappingExposure,outputColorSpace:y.outputColorSpace,useLegacyLights:y.useLegacyLights};return y.dispose(),w})();f.watchEffect(()=>{const y=p.toValue(t.preset);if(y){y in G||i("Renderer Preset must be one of these: "+Object.keys(G).join(", ")),U(s.value,G[y]);return}const w=p.toValue(t.shadows);s.value.shadowMap.enabled=w!==void 0?w:c.shadowMap.enabled;const _=p.toValue(t.shadowMapType);s.value.shadowMap.type=_!==void 0?_:c.shadowMap.type;const b=p.toValue(t.toneMapping);s.value.toneMapping=b!==void 0?b:c.toneMapping;const A=p.toValue(t.toneMappingExposure);s.value.toneMappingExposure=A!==void 0?A:c.toneMappingExposure;const O=p.toValue(t.outputColorSpace);s.value.outputColorSpace=O!==void 0?O:c.outputColorSpace;const x=p.toValue(t.useLegacyLights);s.value.useLegacyLights=x!==void 0?x:c.useLegacyLights;const S=p.toValue(t.clearColor);S&&s.value.setClearColor(S?K(S):new g.Color(0))});const{pause:M,resume:P,onLoop:L}=F();return L(()=>{u.value&&!p.toValue(a)&&s.value.render(e,u.value)}),P(),f.onUnmounted(()=>{M(),s.value.dispose(),s.value.forceContextLoss()}),{renderer:s}}function Y(e){const r={nodes:{},materials:{}};return e&&e.traverse(t=>{t.name&&(r.nodes[t.name]=t),t.material&&!r.materials[t.material.name]&&(r.materials[t.material.name]=t.material)}),r}async function me(e,r,t,a,o){const{logError:u}=k(),l=new e;o&&o(l),t&&t(l);const n=(Array.isArray(r)?r:[r]).map(i=>new Promise((m,c)=>{l.load(i,M=>{M.scene&&Object.assign(M,Y(M.scene)),m(M)},a,M=>c(u("[useLoader] - Failed to load resource",M)))}));return $(r)?await Promise.all(n):await n[0]}async function pe(e){const r=new g.LoadingManager,t=new g.TextureLoader(r),a=o=>new Promise((u,l)=>{t.load(o,s=>u(s),()=>null,()=>{l(new Error("[useTextures] - Failed to load texture"))})});if($(e)){const o=await Promise.all(e.map(u=>a(u)));return e.length>1?o:o[0]}else{const{map:o,displacementMap:u,normalMap:l,roughnessMap:s,metalnessMap:n,aoMap:i,alphaMap:m,matcap:c}=e;return{map:o?await a(o):null,displacementMap:u?await a(u):null,normalMap:l?await a(l):null,roughnessMap:s?await a(s):null,metalnessMap:n?await a(n):null,aoMap:i?await a(i):null,alphaMap:m?await a(m):null,matcap:c?await a(c):null}}}const Q=(e,{renderer:r,camera:t})=>{const a=f.computed(()=>r.value.domElement),{x:o,y:u}=p.usePointer({target:a}),{width:l,height:s,top:n,left:i}=p.useElementBounding(a),m=new g.Raycaster,c=({x:v,y:h})=>{if(a.value)return{x:(v-i.value)/l.value*2-1,y:-((h-n.value)/s.value)*2+1}},M=({x:v,y:h})=>{if(t.value)return m.setFromCamera(new g.Vector2(v,h),t.value),m.intersectObjects(e.value,!1)},P=v=>{const h=c({x:(v==null?void 0:v.clientX)??o.value,y:(v==null?void 0:v.clientY)??u.value});return h?M(h)||[]:[]},L=f.computed(()=>P()),y=p.createEventHook(),w=p.createEventHook(),_=(v,h)=>{v.trigger({event:h,intersects:P(h)})},b=v=>{_(w,v)};let A;const O=v=>{var h;A=(h=P(v)[0])==null?void 0:h.object},x=v=>{var h;v instanceof PointerEvent&&A===((h=P(v)[0])==null?void 0:h.object)&&_(y,v)},S=v=>w.trigger({event:v,intersects:[]});return a.value.addEventListener("pointerup",x),a.value.addEventListener("pointerdown",O),a.value.addEventListener("pointermove",b),a.value.addEventListener("pointerleave",S),f.onUnmounted(()=>{a!=null&&a.value&&(a.value.removeEventListener("pointerup",x),a.value.removeEventListener("pointerdown",O),a.value.removeEventListener("pointermove",b),a.value.removeEventListener("pointerleave",S))}),{intersects:L,onClick:v=>y.on(v).off,onPointerMove:v=>w.on(v).off}};function de(){const{logWarning:e}=k();function r(a,o,u){let l=null;return a.traverse(s=>{s[o]===u&&(l=s)}),l||e(`Child with ${o} '${u}' not found.`),l}function t(a,o){return r(a,"name",o)}return{seek:r,seekByName:t}}const Z=(e,r)=>{const t=f.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),a=i=>{Object.values(t).forEach(m=>m.delete(i))},o=i=>{const{onClick:m,onPointerMove:c,onPointerEnter:M,onPointerLeave:P}=i;m&&t.click.set(i,m),c&&t.pointerMove.set(i,c),M&&t.pointerEnter.set(i,M),P&&t.pointerLeave.set(i,P)};e.userData.tres__registerAtPointerEventHandler=o,e.userData.tres__deregisterAtPointerEventHandler=a;const u=f.computed(()=>le(Object.values(t).map(i=>Array.from(i.keys())).flat(),({uuid:i})=>i)),{onClick:l,onPointerMove:s}=Q(u,r);l(({intersects:i,event:m})=>{var c;i.length&&((c=t.click.get(i[0].object))==null||c(i[0],m))});let n;return s(({intersects:i,event:m})=>{var y,w,_,b;const c=(y=i==null?void 0:i[0])==null?void 0:y.object,{pointerLeave:M,pointerEnter:P,pointerMove:L}=t;n&&n!==c&&((w=M.get(n))==null||w(n,m)),c&&(n!==c&&((_=P.get(c))==null||_(i[0],m)),(b=L.get(c))==null||b(i[0],m)),n=c||null}),{registerObject:o,deregisterObject:a}};function H({scene:e,canvas:r,windowSize:t,disableRender:a,rendererOptions:o}){const u=f.computed(()=>p.toValue(t)?p.useWindowSize():p.useElementSize(p.toValue(r).parentElement)),l=f.computed(()=>u.value.width.value),s=f.computed(()=>u.value.height.value),n=f.computed(()=>l.value/s.value),i={height:s,width:l,aspectRatio:n},m=f.shallowRef(e),{camera:c,cameras:M,addCamera:P,removeCamera:L,setCameraActive:y}=I({sizes:i,scene:e}),{renderer:w}=X({scene:e,canvas:r,options:o,contextParts:{sizes:i,camera:c},disableRender:a}),_={sizes:i,scene:m,camera:c,cameras:f.readonly(M),renderer:f.readonly(w),addCamera:P,removeCamera:L,setCameraActive:y};return f.provide("useTres",_),_}function ve(){const e=f.inject("useTres");if(!e)throw new Error("useTresContext must be used together with useTresContextProvider");return e}function Le(e){}let R=null,C=null;const{logError:ee}=k(),ge={createElement(e,r,t,a){var l,s;if(a||(a={}),a.args||(a.args=[]),e==="template"||ie(e))return null;let o=e.replace("Tres",""),u;if(e==="primitive"){(a==null?void 0:a.object)===void 0&&ee("Tres primitives need a prop 'object'");const n=a.object;o=n.type,u=Object.assign(n,{type:o,attach:a.attach,primitive:!0})}else{const n=E.value[o];n||ee(`${o} is not defined on the THREE namespace. Use extend to add it to the catalog.`),u=new n(...a.args)}return u.isCamera&&(a!=null&&a.position||u.position.set(3,3,3),a!=null&&a.lookAt||u.lookAt(0,0,0)),(a==null?void 0:a.attach)===void 0&&(u.isMaterial?u.attach="material":u.isBufferGeometry&&(u.attach="geometry")),u.isObject3D&&((l=a==null?void 0:a.material)!=null&&l.isMaterial&&(u.userData.tres__materialViaProp=!0),(s=a==null?void 0:a.geometry)!=null&&s.isBufferGeometry&&(u.userData.tres__geometryViaProp=!0)),u},insert(e,r){var t,a,o,u,l,s,n,i,m;if(r&&r.isScene&&(C=r),(((t=e==null?void 0:e.__vnode)==null?void 0:t.type)==="TresGroup"||((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresObject3D")&&r===null&&!((u=(o=e==null?void 0:e.__vnode)==null?void 0:o.ctx)!=null&&u.asyncResolved)){R=e;return}else(l=e==null?void 0:e.__vnode)!=null&&l.type.includes("Controls")&&r===null&&(R=C);if(r||(r=R),e!=null&&e.isObject3D){if(e!=null&&e.isCamera){if(!(C!=null&&C.userData.tres__registerCamera))throw"could not find tres__registerCamera on scene's userData";(n=C==null?void 0:(s=C.userData).tres__registerCamera)==null||n.call(s,e)}if(e!=null&&e.onClick||e!=null&&e.onPointerMove||e!=null&&e.onPointerEnter||e!=null&&e.onPointerLeave){if(!(C!=null&&C.userData.tres__registerAtPointerEventHandler))throw"could not find tres__registerAtPointerEventHandler on scene's userData";(m=C==null?void 0:(i=C.userData).tres__registerAtPointerEventHandler)==null||m.call(i,e)}}e!=null&&e.isObject3D&&(r!=null&&r.isObject3D)?(r.add(e),e.dispatchEvent({type:"added"})):e!=null&&e.isFog?r.fog=e:typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[r==null?void 0:r.attach],r&&(r[e.attach]=e))},remove(e){var r,t;if(e){if(e.isObject3D){const a=e,o=n=>{var m,c;const i=n;n.userData.tres__materialViaProp||(m=i.material)==null||m.dispose(),n.userData.tres__geometryViaProp||(c=i.geometry)==null||c.dispose()},u=C==null?void 0:C.userData.tres__deregisterAtPointerEventHandler,l=n=>{if(!u)throw"could not find tres__deregisterAtPointerEventHandler on scene's userData";(n!=null&&n.onClick||n!=null&&n.onPointerMove||n!=null&&n.onPointerEnter||n!=null&&n.onPointerLeave)&&(u==null||u(n))},s=n=>{const i=C==null?void 0:C.userData.tres__deregisterCamera;if(!i)throw"could not find tres__deregisterCamera on scene's userData";n.isCamera&&(i==null||i(n))};a.traverse(n=>{o(n),s(n),l==null||l(n)}),o(a),s(a),l==null||l(a)}(r=e.removeFromParent)==null||r.call(e),(t=e.dispose)==null||t.call(e)}},patchProp(e,r,t,a){if(e){let o=e,u=r,l=T(u),s=o==null?void 0:o[l];if(o.type==="BufferGeometry"){if(u==="args")return;o.setAttribute(T(u),new g.BufferAttribute(...a));return}if(u.includes("-")&&s===void 0){const i=u.split("-");s=i.reduce((m,c)=>m[T(c)],o),u=i.pop(),l=u.toLowerCase(),s!=null&&s.set||(o=i.reduce((m,c)=>m[T(c)],o))}let n=a;if(n===""&&(n=!0),W(s)){Array.isArray(n)?e[l](...n):e[l](n);return}!(s!=null&&s.set)&&!W(s)?o[l]=n:s.constructor===n.constructor&&(s!=null&&s.copy)?s==null||s.copy(n):Array.isArray(n)?s.set(...n):!s.isColor&&s.setScalar?s.setScalar(n):s.set(n)}},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:we}=f.createRenderer(ge),ye=e=>{const r=we(t);function t(){return e&&e.default?e.default():[]}return r};j(ne);const Ce=["data-scene"],te=f.defineComponent({__name:"TresCanvas",props:{shadows:{type:Boolean},clearColor:{},toneMapping:{},shadowMapType:{},useLegacyLights:{type:Boolean},outputColorSpace:{},toneMappingExposure:{},windowSize:{type:Boolean},preset:{},disableRender:{type:Boolean},camera:{},context:{},precision:{},alpha:{type:Boolean},premultipliedAlpha:{type:Boolean},antialias:{type:Boolean},stencil:{type:Boolean},preserveDrawingBuffer:{type:Boolean},powerPreference:{},depth:{type:Boolean},logarithmicDepthBuffer:{type:Boolean},failIfMajorPerformanceCaveat:{type:Boolean}},setup(e){const r=e,{logWarning:t}=k(),a=f.ref(),o=f.shallowRef(new g.Scene);F();const u=f.useSlots();let l;const s=i=>{l=ye(u),l.provide("useTres",i),l.provide("extend",j),l.mount(o.value)},n=f.computed(()=>r.disableRender);return f.onMounted(()=>{const i=a,m=H({scene:o.value,canvas:i,windowSize:r.windowSize,disableRender:n,rendererOptions:r});Z(o.value,m);const{addCamera:c,camera:M,cameras:P,removeCamera:L}=m;s(m);const y=()=>{const w=new g.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);w.position.set(3,3,3),w.lookAt(0,0,0),c(w);const _=f.watchEffect(()=>{P.value.length>=2&&(w.removeFromParent(),L(w),_==null||_())})};f.watch(()=>r.camera,(w,_)=>{w?c(w):_&&(_.removeFromParent(),L(_))},{immediate:!0}),M.value||(t("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."),y())}),(i,m)=>(f.openBlock(),f.createElementBlock("canvas",{ref_key:"canvas",ref:a,"data-scene":o.value.uuid,style:f.normalizeStyle({display:"block",width:"100%",height:"100%",position:i.windowSize?"fixed":"relative",top:0,left:0,pointerEvents:"auto",touchAction:"none",zIndex:1})},null,12,Ce))}}),Me=["TresCanvas","TresLeches","TresScene"],_e={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!Me.includes(e)||e==="primitive"}}},Pe={install(e){e.component("TresCanvas",te)}};d.TresCanvas=te,d.catalogue=E,d.default=Pe,d.extend=j,d.isProd=ce,d.normalizeColor=K,d.normalizeVectorFlexibleParam=fe,d.templateCompilerOptions=_e,d.trasverseObjects=Y,d.useCamera=I,d.useLoader=me,d.useLogger=k,d.usePointerEventHandler=Z,d.useRaycaster=Q,d.useRenderLoop=F,d.useRenderer=X,d.useSeek=de,d.useTexture=pe,d.useTresContext=ve,d.useTresContextProvider=H,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type * as THREE from 'three';
|
|
2
1
|
import { DefineComponent, Ref, VNode } from 'vue';
|
|
2
|
+
import type * as THREE from 'three';
|
|
3
|
+
import type { EventProps as PointerEventHandlerEventProps } from '../composables/usePointerEventHandler';
|
|
3
4
|
export type AttachFnType<O = any> = (parent: any, self: O) => () => void;
|
|
4
5
|
export type AttachType<O = any> = string | AttachFnType<O>;
|
|
5
6
|
export type ConstructorRepresentation = new (...args: any[]) => any;
|
|
@@ -33,13 +34,21 @@ export interface TresObject3D extends THREE.Object3D {
|
|
|
33
34
|
geometry?: THREE.BufferGeometry & TresBaseObject;
|
|
34
35
|
material?: THREE.Material & TresBaseObject;
|
|
35
36
|
userData: {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
} & {
|
|
37
|
+
tres__materialViaProp: boolean;
|
|
38
|
+
tres__geometryViaProp: boolean;
|
|
39
39
|
[key: string]: any;
|
|
40
40
|
};
|
|
41
41
|
}
|
|
42
42
|
export type TresObject = TresBaseObject & (TresObject3D | THREE.BufferGeometry | THREE.Material | THREE.Fog);
|
|
43
|
+
export interface TresScene extends THREE.Scene {
|
|
44
|
+
userData: {
|
|
45
|
+
tres__registerCamera?: (newCamera: THREE.Camera, active?: boolean) => void;
|
|
46
|
+
tres__deregisterCamera?: (camera: THREE.Camera) => void;
|
|
47
|
+
tres__registerAtPointerEventHandler?: (object: THREE.Object3D & PointerEventHandlerEventProps) => void;
|
|
48
|
+
tres__deregisterAtPointerEventHandler?: (object: THREE.Object3D) => void;
|
|
49
|
+
[key: string]: any;
|
|
50
|
+
};
|
|
51
|
+
}
|
|
43
52
|
export interface Intersection extends THREE.Intersection {
|
|
44
53
|
/** The event source (the object which registered the handler) */
|
|
45
54
|
eventObject: TresObject;
|
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.0-next.
|
|
4
|
+
"version": "2.4.0-next.5",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"packageManager": "pnpm@8.3.1",
|
|
7
7
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import { TresCamera } from 'src/types';
|
|
2
|
-
import { PerspectiveCamera, OrthographicCamera } from 'three';
|
|
3
|
-
import { Ref } from 'vue';
|
|
4
|
-
export declare enum CameraType {
|
|
5
|
-
Perspective = "Perspective",
|
|
6
|
-
Orthographic = "Orthographic"
|
|
7
|
-
}
|
|
8
|
-
export type Camera = PerspectiveCamera | OrthographicCamera;
|
|
9
|
-
export interface PerspectiveCameraOptions {
|
|
10
|
-
/**
|
|
11
|
-
* Camera frustum vertical field of view, from bottom to top of view, in degrees.
|
|
12
|
-
*
|
|
13
|
-
* @type {number}
|
|
14
|
-
* @memberof PerspectiveCameraOptions
|
|
15
|
-
*/
|
|
16
|
-
fov?: number;
|
|
17
|
-
/**
|
|
18
|
-
* Camera frustum near plane.
|
|
19
|
-
*
|
|
20
|
-
* @type {number}
|
|
21
|
-
* @memberof PerspectiveCameraOptions
|
|
22
|
-
*/
|
|
23
|
-
near?: number;
|
|
24
|
-
/**
|
|
25
|
-
* Camera frustum far plane.
|
|
26
|
-
*
|
|
27
|
-
* @type {number}
|
|
28
|
-
* @memberof PerspectiveCameraOptions
|
|
29
|
-
*/
|
|
30
|
-
far?: number;
|
|
31
|
-
}
|
|
32
|
-
export interface OrthographicCameraOptions {
|
|
33
|
-
/**
|
|
34
|
-
* Camera frustum left plane.
|
|
35
|
-
*
|
|
36
|
-
* @type {number}
|
|
37
|
-
* @memberof OrthographicCameraOptions
|
|
38
|
-
*/
|
|
39
|
-
left?: number;
|
|
40
|
-
/**
|
|
41
|
-
* Camera frustum right plane.
|
|
42
|
-
*
|
|
43
|
-
* @type {number}
|
|
44
|
-
* @memberof OrthographicCameraOptions
|
|
45
|
-
*/
|
|
46
|
-
right?: number;
|
|
47
|
-
/**
|
|
48
|
-
* Camera frustum top plane.
|
|
49
|
-
*
|
|
50
|
-
* @type {number}
|
|
51
|
-
* @memberof OrthographicCameraOptions
|
|
52
|
-
*/
|
|
53
|
-
top?: number;
|
|
54
|
-
/**
|
|
55
|
-
* Camera frustum bottom plane.
|
|
56
|
-
*
|
|
57
|
-
* @type {number}
|
|
58
|
-
* @memberof OrthographicCameraOptions
|
|
59
|
-
*/
|
|
60
|
-
bottom?: number;
|
|
61
|
-
/**
|
|
62
|
-
* Camera frustum near plane.
|
|
63
|
-
*
|
|
64
|
-
* @type {number}
|
|
65
|
-
* @memberof OrthographicCameraOptions
|
|
66
|
-
*/
|
|
67
|
-
near?: number;
|
|
68
|
-
/**
|
|
69
|
-
* Camera frustum far plane.
|
|
70
|
-
*
|
|
71
|
-
* @type {number}
|
|
72
|
-
* @memberof OrthographicCameraOptions
|
|
73
|
-
*/
|
|
74
|
-
far?: number;
|
|
75
|
-
}
|
|
76
|
-
interface UseCameraReturn {
|
|
77
|
-
activeCamera: Ref<TresCamera | undefined>;
|
|
78
|
-
createCamera: (cameraType?: CameraType, options?: PerspectiveCameraOptions | OrthographicCameraOptions) => Camera;
|
|
79
|
-
updateCamera: () => void;
|
|
80
|
-
pushCamera: (camera: TresCamera) => void;
|
|
81
|
-
clearCameras: () => void;
|
|
82
|
-
setFirstCamera: (camera: TresCamera) => void;
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* Create and update cameras
|
|
86
|
-
*
|
|
87
|
-
* ```ts
|
|
88
|
-
* import { useCamera } from '@tresjs/core'
|
|
89
|
-
* const { createCamera, updateCamera } = useCamera()
|
|
90
|
-
* const camera = createCamera(new PerspectiveCamera(45, 1, 0.1, 1000))
|
|
91
|
-
* updateCamera()
|
|
92
|
-
* ```
|
|
93
|
-
*
|
|
94
|
-
* @export
|
|
95
|
-
* @return {*} {UseCameraReturn}
|
|
96
|
-
*/
|
|
97
|
-
export declare function useCamera(): UseCameraReturn;
|
|
98
|
-
export {};
|
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
import { Clock, EventDispatcher, Raycaster, Scene, Vector2, WebGLRenderer } from 'three';
|
|
2
|
-
import { ComputedRef, Ref } from 'vue';
|
|
3
|
-
import { Camera } from '../useCamera/old';
|
|
4
|
-
import type { usePointerEventHandler } from '../usePointerEventHandler';
|
|
5
|
-
export interface TresState {
|
|
6
|
-
/**
|
|
7
|
-
* The active camera used for rendering the scene.
|
|
8
|
-
*
|
|
9
|
-
* @see https://threejs.org/docs/index.html?q=camera#api/en/cameras/Camera
|
|
10
|
-
*
|
|
11
|
-
* @type {Camera}
|
|
12
|
-
* @memberof TresState
|
|
13
|
-
*/
|
|
14
|
-
camera?: Camera;
|
|
15
|
-
/**
|
|
16
|
-
* All cameras available in the scene.
|
|
17
|
-
*
|
|
18
|
-
* @see https://threejs.org/docs/index.html?q=camera#api/en/cameras/Camera
|
|
19
|
-
*
|
|
20
|
-
* @type {Camera[]}
|
|
21
|
-
* @memberof TresState
|
|
22
|
-
*/
|
|
23
|
-
cameras?: Camera[];
|
|
24
|
-
/**
|
|
25
|
-
* The aspect ratio of the scene.
|
|
26
|
-
*
|
|
27
|
-
* @type {ComputedRef<number>}
|
|
28
|
-
* @memberof TresState
|
|
29
|
-
*/
|
|
30
|
-
aspectRatio?: ComputedRef<number>;
|
|
31
|
-
/**
|
|
32
|
-
* The WebGLRenderer used to display the scene using WebGL.
|
|
33
|
-
*
|
|
34
|
-
* @see https://threejs.org/docs/index.html?q=webglren#api/en/renderers/WebGLRenderer
|
|
35
|
-
*
|
|
36
|
-
* @type {WebGLRenderer}
|
|
37
|
-
* @memberof TresState
|
|
38
|
-
*/
|
|
39
|
-
renderer?: WebGLRenderer;
|
|
40
|
-
/**
|
|
41
|
-
* The scene. This is the place where you place objects, lights and cameras.
|
|
42
|
-
*
|
|
43
|
-
* @see https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene
|
|
44
|
-
*
|
|
45
|
-
* @type {Scene}
|
|
46
|
-
* @memberof TresState
|
|
47
|
-
*/
|
|
48
|
-
scene?: Scene;
|
|
49
|
-
/**
|
|
50
|
-
* The raycaster.
|
|
51
|
-
*
|
|
52
|
-
* @see https://threejs.org/docs/index.html?q=raycas#api/en/core/Raycaster
|
|
53
|
-
*
|
|
54
|
-
* @type {Raycaster}
|
|
55
|
-
* @memberof TresState
|
|
56
|
-
*/
|
|
57
|
-
raycaster?: Raycaster;
|
|
58
|
-
/**
|
|
59
|
-
* Object for keeping track of time. This uses `performance.now` if it is available,
|
|
60
|
-
* otherwise it reverts to the less accurate `Date.now`.
|
|
61
|
-
*
|
|
62
|
-
* @see https://threejs.org/docs/index.html?q=clock#api/en/core/Clock
|
|
63
|
-
*
|
|
64
|
-
* @type {Clock}
|
|
65
|
-
* @memberof TresState
|
|
66
|
-
*/
|
|
67
|
-
clock?: Clock;
|
|
68
|
-
/**
|
|
69
|
-
* The current mouse position.
|
|
70
|
-
*
|
|
71
|
-
* @type {Vector2}
|
|
72
|
-
* @memberof TresState
|
|
73
|
-
*/
|
|
74
|
-
pointer?: Vector2;
|
|
75
|
-
/**
|
|
76
|
-
* The current instance of the component.
|
|
77
|
-
*
|
|
78
|
-
* @type {*}
|
|
79
|
-
* @memberof TresState
|
|
80
|
-
*/
|
|
81
|
-
currentInstance?: any;
|
|
82
|
-
/**
|
|
83
|
-
* The current active scene control
|
|
84
|
-
*
|
|
85
|
-
* @type {((EventDispatcher & { enabled: boolean }) | null)}
|
|
86
|
-
* @memberof TresState
|
|
87
|
-
*/
|
|
88
|
-
controls?: (EventDispatcher & {
|
|
89
|
-
enabled: boolean;
|
|
90
|
-
}) | null;
|
|
91
|
-
canvas?: Ref<HTMLElement>;
|
|
92
|
-
/**
|
|
93
|
-
* The entity that handles pointer events
|
|
94
|
-
* @type {ReturnType<typeof usePointerEventHandler>}
|
|
95
|
-
* @memberof TresState
|
|
96
|
-
*/
|
|
97
|
-
pointerEventHandler?: ReturnType<typeof usePointerEventHandler>;
|
|
98
|
-
[key: string]: any;
|
|
99
|
-
}
|
|
100
|
-
export type UseTresReturn = {
|
|
101
|
-
state: TresState;
|
|
102
|
-
getState: (key: string) => void;
|
|
103
|
-
setState: (key: string, value: any) => void;
|
|
104
|
-
aspectRatio: ComputedRef<number>;
|
|
105
|
-
};
|
|
106
|
-
export declare const TRES_CONTEXT_KEY: unique symbol;
|
|
107
|
-
/**
|
|
108
|
-
* The Tres state.
|
|
109
|
-
*
|
|
110
|
-
* @see https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene
|
|
111
|
-
*
|
|
112
|
-
* @export
|
|
113
|
-
* @return {*} {TresState, getState, setState}
|
|
114
|
-
*/
|
|
115
|
-
export declare function useTresProvider(): {
|
|
116
|
-
getState: (key: string) => any;
|
|
117
|
-
setState: (key: string, value: any) => void;
|
|
118
|
-
camera?: Ref<Camera | undefined> | undefined;
|
|
119
|
-
cameras?: Ref<Camera[] | undefined> | undefined;
|
|
120
|
-
aspectRatio?: Ref<ComputedRef<number> | undefined> | undefined;
|
|
121
|
-
renderer?: Ref<WebGLRenderer | undefined> | undefined;
|
|
122
|
-
scene?: Ref<Scene | undefined> | undefined;
|
|
123
|
-
raycaster?: Ref<Raycaster | undefined> | undefined;
|
|
124
|
-
clock?: Ref<Clock | undefined> | undefined;
|
|
125
|
-
pointer?: Ref<Vector2 | undefined> | undefined;
|
|
126
|
-
currentInstance?: Ref<any> | undefined;
|
|
127
|
-
controls?: Ref<(EventDispatcher<import("three").Event> & {
|
|
128
|
-
enabled: boolean;
|
|
129
|
-
}) | null | undefined> | undefined;
|
|
130
|
-
canvas?: Ref<Ref<HTMLElement> | undefined> | undefined;
|
|
131
|
-
pointerEventHandler?: Ref<{
|
|
132
|
-
registerObject: (object: import("three").Object3D<import("three").Event> & {
|
|
133
|
-
onClick?: ((intersection: import("three").Intersection<import("three").Object3D<import("three").Event>>, event: PointerEvent) => void) | undefined;
|
|
134
|
-
onPointerEnter?: ((intersection: import("three").Intersection<import("three").Object3D<import("three").Event>>, event: PointerEvent) => void) | undefined;
|
|
135
|
-
onPointerMove?: ((intersection: import("three").Intersection<import("three").Object3D<import("three").Event>>, event: PointerEvent) => void) | undefined;
|
|
136
|
-
onPointerLeave?: ((object: import("three").Object3D<import("three").Event>, event: PointerEvent) => void) | undefined;
|
|
137
|
-
}) => void;
|
|
138
|
-
deregisterObject: (object: import("three").Object3D<import("three").Event>) => void;
|
|
139
|
-
} | undefined> | undefined;
|
|
140
|
-
state: TresState;
|
|
141
|
-
};
|
|
142
|
-
export declare const useTres: () => UseTresReturn;
|
package/dist/keys.d.ts
DELETED
package/dist/provider/index.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { Scene, WebGLRenderer } from 'three';
|
|
2
|
-
import type { ComputedRef, Ref, ShallowRef } from 'vue';
|
|
3
|
-
import { TresCamera } from '../types';
|
|
4
|
-
export type TresState = {
|
|
5
|
-
scene: Readonly<ShallowRef<Scene>>;
|
|
6
|
-
cameras: Readonly<ShallowRef<TresCamera[]>>;
|
|
7
|
-
camera: ComputedRef<TresCamera | undefined>;
|
|
8
|
-
renderer?: Readonly<ShallowRef<WebGLRenderer | null>>;
|
|
9
|
-
addCamera: (camera: TresCamera) => void;
|
|
10
|
-
setCameraToActive: (cameraId: string) => void;
|
|
11
|
-
clearCameras: () => void;
|
|
12
|
-
setRenderer: (renderer: WebGLRenderer) => void;
|
|
13
|
-
sizes: {
|
|
14
|
-
height: Ref<number>;
|
|
15
|
-
width: Ref<number>;
|
|
16
|
-
aspectRatio: ComputedRef<number>;
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
export declare function useTresContextProvider(scene: Scene, canvas: Ref<HTMLCanvasElement | undefined>, props: any): TresState;
|
|
20
|
-
export declare function useTresContext(): TresState;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function withSetup(composable: any): (import("vue").App<Element> | undefined)[];
|