@tresjs/core
Advanced tools
Comparing version 3.2.2 to 3.2.3
@@ -22,3 +22,16 @@ import type { Texture } from 'three'; | ||
/** | ||
* Composable for loading textures. | ||
* Map of textures to load that can be passed to `useTexture()`. | ||
*/ | ||
export interface PBRUseTextureMap { | ||
map?: string; | ||
displacementMap?: string; | ||
normalMap?: string; | ||
roughnessMap?: string; | ||
metalnessMap?: string; | ||
aoMap?: string; | ||
alphaMap?: string; | ||
matcap?: string; | ||
} | ||
/** | ||
* Loads a single texture. | ||
* | ||
@@ -28,2 +41,45 @@ * ```ts | ||
* | ||
* const matcapTexture = await useTexture(['path/to/texture.png']) | ||
* ``` | ||
* Then you can use the texture in your material. | ||
* | ||
* ```vue | ||
* <TresMeshMatcapMaterial :matcap="matcapTexture" /> | ||
* ``` | ||
* @see https://tresjs.org/examples/load-textures.html | ||
* @export | ||
* @param paths | ||
* @return A promise of the resulting texture | ||
*/ | ||
export declare function useTexture(paths: readonly [string]): Promise<Texture>; | ||
/** | ||
* Loads multiple textures. | ||
* | ||
* ```ts | ||
* import { useTexture } from 'tres' | ||
* | ||
* const [texture1, texture2] = await useTexture([ | ||
* 'path/to/texture1.png', | ||
* 'path/to/texture2.png', | ||
* ]) | ||
* ``` | ||
* Then you can use the texture in your material. | ||
* | ||
* ```vue | ||
* <TresMeshStandardMaterial map="texture1" /> | ||
* ``` | ||
* @see https://tresjs.org/examples/load-textures.html | ||
* @export | ||
* @param paths | ||
* @return A promise of the resulting textures | ||
*/ | ||
export declare function useTexture<T extends string[]>(paths: [...T]): Promise<{ | ||
[K in keyof T]: Texture; | ||
}>; | ||
/** | ||
* Loads a PBR texture map. | ||
* | ||
* ```ts | ||
* import { useTexture } from 'tres' | ||
* | ||
* const pbrTexture = await useTexture({ | ||
@@ -44,7 +100,7 @@ * map: 'path/to/texture.png', | ||
* @export | ||
* @param {(Array<string> | { [key: string]: string })} paths | ||
* @return {*} {(Promise<Texture | Array<Texture> | PBRTextureMaps>)} | ||
* @param paths | ||
* @return A promise of the resulting pbr texture map | ||
*/ | ||
export declare function useTexture(paths: Array<string> | { | ||
[key: string]: string; | ||
}): Promise<Texture | Array<Texture> | PBRTextureMaps>; | ||
export declare function useTexture<TextureMap extends PBRUseTextureMap>(paths: TextureMap): Promise<{ | ||
[K in keyof Required<PBRUseTextureMap>]: K extends keyof TextureMap ? Texture : null; | ||
}>; |
190
dist/tres.js
/** | ||
* name: @tresjs/core | ||
* version: v3.2.2 | ||
* version: v3.2.3 | ||
* (c) 2023 | ||
@@ -8,7 +8,7 @@ * description: Declarative ThreeJS using Vue Components | ||
*/ | ||
import { ref as B, computed as k, watchEffect as D, onUnmounted as N, shallowRef as F, watch as te, reactive as ue, readonly as le, provide as I, inject as ce, createRenderer as fe, defineComponent as U, useSlots as me, getCurrentInstance as J, onMounted as pe, openBlock as ve, createElementBlock as ge, normalizeStyle as de, h as K, Fragment as ye } from "vue"; | ||
import * as we from "three"; | ||
import { PerspectiveCamera as W, OrthographicCamera as Ce, Camera as _e, Clock as Pe, Vector3 as Ee, Color as R, REVISION as Me, SRGBColorSpace as Ae, ACESFilmicToneMapping as ke, PCFSoftShadowMap as be, WebGLRenderer as z, LoadingManager as De, TextureLoader as xe, Vector2 as Oe, Raycaster as Be, BufferAttribute as Le, Scene as Te } from "three"; | ||
import { createEventHook as O, useRafFn as he, toValue as P, unrefElement as Se, useDevicePixelRatio as Re, usePointer as je, useElementBounding as He, useWindowSize as Fe, useElementSize as ze } from "@vueuse/core"; | ||
const Ge = ({ sizes: e, scene: n }) => { | ||
import { ref as B, computed as k, watchEffect as D, onUnmounted as N, shallowRef as F, watch as te, reactive as ie, readonly as ue, provide as I, inject as le, createRenderer as ce, defineComponent as U, useSlots as fe, getCurrentInstance as J, onMounted as me, openBlock as pe, createElementBlock as ve, normalizeStyle as ge, h as K, Fragment as de } from "vue"; | ||
import * as ye from "three"; | ||
import { PerspectiveCamera as $, OrthographicCamera as we, Camera as Ce, Clock as _e, Vector3 as Pe, Color as R, REVISION as Ee, SRGBColorSpace as Me, ACESFilmicToneMapping as Ae, PCFSoftShadowMap as ke, WebGLRenderer as z, LoadingManager as be, TextureLoader as De, Vector2 as xe, Raycaster as Oe, BufferAttribute as Be, Scene as Le } from "three"; | ||
import { createEventHook as O, useRafFn as Te, toValue as P, unrefElement as he, useDevicePixelRatio as Se, usePointer as Re, useElementBounding as je, useWindowSize as He, useElementSize as Fe } from "@vueuse/core"; | ||
const ze = ({ sizes: e, scene: n }) => { | ||
const t = B([]), r = k( | ||
@@ -21,3 +21,3 @@ () => t.value[0] | ||
}, f = (i) => { | ||
const c = i instanceof _e ? i : t.value.find((m) => m.uuid === i); | ||
const c = i instanceof Ce ? i : t.value.find((m) => m.uuid === i); | ||
if (!c) | ||
@@ -30,3 +30,3 @@ return; | ||
e.aspectRatio.value && t.value.forEach((i) => { | ||
i instanceof W && (i.aspect = e.aspectRatio.value), (i instanceof W || i instanceof Ce) && i.updateProjectionMatrix(); | ||
i instanceof $ && (i.aspect = e.aspectRatio.value), (i instanceof $ || i instanceof we) && i.updateProjectionMatrix(); | ||
}); | ||
@@ -42,5 +42,5 @@ }), n.userData.tres__registerCamera = a, n.userData.tres__deregisterCamera = o, N(() => { | ||
}; | ||
}, re = O(), ne = O(), V = O(), x = new Pe(); | ||
}, re = O(), ne = O(), V = O(), x = new _e(); | ||
let j = 0, H = 0; | ||
const { pause: Ie, resume: We, isActive: $e } = he( | ||
const { pause: Ge, resume: Ie, isActive: $e } = Te( | ||
() => { | ||
@@ -58,6 +58,6 @@ re.trigger({ delta: j, elapsed: H, clock: x }), ne.trigger({ delta: j, elapsed: H, clock: x }), V.trigger({ delta: j, elapsed: H, clock: x }); | ||
onAfterLoop: V.on, | ||
pause: Ie, | ||
resume: We, | ||
pause: Ge, | ||
resume: Ie, | ||
isActive: $e | ||
}), pt = !0, X = "[TresJS ▲ ■ ●] "; | ||
}), vt = !0, X = "[TresJS ▲ ■ ●] "; | ||
function L() { | ||
@@ -78,6 +78,6 @@ function e(r, a) { | ||
} | ||
function vt(e) { | ||
return typeof e == "number" ? [e, e, e] : e instanceof Ee ? [e.x, e.y, e.z] : e; | ||
function gt(e) { | ||
return typeof e == "number" ? [e, e, e] : e instanceof Pe ? [e.x, e.y, e.z] : e; | ||
} | ||
function Ne(e) { | ||
function We(e) { | ||
return e instanceof R ? e : Array.isArray(e) ? new R(...e) : new R(e); | ||
@@ -89,3 +89,3 @@ } | ||
return Object.assign(e || {}, n), e; | ||
}, Ve = "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", qe = /* @__PURE__ */ Ue(Ve); | ||
}, Ne = "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", Ve = /* @__PURE__ */ qe(Ne); | ||
function Y(e) { | ||
@@ -97,3 +97,3 @@ return e && e.nodeType === 1; | ||
} | ||
function Ue(e, n) { | ||
function qe(e, n) { | ||
const t = /* @__PURE__ */ Object.create(null), r = e.split(","); | ||
@@ -104,3 +104,3 @@ for (let a = 0; a < r.length; a++) | ||
} | ||
const Je = (e, n) => { | ||
const Ue = (e, n) => { | ||
const t = /* @__PURE__ */ new Set(), r = []; | ||
@@ -117,3 +117,3 @@ for (const a of e) { | ||
return t == null ? void 0 : t.reduce((r, a) => r && r[a], e); | ||
}, Ke = (e, n, t) => { | ||
}, Je = (e, n, t) => { | ||
const r = Array.isArray(n) ? n : n.match(/([^[.\]])+/g); | ||
@@ -139,3 +139,3 @@ r && r.reduce((a, o, f) => (a[o] === void 0 && (a[o] = {}), f === r.length - 1 && (a[o] = t), a[o]), e); | ||
} | ||
function Xe(e, n) { | ||
function Ke(e, n) { | ||
if (!Array.isArray(e) || !Array.isArray(n) || e.length !== n.length) | ||
@@ -148,10 +148,10 @@ return !1; | ||
} | ||
const Ye = Number.parseInt(Me.replace("dev", "")), S = { | ||
const Xe = Array.isArray, Ye = Number.parseInt(Ee.replace("dev", "")), S = { | ||
realistic: { | ||
outputColorSpace: Ae, | ||
toneMapping: ke, | ||
outputColorSpace: Me, | ||
toneMapping: Ae, | ||
toneMappingExposure: 3, | ||
shadowMap: { | ||
enabled: !0, | ||
type: be | ||
type: ke | ||
} | ||
@@ -170,3 +170,3 @@ } | ||
depth: P(t.depth), | ||
canvas: Se(n), | ||
canvas: he(n), | ||
context: P(t.context), | ||
@@ -187,3 +187,3 @@ stencil: P(t.stencil), | ||
}); | ||
const { pixelRatio: c } = Re(); | ||
const { pixelRatio: c } = Se(); | ||
D(() => { | ||
@@ -216,7 +216,7 @@ i.value.setPixelRatio(c.value); | ||
return d !== void 0 ? d : Q(l, A); | ||
}, E = (_, A) => Ke(i.value, A, w(_, A)); | ||
}, E = (_, A) => Je(i.value, A, w(_, A)); | ||
E(t.shadows, "shadowMap.enabled"), E(t.toneMapping, "toneMapping"), E(t.shadowMapType, "shadowMap.type"), Ye < 150 && E(!t.useLegacyLights, "physicallyCorrectLights"), E(t.outputColorSpace, "outputColorSpace"), E(t.toneMappingExposure, "toneMappingExposure"); | ||
const C = w(t.clearColor, "clearColor"); | ||
C && i.value.setClearColor( | ||
C ? Ne(C) : new R(0) | ||
C ? We(C) : new R(0) | ||
// default clear color is not easily/efficiently retrievable from three | ||
@@ -234,4 +234,4 @@ ); | ||
} | ||
const Z = (e) => typeof e == "function", ie = (e) => !!e && e.constructor === Array; | ||
function Ze(e) { | ||
const Z = (e) => typeof e == "function", Ze = (e) => !!e && e.constructor === Array; | ||
function et(e) { | ||
const n = { nodes: {}, materials: {} }; | ||
@@ -242,3 +242,3 @@ return e && e.traverse((t) => { | ||
} | ||
async function gt(e, n, t, r, a) { | ||
async function dt(e, n, t, r, a) { | ||
const { logError: o } = L(), f = new e(); | ||
@@ -251,3 +251,3 @@ a && a(f), t && t(f); | ||
(s) => { | ||
s.scene && Object.assign(s, Ze(s.scene)), m(s); | ||
s.scene && Object.assign(s, et(s.scene)), m(s); | ||
}, | ||
@@ -259,6 +259,6 @@ r, | ||
); | ||
return ie(n) ? await Promise.all(c) : await c[0]; | ||
return Ze(n) ? await Promise.all(c) : await c[0]; | ||
} | ||
async function dt(e) { | ||
const n = new De(), t = new xe(n), r = (a) => new Promise((o, f) => { | ||
async function yt(e) { | ||
const n = new be(), t = new De(n), r = (a) => new Promise((o, f) => { | ||
t.load( | ||
@@ -273,3 +273,3 @@ a, | ||
}); | ||
if (ie(e)) { | ||
if (Xe(e)) { | ||
const a = await Promise.all(e.map((o) => r(o))); | ||
@@ -300,4 +300,4 @@ return e.length > 1 ? a : a[0]; | ||
} | ||
const et = (e, { renderer: n, camera: t, raycaster: r }) => { | ||
const a = k(() => n.value.domElement), { x: o, y: f } = je({ target: a }), { width: i, height: c, top: u, left: m } = He(a), l = ({ x: d, y: M }) => { | ||
const tt = (e, { renderer: n, camera: t, raycaster: r }) => { | ||
const a = k(() => n.value.domElement), { x: o, y: f } = Re({ target: a }), { width: i, height: c, top: u, left: m } = je(a), l = ({ x: d, y: M }) => { | ||
if (a.value) | ||
@@ -310,3 +310,3 @@ return { | ||
if (t.value) | ||
return r.value.setFromCamera(new Oe(d, M), t.value), r.value.intersectObjects(e.value, !1); | ||
return r.value.setFromCamera(new xe(d, M), t.value), r.value.intersectObjects(e.value, !1); | ||
}, v = (d) => { | ||
@@ -339,3 +339,3 @@ const M = l({ | ||
}; | ||
function yt() { | ||
function wt() { | ||
const { logWarning: e } = L(); | ||
@@ -356,4 +356,4 @@ function n(r, a, o) { | ||
} | ||
const tt = ({ scene: e, contextParts: n }) => { | ||
const t = ue({ | ||
const rt = ({ scene: e, contextParts: n }) => { | ||
const t = ie({ | ||
click: /* @__PURE__ */ new Map(), | ||
@@ -375,3 +375,3 @@ pointerMove: /* @__PURE__ */ new Map(), | ||
const c = k( | ||
() => Je( | ||
() => Ue( | ||
[ | ||
@@ -383,3 +383,3 @@ ...Array.from(r.value), | ||
) | ||
), { onClick: u, onPointerMove: m } = et(c, n); | ||
), { onClick: u, onPointerMove: m } = tt(c, n); | ||
u(({ intersects: s, event: v }) => { | ||
@@ -398,4 +398,4 @@ var y; | ||
}; | ||
}, $ = B({}), q = (e) => Object.assign($.value, e); | ||
function rt({ | ||
}, W = B({}), q = (e) => Object.assign(W.value, e); | ||
function nt({ | ||
scene: e, | ||
@@ -408,3 +408,3 @@ canvas: n, | ||
const o = k( | ||
() => P(t) ? Fe() : ze(P(n).parentElement) | ||
() => P(t) ? He() : Fe(P(n).parentElement) | ||
), f = k(() => o.value.width.value), i = k(() => o.value.height.value), c = k(() => f.value / i.value), u = { | ||
@@ -420,3 +420,3 @@ height: i, | ||
setCameraActive: g | ||
} = Ge({ sizes: u, scene: e }), { renderer: w } = Qe( | ||
} = ze({ sizes: u, scene: e }), { renderer: w } = Qe( | ||
{ | ||
@@ -433,5 +433,5 @@ scene: e, | ||
camera: l, | ||
cameras: le(s), | ||
cameras: ue(s), | ||
renderer: w, | ||
raycaster: F(new Be()), | ||
raycaster: F(new Oe()), | ||
controls: B(null), | ||
@@ -445,4 +445,4 @@ extend: q, | ||
} | ||
function nt() { | ||
const e = ce("useTres"); | ||
function at() { | ||
const e = le("useTres"); | ||
if (!e) | ||
@@ -452,8 +452,8 @@ throw new Error("useTresContext must be used together with useTresContextProvider"); | ||
} | ||
const wt = nt; | ||
const Ct = at; | ||
let G = null, p = null; | ||
const { logError: ee } = L(), at = { | ||
const { logError: ee } = L(), ot = { | ||
createElement(e, n, t, r) { | ||
var f, i; | ||
if (r || (r = {}), r.args || (r.args = []), e === "template" || qe(e)) | ||
if (r || (r = {}), r.args || (r.args = []), e === "template" || Ve(e)) | ||
return null; | ||
@@ -466,3 +466,3 @@ let a = e.replace("Tres", ""), o; | ||
} else { | ||
const c = $.value[a]; | ||
const c = W.value[a]; | ||
c || ee(`${a} is not defined on the THREE namespace. Use extend to add it to the catalog.`), o = new c(...r.args); | ||
@@ -535,3 +535,3 @@ } | ||
const v = e, y = t ?? [], g = r ?? [], w = e.userData.tres__name || e.type; | ||
w && y.length && !Xe(y, g) && (c = Object.assign(v, new $.value[w](...r))); | ||
w && y.length && !Ke(y, g) && (c = Object.assign(v, new W.value[w](...r))); | ||
return; | ||
@@ -544,3 +544,3 @@ } | ||
h(u), | ||
new Le(...r) | ||
new Be(...r) | ||
); | ||
@@ -573,5 +573,5 @@ return; | ||
insertStaticContent: () => void 0 | ||
}, { render: ot } = fe(at); | ||
q(we); | ||
const st = ["data-scene"], it = /* @__PURE__ */ U({ | ||
}, { render: st } = ce(ot); | ||
q(ye); | ||
const it = ["data-scene"], ut = /* @__PURE__ */ U({ | ||
__name: "TresCanvas", | ||
@@ -604,16 +604,16 @@ props: { | ||
var m; | ||
const n = e, { logWarning: t } = L(), r = B(), a = F(new Te()); | ||
const n = e, { logWarning: t } = L(), r = B(), a = F(new Le()); | ||
ae(); | ||
const o = me(), f = (m = J()) == null ? void 0 : m.appContext.app, i = (l) => U({ | ||
const o = fe(), f = (m = J()) == null ? void 0 : m.appContext.app, i = (l) => U({ | ||
setup() { | ||
var v; | ||
const s = (v = J()) == null ? void 0 : v.appContext; | ||
return s && (s.app = f), I("useTres", l), I("extend", q), () => K(ye, null, o != null && o.default ? o.default() : []); | ||
return s && (s.app = f), I("useTres", l), I("extend", q), () => K(de, null, o != null && o.default ? o.default() : []); | ||
} | ||
}), c = (l) => { | ||
const s = i(l); | ||
ot(K(s), a.value); | ||
st(K(s), a.value); | ||
}, u = k(() => n.disableRender); | ||
return pe(() => { | ||
const l = r, s = rt({ | ||
return me(() => { | ||
const l = r, s = nt({ | ||
scene: a.value, | ||
@@ -625,7 +625,7 @@ canvas: l, | ||
}); | ||
tt({ scene: a.value, contextParts: s }); | ||
rt({ scene: a.value, contextParts: s }); | ||
const { registerCamera: v, camera: y, cameras: g, deregisterCamera: w } = s; | ||
c(s); | ||
const E = () => { | ||
const C = new W( | ||
const C = new $( | ||
45, | ||
@@ -652,7 +652,7 @@ window.innerWidth / window.innerHeight, | ||
), E()); | ||
}), (l, s) => (ve(), ge("canvas", { | ||
}), (l, s) => (pe(), ve("canvas", { | ||
ref_key: "canvas", | ||
ref: r, | ||
"data-scene": a.value.uuid, | ||
style: de({ | ||
style: ge({ | ||
display: "block", | ||
@@ -667,41 +667,41 @@ width: "100%", | ||
}) | ||
}, null, 12, st)); | ||
}, null, 12, it)); | ||
} | ||
}), ut = [ | ||
}), lt = [ | ||
"TresCanvas", | ||
"TresLeches", | ||
"TresScene" | ||
], lt = { | ||
], ct = { | ||
template: { | ||
compilerOptions: { | ||
isCustomElement: (e) => e.startsWith("Tres") && !ut.includes(e) || e === "primitive" | ||
isCustomElement: (e) => e.startsWith("Tres") && !lt.includes(e) || e === "primitive" | ||
} | ||
} | ||
}, Ct = lt, _t = { | ||
}, _t = ct, Pt = { | ||
install(e) { | ||
e.component("TresCanvas", it); | ||
e.component("TresCanvas", ut); | ||
} | ||
}; | ||
export { | ||
it as TresCanvas, | ||
$ as catalogue, | ||
_t as default, | ||
ut as TresCanvas, | ||
W as catalogue, | ||
Pt as default, | ||
q as extend, | ||
pt as isProd, | ||
Ne as normalizeColor, | ||
vt as normalizeVectorFlexibleParam, | ||
Ct as templateCompilerOptions, | ||
Ze as trasverseObjects, | ||
Ge as useCamera, | ||
gt as useLoader, | ||
vt as isProd, | ||
We as normalizeColor, | ||
gt as normalizeVectorFlexibleParam, | ||
_t as templateCompilerOptions, | ||
et as trasverseObjects, | ||
ze as useCamera, | ||
dt as useLoader, | ||
L as useLogger, | ||
tt as usePointerEventHandler, | ||
et as useRaycaster, | ||
rt as usePointerEventHandler, | ||
tt as useRaycaster, | ||
ae as useRenderLoop, | ||
Qe as useRenderer, | ||
yt as useSeek, | ||
dt as useTexture, | ||
wt as useTres, | ||
nt as useTresContext, | ||
rt as useTresContextProvider | ||
wt as useSeek, | ||
yt as useTexture, | ||
Ct as useTres, | ||
at as useTresContext, | ||
nt as useTresContextProvider | ||
}; |
@@ -12,1 +12,5 @@ export declare function toSetMethodName(key: string): string; | ||
export declare function deepArrayEqual(arr1: any[], arr2: any[]): boolean; | ||
/** | ||
* TypeSafe version of Array.isArray | ||
*/ | ||
export declare const isArray: (a: any) => a is any[] | readonly any[]; |
{ | ||
"name": "@tresjs/core", | ||
"type": "module", | ||
"version": "3.2.2", | ||
"version": "3.2.3", | ||
"packageManager": "pnpm@8.3.1", | ||
@@ -6,0 +6,0 @@ "description": "Declarative ThreeJS using Vue Components", |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
381726
5467
2