@tresjs/core 2.4.1 → 3.0.0
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 +180 -98
- package/dist/composables/index.d.ts +2 -2
- package/dist/composables/useCamera/index.d.ts +3205 -98
- package/dist/composables/usePointerEventHandler/index.d.ts +7 -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 -31
- package/dist/composables/useTresContextProvider/index.d.ts +27 -0
- package/dist/core/nodeOps.d.ts +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/tres.js +463 -498
- package/dist/tres.umd.cjs +2 -3
- package/dist/types/index.d.ts +13 -4
- package/dist/utils/index.d.ts +2 -0
- package/package.json +14 -14
- package/dist/components/TresScene.vue.d.ts +0 -128
- package/dist/composables/useTres/index.d.ts +0 -142
- package/dist/keys.d.ts +0 -6
- package/dist/utils/test-utils.d.ts +0 -1
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version:
|
|
3
|
+
* version: v3.0.0
|
|
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(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,m,f){"use strict";function ve(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const ge=ve(m),z=c.ref({}),G=e=>void Object.assign(z.value,e),K=e=>typeof e=="function",X=e=>!!e&&e.constructor===Array,b=["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,t=Math.random()*4294967295|0,a=Math.random()*4294967295|0,n=Math.random()*4294967295|0;return(b[e&255]+b[e>>8&255]+b[e>>16&255]+b[e>>24&255]+"-"+b[t&255]+b[t>>8&255]+"-"+b[t>>16&15|64]+b[t>>24&255]+"-"+b[a&63|128]+b[a>>8&255]+"-"+b[a>>16&255]+b[a>>24&255]+b[n&255]+b[n>>8&255]+b[n>>16&255]+b[n>>24&255]).toLowerCase()}const B=Symbol();function J(){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 t(r){return e[r]}function a(r,s){e[r]=s}const n={state:e,...c.toRefs(e),getState:t,setState:a};return c.provide(B,n),n}const k=()=>c.inject(B,{state:c.shallowReactive({camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,pointerEventHandler:void 0})});var H=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(H||{});const he=45;let x;function Q(){const{state:e,setState:t,aspectRatio:a}=k();function n(i="Perspective",u){var v,y,g;if(i==="Perspective"){const{near:L,far:M,fov:P}=u||{near:.1,far:1e3,fov:he};x=new m.PerspectiveCamera(P,((v=e.aspectRatio)==null?void 0:v.value)||window.innerWidth/window.innerHeight,L,M),(y=e.cameras)==null||y.push(x)}else{const{left:L,right:M,top:P,bottom:C,near:O,far:T}=u||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};x=new m.OrthographicCamera(L,M,P,C,O,T),(g=e.cameras)==null||g.push(x)}return e.camera=x,t("camera",e.camera),x}function r(){var i;e.camera instanceof m.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 m.PerspectiveCamera&&e.aspectRatio&&(i.aspect=e.aspectRatio.value),i.updateProjectionMatrix(),t("camera",i)}function l(i){var u;((u=e.cameras)==null?void 0:u.length)===0&&s(i)}function o(){e.cameras=[]}return c.watchEffect(()=>{a!=null&&a.value&&r()}),{activeCamera:c.toRef(e,"camera"),createCamera:n,updateCamera:r,pushCamera:s,clearCameras:o,setFirstCamera:l}}const Z=f.createEventHook(),ee=f.createEventHook(),F=f.createEventHook(),R=new m.Clock;let j=0,D=0;const{pause:we,resume:be,isActive:Ce}=f.useRafFn(()=>{Z.trigger({delta:j,elapsed:D,clock:R}),ee.trigger({delta:j,elapsed:D,clock:R}),F.trigger({delta:j,elapsed:D,clock:R})},{immediate:!1});F.on(()=>{j=R.getDelta(),D=R.getElapsedTime()});function W(){return{onBeforeLoop:Z.on,onLoop:ee.on,onAfterLoop:F.on,pause:we,resume:be,isActive:Ce}}function _e(e){return typeof e=="number"?[e,e,e]:e instanceof m.Vector3?[e.x,e.y,e.z]:e}function te(e){return e instanceof m.Color?e:Array.isArray(e)?new m.Color(...e):new m.Color(e)}const $={realistic:{outputColorSpace:m.SRGBColorSpace,toneMapping:m.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:m.PCFSoftShadowMap}}},ae=(e,t)=>{for(const a of Object.keys(t))t[a]instanceof Object&&Object.assign(t[a],ae(e[a],t[a]));return Object.assign(e||{},t),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 I(e){return e.replace(/-([a-z])/g,(t,a)=>a.toUpperCase())}function Me(e,t){const a=Object.create(null),n=e.split(",");for(let r=0;r<n.length;r++)a[n[r]]=!0;return t?r=>!!a[r.toLowerCase()]:r=>!!a[r]}const Le=(e,t)=>{const a=new Set,n=[];for(const r of e){const s=t(r);a.has(s)||(a.add(s),n.push(r))}return n},Se=!0,ne="[TresJS ▲ ■ ●] ";function E(){function e(n,r){console.error(`${ne} ${n}`,r||"")}function t(n){console.warn(`${ne} ${n}`)}function a(n,r){}return{logError:e,logWarning:t,logMessage:a}}function oe(e){const t=c.shallowRef(),a=c.ref(!1),{alpha:n=!0,antialias:r=!0,depth:s,logarithmicDepthBuffer:l,failIfMajorPerformanceCaveat:o,precision:i,premultipliedAlpha:u,stencil:v,shadows:y=!1,shadowMapType:g=m.PCFShadowMap,useLegacyLights:L=!1,outputColorSpace:M=m.LinearSRGBColorSpace,toneMapping:P=m.NoToneMapping,toneMappingExposure:C=1,context:O=void 0,powerPreference:T="default",preserveDrawingBuffer:w=!1,clearColor:_,windowSize:A=!1,preset:Y=void 0}=c.toRefs(e),{state:d,setState:h}=k(),{width:ue,height:fe}=f.toValue(A)==!0||f.toValue(A)===""||f.toValue(A)==="true"?f.useWindowSize():f.useElementSize(d.container),{logError:ze,logWarning:Ge}=E(),{pixelRatio:de}=f.useDevicePixelRatio(),{pause:Fe,resume:We}=W(),q=c.computed(()=>ue.value/fe.value);setTimeout(()=>{var S;!f.toValue(A)&&!((S=d.canvas)!=null&&S.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=()=>{t.value&&(t.value.setSize(ue.value,fe.value),t.value.setPixelRatio(Math.min(de.value,2)))},me=()=>{if(!t.value)return;const S=f.toValue(Y);if(S){S in $||ze("Renderer Preset must be one of these: "+Object.keys($).join(", ")),ae(t.value,$[S]);return}t.value.shadowMap.enabled=f.toValue(y),t.value.shadowMap.type=f.toValue(g),t.value.toneMapping=f.toValue(P)||m.NoToneMapping,t.value.toneMappingExposure=f.toValue(C),t.value.outputColorSpace=f.toValue(M)||m.LinearSRGBColorSpace,_!=null&&_.value&&t.value.setClearColor(te(f.toValue(_))),t.value.useLegacyLights=f.toValue(L)},$e=()=>{const S=f.unrefElement(d.canvas);S&&(t.value=new m.WebGLRenderer({canvas:S,alpha:f.toValue(n),antialias:f.toValue(r),context:f.toValue(O),depth:f.toValue(s),failIfMajorPerformanceCaveat:f.toValue(o),logarithmicDepthBuffer:f.toValue(l),powerPreference:f.toValue(T),precision:f.toValue(i),stencil:f.toValue(v),preserveDrawingBuffer:f.toValue(w),premultipliedAlpha:f.toValue(u)}),h("renderer",t.value),h("clock",new m.Clock),h("aspectRatio",q),me(),pe(),We(),a.value=!0)},Ue=()=>{t.value&&(t.value.dispose(),t.value=void 0,a.value=!1,Fe())};return c.watch([q,de],pe),c.watch([y,g,M,L,P,C,_],me),c.watch(()=>[d.canvas,d.container],()=>{f.unrefElement(d.canvas)&&f.unrefElement(d.container)&&$e()},{immediate:!0,deep:!0}),{renderer:t,isReady:a,dispose:Ue,aspectRatio:q}}function re(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 Oe(e,t,a,n,r){const{logError:s}=E(),l=new e;r&&r(l),a&&a(l);const i=(Array.isArray(t)?t:[t]).map(u=>new Promise((v,y)=>{l.load(u,g=>{g.scene&&Object.assign(g,re(g.scene)),v(g)},n,g=>y(s("[useLoader] - Failed to load resource",g)))}));return X(t)?await Promise.all(i):await i[0]}async function Te(e){const t=new m.LoadingManager,a=new m.TextureLoader(t),n=r=>new Promise((s,l)=>{a.load(r,o=>s(o),()=>null,()=>{l(new Error("[useTextures] - Failed to load texture"))})});if(X(e)){const r=await Promise.all(e.map(s=>n(s)));return e.length>1?r:r[0]}else{const{map:r,displacementMap:s,normalMap:l,roughnessMap:o,metalnessMap:i,aoMap:u,alphaMap:v,matcap:y}=e;return{map:r?await n(r):null,displacementMap:s?await n(s):null,normalMap:l?await n(l):null,roughnessMap:o?await n(o):null,metalnessMap:i?await n(i):null,aoMap:u?await n(u):null,alphaMap:v?await n(v):null,matcap:y?await n(y):null}}}const ie=e=>{const{state:t}=k(),a=c.computed(()=>{var d;return(d=t.canvas)==null?void 0:d.value}),{x:n,y:r}=f.usePointer({target:a}),{width:s,height:l,top:o,left:i}=f.useElementBounding(a),u=new m.Raycaster,v=({x:d,y:h})=>{if(a.value)return{x:(d-i.value)/s.value*2-1,y:-((h-o.value)/l.value)*2+1}},y=({x:d,y:h})=>{if(t.camera)return u.setFromCamera(new m.Vector2(d,h),t.camera),u.intersectObjects(e.value,!1)},g=d=>{const h=v({x:(d==null?void 0:d.clientX)??n.value,y:(d==null?void 0:d.clientY)??r.value});return h?y(h)||[]:[]},L=c.computed(()=>g()),M=f.createEventHook(),P=f.createEventHook(),C=(d,h)=>{d.trigger({event:h,intersects:g(h)})},O=d=>{C(P,d)};let T;const w=d=>{var h;T=(h=g(d)[0])==null?void 0:h.object},_=d=>{var h;d instanceof PointerEvent&&T===((h=g(d)[0])==null?void 0:h.object)&&C(M,d)},A=d=>P.trigger({event:d,intersects:[]}),Y=c.watchEffect(()=>{a!=null&&a.value&&(a.value.addEventListener("pointerup",_),a.value.addEventListener("pointerdown",w),a.value.addEventListener("pointermove",O),a.value.addEventListener("pointerleave",A),Y())});return c.onUnmounted(()=>{a!=null&&a.value&&(a.value.removeEventListener("pointerup",_),a.value.removeEventListener("pointerdown",w),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 Ae(){const{logWarning:e}=E();function t(n,r,s){let l=null;return n.traverse(o=>{o[r]===s&&(l=o)}),l||e(`Child with ${r} '${s}' not found.`),l}function a(n,r){return t(n,"name",r)}return{seek:t,seekByName:a}}const se=()=>{const e=c.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),t=o=>{Object.values(e).forEach(i=>i.delete(o))},a=o=>{const{onClick:i,onPointerMove:u,onPointerEnter:v,onPointerLeave:y}=o;i&&e.click.set(o,i),u&&e.pointerMove.set(o,u),v&&e.pointerEnter.set(o,v),y&&e.pointerLeave.set(o,y),o.addEventListener("removed",()=>{o.traverse(g=>{t(g)}),t(o)})},n=c.computed(()=>Le(Object.values(e).map(o=>Array.from(o.keys())).flat(),({uuid:o})=>o)),{onClick:r,onPointerMove:s}=ie(n);r(({intersects:o,event:i})=>{var u;o.length&&((u=e.click.get(o[0].object))==null||u(o[0],i))});let l;return s(({intersects:o,event:i})=>{var L,M,P,C;const u=(L=o==null?void 0:o[0])==null?void 0:L.object,{pointerLeave:v,pointerEnter:y,pointerMove:g}=e;l&&l!==u&&((M=v.get(l))==null||M(l,i)),u&&(l!==u&&((P=y.get(u))==null||P(o[0],i)),(C=g.get(u))==null||C(o[0],i)),l=u||null}),{registerObject:a,deregisterObject:t}},N={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp",REGISTER_AT_POINTER_EVENT_HANDLER:"tres__registerAtPointerEventHandler"};function qe(e){}let U=null,V=null;const{logError:ce}=E(),ke={createElement(e,t,a,n){var i,u;if(n||(n={}),n.args||(n.args=[]),e==="template"||Pe(e))return null;let r=e.replace("Tres",""),s;if(e==="primitive"){(n==null?void 0:n.object)===void 0&&ce("Tres primitives need a prop 'object'");const v=n.object;r=v.type,s=Object.assign(v,{type:r,attach:n.attach,primitive:!0})}else{const v=z.value[r];v||ce(`${r} is not defined on the THREE namespace. Use extend to add it to the catalog.`),s=new v(...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:l,MATERIAL_VIA_PROP:o}=N;return s.isObject3D&&((i=n==null?void 0:n.material)!=null&&i.isMaterial&&(s.userData[o]=!0),(u=n==null?void 0:n.geometry)!=null&&u.isBufferGeometry&&(s.userData[l]=!0)),s},insert(e,t){var a,n,r,s,l,o,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=(r=e==null?void 0:e.__vnode)==null?void 0:r.ctx)!=null&&s.asyncResolved)){U=e;return}else(l=e==null?void 0:e.__vnode)!=null&&l.type.includes("Controls")&&t===null&&(U=V);t||(t=U),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"}),(i=(o=V==null?void 0:V.userData)==null?void 0:o[N.REGISTER_AT_POINTER_EVENT_HANDLER])==null||i.call(o,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,r=s=>{var i,u;const{GEOMETRY_VIA_PROP:l,MATERIAL_VIA_PROP:o}=N;s.userData[o]||(i=s.material)==null||i.dispose(),s.userData[l]||(u=s.geometry)==null||u.dispose()};n.traverse(s=>{r(s)}),r(n)}(t=e.removeFromParent)==null||t.call(e),(a=e.dispose)==null||a.call(e)}},patchProp(e,t,a,n){if(e){let r=e,s=t,l=I(s),o=r==null?void 0:r[l];if(r.type==="BufferGeometry"){if(s==="args")return;r.setAttribute(I(s),new m.BufferAttribute(...n));return}if(s.includes("-")&&o===void 0){const u=s.split("-");o=u.reduce((v,y)=>v[I(y)],r),s=u.pop(),l=s.toLowerCase(),o!=null&&o.set||(r=u.reduce((v,y)=>v[I(y)],r))}let i=n;if(i===""&&(i=!0),K(o)){Array.isArray(i)?e[l](...i):e[l](i);return}!(o!=null&&o.set)&&!K(o)?r[l]=i:o.constructor===i.constructor&&(o!=null&&o.copy)?o==null||o.copy(i):Array.isArray(i)?o.set(...i):!o.isColor&&o.setScalar?o.setScalar(i):o.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 t=xe(a);function a(){return e&&e.default?e.default():[]}return t};G(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:t}){const a=e,{logWarning:n}=E();a.physicallyCorrectLights===!0&&n("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const r=c.ref(),s=c.ref(),l=new m.Scene,o=se(),{setState:i}=k();l.userData[N.REGISTER_AT_POINTER_EVENT_HANDLER]=o.registerObject,i("scene",l),i("canvas",s),i("container",r),i("pointerEventHandler",o),i("appContext",c.getCurrentInstance());const{onLoop:u,resume:v}=W(),{activeCamera:y,pushCamera:g,clearCameras:L}=Q();c.onMounted(()=>{P()}),c.onUnmounted(()=>{i("renderer",null)});function M(){const w=l.getObjectByProperty("isCamera",!0);if(w)g(w);else{n("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");const _=new m.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);_.position.set(3,3,3),_.lookAt(0,0,0),g(_)}}function P(){const{renderer:w}=oe(a);a.camera&&g(a.camera),u(()=>{var _;y.value&&a.disableRender!==!0&&((_=w.value)==null||_.render(l,y.value))})}let C;const O=c.useSlots();function T(){C=Ee(O);const w=k();C.provide("useTres",w),C.provide(B,w),C.provide("extend",G),C.mount(l),M()}return T(),t({scene:l}),c.watch(()=>a.camera,w=>{w&&(L(),g(w))}),(w,_)=>(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:w.windowSize?"fixed":"absolute",top:0,left:0})},null,12,Be)])],8,Re))}}),le=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:t}){const a=e,n=J();return t(n),(r,s)=>(c.openBlock(),c.createBlock(je,c.normalizeProps(c.guardReactiveProps(a)),{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",le)}};p.CameraType=H,p.TRES_CONTEXT_KEY=B,p.TresCanvas=le,p.catalogue=z,p.default=Ne,p.extend=G,p.isProd=Se,p.normalizeColor=te,p.normalizeVectorFlexibleParam=_e,p.templateCompilerOptions=Ie,p.trasverseObjects=re,p.useCamera=Q,p.useLoader=Oe,p.useLogger=E,p.usePointerEventHandler=se,p.useRaycaster=ie,p.useRenderLoop=W,p.useRenderer=oe,p.useSeek=Ae,p.useTexture=Te,p.useTres=k,p.useTresProvider=J,Object.defineProperties(p,{__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,g,d){"use strict";function ae(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const oe=ae(g),z=c.ref({}),j=e=>void Object.assign(z.value,e),W=e=>typeof e=="function",$=e=>!!e&&e.constructor===Array,q=({sizes:e,scene:a})=>{const t=c.ref([]),n=c.computed(()=>t.value[0]),r=(o,s=!1)=>{t.value.some(({uuid:u})=>u===o.uuid)||(s?l(o):t.value.push(o))},i=o=>{t.value=t.value.filter(({uuid:s})=>s!==o.uuid)},l=o=>{const s=o instanceof g.Camera?o:t.value.find(f=>f.uuid===o);if(!s)return;const u=t.value.filter(({uuid:f})=>f!==s.uuid);t.value=[s,...u]};return c.watchEffect(()=>{e.aspectRatio.value&&t.value.forEach(o=>{o instanceof g.PerspectiveCamera&&(o.aspect=e.aspectRatio.value),(o instanceof g.PerspectiveCamera||o instanceof g.OrthographicCamera)&&o.updateProjectionMatrix()})}),a.userData.tres__registerCamera=r,a.userData.tres__deregisterCamera=i,c.onUnmounted(()=>{t.value=[]}),{camera:n,cameras:t,addCamera:r,removeCamera:i,setCameraActive:l}},I=d.createEventHook(),N=d.createEventHook(),F=d.createEventHook(),A=new g.Clock;let x=0,B=0;const{pause:se,resume:ie,isActive:ue}=d.useRafFn(()=>{I.trigger({delta:x,elapsed:B,clock:A}),N.trigger({delta:x,elapsed:B,clock:A}),F.trigger({delta:x,elapsed:B,clock:A})},{immediate:!1});F.on(()=>{x=A.getDelta(),B=A.getElapsedTime()});const G=()=>({onBeforeLoop:I.on,onLoop:N.on,onAfterLoop:F.on,pause:se,resume:ie,isActive:ue}),V={realistic:{outputColorSpace:g.SRGBColorSpace,toneMapping:g.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:g.PCFSoftShadowMap}}},U=(e,a)=>{for(const t of Object.keys(a))a[t]instanceof Object&&Object.assign(a[t],U(e[t],a[t]));return Object.assign(e||{},a),e},le=ce("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,(a,t)=>t.toUpperCase())}function ce(e,a){const t=Object.create(null),n=e.split(",");for(let r=0;r<n.length;r++)t[n[r]]=!0;return a?r=>!!t[r.toLowerCase()]:r=>!!t[r]}const fe=(e,a)=>{const t=new Set,n=[];for(const r of e){const i=a(r);t.has(i)||(t.add(i),n.push(r))}return n},J=(e,a)=>{if(!a)return;const t=Array.isArray(a)?a:a.match(/([^[.\]])+/g);return t==null?void 0:t.reduce((n,r)=>n&&n[r],e)},me=(e,a,t)=>{const n=Array.isArray(a)?a:a.match(/([^[.\]])+/g);n&&n.reduce((r,i,l)=>(r[i]===void 0&&(r[i]={}),l===n.length-1&&(r[i]=t),r[i]),e)},pe=!0,K="[TresJS ▲ ■ ●] ";function S(){function e(n,r){console.error(`${K} ${n}`,r||"")}function a(n){console.warn(`${K} ${n}`)}function t(n,r){}return{logError:e,logWarning:a,logMessage:t}}function de(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function X(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}function Y({scene:e,canvas:a,options:t,disableRender:n,contextParts:{sizes:r,camera:i}}){const l=c.computed(()=>({alpha:d.toValue(t.alpha),depth:d.toValue(t.depth),canvas:d.unrefElement(a),context:d.toValue(t.context),stencil:d.toValue(t.stencil),antialias:d.toValue(t.antialias)===void 0?!0:d.toValue(t.antialias),precision:d.toValue(t.precision),powerPreference:d.toValue(t.powerPreference),premultipliedAlpha:d.toValue(t.premultipliedAlpha),preserveDrawingBuffer:d.toValue(t.preserveDrawingBuffer),logarithmicDepthBuffer:d.toValue(t.logarithmicDepthBuffer),failIfMajorPerformanceCaveat:d.toValue(t.failIfMajorPerformanceCaveat)})),o=c.shallowRef(new g.WebGLRenderer(l.value));c.watch(l,()=>{o.value.dispose(),o.value=new g.WebGLRenderer(l.value)}),c.watchEffect(()=>{o.value.setSize(r.width.value,r.height.value)});const{pixelRatio:s}=d.useDevicePixelRatio();c.watchEffect(()=>{o.value.setPixelRatio(s.value)});const{logError:u}=S(),m=(()=>{const w=new g.WebGLRenderer,C={shadowMap:{enabled:w.shadowMap.enabled,type:w.shadowMap.type},toneMapping:w.toneMapping,toneMappingExposure:w.toneMappingExposure,outputColorSpace:w.outputColorSpace,useLegacyLights:w.useLegacyLights};return w.dispose(),C})();c.watchEffect(()=>{const w=d.toValue(t.preset);w&&(w in V||u("Renderer Preset must be one of these: "+Object.keys(V).join(", ")),U(o.value,V[w]));const C=(D,k)=>{const O=d.toValue(D),E=()=>{if(w)return J(V[w],k)};if(O!==void 0)return O;const v=E();return v!==void 0?v:J(m,k)},y=(D,k)=>me(o.value,k,C(D,k));y(t.shadows,"shadowMap.enabled"),y(t.toneMapping,"toneMapping"),y(t.shadowMapType,"shadowMap.type"),y(t.useLegacyLights,"useLegacyLights"),y(t.outputColorSpace,"outputColorSpace"),y(t.toneMappingExposure,"toneMappingExposure");const h=C(t.clearColor,"clearColor");h&&o.value.setClearColor(h?X(h):new g.Color(0))});const{pause:M,resume:_,onLoop:b}=G();return b(()=>{i.value&&!d.toValue(n)&&o.value.render(e,i.value)}),_(),c.onUnmounted(()=>{M(),o.value.dispose(),o.value.forceContextLoss()}),{renderer:o}}function Q(e){const a={nodes:{},materials:{}};return e&&e.traverse(t=>{t.name&&(a.nodes[t.name]=t),t.material&&!a.materials[t.material.name]&&(a.materials[t.material.name]=t.material)}),a}async function ve(e,a,t,n,r){const{logError:i}=S(),l=new e;r&&r(l),t&&t(l);const s=(Array.isArray(a)?a:[a]).map(u=>new Promise((f,m)=>{l.load(u,M=>{M.scene&&Object.assign(M,Q(M.scene)),f(M)},n,M=>m(i("[useLoader] - Failed to load resource",M)))}));return $(a)?await Promise.all(s):await s[0]}async function ge(e){const a=new g.LoadingManager,t=new g.TextureLoader(a),n=r=>new Promise((i,l)=>{t.load(r,o=>i(o),()=>null,()=>{l(new Error("[useTextures] - Failed to load texture"))})});if($(e)){const r=await Promise.all(e.map(i=>n(i)));return e.length>1?r:r[0]}else{const{map:r,displacementMap:i,normalMap:l,roughnessMap:o,metalnessMap:s,aoMap:u,alphaMap:f,matcap:m}=e;return{map:r?await n(r):null,displacementMap:i?await n(i):null,normalMap:l?await n(l):null,roughnessMap:o?await n(o):null,metalnessMap:s?await n(s):null,aoMap:u?await n(u):null,alphaMap:f?await n(f):null,matcap:m?await n(m):null}}}const Z=(e,{renderer:a,camera:t,raycaster:n})=>{const r=c.computed(()=>a.value.domElement),{x:i,y:l}=d.usePointer({target:r}),{width:o,height:s,top:u,left:f}=d.useElementBounding(r),m=({x:v,y:L})=>{if(r.value)return{x:(v-f.value)/o.value*2-1,y:-((L-u.value)/s.value)*2+1}},M=({x:v,y:L})=>{if(t.value)return n.value.setFromCamera(new g.Vector2(v,L),t.value),n.value.intersectObjects(e.value,!1)},_=v=>{const L=m({x:(v==null?void 0:v.clientX)??i.value,y:(v==null?void 0:v.clientY)??l.value});return L?M(L)||[]:[]},b=c.computed(()=>_()),w=d.createEventHook(),C=d.createEventHook(),y=(v,L)=>{v.trigger({event:L,intersects:_(L)})},h=v=>{y(C,v)};let D;const k=v=>{var L;D=(L=_(v)[0])==null?void 0:L.object},O=v=>{var L;v instanceof PointerEvent&&D===((L=_(v)[0])==null?void 0:L.object)&&y(w,v)},E=v=>C.trigger({event:v,intersects:[]});return r.value.addEventListener("pointerup",O),r.value.addEventListener("pointerdown",k),r.value.addEventListener("pointermove",h),r.value.addEventListener("pointerleave",E),c.onUnmounted(()=>{r!=null&&r.value&&(r.value.removeEventListener("pointerup",O),r.value.removeEventListener("pointerdown",k),r.value.removeEventListener("pointermove",h),r.value.removeEventListener("pointerleave",E))}),{intersects:b,onClick:v=>w.on(v).off,onPointerMove:v=>C.on(v).off}};function we(){const{logWarning:e}=S();function a(n,r,i){let l=null;return n.traverse(o=>{o[r]===i&&(l=o)}),l||e(`Child with ${r} '${i}' not found.`),l}function t(n,r){return a(n,"name",r)}return{seek:a,seekByName:t}}const H=({scene:e,contextParts:a})=>{const t=c.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),n=u=>{Object.values(t).forEach(f=>f.delete(u))},r=u=>{const{onClick:f,onPointerMove:m,onPointerEnter:M,onPointerLeave:_}=u;f&&t.click.set(u,f),m&&t.pointerMove.set(u,m),M&&t.pointerEnter.set(u,M),_&&t.pointerLeave.set(u,_)};e.userData.tres__registerAtPointerEventHandler=r,e.userData.tres__deregisterAtPointerEventHandler=n;const i=c.computed(()=>fe(Object.values(t).map(u=>Array.from(u.keys())).flat(),({uuid:u})=>u)),{onClick:l,onPointerMove:o}=Z(i,a);l(({intersects:u,event:f})=>{var m;u.length&&((m=t.click.get(u[0].object))==null||m(u[0],f))});let s;return o(({intersects:u,event:f})=>{var w,C,y,h;const m=(w=u==null?void 0:u[0])==null?void 0:w.object,{pointerLeave:M,pointerEnter:_,pointerMove:b}=t;s&&s!==m&&((C=M.get(s))==null||C(s,f)),m&&(s!==m&&((y=_.get(m))==null||y(u[0],f)),(h=b.get(m))==null||h(u[0],f)),s=m||null}),{registerObject:r,deregisterObject:n}};function ee({scene:e,canvas:a,windowSize:t,disableRender:n,rendererOptions:r}){const i=c.computed(()=>d.toValue(t)?d.useWindowSize():d.useElementSize(d.toValue(a).parentElement)),l=c.computed(()=>i.value.width.value),o=c.computed(()=>i.value.height.value),s=c.computed(()=>l.value/o.value),u={height:o,width:l,aspectRatio:s},f=c.shallowRef(e),{camera:m,cameras:M,addCamera:_,removeCamera:b,setCameraActive:w}=q({sizes:u,scene:e}),{renderer:C}=Y({scene:e,canvas:a,options:r,contextParts:{sizes:u,camera:m},disableRender:n}),y={sizes:u,scene:f,camera:m,cameras:c.readonly(M),renderer:C,raycaster:c.shallowRef(new g.Raycaster),addCamera:_,removeCamera:b,setCameraActive:w};return c.provide("useTres",y),y}function te(){const e=c.inject("useTres");if(!e)throw new Error("useTresContext must be used together with useTresContextProvider");return e}const ye=te;function Se(e){}let R=null,P=null;const{logError:ne}=S(),Ce={createElement(e,a,t,n){var l,o;if(n||(n={}),n.args||(n.args=[]),e==="template"||le(e))return null;let r=e.replace("Tres",""),i;if(e==="primitive"){(n==null?void 0:n.object)===void 0&&ne("Tres primitives need a prop 'object'");const s=n.object;r=s.type,i=Object.assign(s,{type:r,attach:n.attach,primitive:!0})}else{const s=z.value[r];s||ne(`${r} is not defined on the THREE namespace. Use extend to add it to the catalog.`),i=new s(...n.args)}return i.isCamera&&(n!=null&&n.position||i.position.set(3,3,3),n!=null&&n.lookAt||i.lookAt(0,0,0)),(n==null?void 0:n.attach)===void 0&&(i.isMaterial?i.attach="material":i.isBufferGeometry&&(i.attach="geometry")),i.isObject3D&&((l=n==null?void 0:n.material)!=null&&l.isMaterial&&(i.userData.tres__materialViaProp=!0),(o=n==null?void 0:n.geometry)!=null&&o.isBufferGeometry&&(i.userData.tres__geometryViaProp=!0)),i},insert(e,a){var t,n,r,i,l,o,s,u,f;if(a&&a.isScene&&(P=a),(((t=e==null?void 0:e.__vnode)==null?void 0:t.type)==="TresGroup"||((n=e==null?void 0:e.__vnode)==null?void 0:n.type)==="TresObject3D")&&a===null&&!((i=(r=e==null?void 0:e.__vnode)==null?void 0:r.ctx)!=null&&i.asyncResolved)){R=e;return}else(l=e==null?void 0:e.__vnode)!=null&&l.type.includes("Controls")&&a===null&&(R=P);if(a||(a=R),e!=null&&e.isObject3D){if(e!=null&&e.isCamera){if(!(P!=null&&P.userData.tres__registerCamera))throw"could not find tres__registerCamera on scene's userData";(s=P==null?void 0:(o=P.userData).tres__registerCamera)==null||s.call(o,e)}if(e!=null&&e.onClick||e!=null&&e.onPointerMove||e!=null&&e.onPointerEnter||e!=null&&e.onPointerLeave){if(!(P!=null&&P.userData.tres__registerAtPointerEventHandler))throw"could not find tres__registerAtPointerEventHandler on scene's userData";(f=P==null?void 0:(u=P.userData).tres__registerAtPointerEventHandler)==null||f.call(u,e)}}e!=null&&e.isObject3D&&(a!=null&&a.isObject3D)?(a.add(e),e.dispatchEvent({type:"added"})):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,t;if(e){if(e.isObject3D){const n=e,r=s=>{var f,m;const u=s;s.userData.tres__materialViaProp||(f=u.material)==null||f.dispose(),s.userData.tres__geometryViaProp||(m=u.geometry)==null||m.dispose()},i=P==null?void 0:P.userData.tres__deregisterAtPointerEventHandler,l=s=>{if(!i)throw"could not find tres__deregisterAtPointerEventHandler on scene's userData";(s!=null&&s.onClick||s!=null&&s.onPointerMove||s!=null&&s.onPointerEnter||s!=null&&s.onPointerLeave)&&(i==null||i(s))},o=s=>{const u=P==null?void 0:P.userData.tres__deregisterCamera;if(!u)throw"could not find tres__deregisterCamera on scene's userData";s.isCamera&&(u==null||u(s))};n.traverse(s=>{r(s),o(s),l==null||l(s)}),r(n),o(n),l==null||l(n)}(a=e.removeFromParent)==null||a.call(e),(t=e.dispose)==null||t.call(e)}},patchProp(e,a,t,n){if(e){let r=e,i=a,l=T(i),o=r==null?void 0:r[l];if(r.type==="BufferGeometry"){if(i==="args")return;r.setAttribute(T(i),new g.BufferAttribute(...n));return}if(i.includes("-")&&o===void 0){const u=i.split("-");o=u.reduce((f,m)=>f[T(m)],r),i=u.pop(),l=i.toLowerCase(),o!=null&&o.set||(r=u.reduce((f,m)=>f[T(m)],r))}let s=n;if(s===""&&(s=!0),W(o)){Array.isArray(s)?e[l](...s):e[l](s);return}!(o!=null&&o.set)&&!W(o)?r[l]=s:o.constructor===s.constructor&&(o!=null&&o.copy)?o==null||o.copy(s):Array.isArray(s)?o.set(...s):!o.isColor&&o.setScalar?o.setScalar(s):o.set(s)}},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:Pe}=c.createRenderer(Ce),Me=e=>{const a=Pe(t);function t(){return e&&e.default?e.default():[]}return a};j(oe);const _e=["data-scene"],re=c.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,default:!1},premultipliedAlpha:{type:Boolean},antialias:{type:Boolean,default:!0},stencil:{type:Boolean,default:!0},preserveDrawingBuffer:{type:Boolean,default:!1},powerPreference:{},depth:{type:Boolean,default:!0},logarithmicDepthBuffer:{type:Boolean},failIfMajorPerformanceCaveat:{type:Boolean}},setup(e){const a=e,{logWarning:t}=S(),n=c.ref(),r=c.shallowRef(new g.Scene);G();const i=c.useSlots();let l;const o=u=>{l=Me(i),l.provide("useTres",u),l.provide("extend",j),l.mount(r.value)},s=c.computed(()=>a.disableRender);return c.onMounted(()=>{const u=n,f=ee({scene:r.value,canvas:u,windowSize:a.windowSize,disableRender:s,rendererOptions:a});H({scene:r.value,contextParts:f});const{addCamera:m,camera:M,cameras:_,removeCamera:b}=f;o(f);const w=()=>{const C=new g.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);C.position.set(3,3,3),C.lookAt(0,0,0),m(C);const y=c.watchEffect(()=>{_.value.length>=2&&(C.removeFromParent(),b(C),y==null||y())})};c.watch(()=>a.camera,(C,y)=>{C?m(C):y&&(y.removeFromParent(),b(y))},{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."),w())}),(u,f)=>(c.openBlock(),c.createElementBlock("canvas",{ref_key:"canvas",ref:n,"data-scene":r.value.uuid,style:c.normalizeStyle({display:"block",width:"100%",height:"100%",position:u.windowSize?"fixed":"relative",top:0,left:0,pointerEvents:"auto",touchAction:"none",zIndex:1})},null,12,_e))}}),Le=["TresCanvas","TresLeches","TresScene"],be={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!Le.includes(e)||e==="primitive"}}},he={install(e){e.component("TresCanvas",re)}};p.TresCanvas=re,p.catalogue=z,p.default=he,p.extend=j,p.isProd=pe,p.normalizeColor=X,p.normalizeVectorFlexibleParam=de,p.templateCompilerOptions=be,p.trasverseObjects=Q,p.useCamera=q,p.useLoader=ve,p.useLogger=S,p.usePointerEventHandler=H,p.useRaycaster=Z,p.useRenderLoop=G,p.useRenderer=Y,p.useSeek=we,p.useTexture=ge,p.useTres=ye,p.useTresContext=te,p.useTresContextProvider=ee,Object.defineProperties(p,{__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/dist/utils/index.d.ts
CHANGED
|
@@ -4,3 +4,5 @@ export declare const isHTMLTag: (key: string) => boolean;
|
|
|
4
4
|
export declare function kebabToCamel(str: string): string;
|
|
5
5
|
export declare function makeMap(str: string, expectsLowerCase?: boolean): (key: string) => boolean;
|
|
6
6
|
export declare const uniqueBy: <T, K>(array: T[], iteratee: (value: T) => K) => T[];
|
|
7
|
+
export declare const get: <T>(obj: any, path: string | string[]) => T | undefined;
|
|
8
|
+
export declare const set: (obj: any, path: string | string[], value: any) => void;
|
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": "
|
|
4
|
+
"version": "3.0.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"packageManager": "pnpm@8.3.1",
|
|
7
7
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
66
|
"@alvarosabu/utils": "^3.1.1",
|
|
67
|
-
"@vueuse/core": "^10.2.
|
|
67
|
+
"@vueuse/core": "^10.2.1"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@alvarosabu/prettier-config": "^1.3.0",
|
|
@@ -73,17 +73,17 @@
|
|
|
73
73
|
"@stackblitz/sdk": "^1.9.0",
|
|
74
74
|
"@tresjs/cientos": "2.2.0",
|
|
75
75
|
"@types/three": "^0.152.1",
|
|
76
|
-
"@typescript-eslint/eslint-plugin": "^5.60.
|
|
77
|
-
"@typescript-eslint/parser": "^5.60.
|
|
76
|
+
"@typescript-eslint/eslint-plugin": "^5.60.1",
|
|
77
|
+
"@typescript-eslint/parser": "^5.60.1",
|
|
78
78
|
"@vitejs/plugin-vue": "^4.2.3",
|
|
79
|
-
"@vitest/coverage-c8": "^0.32.
|
|
80
|
-
"@vitest/ui": "^0.32.
|
|
79
|
+
"@vitest/coverage-c8": "^0.32.3",
|
|
80
|
+
"@vitest/ui": "^0.32.3",
|
|
81
81
|
"@vue/test-utils": "^2.4.0",
|
|
82
|
-
"eslint": "^8.
|
|
82
|
+
"eslint": "^8.44.0",
|
|
83
83
|
"eslint-config-prettier": "^8.8.0",
|
|
84
84
|
"eslint-plugin-vue": "^9.15.1",
|
|
85
85
|
"esno": "^0.16.3",
|
|
86
|
-
"gsap": "^3.12.
|
|
86
|
+
"gsap": "^3.12.2",
|
|
87
87
|
"jsdom": "^22.1.0",
|
|
88
88
|
"kolorist": "^1.8.0",
|
|
89
89
|
"ohmyfetch": "^0.4.21",
|
|
@@ -93,18 +93,18 @@
|
|
|
93
93
|
"rollup-plugin-analyzer": "^4.0.0",
|
|
94
94
|
"rollup-plugin-copy": "^3.4.0",
|
|
95
95
|
"rollup-plugin-visualizer": "^5.9.2",
|
|
96
|
-
"three": "^0.
|
|
97
|
-
"unocss": "^0.53.
|
|
96
|
+
"three": "^0.154.0",
|
|
97
|
+
"unocss": "^0.53.4",
|
|
98
98
|
"unplugin": "^1.3.1",
|
|
99
99
|
"unplugin-vue-components": "^0.25.1",
|
|
100
100
|
"vite": "^4.3.9",
|
|
101
101
|
"vite-plugin-banner": "^0.7.0",
|
|
102
|
-
"vite-plugin-dts": "
|
|
103
|
-
"vite-plugin-inspect": "^0.7.
|
|
104
|
-
"vite-plugin-require-transform": "^1.0.
|
|
102
|
+
"vite-plugin-dts": "3.0.2",
|
|
103
|
+
"vite-plugin-inspect": "^0.7.32",
|
|
104
|
+
"vite-plugin-require-transform": "^1.0.20",
|
|
105
105
|
"vite-svg-loader": "^4.0.0",
|
|
106
106
|
"vitepress": "1.0.0-beta.5",
|
|
107
|
-
"vitest": "^0.32.
|
|
107
|
+
"vitest": "^0.32.3",
|
|
108
108
|
"vue": "^3.3.4",
|
|
109
109
|
"vue-demi": "^0.14.5"
|
|
110
110
|
}
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import { Scene } from 'three';
|
|
2
|
-
import type { TresCamera } from '../types/';
|
|
3
|
-
import type { RendererPresetsType } from '../composables/useRenderer/const';
|
|
4
|
-
import type { ColorSpace, ShadowMapType, ToneMapping } from 'three';
|
|
5
|
-
export interface TresSceneProps {
|
|
6
|
-
shadows?: boolean;
|
|
7
|
-
shadowMapType?: ShadowMapType;
|
|
8
|
-
physicallyCorrectLights?: boolean;
|
|
9
|
-
useLegacyLights?: boolean;
|
|
10
|
-
outputColorSpace?: ColorSpace;
|
|
11
|
-
toneMapping?: ToneMapping;
|
|
12
|
-
toneMappingExposure?: number;
|
|
13
|
-
context?: WebGLRenderingContext;
|
|
14
|
-
powerPreference?: 'high-performance' | 'low-power' | 'default';
|
|
15
|
-
preserveDrawingBuffer?: boolean;
|
|
16
|
-
clearColor?: string;
|
|
17
|
-
windowSize?: boolean;
|
|
18
|
-
preset?: RendererPresetsType;
|
|
19
|
-
disableRender?: boolean;
|
|
20
|
-
camera?: TresCamera;
|
|
21
|
-
}
|
|
22
|
-
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
23
|
-
camera: {
|
|
24
|
-
type: import("vue").PropType<TresCamera>;
|
|
25
|
-
};
|
|
26
|
-
shadows: {
|
|
27
|
-
type: import("vue").PropType<boolean>;
|
|
28
|
-
};
|
|
29
|
-
shadowMapType: {
|
|
30
|
-
type: import("vue").PropType<ShadowMapType>;
|
|
31
|
-
};
|
|
32
|
-
physicallyCorrectLights: {
|
|
33
|
-
type: import("vue").PropType<boolean>;
|
|
34
|
-
default: boolean;
|
|
35
|
-
};
|
|
36
|
-
useLegacyLights: {
|
|
37
|
-
type: import("vue").PropType<boolean>;
|
|
38
|
-
};
|
|
39
|
-
outputColorSpace: {
|
|
40
|
-
type: import("vue").PropType<ColorSpace>;
|
|
41
|
-
};
|
|
42
|
-
toneMapping: {
|
|
43
|
-
type: import("vue").PropType<ToneMapping>;
|
|
44
|
-
};
|
|
45
|
-
toneMappingExposure: {
|
|
46
|
-
type: import("vue").PropType<number>;
|
|
47
|
-
};
|
|
48
|
-
context: {
|
|
49
|
-
type: import("vue").PropType<WebGLRenderingContext>;
|
|
50
|
-
};
|
|
51
|
-
powerPreference: {
|
|
52
|
-
type: import("vue").PropType<"high-performance" | "low-power" | "default">;
|
|
53
|
-
};
|
|
54
|
-
preserveDrawingBuffer: {
|
|
55
|
-
type: import("vue").PropType<boolean>;
|
|
56
|
-
};
|
|
57
|
-
clearColor: {
|
|
58
|
-
type: import("vue").PropType<string>;
|
|
59
|
-
};
|
|
60
|
-
windowSize: {
|
|
61
|
-
type: import("vue").PropType<boolean>;
|
|
62
|
-
};
|
|
63
|
-
preset: {
|
|
64
|
-
type: import("vue").PropType<"realistic">;
|
|
65
|
-
};
|
|
66
|
-
disableRender: {
|
|
67
|
-
type: import("vue").PropType<boolean>;
|
|
68
|
-
};
|
|
69
|
-
}, {
|
|
70
|
-
scene: Scene;
|
|
71
|
-
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
72
|
-
camera: {
|
|
73
|
-
type: import("vue").PropType<TresCamera>;
|
|
74
|
-
};
|
|
75
|
-
shadows: {
|
|
76
|
-
type: import("vue").PropType<boolean>;
|
|
77
|
-
};
|
|
78
|
-
shadowMapType: {
|
|
79
|
-
type: import("vue").PropType<ShadowMapType>;
|
|
80
|
-
};
|
|
81
|
-
physicallyCorrectLights: {
|
|
82
|
-
type: import("vue").PropType<boolean>;
|
|
83
|
-
default: boolean;
|
|
84
|
-
};
|
|
85
|
-
useLegacyLights: {
|
|
86
|
-
type: import("vue").PropType<boolean>;
|
|
87
|
-
};
|
|
88
|
-
outputColorSpace: {
|
|
89
|
-
type: import("vue").PropType<ColorSpace>;
|
|
90
|
-
};
|
|
91
|
-
toneMapping: {
|
|
92
|
-
type: import("vue").PropType<ToneMapping>;
|
|
93
|
-
};
|
|
94
|
-
toneMappingExposure: {
|
|
95
|
-
type: import("vue").PropType<number>;
|
|
96
|
-
};
|
|
97
|
-
context: {
|
|
98
|
-
type: import("vue").PropType<WebGLRenderingContext>;
|
|
99
|
-
};
|
|
100
|
-
powerPreference: {
|
|
101
|
-
type: import("vue").PropType<"high-performance" | "low-power" | "default">;
|
|
102
|
-
};
|
|
103
|
-
preserveDrawingBuffer: {
|
|
104
|
-
type: import("vue").PropType<boolean>;
|
|
105
|
-
};
|
|
106
|
-
clearColor: {
|
|
107
|
-
type: import("vue").PropType<string>;
|
|
108
|
-
};
|
|
109
|
-
windowSize: {
|
|
110
|
-
type: import("vue").PropType<boolean>;
|
|
111
|
-
};
|
|
112
|
-
preset: {
|
|
113
|
-
type: import("vue").PropType<"realistic">;
|
|
114
|
-
};
|
|
115
|
-
disableRender: {
|
|
116
|
-
type: import("vue").PropType<boolean>;
|
|
117
|
-
};
|
|
118
|
-
}>>, {
|
|
119
|
-
physicallyCorrectLights: boolean;
|
|
120
|
-
}, {}>, {
|
|
121
|
-
default(): any;
|
|
122
|
-
}>;
|
|
123
|
-
export default _default;
|
|
124
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
125
|
-
new (): {
|
|
126
|
-
$slots: S;
|
|
127
|
-
};
|
|
128
|
-
};
|
|
@@ -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';
|
|
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
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function withSetup(composable: any): (import("vue").App<Element> | undefined)[];
|