@tresjs/core 2.1.1 → 2.1.3
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/tres.js +175 -173
- package/dist/tres.umd.cjs +3 -3
- package/dist/types/index.d.ts +2 -1
- package/package.json +28 -29
package/dist/tres.js
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v2.1.
|
|
3
|
+
* version: v2.1.3
|
|
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
|
-
import { ref as E, shallowReactive as
|
|
8
|
+
import { ref as E, shallowReactive as le, computed as de, toRefs as me, provide as Ae, inject as _e, watchEffect as pe, toRef as Oe, shallowRef as ve, watch as H, onUnmounted as ge, createRenderer as ke, defineComponent as we, onMounted as je, h as D } from "vue";
|
|
9
9
|
import * as be from "three";
|
|
10
|
-
import { PerspectiveCamera as N, OrthographicCamera as
|
|
11
|
-
import { createEventHook as
|
|
12
|
-
const
|
|
13
|
-
function
|
|
10
|
+
import { PerspectiveCamera as N, OrthographicCamera as De, Clock as he, Color as U, SRGBColorSpace as Ie, ACESFilmicToneMapping as Be, PCFSoftShadowMap as Fe, PCFShadowMap as ze, LinearSRGBColorSpace as ae, NoToneMapping as ne, WebGLRenderer as Ge, LoadingManager as Ve, TextureLoader as He, Raycaster as We, Vector2 as Ye, BufferAttribute as $e } from "three";
|
|
11
|
+
import { createEventHook as X, useRafFn as Ne, toValue as f, useWindowSize as Ue, useElementSize as Ke, useDevicePixelRatio as qe, unrefElement as K, useEventListener as Je } from "@vueuse/core";
|
|
12
|
+
const re = (e) => typeof e == "function", Xe = (e) => typeof e == "string", ye = (e) => !!e && e.constructor === Array, Ce = E({}), Me = (e) => void Object.assign(Ce.value, e), p = ["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"];
|
|
13
|
+
function Qe() {
|
|
14
14
|
const e = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0, o = Math.random() * 4294967295 | 0, a = Math.random() * 4294967295 | 0;
|
|
15
15
|
return (p[e & 255] + p[e >> 8 & 255] + p[e >> 16 & 255] + p[e >> 24 & 255] + "-" + p[t & 255] + p[t >> 8 & 255] + "-" + p[t >> 16 & 15 | 64] + p[t >> 24 & 255] + "-" + p[o & 63 | 128] + p[o >> 8 & 255] + "-" + p[o >> 16 & 255] + p[o >> 24 & 255] + p[a & 255] + p[a >> 8 & 255] + p[a >> 16 & 255] + p[a >> 24 & 255]).toLowerCase();
|
|
16
16
|
}
|
|
17
|
-
const
|
|
18
|
-
function
|
|
19
|
-
const e =
|
|
20
|
-
uuid:
|
|
17
|
+
const Q = Symbol();
|
|
18
|
+
function Ze() {
|
|
19
|
+
const e = le({
|
|
20
|
+
uuid: Qe(),
|
|
21
21
|
camera: void 0,
|
|
22
22
|
cameras: [],
|
|
23
23
|
scene: void 0,
|
|
24
24
|
renderer: void 0,
|
|
25
|
-
aspectRatio:
|
|
25
|
+
aspectRatio: de(() => window.innerWidth / window.innerHeight)
|
|
26
26
|
});
|
|
27
27
|
function t(n) {
|
|
28
28
|
return e[n];
|
|
@@ -32,36 +32,36 @@ function et() {
|
|
|
32
32
|
}
|
|
33
33
|
const a = {
|
|
34
34
|
state: e,
|
|
35
|
-
...
|
|
35
|
+
...me(e),
|
|
36
36
|
getState: t,
|
|
37
37
|
setState: o
|
|
38
38
|
};
|
|
39
|
-
return
|
|
39
|
+
return Ae(Q, a), a;
|
|
40
40
|
}
|
|
41
|
-
const B = () =>
|
|
42
|
-
state:
|
|
41
|
+
const B = () => _e(Q, {
|
|
42
|
+
state: le({
|
|
43
43
|
camera: void 0,
|
|
44
44
|
cameras: [],
|
|
45
45
|
scene: void 0,
|
|
46
46
|
renderer: void 0
|
|
47
47
|
})
|
|
48
48
|
});
|
|
49
|
-
var
|
|
50
|
-
const
|
|
49
|
+
var et = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(et || {});
|
|
50
|
+
const tt = 45;
|
|
51
51
|
let _;
|
|
52
|
-
function
|
|
52
|
+
function xe() {
|
|
53
53
|
const { state: e, setState: t, aspectRatio: o } = B();
|
|
54
|
-
function a(s = "Perspective",
|
|
54
|
+
function a(s = "Perspective", u) {
|
|
55
55
|
var l, d, v;
|
|
56
56
|
if (s === "Perspective") {
|
|
57
|
-
const { near: C, far: M, fov:
|
|
57
|
+
const { near: C, far: M, fov: b } = u || {
|
|
58
58
|
near: 0.1,
|
|
59
59
|
far: 1e3,
|
|
60
|
-
fov:
|
|
60
|
+
fov: tt
|
|
61
61
|
};
|
|
62
|
-
_ = new N(
|
|
62
|
+
_ = new N(b, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, C, M), (d = e.cameras) == null || d.push(_);
|
|
63
63
|
} else {
|
|
64
|
-
const { left: C, right: M, top:
|
|
64
|
+
const { left: C, right: M, top: b, bottom: P, near: w, far: x } = u || {
|
|
65
65
|
left: -100,
|
|
66
66
|
right: 100,
|
|
67
67
|
top: 100,
|
|
@@ -69,7 +69,7 @@ function Re() {
|
|
|
69
69
|
near: 0.1,
|
|
70
70
|
far: 1e3
|
|
71
71
|
};
|
|
72
|
-
_ = new
|
|
72
|
+
_ = new De(C, M, b, P, w, x), (v = e.cameras) == null || v.push(_);
|
|
73
73
|
}
|
|
74
74
|
return e.camera = _, t("camera", e.camera), _;
|
|
75
75
|
}
|
|
@@ -78,20 +78,20 @@ function Re() {
|
|
|
78
78
|
e.camera instanceof N && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (s = e.camera) == null || s.updateProjectionMatrix();
|
|
79
79
|
}
|
|
80
80
|
function r(s) {
|
|
81
|
-
var
|
|
82
|
-
(
|
|
81
|
+
var u;
|
|
82
|
+
(u = e.cameras) == null || u.push(s), s instanceof N && e.aspectRatio && (s.aspect = e.aspectRatio.value), s.updateProjectionMatrix(), t("camera", s);
|
|
83
83
|
}
|
|
84
84
|
function c(s) {
|
|
85
|
-
var
|
|
86
|
-
((
|
|
85
|
+
var u;
|
|
86
|
+
((u = e.cameras) == null ? void 0 : u.length) === 0 && r(s);
|
|
87
87
|
}
|
|
88
88
|
function i() {
|
|
89
89
|
e.cameras = [];
|
|
90
90
|
}
|
|
91
|
-
return
|
|
91
|
+
return pe(() => {
|
|
92
92
|
o != null && o.value && n();
|
|
93
93
|
}), {
|
|
94
|
-
activeCamera:
|
|
94
|
+
activeCamera: Oe(e, "camera"),
|
|
95
95
|
createCamera: a,
|
|
96
96
|
updateCamera: n,
|
|
97
97
|
pushCamera: r,
|
|
@@ -99,61 +99,61 @@ function Re() {
|
|
|
99
99
|
setFirstCamera: c
|
|
100
100
|
};
|
|
101
101
|
}
|
|
102
|
-
const
|
|
102
|
+
const Re = X(), Ee = X(), Z = X(), I = new he();
|
|
103
103
|
let W = 0, Y = 0;
|
|
104
|
-
const { pause:
|
|
104
|
+
const { pause: at, resume: nt, isActive: rt } = Ne(
|
|
105
105
|
() => {
|
|
106
|
-
|
|
106
|
+
Re.trigger({ delta: W, elapsed: Y, clock: I }), Ee.trigger({ delta: W, elapsed: Y, clock: I }), Z.trigger({ delta: W, elapsed: Y, clock: I });
|
|
107
107
|
},
|
|
108
108
|
{ immediate: !1 }
|
|
109
109
|
);
|
|
110
|
-
|
|
110
|
+
Z.on(() => {
|
|
111
111
|
W = I.getDelta(), Y = I.getElapsedTime();
|
|
112
112
|
});
|
|
113
|
-
function
|
|
113
|
+
function Pe() {
|
|
114
114
|
return {
|
|
115
|
-
onBeforeLoop:
|
|
116
|
-
onLoop:
|
|
117
|
-
onAfterLoop:
|
|
118
|
-
pause:
|
|
119
|
-
resume:
|
|
120
|
-
isActive:
|
|
115
|
+
onBeforeLoop: Re.on,
|
|
116
|
+
onLoop: Ee.on,
|
|
117
|
+
onAfterLoop: Z.on,
|
|
118
|
+
pause: at,
|
|
119
|
+
resume: nt,
|
|
120
|
+
isActive: rt
|
|
121
121
|
};
|
|
122
122
|
}
|
|
123
|
-
function
|
|
123
|
+
function ot(e) {
|
|
124
124
|
return e instanceof U ? e : Array.isArray(e) ? new U(...e) : new U(e);
|
|
125
125
|
}
|
|
126
126
|
const q = {
|
|
127
127
|
realistic: {
|
|
128
|
-
outputColorSpace:
|
|
129
|
-
toneMapping:
|
|
128
|
+
outputColorSpace: Ie,
|
|
129
|
+
toneMapping: Be,
|
|
130
130
|
toneMappingExposure: 3,
|
|
131
131
|
shadowMap: {
|
|
132
132
|
enabled: !0,
|
|
133
|
-
type:
|
|
133
|
+
type: Fe
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
|
-
},
|
|
136
|
+
}, Se = (e, t) => {
|
|
137
137
|
for (const o of Object.keys(t))
|
|
138
|
-
t[o] instanceof Object && Object.assign(t[o],
|
|
138
|
+
t[o] instanceof Object && Object.assign(t[o], Se(e[o], t[o]));
|
|
139
139
|
return Object.assign(e || {}, t), e;
|
|
140
|
-
},
|
|
140
|
+
}, it = "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", st = /* @__PURE__ */ ct(it);
|
|
141
141
|
function V(e) {
|
|
142
142
|
return e.replace(/-([a-z])/g, (t, o) => o.toUpperCase());
|
|
143
143
|
}
|
|
144
|
-
function
|
|
144
|
+
function ct(e, t) {
|
|
145
145
|
const o = /* @__PURE__ */ Object.create(null), a = e.split(",");
|
|
146
146
|
for (let n = 0; n < a.length; n++)
|
|
147
147
|
o[a[n]] = !0;
|
|
148
148
|
return t ? (n) => !!o[n.toLowerCase()] : (n) => !!o[n];
|
|
149
149
|
}
|
|
150
|
-
const
|
|
150
|
+
const Mt = !0, oe = "[TresJS ▲ ■ ●] ";
|
|
151
151
|
function F() {
|
|
152
152
|
function e(a, n) {
|
|
153
|
-
console.error(`${
|
|
153
|
+
console.error(`${oe} ${a}`, n || "");
|
|
154
154
|
}
|
|
155
155
|
function t(a) {
|
|
156
|
-
console.warn(`${
|
|
156
|
+
console.warn(`${oe} ${a}`);
|
|
157
157
|
}
|
|
158
158
|
function o(a, n) {
|
|
159
159
|
}
|
|
@@ -164,102 +164,103 @@ function F() {
|
|
|
164
164
|
};
|
|
165
165
|
}
|
|
166
166
|
function ut(e) {
|
|
167
|
-
|
|
168
|
-
const t = ge(), o = E(!1), {
|
|
167
|
+
const t = ve(), o = E(!1), {
|
|
169
168
|
alpha: a = !0,
|
|
170
169
|
antialias: n = !0,
|
|
171
170
|
depth: r,
|
|
172
171
|
logarithmicDepthBuffer: c,
|
|
173
172
|
failIfMajorPerformanceCaveat: i,
|
|
174
173
|
precision: s,
|
|
175
|
-
premultipliedAlpha:
|
|
174
|
+
premultipliedAlpha: u,
|
|
176
175
|
stencil: l,
|
|
177
176
|
shadows: d = !1,
|
|
178
|
-
shadowMapType: v =
|
|
177
|
+
shadowMapType: v = ze,
|
|
179
178
|
useLegacyLights: C = !1,
|
|
180
|
-
outputColorSpace: M =
|
|
181
|
-
toneMapping:
|
|
179
|
+
outputColorSpace: M = ae,
|
|
180
|
+
toneMapping: b = ne,
|
|
182
181
|
toneMappingExposure: P = 1,
|
|
183
|
-
context:
|
|
182
|
+
context: w = void 0,
|
|
184
183
|
powerPreference: x = "default",
|
|
185
184
|
preserveDrawingBuffer: $ = !1,
|
|
186
185
|
clearColor: y,
|
|
187
186
|
windowSize: m = !1,
|
|
188
187
|
preset: R = void 0
|
|
189
|
-
} =
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
188
|
+
} = me(e), { state: g, setState: h } = B(), { width: O, height: k } = f(m) == !0 || f(m) === "" || f(m) === "true" ? Ue() : Ke(g.container), { logError: S, logWarning: z } = F(), { pixelRatio: j } = qe(), { pause: T, resume: G } = Pe(), L = de(() => O.value / k.value);
|
|
189
|
+
setTimeout(() => {
|
|
190
|
+
!f(m) && !g.canvas.value.offsetHeight && z(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
|
|
191
|
+
You could set windowSize=true to force the canvas to be the size of the window.`);
|
|
192
|
+
}, 1e3);
|
|
193
|
+
const ee = () => {
|
|
193
194
|
t.value && (t.value.setSize(O.value, k.value), t.value.setPixelRatio(Math.min(j.value, 2)));
|
|
194
|
-
},
|
|
195
|
+
}, te = () => {
|
|
195
196
|
if (!t.value)
|
|
196
197
|
return;
|
|
197
|
-
const A =
|
|
198
|
+
const A = f(R);
|
|
198
199
|
if (A) {
|
|
199
|
-
A in q || S("Renderer Preset must be one of these: " + Object.keys(q).join(", ")),
|
|
200
|
+
A in q || S("Renderer Preset must be one of these: " + Object.keys(q).join(", ")), Se(t.value, q[A]);
|
|
200
201
|
return;
|
|
201
202
|
}
|
|
202
|
-
t.value.shadowMap.enabled =
|
|
203
|
-
},
|
|
203
|
+
t.value.shadowMap.enabled = f(d), t.value.shadowMap.type = f(v), t.value.toneMapping = f(b) || ne, t.value.toneMappingExposure = f(P), t.value.outputColorSpace = f(M) || ae, y != null && y.value && t.value.setClearColor(ot(f(y))), t.value.useLegacyLights = f(C);
|
|
204
|
+
}, Te = () => {
|
|
204
205
|
const A = K(g.canvas);
|
|
205
|
-
A && (t.value = new
|
|
206
|
+
A && (t.value = new Ge({
|
|
206
207
|
canvas: A,
|
|
207
|
-
alpha:
|
|
208
|
-
antialias:
|
|
209
|
-
context:
|
|
210
|
-
depth:
|
|
211
|
-
failIfMajorPerformanceCaveat:
|
|
212
|
-
logarithmicDepthBuffer:
|
|
213
|
-
powerPreference:
|
|
214
|
-
precision:
|
|
215
|
-
stencil:
|
|
216
|
-
preserveDrawingBuffer:
|
|
217
|
-
premultipliedAlpha: u
|
|
218
|
-
}),
|
|
219
|
-
},
|
|
208
|
+
alpha: f(a),
|
|
209
|
+
antialias: f(n),
|
|
210
|
+
context: f(w),
|
|
211
|
+
depth: f(r),
|
|
212
|
+
failIfMajorPerformanceCaveat: f(i),
|
|
213
|
+
logarithmicDepthBuffer: f(c),
|
|
214
|
+
powerPreference: f(x),
|
|
215
|
+
precision: f(s),
|
|
216
|
+
stencil: f(l),
|
|
217
|
+
preserveDrawingBuffer: f($),
|
|
218
|
+
premultipliedAlpha: f(u)
|
|
219
|
+
}), h("renderer", t.value), h("clock", new he()), h("aspectRatio", L), te(), ee(), G(), o.value = !0);
|
|
220
|
+
}, Le = () => {
|
|
220
221
|
t.value && (t.value.dispose(), t.value = void 0, o.value = !1, T());
|
|
221
222
|
};
|
|
222
|
-
return H([L, j],
|
|
223
|
-
[d, v, M, C,
|
|
224
|
-
|
|
223
|
+
return H([L, j], ee), H(
|
|
224
|
+
[d, v, M, C, b, P, y],
|
|
225
|
+
te
|
|
225
226
|
), H(
|
|
226
227
|
() => [g.canvas, g.container],
|
|
227
228
|
() => {
|
|
228
|
-
K(g.canvas) && K(g.container) &&
|
|
229
|
+
K(g.canvas) && K(g.container) && Te();
|
|
229
230
|
},
|
|
230
231
|
{ immediate: !0, deep: !0 }
|
|
231
232
|
), {
|
|
232
233
|
renderer: t,
|
|
233
234
|
isReady: o,
|
|
234
|
-
dispose:
|
|
235
|
+
dispose: Le,
|
|
235
236
|
aspectRatio: L
|
|
236
237
|
};
|
|
237
238
|
}
|
|
238
|
-
function
|
|
239
|
+
function ft(e) {
|
|
239
240
|
const t = { nodes: {}, materials: {} };
|
|
240
241
|
return e && e.traverse((o) => {
|
|
241
242
|
o.name && (t.nodes[o.name] = o), o.material && !t.materials[o.material.name] && (t.materials[o.material.name] = o.material);
|
|
242
243
|
}), t;
|
|
243
244
|
}
|
|
244
|
-
async function
|
|
245
|
+
async function xt(e, t, o, a, n) {
|
|
245
246
|
const { logError: r } = F(), c = new e();
|
|
246
247
|
n && n(c), o && o(c);
|
|
247
248
|
const s = (Array.isArray(t) ? t : [t]).map(
|
|
248
|
-
(
|
|
249
|
+
(u) => new Promise((l, d) => {
|
|
249
250
|
c.load(
|
|
250
|
-
|
|
251
|
+
u,
|
|
251
252
|
(v) => {
|
|
252
|
-
v.scene && Object.assign(v,
|
|
253
|
+
v.scene && Object.assign(v, ft(v.scene)), l(v);
|
|
253
254
|
},
|
|
254
255
|
a,
|
|
255
256
|
(v) => d(r("[useLoader] - Failed to load resource", v))
|
|
256
257
|
);
|
|
257
258
|
})
|
|
258
259
|
);
|
|
259
|
-
return
|
|
260
|
+
return ye(t) ? await Promise.all(s) : await s[0];
|
|
260
261
|
}
|
|
261
|
-
async function
|
|
262
|
-
const t = new
|
|
262
|
+
async function Rt(e) {
|
|
263
|
+
const t = new Ve(), o = new He(t), a = (n) => new Promise((r, c) => {
|
|
263
264
|
o.load(
|
|
264
265
|
n,
|
|
265
266
|
(i) => r(i),
|
|
@@ -269,7 +270,7 @@ async function Et(e) {
|
|
|
269
270
|
}
|
|
270
271
|
);
|
|
271
272
|
});
|
|
272
|
-
if (
|
|
273
|
+
if (ye(e)) {
|
|
273
274
|
const n = await Promise.all(e.map((r) => a(r)));
|
|
274
275
|
return e.length > 1 ? n : n[0];
|
|
275
276
|
} else {
|
|
@@ -279,7 +280,7 @@ async function Et(e) {
|
|
|
279
280
|
normalMap: c,
|
|
280
281
|
roughnessMap: i,
|
|
281
282
|
metalnessMap: s,
|
|
282
|
-
aoMap:
|
|
283
|
+
aoMap: u,
|
|
283
284
|
alphaMap: l,
|
|
284
285
|
matcap: d
|
|
285
286
|
} = e;
|
|
@@ -289,20 +290,20 @@ async function Et(e) {
|
|
|
289
290
|
normalMap: c ? await a(c) : null,
|
|
290
291
|
roughnessMap: i ? await a(i) : null,
|
|
291
292
|
metalnessMap: s ? await a(s) : null,
|
|
292
|
-
aoMap:
|
|
293
|
+
aoMap: u ? await a(u) : null,
|
|
293
294
|
alphaMap: l ? await a(l) : null,
|
|
294
295
|
matcap: d ? await a(d) : null
|
|
295
296
|
};
|
|
296
297
|
}
|
|
297
298
|
}
|
|
298
|
-
function
|
|
299
|
+
function lt() {
|
|
299
300
|
var c;
|
|
300
|
-
const e =
|
|
301
|
+
const e = ve(new We()), t = E(new Ye()), o = E(null), { setState: a, state: n } = B();
|
|
301
302
|
a("raycaster", e.value), a("pointer", t), a("currentInstance", o);
|
|
302
303
|
function r(i) {
|
|
303
304
|
t.value.x = i.clientX / window.innerWidth * 2 - 1, t.value.y = -(i.clientY / window.innerHeight) * 2 + 1;
|
|
304
305
|
}
|
|
305
|
-
return (c = n == null ? void 0 : n.renderer) == null || c.domElement.addEventListener("pointermove", r),
|
|
306
|
+
return (c = n == null ? void 0 : n.renderer) == null || c.domElement.addEventListener("pointermove", r), ge(() => {
|
|
306
307
|
var i;
|
|
307
308
|
(i = n == null ? void 0 : n.renderer) == null || i.domElement.removeEventListener("pointermove", r);
|
|
308
309
|
}), {
|
|
@@ -310,7 +311,7 @@ function dt() {
|
|
|
310
311
|
pointer: t
|
|
311
312
|
};
|
|
312
313
|
}
|
|
313
|
-
function
|
|
314
|
+
function Et() {
|
|
314
315
|
const { logWarning: e } = F();
|
|
315
316
|
function t(a, n, r) {
|
|
316
317
|
let c = null;
|
|
@@ -326,52 +327,53 @@ function Pt() {
|
|
|
326
327
|
seekByName: o
|
|
327
328
|
};
|
|
328
329
|
}
|
|
329
|
-
const
|
|
330
|
-
let
|
|
331
|
-
const
|
|
330
|
+
const dt = /^on[^a-z]/, mt = (e) => dt.test(e);
|
|
331
|
+
let J = null, ie = null;
|
|
332
|
+
const se = {
|
|
332
333
|
GEOMETRY_VIA_PROP: "tres__geometryViaProp",
|
|
333
334
|
MATERIAL_VIA_PROP: "tres__materialViaProp"
|
|
334
|
-
}, { logError:
|
|
335
|
+
}, { logError: ce } = F();
|
|
335
336
|
let ue = !0;
|
|
336
|
-
const
|
|
337
|
+
const pt = {
|
|
337
338
|
createElement(e, t, o, a) {
|
|
338
|
-
var s,
|
|
339
|
-
if (a || (a = {}), a.args || (a.args = []), e === "template" ||
|
|
339
|
+
var s, u;
|
|
340
|
+
if (a || (a = {}), a.args || (a.args = []), e === "template" || st(e))
|
|
340
341
|
return null;
|
|
341
342
|
let n = e.replace("Tres", ""), r;
|
|
342
343
|
if (e === "primitive") {
|
|
343
|
-
(a == null ? void 0 : a.object) === void 0 &&
|
|
344
|
+
(a == null ? void 0 : a.object) === void 0 && ce("Tres primitives need a prop 'object'");
|
|
344
345
|
const l = a.object;
|
|
345
346
|
n = l.type, r = Object.assign(l, { type: n, attach: a.attach, primitive: !0 });
|
|
346
347
|
} else {
|
|
347
|
-
const l =
|
|
348
|
-
l ||
|
|
348
|
+
const l = Ce.value[n];
|
|
349
|
+
l || ce(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`), r = new l(...a.args);
|
|
349
350
|
}
|
|
350
351
|
if (r.isCamera && ue) {
|
|
351
352
|
a != null && a.position || r.position.set(3, 3, 3), a != null && a.lookAt || r.lookAt(0, 0, 0);
|
|
352
|
-
const { setFirstCamera: l } =
|
|
353
|
+
const { setFirstCamera: l } = xe();
|
|
353
354
|
l(r), ue = !1;
|
|
354
355
|
}
|
|
355
356
|
(a == null ? void 0 : a.attach) === void 0 && (r.isMaterial ? r.attach = "material" : r.isBufferGeometry && (r.attach = "geometry"));
|
|
356
|
-
const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } =
|
|
357
|
-
return r.isObject3D && ((s = a == null ? void 0 : a.material) != null && s.isMaterial && (r.userData[i] = !0), (
|
|
357
|
+
const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } = se;
|
|
358
|
+
return r.isObject3D && ((s = a == null ? void 0 : a.material) != null && s.isMaterial && (r.userData[i] = !0), (u = a == null ? void 0 : a.geometry) != null && u.isBufferGeometry && (r.userData[c] = !0)), r.events = {}, r;
|
|
358
359
|
},
|
|
359
360
|
insert(e, t) {
|
|
360
|
-
var o, a, n, r;
|
|
361
|
-
if ((((o = e == null ? void 0 : e.__vnode) == null ? void 0 : o.type) === "TresGroup" || ((a = e == null ? void 0 : e.__vnode) == null ? void 0 : a.type) === "TresObject3D") && t === null && !((r = (n = e == null ? void 0 : e.__vnode) == null ? void 0 : n.ctx) != null && r.asyncResolved)) {
|
|
362
|
-
|
|
361
|
+
var o, a, n, r, c;
|
|
362
|
+
if (t && t.isScene && (ie = t), (((o = e == null ? void 0 : e.__vnode) == null ? void 0 : o.type) === "TresGroup" || ((a = e == null ? void 0 : e.__vnode) == null ? void 0 : a.type) === "TresObject3D") && t === null && !((r = (n = e == null ? void 0 : e.__vnode) == null ? void 0 : n.ctx) != null && r.asyncResolved)) {
|
|
363
|
+
J = e;
|
|
363
364
|
return;
|
|
364
|
-
}
|
|
365
|
-
|
|
365
|
+
} else
|
|
366
|
+
(c = e == null ? void 0 : e.__vnode) != null && c.type.includes("Controls") && t === null && (J = ie);
|
|
367
|
+
t || (t = J), e != null && e.isObject3D && (t != null && t.isObject3D) ? (t.add(e), e.dispatchEvent({ type: "added" })) : 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));
|
|
366
368
|
},
|
|
367
369
|
remove(e) {
|
|
368
370
|
var t, o;
|
|
369
371
|
if (e) {
|
|
370
372
|
if (e.isObject3D) {
|
|
371
373
|
const a = e, n = (r) => {
|
|
372
|
-
var s,
|
|
373
|
-
const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } =
|
|
374
|
-
r.userData[i] || (s = r.material) == null || s.dispose(), r.userData[c] || (
|
|
374
|
+
var s, u;
|
|
375
|
+
const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } = se;
|
|
376
|
+
r.userData[i] || (s = r.material) == null || s.dispose(), r.userData[c] || (u = r.geometry) == null || u.dispose();
|
|
375
377
|
};
|
|
376
378
|
a.traverse((r) => n(r)), n(a);
|
|
377
379
|
}
|
|
@@ -386,24 +388,24 @@ const vt = {
|
|
|
386
388
|
return;
|
|
387
389
|
n.setAttribute(
|
|
388
390
|
V(r),
|
|
389
|
-
new
|
|
391
|
+
new $e(...a)
|
|
390
392
|
);
|
|
391
393
|
return;
|
|
392
394
|
}
|
|
393
395
|
if (r.includes("-") && i === void 0) {
|
|
394
|
-
const
|
|
395
|
-
i =
|
|
396
|
+
const u = r.split("-");
|
|
397
|
+
i = u.reduce((l, d) => l[V(d)], n), r = u.pop(), c = r.toLowerCase(), i != null && i.set || (n = u.reduce((l, d) => l[V(d)], n));
|
|
396
398
|
}
|
|
397
|
-
if (
|
|
398
|
-
const
|
|
399
|
-
e.events[
|
|
399
|
+
if (mt(r)) {
|
|
400
|
+
const u = r;
|
|
401
|
+
e.events[u] = a;
|
|
400
402
|
}
|
|
401
403
|
let s = a;
|
|
402
|
-
if (s === "" && (s = !0),
|
|
404
|
+
if (s === "" && (s = !0), re(i)) {
|
|
403
405
|
Array.isArray(s) ? e[c](...s) : e[c](s);
|
|
404
406
|
return;
|
|
405
407
|
}
|
|
406
|
-
!(i != null && i.set) && !
|
|
408
|
+
!(i != null && i.set) && !re(i) ? n[c] = s : i.constructor === s.constructor && (i != null && i.copy) ? i == null || i.copy(s) : Array.isArray(s) ? i.set(...s) : !i.isColor && i.setScalar ? i.setScalar(s) : i.set(s);
|
|
407
409
|
}
|
|
408
410
|
},
|
|
409
411
|
parentNode(e) {
|
|
@@ -418,15 +420,15 @@ const vt = {
|
|
|
418
420
|
setScopeId: () => void 0,
|
|
419
421
|
cloneNode: () => void 0,
|
|
420
422
|
insertStaticContent: () => void 0
|
|
421
|
-
}, { createApp:
|
|
422
|
-
const t =
|
|
423
|
+
}, { createApp: vt } = ke(pt), gt = (e) => {
|
|
424
|
+
const t = vt(o);
|
|
423
425
|
function o() {
|
|
424
426
|
return e && e.default ? e.default() : [];
|
|
425
427
|
}
|
|
426
428
|
return t;
|
|
427
429
|
};
|
|
428
|
-
|
|
429
|
-
const { logWarning:
|
|
430
|
+
Me(be);
|
|
431
|
+
const { logWarning: fe } = F(), wt = we({
|
|
430
432
|
name: "TresScene",
|
|
431
433
|
props: [
|
|
432
434
|
"shadows",
|
|
@@ -446,48 +448,48 @@ const { logWarning: le } = F(), wt = we({
|
|
|
446
448
|
"camera"
|
|
447
449
|
],
|
|
448
450
|
setup(e, { slots: t, expose: o }) {
|
|
449
|
-
e.physicallyCorrectLights === !0 &&
|
|
451
|
+
e.physicallyCorrectLights === !0 && fe("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
|
|
450
452
|
const a = E(), n = E(), r = new be.Scene(), { setState: c } = B();
|
|
451
453
|
c("scene", r), c("canvas", n), c("container", a);
|
|
452
454
|
const i = E(), s = t && t.default && t.default();
|
|
453
|
-
s && (s == null ? void 0 : s.length) > 0 && (i.value = s.some((
|
|
454
|
-
const { onLoop:
|
|
455
|
-
|
|
455
|
+
s && (s == null ? void 0 : s.length) > 0 && (i.value = s.some((w) => Xe(w.type) && w.type.includes("Camera")) || e.camera, i.value || fe("No camera found in the scene, please add one!"));
|
|
456
|
+
const { onLoop: u, resume: l } = Pe();
|
|
457
|
+
je(() => {
|
|
456
458
|
M();
|
|
457
|
-
}),
|
|
459
|
+
}), ge(() => {
|
|
458
460
|
c("renderer", null);
|
|
459
461
|
});
|
|
460
|
-
const { activeCamera: d, pushCamera: v, clearCameras: C } =
|
|
462
|
+
const { activeCamera: d, pushCamera: v, clearCameras: C } = xe();
|
|
461
463
|
function M() {
|
|
462
|
-
const { renderer:
|
|
464
|
+
const { renderer: w } = ut(e);
|
|
463
465
|
e.camera && v(e.camera);
|
|
464
|
-
const { raycaster: x, pointer: $ } =
|
|
466
|
+
const { raycaster: x, pointer: $ } = lt();
|
|
465
467
|
let y = null, m = null;
|
|
466
|
-
|
|
468
|
+
pe(() => {
|
|
467
469
|
d.value && x.value.setFromCamera($.value, d.value);
|
|
468
|
-
}),
|
|
469
|
-
var R, g,
|
|
470
|
-
if (d.value && e.disableRender !== !0 && ((R =
|
|
470
|
+
}), u(() => {
|
|
471
|
+
var R, g, h, O, k, S, z, j, T, G;
|
|
472
|
+
if (d.value && e.disableRender !== !0 && ((R = w.value) == null || R.render(r, d.value)), x.value) {
|
|
471
473
|
const L = x.value.intersectObjects(r.children);
|
|
472
|
-
L.length > 0 ? (m = L[0], y === null && ((O = (
|
|
474
|
+
L.length > 0 ? (m = L[0], y === null && ((O = (h = (g = m.object) == null ? void 0 : g.events) == null ? void 0 : h.onPointerEnter) == null || O.call(h, m)), (z = (S = (k = m.object) == null ? void 0 : k.events) == null ? void 0 : S.onPointerMove) == null || z.call(S, m)) : y !== null && ((G = (T = (j = m == null ? void 0 : m.object) == null ? void 0 : j.events) == null ? void 0 : T.onPointerLeave) == null || G.call(T, y), m = null), y = m;
|
|
473
475
|
}
|
|
474
|
-
}),
|
|
475
|
-
var R, g,
|
|
476
|
-
m !== null && ((
|
|
476
|
+
}), Je(n.value, "click", () => {
|
|
477
|
+
var R, g, h;
|
|
478
|
+
m !== null && ((h = (g = (R = m.object) == null ? void 0 : R.events) == null ? void 0 : g.onClick) == null || h.call(g, m));
|
|
477
479
|
});
|
|
478
480
|
}
|
|
479
|
-
let
|
|
481
|
+
let b;
|
|
480
482
|
function P() {
|
|
481
|
-
|
|
482
|
-
const
|
|
483
|
-
|
|
483
|
+
b = gt(t);
|
|
484
|
+
const w = B();
|
|
485
|
+
b.provide("useTres", w), b.provide(Q, w), b.provide("extend", Me), b.mount(r);
|
|
484
486
|
}
|
|
485
487
|
return P(), o({
|
|
486
488
|
scene: r
|
|
487
489
|
}), H(
|
|
488
490
|
() => e.camera,
|
|
489
|
-
(
|
|
490
|
-
|
|
491
|
+
(w) => {
|
|
492
|
+
w && (C(), v(w));
|
|
491
493
|
}
|
|
492
494
|
), () => D(
|
|
493
495
|
D(
|
|
@@ -552,31 +554,31 @@ const { logWarning: le } = F(), wt = we({
|
|
|
552
554
|
"camera"
|
|
553
555
|
],
|
|
554
556
|
setup(e, { slots: t, expose: o }) {
|
|
555
|
-
const a =
|
|
557
|
+
const a = Ze();
|
|
556
558
|
return o(a), () => D(wt, e, t);
|
|
557
559
|
}
|
|
558
|
-
}),
|
|
560
|
+
}), Pt = {
|
|
559
561
|
install(e) {
|
|
560
562
|
e.component("TresCanvas", bt);
|
|
561
563
|
}
|
|
562
564
|
};
|
|
563
565
|
export {
|
|
564
|
-
|
|
565
|
-
|
|
566
|
+
et as CameraType,
|
|
567
|
+
Q as TRES_CONTEXT_KEY,
|
|
566
568
|
bt as TresCanvas,
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
569
|
+
Ce as catalogue,
|
|
570
|
+
Pt as default,
|
|
571
|
+
Me as extend,
|
|
572
|
+
Mt as isProd,
|
|
573
|
+
ft as trasverseObjects,
|
|
574
|
+
xe as useCamera,
|
|
575
|
+
xt as useLoader,
|
|
574
576
|
F as useLogger,
|
|
575
|
-
|
|
576
|
-
|
|
577
|
+
lt as useRaycaster,
|
|
578
|
+
Pe as useRenderLoop,
|
|
577
579
|
ut as useRenderer,
|
|
578
|
-
|
|
579
|
-
|
|
580
|
+
Et as useSeek,
|
|
581
|
+
Rt as useTexture,
|
|
580
582
|
B as useTres,
|
|
581
|
-
|
|
583
|
+
Ze as useTresProvider
|
|
582
584
|
};
|
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v2.1.
|
|
3
|
+
* version: v2.1.3
|
|
4
4
|
* (c) 2023
|
|
5
5
|
* description: Declarative ThreeJS using Vue Components
|
|
6
6
|
* author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
|
|
7
7
|
*/
|
|
8
|
-
(function(d,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):(d=typeof globalThis<"u"?globalThis:d||self,c(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,c,m,
|
|
9
|
-
You could set windowSize=true to force the canvas to be the size of the window.`);const
|
|
8
|
+
(function(d,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):(d=typeof globalThis<"u"?globalThis:d||self,c(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,c,m,f){"use strict";function ye(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,a.get?a:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const ee=ye(m),te=e=>typeof e=="function",Ce=e=>typeof e=="string",ae=e=>!!e&&e.constructor===Array,$=c.ref({}),q=e=>void Object.assign($.value,e),h=["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 Me(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,o=Math.random()*4294967295|0,a=Math.random()*4294967295|0;return(h[e&255]+h[e>>8&255]+h[e>>16&255]+h[e>>24&255]+"-"+h[t&255]+h[t>>8&255]+"-"+h[t>>16&15|64]+h[t>>24&255]+"-"+h[o&63|128]+h[o>>8&255]+"-"+h[o>>16&255]+h[o>>24&255]+h[a&255]+h[a>>8&255]+h[a>>16&255]+h[a>>24&255]).toLowerCase()}const z=Symbol();function ne(){const e=c.shallowReactive({uuid:Me(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:c.computed(()=>window.innerWidth/window.innerHeight)});function t(n){return e[n]}function o(n,r){e[n]=r}const a={state:e,...c.toRefs(e),getState:t,setState:o};return c.provide(z,a),a}const O=()=>c.inject(z,{state:c.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});var re=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(re||{});const Se=45;let x;function K(){const{state:e,setState:t,aspectRatio:o}=O();function a(s="Perspective",l){var p,v,w;if(s==="Perspective"){const{near:P,far:_,fov:C}=l||{near:.1,far:1e3,fov:Se};x=new m.PerspectiveCamera(C,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,P,_),(v=e.cameras)==null||v.push(x)}else{const{left:P,right:_,top:C,bottom:V,near:y,far:L}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};x=new m.OrthographicCamera(P,_,C,V,y,L),(w=e.cameras)==null||w.push(x)}return e.camera=x,t("camera",e.camera),x}function n(){var s;e.camera instanceof m.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(s=e.camera)==null||s.updateProjectionMatrix()}function r(s){var l;(l=e.cameras)==null||l.push(s),s instanceof m.PerspectiveCamera&&e.aspectRatio&&(s.aspect=e.aspectRatio.value),s.updateProjectionMatrix(),t("camera",s)}function u(s){var l;((l=e.cameras)==null?void 0:l.length)===0&&r(s)}function i(){e.cameras=[]}return c.watchEffect(()=>{o!=null&&o.value&&n()}),{activeCamera:c.toRef(e,"camera"),createCamera:a,updateCamera:n,pushCamera:r,clearCameras:i,setFirstCamera:u}}const oe=f.createEventHook(),ie=f.createEventHook(),X=f.createEventHook(),I=new m.Clock;let E=0,W=0;const{pause:Pe,resume:_e,isActive:Le}=f.useRafFn(()=>{oe.trigger({delta:E,elapsed:W,clock:I}),ie.trigger({delta:E,elapsed:W,clock:I}),X.trigger({delta:E,elapsed:W,clock:I})},{immediate:!1});X.on(()=>{E=I.getDelta(),W=I.getElapsedTime()});function J(){return{onBeforeLoop:oe.on,onLoop:ie.on,onAfterLoop:X.on,pause:Pe,resume:_e,isActive:Le}}function Ae(e){return e instanceof m.Color?e:Array.isArray(e)?new m.Color(...e):new m.Color(e)}const Q={realistic:{outputColorSpace:m.SRGBColorSpace,toneMapping:m.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:m.PCFSoftShadowMap}}},se=(e,t)=>{for(const o of Object.keys(t))t[o]instanceof Object&&Object.assign(t[o],se(e[o],t[o]));return Object.assign(e||{},t),e},Oe=xe("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,(t,o)=>o.toUpperCase())}function xe(e,t){const o=Object.create(null),a=e.split(",");for(let n=0;n<a.length;n++)o[a[n]]=!0;return t?n=>!!o[n.toLowerCase()]:n=>!!o[n]}const Te=!0,ce="[TresJS ▲ ■ ●] ";function T(){function e(a,n){console.error(`${ce} ${a}`,n||"")}function t(a){console.warn(`${ce} ${a}`)}function o(a,n){}return{logError:e,logWarning:t,logMessage:o}}function ue(e){const t=c.shallowRef(),o=c.ref(!1),{alpha:a=!0,antialias:n=!0,depth:r,logarithmicDepthBuffer:u,failIfMajorPerformanceCaveat:i,precision:s,premultipliedAlpha:l,stencil:p,shadows:v=!1,shadowMapType:w=m.PCFShadowMap,useLegacyLights:P=!1,outputColorSpace:_=m.LinearSRGBColorSpace,toneMapping:C=m.NoToneMapping,toneMappingExposure:V=1,context:y=void 0,powerPreference:L="default",preserveDrawingBuffer:H=!1,clearColor:S,windowSize:g=!1,preset:A=void 0}=c.toRefs(e),{state:b,setState:M}=O(),{width:B,height:F}=f.toValue(g)==!0||f.toValue(g)===""||f.toValue(g)==="true"?f.useWindowSize():f.useElementSize(b.container),{logError:R,logWarning:U}=T(),{pixelRatio:G}=f.useDevicePixelRatio(),{pause:k,resume:Y}=J(),j=c.computed(()=>B.value/F.value);setTimeout(()=>{!f.toValue(g)&&!b.canvas.value.offsetHeight&&U(`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 we=()=>{t.value&&(t.value.setSize(B.value,F.value),t.value.setPixelRatio(Math.min(G.value,2)))},be=()=>{if(!t.value)return;const D=f.toValue(A);if(D){D in Q||R("Renderer Preset must be one of these: "+Object.keys(Q).join(", ")),se(t.value,Q[D]);return}t.value.shadowMap.enabled=f.toValue(v),t.value.shadowMap.type=f.toValue(w),t.value.toneMapping=f.toValue(C)||m.NoToneMapping,t.value.toneMappingExposure=f.toValue(V),t.value.outputColorSpace=f.toValue(_)||m.LinearSRGBColorSpace,S!=null&&S.value&&t.value.setClearColor(Ae(f.toValue(S))),t.value.useLegacyLights=f.toValue(P)},Ee=()=>{const D=f.unrefElement(b.canvas);D&&(t.value=new m.WebGLRenderer({canvas:D,alpha:f.toValue(a),antialias:f.toValue(n),context:f.toValue(y),depth:f.toValue(r),failIfMajorPerformanceCaveat:f.toValue(i),logarithmicDepthBuffer:f.toValue(u),powerPreference:f.toValue(L),precision:f.toValue(s),stencil:f.toValue(p),preserveDrawingBuffer:f.toValue(H),premultipliedAlpha:f.toValue(l)}),M("renderer",t.value),M("clock",new m.Clock),M("aspectRatio",j),be(),we(),Y(),o.value=!0)},We=()=>{t.value&&(t.value.dispose(),t.value=void 0,o.value=!1,k())};return c.watch([j,G],we),c.watch([v,w,_,P,C,V,S],be),c.watch(()=>[b.canvas,b.container],()=>{f.unrefElement(b.canvas)&&f.unrefElement(b.container)&&Ee()},{immediate:!0,deep:!0}),{renderer:t,isReady:o,dispose:We,aspectRatio:j}}function fe(e){const t={nodes:{},materials:{}};return e&&e.traverse(o=>{o.name&&(t.nodes[o.name]=o),o.material&&!t.materials[o.material.name]&&(t.materials[o.material.name]=o.material)}),t}async function Ve(e,t,o,a,n){const{logError:r}=T(),u=new e;n&&n(u),o&&o(u);const s=(Array.isArray(t)?t:[t]).map(l=>new Promise((p,v)=>{u.load(l,w=>{w.scene&&Object.assign(w,fe(w.scene)),p(w)},a,w=>v(r("[useLoader] - Failed to load resource",w)))}));return ae(t)?await Promise.all(s):await s[0]}async function Re(e){const t=new m.LoadingManager,o=new m.TextureLoader(t),a=n=>new Promise((r,u)=>{o.load(n,i=>r(i),()=>null,()=>{u(new Error("[useTextures] - Failed to load texture"))})});if(ae(e)){const n=await Promise.all(e.map(r=>a(r)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:r,normalMap:u,roughnessMap:i,metalnessMap:s,aoMap:l,alphaMap:p,matcap:v}=e;return{map:n?await a(n):null,displacementMap:r?await a(r):null,normalMap:u?await a(u):null,roughnessMap:i?await a(i):null,metalnessMap:s?await a(s):null,aoMap:l?await a(l):null,alphaMap:p?await a(p):null,matcap:v?await a(v):null}}}function le(){var u;const e=c.shallowRef(new m.Raycaster),t=c.ref(new m.Vector2),o=c.ref(null),{setState:a,state:n}=O();a("raycaster",e.value),a("pointer",t),a("currentInstance",o);function r(i){t.value.x=i.clientX/window.innerWidth*2-1,t.value.y=-(i.clientY/window.innerHeight)*2+1}return(u=n==null?void 0:n.renderer)==null||u.domElement.addEventListener("pointermove",r),c.onUnmounted(()=>{var i;(i=n==null?void 0:n.renderer)==null||i.domElement.removeEventListener("pointermove",r)}),{raycaster:e,pointer:t}}function ke(){const{logWarning:e}=T();function t(a,n,r){let u=null;return a.traverse(i=>{i[n]===r&&(u=i)}),u||e(`Child with ${n} '${r}' not found.`),u}function o(a,n){return t(a,"name",n)}return{seek:t,seekByName:o}}const je=/^on[^a-z]/,De=e=>je.test(e);function Ue(e){}let Z=null,de=null;const me={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp"},{logError:pe}=T();let ve=!0;const Ie={createElement(e,t,o,a){var s,l;if(a||(a={}),a.args||(a.args=[]),e==="template"||Oe(e))return null;let n=e.replace("Tres",""),r;if(e==="primitive"){(a==null?void 0:a.object)===void 0&&pe("Tres primitives need a prop 'object'");const p=a.object;n=p.type,r=Object.assign(p,{type:n,attach:a.attach,primitive:!0})}else{const p=$.value[n];p||pe(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`),r=new p(...a.args)}if(r.isCamera&&ve){a!=null&&a.position||r.position.set(3,3,3),a!=null&&a.lookAt||r.lookAt(0,0,0);const{setFirstCamera:p}=K();p(r),ve=!1}(a==null?void 0:a.attach)===void 0&&(r.isMaterial?r.attach="material":r.isBufferGeometry&&(r.attach="geometry"));const{GEOMETRY_VIA_PROP:u,MATERIAL_VIA_PROP:i}=me;return r.isObject3D&&((s=a==null?void 0:a.material)!=null&&s.isMaterial&&(r.userData[i]=!0),(l=a==null?void 0:a.geometry)!=null&&l.isBufferGeometry&&(r.userData[u]=!0)),r.events={},r},insert(e,t){var o,a,n,r,u;if(t&&t.isScene&&(de=t),(((o=e==null?void 0:e.__vnode)==null?void 0:o.type)==="TresGroup"||((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresObject3D")&&t===null&&!((r=(n=e==null?void 0:e.__vnode)==null?void 0:n.ctx)!=null&&r.asyncResolved)){Z=e;return}else(u=e==null?void 0:e.__vnode)!=null&&u.type.includes("Controls")&&t===null&&(Z=de);t||(t=Z),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"})):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,o;if(e){if(e.isObject3D){const a=e,n=r=>{var s,l;const{GEOMETRY_VIA_PROP:u,MATERIAL_VIA_PROP:i}=me;r.userData[i]||(s=r.material)==null||s.dispose(),r.userData[u]||(l=r.geometry)==null||l.dispose()};a.traverse(r=>n(r)),n(a)}(t=e.removeFromParent)==null||t.call(e),(o=e.dispose)==null||o.call(e)}},patchProp(e,t,o,a){if(e){let n=e,r=t,u=N(r),i=n==null?void 0:n[u];if(n.type==="BufferGeometry"){if(r==="args")return;n.setAttribute(N(r),new m.BufferAttribute(...a));return}if(r.includes("-")&&i===void 0){const l=r.split("-");i=l.reduce((p,v)=>p[N(v)],n),r=l.pop(),u=r.toLowerCase(),i!=null&&i.set||(n=l.reduce((p,v)=>p[N(v)],n))}if(De(r)){const l=r;e.events[l]=a}let s=a;if(s===""&&(s=!0),te(i)){Array.isArray(s)?e[u](...s):e[u](s);return}!(i!=null&&i.set)&&!te(i)?n[u]=s:i.constructor===s.constructor&&(i!=null&&i.copy)?i==null||i.copy(s):Array.isArray(s)?i.set(...s):!i.isColor&&i.setScalar?i.setScalar(s):i.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:Be}=c.createRenderer(Ie),Fe=e=>{const t=Be(o);function o(){return e&&e.default?e.default():[]}return t};q(ee);const{logWarning:ge}=T(),Ge=c.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:o}){e.physicallyCorrectLights===!0&&ge("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=c.ref(),n=c.ref(),r=new ee.Scene,{setState:u}=O();u("scene",r),u("canvas",n),u("container",a);const i=c.ref(),s=t&&t.default&&t.default();s&&(s==null?void 0:s.length)>0&&(i.value=s.some(y=>Ce(y.type)&&y.type.includes("Camera"))||e.camera,i.value||ge("No camera found in the scene, please add one!"));const{onLoop:l,resume:p}=J();c.onMounted(()=>{_()}),c.onUnmounted(()=>{u("renderer",null)});const{activeCamera:v,pushCamera:w,clearCameras:P}=K();function _(){const{renderer:y}=ue(e);e.camera&&w(e.camera);const{raycaster:L,pointer:H}=le();let S=null,g=null;c.watchEffect(()=>{v.value&&L.value.setFromCamera(H.value,v.value)}),l(()=>{var A,b,M,B,F,R,U,G,k,Y;if(v.value&&e.disableRender!==!0&&((A=y.value)==null||A.render(r,v.value)),L.value){const j=L.value.intersectObjects(r.children);j.length>0?(g=j[0],S===null&&((B=(M=(b=g.object)==null?void 0:b.events)==null?void 0:M.onPointerEnter)==null||B.call(M,g)),(U=(R=(F=g.object)==null?void 0:F.events)==null?void 0:R.onPointerMove)==null||U.call(R,g)):S!==null&&((Y=(k=(G=g==null?void 0:g.object)==null?void 0:G.events)==null?void 0:k.onPointerLeave)==null||Y.call(k,S),g=null),S=g}}),f.useEventListener(n.value,"click",()=>{var A,b,M;g!==null&&((M=(b=(A=g.object)==null?void 0:A.events)==null?void 0:b.onClick)==null||M.call(b,g))})}let C;function V(){C=Fe(t);const y=O();C.provide("useTres",y),C.provide(z,y),C.provide("extend",q),C.mount(r)}return V(),o({scene:r}),c.watch(()=>e.camera,y=>{y&&(P(),w(y))}),()=>c.h(c.h("div",{ref:a,"data-scene":r.uuid,key:r.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[c.h("div",{style:{width:"100%",height:"100%"}},[c.h("canvas",{ref:n,"data-scene":r.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),he=c.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:o}){const a=ne();return o(a),()=>c.h(Ge,e,t)}}),ze={install(e){e.component("TresCanvas",he)}};d.CameraType=re,d.TRES_CONTEXT_KEY=z,d.TresCanvas=he,d.catalogue=$,d.default=ze,d.extend=q,d.isProd=Te,d.trasverseObjects=fe,d.useCamera=K,d.useLoader=Ve,d.useLogger=T,d.useRaycaster=le,d.useRenderLoop=J,d.useRenderer=ue,d.useSeek=ke,d.useTexture=Re,d.useTres=O,d.useTresProvider=ne,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/types/index.d.ts
CHANGED
|
@@ -142,6 +142,7 @@ type TresComponents = {
|
|
|
142
142
|
[K in keyof ThreeInstances as `Tres${Capitalize<string & K>}`]: DefineComponent<ThreeInstances[K]>;
|
|
143
143
|
};
|
|
144
144
|
declare module 'vue' {
|
|
145
|
-
|
|
145
|
+
interface GlobalComponents extends TresComponents {
|
|
146
|
+
}
|
|
146
147
|
}
|
|
147
148
|
export {};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tresjs/core",
|
|
3
3
|
"description": "Declarative ThreeJS using Vue Components",
|
|
4
|
-
"version": "2.1.
|
|
4
|
+
"version": "2.1.3",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"packageManager": "pnpm@8.3.1",
|
|
7
7
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
@@ -57,52 +57,51 @@
|
|
|
57
57
|
"docs:serve": "vitepress serve docs"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
|
-
"three": "
|
|
61
|
-
"vue": "
|
|
60
|
+
"three": ">=0.133",
|
|
61
|
+
"vue": ">=3.3"
|
|
62
62
|
},
|
|
63
63
|
"dependencies": {
|
|
64
|
-
"@alvarosabu/utils": "^
|
|
65
|
-
"@vueuse/core": "^10.1.2"
|
|
66
|
-
"vue": "^3.3.4"
|
|
64
|
+
"@alvarosabu/utils": "^3.0.0",
|
|
65
|
+
"@vueuse/core": "^10.1.2"
|
|
67
66
|
},
|
|
68
67
|
"devDependencies": {
|
|
68
|
+
"vue": "^3.3.4",
|
|
69
69
|
"@alvarosabu/prettier-config": "^1.3.0",
|
|
70
70
|
"@huntersofbook/plausible-vue": "^1.0.0",
|
|
71
71
|
"@release-it/conventional-changelog": "^5.1.1",
|
|
72
72
|
"@stackblitz/sdk": "^1.9.0",
|
|
73
|
-
"@tresjs/cientos": "2.
|
|
74
|
-
"@types/three": "^0.152.
|
|
75
|
-
"@typescript-eslint/eslint-plugin": "^5.59.
|
|
76
|
-
"@typescript-eslint/parser": "^5.59.
|
|
73
|
+
"@tresjs/cientos": "2.1.3",
|
|
74
|
+
"@types/three": "^0.152.1",
|
|
75
|
+
"@typescript-eslint/eslint-plugin": "^5.59.11",
|
|
76
|
+
"@typescript-eslint/parser": "^5.59.11",
|
|
77
77
|
"@vitejs/plugin-vue": "^4.2.3",
|
|
78
|
-
"@vitest/coverage-c8": "^0.
|
|
79
|
-
"@vitest/ui": "^0.
|
|
78
|
+
"@vitest/coverage-c8": "^0.32.0",
|
|
79
|
+
"@vitest/ui": "^0.32.0",
|
|
80
80
|
"@vue/test-utils": "^2.3.2",
|
|
81
|
-
"eslint": "^8.
|
|
81
|
+
"eslint": "^8.42.0",
|
|
82
82
|
"eslint-config-prettier": "^8.8.0",
|
|
83
|
-
"eslint-plugin-vue": "^9.
|
|
84
|
-
"gsap": "^3.
|
|
85
|
-
"
|
|
86
|
-
"jsdom": "^22.0.0",
|
|
83
|
+
"eslint-plugin-vue": "^9.14.1",
|
|
84
|
+
"gsap": "^3.12.1",
|
|
85
|
+
"jsdom": "^22.1.0",
|
|
87
86
|
"kolorist": "^1.8.0",
|
|
88
|
-
"pathe": "^1.1.
|
|
87
|
+
"pathe": "^1.1.1",
|
|
89
88
|
"prettier": "^2.8.8",
|
|
90
|
-
"release-it": "^15.
|
|
89
|
+
"release-it": "^15.11.0",
|
|
91
90
|
"rollup-plugin-analyzer": "^4.0.0",
|
|
92
91
|
"rollup-plugin-copy": "^3.4.0",
|
|
93
|
-
"rollup-plugin-visualizer": "^5.9.
|
|
94
|
-
"three": "^0.
|
|
95
|
-
"unocss": "^0.
|
|
92
|
+
"rollup-plugin-visualizer": "^5.9.2",
|
|
93
|
+
"three": "^0.153.0",
|
|
94
|
+
"unocss": "^0.53.1",
|
|
96
95
|
"unplugin": "^1.3.1",
|
|
97
|
-
"unplugin-vue-components": "^0.
|
|
98
|
-
"vite": "^4.3.
|
|
96
|
+
"unplugin-vue-components": "^0.25.1",
|
|
97
|
+
"vite": "^4.3.9",
|
|
99
98
|
"vite-plugin-banner": "^0.7.0",
|
|
100
99
|
"vite-plugin-dts": "2.3.0",
|
|
101
|
-
"vite-plugin-inspect": "^0.7.
|
|
102
|
-
"vite-plugin-require-transform": "^1.0.
|
|
100
|
+
"vite-plugin-inspect": "^0.7.28",
|
|
101
|
+
"vite-plugin-require-transform": "^1.0.17",
|
|
103
102
|
"vite-svg-loader": "^4.0.0",
|
|
104
|
-
"vitepress": "1.0.0-
|
|
105
|
-
"vitest": "^0.
|
|
106
|
-
"vue-demi": "^0.14.
|
|
103
|
+
"vitepress": "1.0.0-beta.2",
|
|
104
|
+
"vitest": "^0.32.0",
|
|
105
|
+
"vue-demi": "^0.14.5"
|
|
107
106
|
}
|
|
108
107
|
}
|