@tresjs/core 2.4.2 → 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 +459 -496
- 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,v,f){"use strict";function ve(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const t=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(a,o,t.get?t:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const ge=ve(v),F=c.ref({}),W=e=>void Object.assign(F.value,e),X=e=>typeof e=="function",J=e=>!!e&&e.constructor===Array,C=["00","01","02","03","04","05","06","07","08","09","0a","0b","0c","0d","0e","0f","10","11","12","13","14","15","16","17","18","19","1a","1b","1c","1d","1e","1f","20","21","22","23","24","25","26","27","28","29","2a","2b","2c","2d","2e","2f","30","31","32","33","34","35","36","37","38","39","3a","3b","3c","3d","3e","3f","40","41","42","43","44","45","46","47","48","49","4a","4b","4c","4d","4e","4f","50","51","52","53","54","55","56","57","58","59","5a","5b","5c","5d","5e","5f","60","61","62","63","64","65","66","67","68","69","6a","6b","6c","6d","6e","6f","70","71","72","73","74","75","76","77","78","79","7a","7b","7c","7d","7e","7f","80","81","82","83","84","85","86","87","88","89","8a","8b","8c","8d","8e","8f","90","91","92","93","94","95","96","97","98","99","9a","9b","9c","9d","9e","9f","a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","aa","ab","ac","ad","ae","af","b0","b1","b2","b3","b4","b5","b6","b7","b8","b9","ba","bb","bc","bd","be","bf","c0","c1","c2","c3","c4","c5","c6","c7","c8","c9","ca","cb","cc","cd","ce","cf","d0","d1","d2","d3","d4","d5","d6","d7","d8","d9","da","db","dc","dd","de","df","e0","e1","e2","e3","e4","e5","e6","e7","e8","e9","ea","eb","ec","ed","ee","ef","f0","f1","f2","f3","f4","f5","f6","f7","f8","f9","fa","fb","fc","fd","fe","ff"];function ye(){const e=Math.random()*4294967295|0,a=Math.random()*4294967295|0,o=Math.random()*4294967295|0,t=Math.random()*4294967295|0;return(C[e&255]+C[e>>8&255]+C[e>>16&255]+C[e>>24&255]+"-"+C[a&255]+C[a>>8&255]+"-"+C[a>>16&15|64]+C[a>>24&255]+"-"+C[o&63|128]+C[o>>8&255]+"-"+C[o>>16&255]+C[o>>24&255]+C[t&255]+C[t>>8&255]+C[t>>16&255]+C[t>>24&255]).toLowerCase()}const j=Symbol();function H(){const e=c.shallowReactive({uuid:ye(),camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,aspectRatio:void 0,pointerEventHandler:void 0});function a(r){return e[r]}function o(r,s){e[r]=s}const t={state:e,...c.toRefs(e),getState:a,setState:o};return c.provide(j,t),t}const x=()=>c.inject(j,{state:c.shallowReactive({camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,pointerEventHandler:void 0})});var Q=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(Q||{});const he=45;let E;function Z(){const{state:e,setState:a,aspectRatio:o}=x();function t(i="Perspective",u){var m,g,y;if(i==="Perspective"){const{near:_,far:L,fov:M}=u||{near:.1,far:1e3,fov:he};E=new v.PerspectiveCamera(M,((m=e.aspectRatio)==null?void 0:m.value)||window.innerWidth/window.innerHeight,_,L),(g=e.cameras)==null||g.push(E)}else{const{left:_,right:L,top:M,bottom:w,near:T,far:A}=u||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};E=new v.OrthographicCamera(_,L,M,w,T,A),(y=e.cameras)==null||y.push(E)}return e.camera=E,a("camera",e.camera),E}function r(){var i;e.camera instanceof v.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(i=e.camera)==null||i.updateProjectionMatrix()}function s(i){var u;(u=e.cameras)==null||u.push(i),i instanceof v.PerspectiveCamera&&e.aspectRatio&&(i.aspect=e.aspectRatio.value),i.updateProjectionMatrix(),a("camera",i)}function l(i){var u;((u=e.cameras)==null?void 0:u.length)===0&&s(i)}function n(){e.cameras=[]}return c.watchEffect(()=>{o!=null&&o.value&&r()}),{activeCamera:c.toRef(e,"camera"),createCamera:t,updateCamera:r,pushCamera:s,clearCameras:n,setFirstCamera:l}}const ee=f.createEventHook(),te=f.createEventHook(),$=f.createEventHook(),V=new v.Clock;let D=0,I=0;const{pause:we,resume:be,isActive:Ce}=f.useRafFn(()=>{ee.trigger({delta:D,elapsed:I,clock:V}),te.trigger({delta:D,elapsed:I,clock:V}),$.trigger({delta:D,elapsed:I,clock:V})},{immediate:!1});$.on(()=>{D=V.getDelta(),I=V.getElapsedTime()});function U(){return{onBeforeLoop:ee.on,onLoop:te.on,onAfterLoop:$.on,pause:we,resume:be,isActive:Ce}}function _e(e){return typeof e=="number"?[e,e,e]:e instanceof v.Vector3?[e.x,e.y,e.z]:e}function ae(e){return e instanceof v.Color?e:Array.isArray(e)?new v.Color(...e):new v.Color(e)}const Y={realistic:{outputColorSpace:v.SRGBColorSpace,toneMapping:v.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:v.PCFSoftShadowMap}}},ne=(e,a)=>{for(const o of Object.keys(a))a[o]instanceof Object&&Object.assign(a[o],ne(e[o],a[o]));return Object.assign(e||{},a),e},Pe=Me("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot");function N(e){return e.replace(/-([a-z])/g,(a,o)=>o.toUpperCase())}function Me(e,a){const o=Object.create(null),t=e.split(",");for(let r=0;r<t.length;r++)o[t[r]]=!0;return a?r=>!!o[r.toLowerCase()]:r=>!!o[r]}const Le=(e,a)=>{const o=new Set,t=[];for(const r of e){const s=a(r);o.has(s)||(o.add(s),t.push(r))}return t},Se=!0,oe="[TresJS ▲ ■ ●] ";function R(){function e(t,r){console.error(`${oe} ${t}`,r||"")}function a(t){console.warn(`${oe} ${t}`)}function o(t,r){}return{logError:e,logWarning:a,logMessage:o}}function re(e){const a=c.shallowRef(),o=c.ref(!1),{alpha:t=!0,antialias:r=!0,depth:s,logarithmicDepthBuffer:l,failIfMajorPerformanceCaveat:n,precision:i,premultipliedAlpha:u,stencil:m,shadows:g=!1,shadowMapType:y=v.PCFShadowMap,useLegacyLights:_=!1,outputColorSpace:L=v.LinearSRGBColorSpace,toneMapping:M=v.NoToneMapping,toneMappingExposure:w=1,context:T=void 0,powerPreference:A="default",preserveDrawingBuffer:b=!1,clearColor:P,windowSize:k=!1,preset:G=void 0}=c.toRefs(e),{state:S,setState:d}=x(),{width:h,height:fe}=f.toValue(k)==!0||f.toValue(k)===""||f.toValue(k)==="true"?f.useWindowSize():f.useElementSize(S.container),{logError:ze,logWarning:Ge}=R(),{pixelRatio:de}=f.useDevicePixelRatio(),{pause:Fe,resume:We}=U(),K=c.computed(()=>h.value/fe.value);setTimeout(()=>{var O;!f.toValue(k)&&!((O=S.canvas)!=null&&O.value.offsetHeight)&&Ge(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
|
|
9
|
-
You could set windowSize=true to force the canvas to be the size of the window.`)},1e3);const pe=()=>{a.value&&(a.value.setSize(h.value,fe.value),a.value.setPixelRatio(Math.min(de.value,2)))},me=()=>{if(!a.value)return;const O=f.toValue(G);if(O){O in Y||ze("Renderer Preset must be one of these: "+Object.keys(Y).join(", ")),ne(a.value,Y[O]);return}a.value.shadowMap.enabled=f.toValue(g),a.value.shadowMap.type=f.toValue(y),a.value.toneMapping=f.toValue(M)||v.NoToneMapping,a.value.toneMappingExposure=f.toValue(w),a.value.outputColorSpace=f.toValue(L)||v.LinearSRGBColorSpace,P!=null&&P.value&&a.value.setClearColor(ae(f.toValue(P))),a.value.useLegacyLights=f.toValue(_)},$e=()=>{const O=f.unrefElement(S.canvas);O&&(a.value=new v.WebGLRenderer({canvas:O,alpha:f.toValue(t),antialias:f.toValue(r),context:f.toValue(T),depth:f.toValue(s),failIfMajorPerformanceCaveat:f.toValue(n),logarithmicDepthBuffer:f.toValue(l),powerPreference:f.toValue(A),precision:f.toValue(i),stencil:f.toValue(m),preserveDrawingBuffer:f.toValue(b),premultipliedAlpha:f.toValue(u)}),d("renderer",a.value),d("clock",new v.Clock),d("aspectRatio",K),me(),pe(),We(),o.value=!0)},Ue=()=>{a.value&&(a.value.dispose(),a.value=void 0,o.value=!1,Fe())};return c.watch([K,de],pe),c.watch([g,y,L,_,M,w,P],me),c.watch(()=>[S.canvas,S.container],()=>{f.unrefElement(S.canvas)&&f.unrefElement(S.container)&&$e()},{immediate:!0,deep:!0}),{renderer:a,isReady:o,dispose:Ue,aspectRatio:K}}function ie(e){const a={nodes:{},materials:{}};return e&&e.traverse(o=>{o.name&&(a.nodes[o.name]=o),o.material&&!a.materials[o.material.name]&&(a.materials[o.material.name]=o.material)}),a}async function Oe(e,a,o,t,r){const{logError:s}=R(),l=new e;r&&r(l),o&&o(l);const i=(Array.isArray(a)?a:[a]).map(u=>new Promise((m,g)=>{l.load(u,y=>{y.scene&&Object.assign(y,ie(y.scene)),m(y)},t,y=>g(s("[useLoader] - Failed to load resource",y)))}));return J(a)?await Promise.all(i):await i[0]}async function Te(e){const a=new v.LoadingManager,o=new v.TextureLoader(a),t=r=>new Promise((s,l)=>{o.load(r,n=>s(n),()=>null,()=>{l(new Error("[useTextures] - Failed to load texture"))})});if(J(e)){const r=await Promise.all(e.map(s=>t(s)));return e.length>1?r:r[0]}else{const{map:r,displacementMap:s,normalMap:l,roughnessMap:n,metalnessMap:i,aoMap:u,alphaMap:m,matcap:g}=e;return{map:r?await t(r):null,displacementMap:s?await t(s):null,normalMap:l?await t(l):null,roughnessMap:n?await t(n):null,metalnessMap:i?await t(i):null,aoMap:u?await t(u):null,alphaMap:m?await t(m):null,matcap:g?await t(g):null}}}const se=e=>{const{state:a,setState:o}=x(),t=c.computed(()=>{var d;return(d=a.canvas)==null?void 0:d.value}),{x:r,y:s}=f.usePointer({target:t}),{width:l,height:n,top:i,left:u}=f.useElementBounding(t),m=new v.Raycaster;o("raycaster",m);const g=({x:d,y:h})=>{if(t.value)return{x:(d-u.value)/l.value*2-1,y:-((h-i.value)/n.value)*2+1}},y=({x:d,y:h})=>{if(a.camera)return m.setFromCamera(new v.Vector2(d,h),a.camera),m.intersectObjects(e.value,!1)},_=d=>{const h=g({x:(d==null?void 0:d.clientX)??r.value,y:(d==null?void 0:d.clientY)??s.value});return h?y(h)||[]:[]},L=c.computed(()=>_()),M=f.createEventHook(),w=f.createEventHook(),T=(d,h)=>{d.trigger({event:h,intersects:_(h)})},A=d=>{T(w,d)};let b;const P=d=>{var h;b=(h=_(d)[0])==null?void 0:h.object},k=d=>{var h;d instanceof PointerEvent&&b===((h=_(d)[0])==null?void 0:h.object)&&T(M,d)},G=d=>w.trigger({event:d,intersects:[]}),S=c.watchEffect(()=>{t!=null&&t.value&&(t.value.addEventListener("pointerup",k),t.value.addEventListener("pointerdown",P),t.value.addEventListener("pointermove",A),t.value.addEventListener("pointerleave",G),S())});return c.onUnmounted(()=>{t!=null&&t.value&&(t.value.removeEventListener("pointerup",k),t.value.removeEventListener("pointerdown",P),t.value.removeEventListener("pointermove",A),t.value.removeEventListener("pointerleave",G))}),{intersects:L,onClick:d=>M.on(d).off,onPointerMove:d=>w.on(d).off}};function Ae(){const{logWarning:e}=R();function a(t,r,s){let l=null;return t.traverse(n=>{n[r]===s&&(l=n)}),l||e(`Child with ${r} '${s}' not found.`),l}function o(t,r){return a(t,"name",r)}return{seek:a,seekByName:o}}const ce=()=>{const e=c.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),a=n=>{Object.values(e).forEach(i=>i.delete(n))},o=n=>{const{onClick:i,onPointerMove:u,onPointerEnter:m,onPointerLeave:g}=n;i&&e.click.set(n,i),u&&e.pointerMove.set(n,u),m&&e.pointerEnter.set(n,m),g&&e.pointerLeave.set(n,g),n.addEventListener("removed",()=>{n.traverse(y=>{a(y)}),a(n)})},t=c.computed(()=>Le(Object.values(e).map(n=>Array.from(n.keys())).flat(),({uuid:n})=>n)),{onClick:r,onPointerMove:s}=se(t);r(({intersects:n,event:i})=>{var u;n.length&&((u=e.click.get(n[0].object))==null||u(n[0],i))});let l;return s(({intersects:n,event:i})=>{var _,L,M,w;const u=(_=n==null?void 0:n[0])==null?void 0:_.object,{pointerLeave:m,pointerEnter:g,pointerMove:y}=e;l&&l!==u&&((L=m.get(l))==null||L(l,i)),u&&(l!==u&&((M=g.get(u))==null||M(n[0],i)),(w=y.get(u))==null||w(n[0],i)),l=u||null}),{registerObject:o,deregisterObject:a}},z={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp",REGISTER_AT_POINTER_EVENT_HANDLER:"tres__registerAtPointerEventHandler"};function qe(e){}let q=null,B=null;const{logError:le}=R(),ke={createElement(e,a,o,t){var i,u;if(t||(t={}),t.args||(t.args=[]),e==="template"||Pe(e))return null;let r=e.replace("Tres",""),s;if(e==="primitive"){(t==null?void 0:t.object)===void 0&&le("Tres primitives need a prop 'object'");const m=t.object;r=m.type,s=Object.assign(m,{type:r,attach:t.attach,primitive:!0})}else{const m=F.value[r];m||le(`${r} is not defined on the THREE namespace. Use extend to add it to the catalog.`),s=new m(...t.args)}s.isCamera&&(t!=null&&t.position||s.position.set(3,3,3),t!=null&&t.lookAt||s.lookAt(0,0,0)),(t==null?void 0:t.attach)===void 0&&(s.isMaterial?s.attach="material":s.isBufferGeometry&&(s.attach="geometry"));const{GEOMETRY_VIA_PROP:l,MATERIAL_VIA_PROP:n}=z;return s.isObject3D&&((i=t==null?void 0:t.material)!=null&&i.isMaterial&&(s.userData[n]=!0),(u=t==null?void 0:t.geometry)!=null&&u.isBufferGeometry&&(s.userData[l]=!0)),s},insert(e,a){var o,t,r,s,l,n,i;if(a&&a.isScene&&(B=a),(((o=e==null?void 0:e.__vnode)==null?void 0:o.type)==="TresGroup"||((t=e==null?void 0:e.__vnode)==null?void 0:t.type)==="TresObject3D")&&a===null&&!((s=(r=e==null?void 0:e.__vnode)==null?void 0:r.ctx)!=null&&s.asyncResolved)){q=e;return}else(l=e==null?void 0:e.__vnode)!=null&&l.type.includes("Controls")&&a===null&&(q=B);a||(a=q),e!=null&&e.isObject3D&&(a!=null&&a.isObject3D)?(a.add(e),e.dispatchEvent({type:"added"}),(i=(n=B==null?void 0:B.userData)==null?void 0:n[z.REGISTER_AT_POINTER_EVENT_HANDLER])==null||i.call(n,e)):e!=null&&e.isFog?a.fog=e:typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[a==null?void 0:a.attach],a&&(a[e.attach]=e))},remove(e){var a,o;if(e){if(e.isObject3D){const t=e,r=s=>{var i,u;const{GEOMETRY_VIA_PROP:l,MATERIAL_VIA_PROP:n}=z;s.userData[n]||(i=s.material)==null||i.dispose(),s.userData[l]||(u=s.geometry)==null||u.dispose()};t.traverse(s=>{r(s)}),r(t)}(a=e.removeFromParent)==null||a.call(e),(o=e.dispose)==null||o.call(e)}},patchProp(e,a,o,t){if(e){let r=e,s=a,l=N(s),n=r==null?void 0:r[l];if(r.type==="BufferGeometry"){if(s==="args")return;r.setAttribute(N(s),new v.BufferAttribute(...t));return}if(s.includes("-")&&n===void 0){const u=s.split("-");n=u.reduce((m,g)=>m[N(g)],r),s=u.pop(),l=s.toLowerCase(),n!=null&&n.set||(r=u.reduce((m,g)=>m[N(g)],r))}let i=t;if(i===""&&(i=!0),X(n)){Array.isArray(i)?e[l](...i):e[l](i);return}!(n!=null&&n.set)&&!X(n)?r[l]=i:n.constructor===i.constructor&&(n!=null&&n.copy)?n==null||n.copy(i):Array.isArray(i)?n.set(...i):!n.isColor&&n.setScalar?n.setScalar(i):n.set(i)}},parentNode(e){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{createApp:xe}=c.createRenderer(ke),Ee=e=>{const a=xe(o);function o(){return e&&e.default?e.default():[]}return a};W(ge);const Re=["data-scene"],Ve={style:{width:"100%",height:"100%"}},Be=["data-scene"],je=c.defineComponent({__name:"TresScene",props:{shadows:{type:Boolean},shadowMapType:{},physicallyCorrectLights:{type:Boolean,default:!1},useLegacyLights:{type:Boolean},outputColorSpace:{},toneMapping:{},toneMappingExposure:{},context:{},powerPreference:{},preserveDrawingBuffer:{type:Boolean},clearColor:{},windowSize:{type:Boolean},preset:{},disableRender:{type:Boolean},camera:{}},setup(e,{expose:a}){const o=e,{logWarning:t}=R();o.physicallyCorrectLights===!0&&t("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const r=c.ref(),s=c.ref(),l=new v.Scene,n=ce(),{setState:i}=x();l.userData[z.REGISTER_AT_POINTER_EVENT_HANDLER]=n.registerObject,i("scene",l),i("canvas",s),i("container",r),i("pointerEventHandler",n),i("appContext",c.getCurrentInstance());const{onLoop:u,resume:m}=U(),{activeCamera:g,pushCamera:y,clearCameras:_}=Z();c.onMounted(()=>{M()}),c.onUnmounted(()=>{i("renderer",null)});function L(){const b=l.getObjectByProperty("isCamera",!0);if(b)y(b);else{t("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");const P=new v.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);P.position.set(3,3,3),P.lookAt(0,0,0),y(P)}}function M(){const{renderer:b}=re(o);o.camera&&y(o.camera),u(()=>{var P;g.value&&o.disableRender!==!0&&((P=b.value)==null||P.render(l,g.value))})}let w;const T=c.useSlots();function A(){w=Ee(T);const b=x();w.provide("useTres",b),w.provide(j,b),w.provide("extend",W),w.mount(l),L()}return A(),a({scene:l}),c.watch(()=>o.camera,b=>{b&&(_(),y(b))}),(b,P)=>(c.openBlock(),c.createElementBlock("div",{ref_key:"container",ref:r,key:c.unref(l).uuid,"data-scene":c.unref(l).uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[c.createElementVNode("div",Ve,[c.createElementVNode("canvas",{ref_key:"canvas",ref:s,"data-scene":c.unref(l).uuid,style:c.normalizeStyle({display:"block",width:"100%",height:"100%",position:b.windowSize?"fixed":"absolute",top:0,left:0})},null,12,Be)])],8,Re))}}),ue=c.defineComponent({__name:"TresCanvas",props:{shadows:{type:Boolean},shadowMapType:{},physicallyCorrectLights:{type:Boolean},useLegacyLights:{type:Boolean},outputColorSpace:{},toneMapping:{},toneMappingExposure:{},context:{},powerPreference:{},preserveDrawingBuffer:{type:Boolean},clearColor:{},windowSize:{type:Boolean},preset:{},disableRender:{type:Boolean},camera:{}},setup(e,{expose:a}){const o=e,t=H();return a(t),(r,s)=>(c.openBlock(),c.createBlock(je,c.normalizeProps(c.guardReactiveProps(o)),{default:c.withCtx(()=>[c.renderSlot(r.$slots,"default")]),_:3},16))}}),De=["TresCanvas","TresLeches","TresScene"],Ie={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!De.includes(e)||e==="primitive"}}},Ne={install(e){e.component("TresCanvas",ue)}};p.CameraType=Q,p.TRES_CONTEXT_KEY=j,p.TresCanvas=ue,p.catalogue=F,p.default=Ne,p.extend=W,p.isProd=Se,p.normalizeColor=ae,p.normalizeVectorFlexibleParam=_e,p.templateCompilerOptions=Ie,p.trasverseObjects=ie,p.useCamera=Z,p.useLoader=Oe,p.useLogger=R,p.usePointerEventHandler=ce,p.useRaycaster=se,p.useRenderLoop=U,p.useRenderer=re,p.useSeek=Ae,p.useTexture=Te,p.useTres=x,p.useTresProvider=H,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
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)[];
|