@tresjs/core 3.2.1-next.2 → 3.2.1-next.4
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 +208 -206
- package/dist/tres.umd.cjs +2 -2
- package/package.json +1 -1
package/dist/tres.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v3.2.1-next.
|
|
3
|
+
* version: v3.2.1-next.4
|
|
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 h, computed as
|
|
8
|
+
import { ref as h, 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 de, normalizeStyle as ge, h as K, Fragment as ye } from "vue";
|
|
9
9
|
import * as we from "three";
|
|
10
|
-
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
|
|
11
|
-
import { createEventHook as
|
|
10
|
+
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 he, BufferAttribute as Be, Scene as Le } from "three";
|
|
11
|
+
import { createEventHook as O, useRafFn as Te, toValue as P, unrefElement as Se, useDevicePixelRatio as Re, usePointer as je, useElementBounding as He, useWindowSize as Fe, useElementSize as ze } from "@vueuse/core";
|
|
12
12
|
const Ge = ({ sizes: e, scene: n }) => {
|
|
13
|
-
const t = h([]), r =
|
|
13
|
+
const t = h([]), r = k(
|
|
14
14
|
() => t.value[0]
|
|
15
|
-
), a = (
|
|
16
|
-
t.value.some(({ uuid:
|
|
17
|
-
}, o = (
|
|
18
|
-
t.value = t.value.filter(({ uuid: c }) => c !==
|
|
19
|
-
}, f = (
|
|
20
|
-
const c =
|
|
15
|
+
), a = (i, c = !1) => {
|
|
16
|
+
t.value.some(({ uuid: u }) => u === i.uuid) || (c ? f(i) : t.value.push(i));
|
|
17
|
+
}, o = (i) => {
|
|
18
|
+
t.value = t.value.filter(({ uuid: c }) => c !== i.uuid);
|
|
19
|
+
}, f = (i) => {
|
|
20
|
+
const c = i instanceof _e ? i : t.value.find((m) => m.uuid === i);
|
|
21
21
|
if (!c)
|
|
22
22
|
return;
|
|
23
|
-
const
|
|
24
|
-
t.value = [c, ...
|
|
23
|
+
const u = t.value.filter(({ uuid: m }) => m !== c.uuid);
|
|
24
|
+
t.value = [c, ...u];
|
|
25
25
|
};
|
|
26
26
|
return D(() => {
|
|
27
|
-
e.aspectRatio.value && t.value.forEach((
|
|
28
|
-
|
|
27
|
+
e.aspectRatio.value && t.value.forEach((i) => {
|
|
28
|
+
i instanceof W && (i.aspect = e.aspectRatio.value), (i instanceof W || i instanceof Ce) && i.updateProjectionMatrix();
|
|
29
29
|
});
|
|
30
30
|
}), n.userData.tres__registerCamera = a, n.userData.tres__deregisterCamera = o, N(() => {
|
|
31
31
|
t.value = [];
|
|
@@ -36,16 +36,16 @@ const Ge = ({ sizes: e, scene: n }) => {
|
|
|
36
36
|
deregisterCamera: o,
|
|
37
37
|
setCameraActive: f
|
|
38
38
|
};
|
|
39
|
-
}, re =
|
|
39
|
+
}, re = O(), ne = O(), V = O(), x = new Pe();
|
|
40
40
|
let j = 0, H = 0;
|
|
41
41
|
const { pause: Ie, resume: We, isActive: $e } = Te(
|
|
42
42
|
() => {
|
|
43
|
-
re.trigger({ delta: j, elapsed: H, clock:
|
|
43
|
+
re.trigger({ delta: j, elapsed: H, clock: x }), ne.trigger({ delta: j, elapsed: H, clock: x }), V.trigger({ delta: j, elapsed: H, clock: x });
|
|
44
44
|
},
|
|
45
45
|
{ immediate: !1 }
|
|
46
46
|
);
|
|
47
47
|
V.on(() => {
|
|
48
|
-
j =
|
|
48
|
+
j = x.getDelta(), H = x.getElapsedTime();
|
|
49
49
|
});
|
|
50
50
|
const ae = () => ({
|
|
51
51
|
onBeforeLoop: re.on,
|
|
@@ -54,7 +54,7 @@ const ae = () => ({
|
|
|
54
54
|
pause: Ie,
|
|
55
55
|
resume: We,
|
|
56
56
|
isActive: $e
|
|
57
|
-
}),
|
|
57
|
+
}), pt = !0, X = "[TresJS ▲ ■ ●] ";
|
|
58
58
|
function B() {
|
|
59
59
|
function e(r, a) {
|
|
60
60
|
console.error(`${X} ${r}`, a || "");
|
|
@@ -112,7 +112,7 @@ const Je = (e, n) => {
|
|
|
112
112
|
function se(e, n) {
|
|
113
113
|
if (Y(e) && Y(n)) {
|
|
114
114
|
const a = e.attributes, o = n.attributes;
|
|
115
|
-
return a.length !== o.length ? !1 : Array.from(a).every(({ name: f, value:
|
|
115
|
+
return a.length !== o.length ? !1 : Array.from(a).every(({ name: f, value: i }) => n.getAttribute(f) === i);
|
|
116
116
|
}
|
|
117
117
|
if (e === n)
|
|
118
118
|
return !0;
|
|
@@ -137,11 +137,11 @@ function Xe(e, n) {
|
|
|
137
137
|
const Ye = Number.parseInt(Me.replace("dev", "")), S = {
|
|
138
138
|
realistic: {
|
|
139
139
|
outputColorSpace: Ae,
|
|
140
|
-
toneMapping:
|
|
140
|
+
toneMapping: ke,
|
|
141
141
|
toneMappingExposure: 3,
|
|
142
142
|
shadowMap: {
|
|
143
143
|
enabled: !0,
|
|
144
|
-
type:
|
|
144
|
+
type: be
|
|
145
145
|
}
|
|
146
146
|
}
|
|
147
147
|
};
|
|
@@ -152,7 +152,7 @@ function Qe({
|
|
|
152
152
|
disableRender: r,
|
|
153
153
|
contextParts: { sizes: a, camera: o }
|
|
154
154
|
}) {
|
|
155
|
-
const f =
|
|
155
|
+
const f = k(() => ({
|
|
156
156
|
alpha: P(t.alpha),
|
|
157
157
|
depth: P(t.depth),
|
|
158
158
|
canvas: Se(n),
|
|
@@ -165,55 +165,55 @@ function Qe({
|
|
|
165
165
|
preserveDrawingBuffer: P(t.preserveDrawingBuffer),
|
|
166
166
|
logarithmicDepthBuffer: P(t.logarithmicDepthBuffer),
|
|
167
167
|
failIfMajorPerformanceCaveat: P(t.failIfMajorPerformanceCaveat)
|
|
168
|
-
})),
|
|
168
|
+
})), i = F(new z(f.value));
|
|
169
169
|
te(f, () => {
|
|
170
|
-
|
|
170
|
+
i.value.dispose(), i.value = new z(f.value);
|
|
171
171
|
}), D(() => {
|
|
172
|
-
|
|
172
|
+
i.value.setSize(a.width.value, a.height.value);
|
|
173
173
|
});
|
|
174
174
|
const { pixelRatio: c } = Re();
|
|
175
175
|
D(() => {
|
|
176
|
-
|
|
176
|
+
i.value.setPixelRatio(c.value);
|
|
177
177
|
});
|
|
178
|
-
const { logError:
|
|
179
|
-
const
|
|
178
|
+
const { logError: u } = B(), l = (() => {
|
|
179
|
+
const d = new z(), w = {
|
|
180
180
|
shadowMap: {
|
|
181
|
-
enabled:
|
|
182
|
-
type:
|
|
181
|
+
enabled: d.shadowMap.enabled,
|
|
182
|
+
type: d.shadowMap.type
|
|
183
183
|
},
|
|
184
|
-
toneMapping:
|
|
185
|
-
toneMappingExposure:
|
|
186
|
-
outputColorSpace:
|
|
184
|
+
toneMapping: d.toneMapping,
|
|
185
|
+
toneMappingExposure: d.toneMappingExposure,
|
|
186
|
+
outputColorSpace: d.outputColorSpace
|
|
187
187
|
};
|
|
188
|
-
return
|
|
188
|
+
return d.dispose(), w;
|
|
189
189
|
})();
|
|
190
190
|
D(() => {
|
|
191
|
-
const
|
|
192
|
-
|
|
193
|
-
const
|
|
194
|
-
const
|
|
195
|
-
if (
|
|
196
|
-
return Q(S[
|
|
191
|
+
const d = P(t.preset);
|
|
192
|
+
d && (d in S || u(`Renderer Preset must be one of these: ${Object.keys(S).join(", ")}`), oe(i.value, S[d]));
|
|
193
|
+
const w = (_, A) => {
|
|
194
|
+
const b = P(_), L = () => {
|
|
195
|
+
if (d)
|
|
196
|
+
return Q(S[d], A);
|
|
197
197
|
};
|
|
198
|
-
if (
|
|
199
|
-
return
|
|
200
|
-
const
|
|
201
|
-
return
|
|
202
|
-
},
|
|
203
|
-
|
|
204
|
-
const
|
|
205
|
-
|
|
206
|
-
|
|
198
|
+
if (b !== void 0)
|
|
199
|
+
return b;
|
|
200
|
+
const g = L();
|
|
201
|
+
return g !== void 0 ? g : Q(l, A);
|
|
202
|
+
}, E = (_, A) => Ke(i.value, A, w(_, A));
|
|
203
|
+
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");
|
|
204
|
+
const C = w(t.clearColor, "clearColor");
|
|
205
|
+
C && i.value.setClearColor(
|
|
206
|
+
C ? Ne(C) : new R(0)
|
|
207
207
|
// default clear color is not easily/efficiently retrievable from three
|
|
208
208
|
);
|
|
209
209
|
});
|
|
210
|
-
const { pause:
|
|
210
|
+
const { pause: s, resume: v, onLoop: y } = ae();
|
|
211
211
|
return y(() => {
|
|
212
|
-
o.value && !P(r) &&
|
|
213
|
-
}),
|
|
214
|
-
|
|
212
|
+
o.value && !P(r) && i.value.render(e, o.value);
|
|
213
|
+
}), v(), N(() => {
|
|
214
|
+
s(), i.value.dispose(), i.value.forceContextLoss();
|
|
215
215
|
}), {
|
|
216
|
-
renderer:
|
|
216
|
+
renderer: i
|
|
217
217
|
};
|
|
218
218
|
}
|
|
219
219
|
const Z = (e) => typeof e == "function", ie = (e) => !!e && e.constructor === Array;
|
|
@@ -227,24 +227,24 @@ async function dt(e, n, t, r, a) {
|
|
|
227
227
|
const { logError: o } = B(), f = new e();
|
|
228
228
|
a && a(f), t && t(f);
|
|
229
229
|
const c = (Array.isArray(n) ? n : [n]).map(
|
|
230
|
-
(
|
|
230
|
+
(u) => new Promise((m, l) => {
|
|
231
231
|
f.load(
|
|
232
|
-
|
|
233
|
-
(
|
|
234
|
-
|
|
232
|
+
u,
|
|
233
|
+
(s) => {
|
|
234
|
+
s.scene && Object.assign(s, Ze(s.scene)), m(s);
|
|
235
235
|
},
|
|
236
236
|
r,
|
|
237
|
-
(
|
|
237
|
+
(s) => l(o("[useLoader] - Failed to load resource", s))
|
|
238
238
|
);
|
|
239
239
|
})
|
|
240
240
|
);
|
|
241
241
|
return ie(n) ? await Promise.all(c) : await c[0];
|
|
242
242
|
}
|
|
243
243
|
async function gt(e) {
|
|
244
|
-
const n = new De(), t = new
|
|
244
|
+
const n = new De(), t = new xe(n), r = (a) => new Promise((o, f) => {
|
|
245
245
|
t.load(
|
|
246
246
|
a,
|
|
247
|
-
(
|
|
247
|
+
(i) => o(i),
|
|
248
248
|
() => null,
|
|
249
249
|
() => {
|
|
250
250
|
f(new Error("[useTextures] - Failed to load texture"));
|
|
@@ -259,67 +259,67 @@ async function gt(e) {
|
|
|
259
259
|
map: a,
|
|
260
260
|
displacementMap: o,
|
|
261
261
|
normalMap: f,
|
|
262
|
-
roughnessMap:
|
|
262
|
+
roughnessMap: i,
|
|
263
263
|
metalnessMap: c,
|
|
264
|
-
aoMap:
|
|
265
|
-
alphaMap:
|
|
266
|
-
matcap:
|
|
264
|
+
aoMap: u,
|
|
265
|
+
alphaMap: m,
|
|
266
|
+
matcap: l
|
|
267
267
|
} = e;
|
|
268
268
|
return {
|
|
269
269
|
map: a ? await r(a) : null,
|
|
270
270
|
displacementMap: o ? await r(o) : null,
|
|
271
271
|
normalMap: f ? await r(f) : null,
|
|
272
|
-
roughnessMap:
|
|
272
|
+
roughnessMap: i ? await r(i) : null,
|
|
273
273
|
metalnessMap: c ? await r(c) : null,
|
|
274
|
-
aoMap:
|
|
275
|
-
alphaMap:
|
|
276
|
-
matcap:
|
|
274
|
+
aoMap: u ? await r(u) : null,
|
|
275
|
+
alphaMap: m ? await r(m) : null,
|
|
276
|
+
matcap: l ? await r(l) : null
|
|
277
277
|
};
|
|
278
278
|
}
|
|
279
279
|
}
|
|
280
280
|
const et = (e, { renderer: n, camera: t, raycaster: r }) => {
|
|
281
|
-
const a =
|
|
281
|
+
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: g, y: M }) => {
|
|
282
282
|
if (a.value)
|
|
283
283
|
return {
|
|
284
|
-
x: (
|
|
285
|
-
y: -((
|
|
284
|
+
x: (g - m.value) / i.value * 2 - 1,
|
|
285
|
+
y: -((M - u.value) / c.value) * 2 + 1
|
|
286
286
|
};
|
|
287
|
-
},
|
|
287
|
+
}, s = ({ x: g, y: M }) => {
|
|
288
288
|
if (t.value)
|
|
289
|
-
return r.value.setFromCamera(new
|
|
290
|
-
},
|
|
291
|
-
const
|
|
292
|
-
x: (
|
|
293
|
-
y: (
|
|
289
|
+
return r.value.setFromCamera(new Oe(g, M), t.value), r.value.intersectObjects(e.value, !1);
|
|
290
|
+
}, v = (g) => {
|
|
291
|
+
const M = l({
|
|
292
|
+
x: (g == null ? void 0 : g.clientX) ?? o.value,
|
|
293
|
+
y: (g == null ? void 0 : g.clientY) ?? f.value
|
|
294
294
|
});
|
|
295
|
-
return
|
|
296
|
-
}, y =
|
|
297
|
-
|
|
298
|
-
},
|
|
299
|
-
w
|
|
295
|
+
return M ? s(M) || [] : [];
|
|
296
|
+
}, y = k(() => v()), d = O(), w = O(), E = (g, M) => {
|
|
297
|
+
g.trigger({ event: M, intersects: v(M) });
|
|
298
|
+
}, C = (g) => {
|
|
299
|
+
E(w, g);
|
|
300
300
|
};
|
|
301
|
-
let
|
|
302
|
-
const
|
|
303
|
-
var
|
|
304
|
-
|
|
305
|
-
},
|
|
306
|
-
var
|
|
307
|
-
|
|
308
|
-
}, L = (
|
|
309
|
-
return a.value.addEventListener("pointerup",
|
|
310
|
-
a != null && a.value && (a.value.removeEventListener("pointerup",
|
|
301
|
+
let _;
|
|
302
|
+
const A = (g) => {
|
|
303
|
+
var M;
|
|
304
|
+
_ = (M = v(g)[0]) == null ? void 0 : M.object;
|
|
305
|
+
}, b = (g) => {
|
|
306
|
+
var M;
|
|
307
|
+
g instanceof PointerEvent && _ === ((M = v(g)[0]) == null ? void 0 : M.object) && E(d, g);
|
|
308
|
+
}, L = (g) => w.trigger({ event: g, intersects: [] });
|
|
309
|
+
return a.value.addEventListener("pointerup", b), a.value.addEventListener("pointerdown", A), a.value.addEventListener("pointermove", C), a.value.addEventListener("pointerleave", L), N(() => {
|
|
310
|
+
a != null && a.value && (a.value.removeEventListener("pointerup", b), a.value.removeEventListener("pointerdown", A), a.value.removeEventListener("pointermove", C), a.value.removeEventListener("pointerleave", L));
|
|
311
311
|
}), {
|
|
312
312
|
intersects: y,
|
|
313
|
-
onClick: (
|
|
314
|
-
onPointerMove: (
|
|
313
|
+
onClick: (g) => d.on(g).off,
|
|
314
|
+
onPointerMove: (g) => w.on(g).off
|
|
315
315
|
};
|
|
316
316
|
};
|
|
317
317
|
function yt() {
|
|
318
318
|
const { logWarning: e } = B();
|
|
319
319
|
function n(r, a, o) {
|
|
320
320
|
let f = null;
|
|
321
|
-
return r.traverse((
|
|
322
|
-
|
|
321
|
+
return r.traverse((i) => {
|
|
322
|
+
i[a] === o && (f = i);
|
|
323
323
|
}), f || e(`Child with ${a} '${o}' not found.`), f;
|
|
324
324
|
}
|
|
325
325
|
function t(r, a) {
|
|
@@ -336,37 +336,37 @@ const tt = ({ scene: e, contextParts: n }) => {
|
|
|
336
336
|
pointerMove: /* @__PURE__ */ new Map(),
|
|
337
337
|
pointerEnter: /* @__PURE__ */ new Map(),
|
|
338
338
|
pointerLeave: /* @__PURE__ */ new Map()
|
|
339
|
-
}), r = h(/* @__PURE__ */ new Set()), a = (
|
|
340
|
-
r.value.add(
|
|
341
|
-
}, o = (
|
|
342
|
-
r.value.delete(
|
|
343
|
-
}, f = (
|
|
344
|
-
Object.values(t).forEach((
|
|
345
|
-
},
|
|
346
|
-
const { onClick:
|
|
347
|
-
|
|
339
|
+
}), r = h(/* @__PURE__ */ new Set()), a = (s) => {
|
|
340
|
+
r.value.add(s);
|
|
341
|
+
}, o = (s) => {
|
|
342
|
+
r.value.delete(s);
|
|
343
|
+
}, f = (s) => {
|
|
344
|
+
Object.values(t).forEach((v) => v.delete(s)), o(s);
|
|
345
|
+
}, i = (s) => {
|
|
346
|
+
const { onClick: v, onPointerMove: y, onPointerEnter: d, onPointerLeave: w } = s;
|
|
347
|
+
v && t.click.set(s, v), y && t.pointerMove.set(s, y), d && t.pointerEnter.set(s, d), w && t.pointerLeave.set(s, w);
|
|
348
348
|
};
|
|
349
|
-
e.userData.tres__registerAtPointerEventHandler =
|
|
350
|
-
const c =
|
|
349
|
+
e.userData.tres__registerAtPointerEventHandler = i, e.userData.tres__deregisterAtPointerEventHandler = f, e.userData.tres__registerBlockingObjectAtPointerEventHandler = a, e.userData.tres__deregisterBlockingObjectAtPointerEventHandler = o;
|
|
350
|
+
const c = k(
|
|
351
351
|
() => Je(
|
|
352
352
|
[
|
|
353
353
|
...Array.from(r.value),
|
|
354
|
-
...Object.values(t).map((
|
|
354
|
+
...Object.values(t).map((s) => Array.from(s.keys())).flat()
|
|
355
355
|
],
|
|
356
|
-
({ uuid:
|
|
356
|
+
({ uuid: s }) => s
|
|
357
357
|
)
|
|
358
|
-
), { onClick:
|
|
359
|
-
|
|
358
|
+
), { onClick: u, onPointerMove: m } = et(c, n);
|
|
359
|
+
u(({ intersects: s, event: v }) => {
|
|
360
360
|
var y;
|
|
361
|
-
|
|
361
|
+
s.length && ((y = t.click.get(s[0].object)) == null || y(s[0], v));
|
|
362
362
|
});
|
|
363
|
-
let
|
|
364
|
-
return
|
|
365
|
-
var
|
|
366
|
-
const y = (
|
|
367
|
-
|
|
363
|
+
let l;
|
|
364
|
+
return m(({ intersects: s, event: v }) => {
|
|
365
|
+
var C, _, A, b;
|
|
366
|
+
const y = (C = s == null ? void 0 : s[0]) == null ? void 0 : C.object, { pointerLeave: d, pointerEnter: w, pointerMove: E } = t;
|
|
367
|
+
l && l !== y && ((_ = d.get(l)) == null || _(l, v)), y && (l !== y && ((A = w.get(y)) == null || A(s[0], v)), (b = E.get(y)) == null || b(s[0], v)), l = y || null;
|
|
368
368
|
}), {
|
|
369
|
-
registerObject:
|
|
369
|
+
registerObject: i,
|
|
370
370
|
deregisterObject: f
|
|
371
371
|
};
|
|
372
372
|
}, $ = h({}), q = (e) => Object.assign($.value, e);
|
|
@@ -377,40 +377,40 @@ function rt({
|
|
|
377
377
|
disableRender: r,
|
|
378
378
|
rendererOptions: a
|
|
379
379
|
}) {
|
|
380
|
-
const o =
|
|
380
|
+
const o = k(
|
|
381
381
|
() => P(t) ? Fe() : ze(P(n).parentElement)
|
|
382
|
-
), f =
|
|
383
|
-
height:
|
|
382
|
+
), f = k(() => o.value.width.value), i = k(() => o.value.height.value), c = k(() => f.value / i.value), u = {
|
|
383
|
+
height: i,
|
|
384
384
|
width: f,
|
|
385
385
|
aspectRatio: c
|
|
386
|
-
},
|
|
387
|
-
camera:
|
|
388
|
-
cameras:
|
|
389
|
-
registerCamera:
|
|
386
|
+
}, m = F(e), {
|
|
387
|
+
camera: l,
|
|
388
|
+
cameras: s,
|
|
389
|
+
registerCamera: v,
|
|
390
390
|
deregisterCamera: y,
|
|
391
|
-
setCameraActive:
|
|
392
|
-
} = Ge({ sizes:
|
|
391
|
+
setCameraActive: d
|
|
392
|
+
} = Ge({ sizes: u, scene: e }), { renderer: w } = Qe(
|
|
393
393
|
{
|
|
394
394
|
scene: e,
|
|
395
395
|
canvas: n,
|
|
396
396
|
options: a,
|
|
397
|
-
contextParts: { sizes:
|
|
397
|
+
contextParts: { sizes: u, camera: l },
|
|
398
398
|
disableRender: r
|
|
399
399
|
}
|
|
400
|
-
),
|
|
401
|
-
sizes:
|
|
402
|
-
scene:
|
|
403
|
-
camera:
|
|
404
|
-
cameras: le(
|
|
405
|
-
renderer:
|
|
400
|
+
), E = {
|
|
401
|
+
sizes: u,
|
|
402
|
+
scene: m,
|
|
403
|
+
camera: l,
|
|
404
|
+
cameras: le(s),
|
|
405
|
+
renderer: w,
|
|
406
406
|
raycaster: F(new he()),
|
|
407
407
|
controls: h(null),
|
|
408
408
|
extend: q,
|
|
409
|
-
registerCamera:
|
|
410
|
-
setCameraActive:
|
|
409
|
+
registerCamera: v,
|
|
410
|
+
setCameraActive: d,
|
|
411
411
|
deregisterCamera: y
|
|
412
412
|
};
|
|
413
|
-
return I("useTres",
|
|
413
|
+
return I("useTres", E), E;
|
|
414
414
|
}
|
|
415
415
|
function nt() {
|
|
416
416
|
const e = ce("useTres");
|
|
@@ -419,10 +419,10 @@ function nt() {
|
|
|
419
419
|
return e;
|
|
420
420
|
}
|
|
421
421
|
const wt = nt;
|
|
422
|
-
let G = null,
|
|
422
|
+
let G = null, p = null;
|
|
423
423
|
const { logError: ee } = B(), at = {
|
|
424
424
|
createElement(e, n, t, r) {
|
|
425
|
-
var f,
|
|
425
|
+
var f, i;
|
|
426
426
|
if (r || (r = {}), r.args || (r.args = []), e === "template" || qe(e))
|
|
427
427
|
return null;
|
|
428
428
|
let a = e.replace("Tres", ""), o;
|
|
@@ -434,28 +434,28 @@ const { logError: ee } = B(), at = {
|
|
|
434
434
|
const c = $.value[a];
|
|
435
435
|
c || ee(`${a} is not defined on the THREE namespace. Use extend to add it to the catalog.`), o = new c(...r.args);
|
|
436
436
|
}
|
|
437
|
-
return o.isCamera && (r != null && r.position || o.position.set(3, 3, 3), r != null && r.lookAt || o.lookAt(0, 0, 0)), (r == null ? void 0 : r.attach) === void 0 && (o.isMaterial ? o.attach = "material" : o.isBufferGeometry && (o.attach = "geometry")), o.isObject3D && ((f = r == null ? void 0 : r.material) != null && f.isMaterial && (o.userData.tres__materialViaProp = !0), (
|
|
437
|
+
return o.isCamera && (r != null && r.position || o.position.set(3, 3, 3), r != null && r.lookAt || o.lookAt(0, 0, 0)), (r == null ? void 0 : r.attach) === void 0 && (o.isMaterial ? o.attach = "material" : o.isBufferGeometry && (o.attach = "geometry")), o.isObject3D && ((f = r == null ? void 0 : r.material) != null && f.isMaterial && (o.userData.tres__materialViaProp = !0), (i = r == null ? void 0 : r.geometry) != null && i.isBufferGeometry && (o.userData.tres__geometryViaProp = !0)), o.userData = {
|
|
438
438
|
...o.userData,
|
|
439
439
|
tres__name: a
|
|
440
440
|
}, o;
|
|
441
441
|
},
|
|
442
442
|
insert(e, n) {
|
|
443
|
-
var t, r, a, o, f,
|
|
444
|
-
if (n && n.isScene && (
|
|
443
|
+
var t, r, a, o, f, i, c, u, m;
|
|
444
|
+
if (n && n.isScene && (p = n), (((t = e == null ? void 0 : e.__vnode) == null ? void 0 : t.type) === "TresGroup" || ((r = e == null ? void 0 : e.__vnode) == null ? void 0 : r.type) === "TresObject3D") && n === null && !((o = (a = e == null ? void 0 : e.__vnode) == null ? void 0 : a.ctx) != null && o.asyncResolved)) {
|
|
445
445
|
G = e;
|
|
446
446
|
return;
|
|
447
447
|
} else
|
|
448
|
-
(f = e == null ? void 0 : e.__vnode) != null && f.type.includes("Controls") && n === null && (G =
|
|
448
|
+
(f = e == null ? void 0 : e.__vnode) != null && f.type.includes("Controls") && n === null && (G = p);
|
|
449
449
|
if (n || (n = G), e != null && e.isObject3D) {
|
|
450
450
|
if (e != null && e.isCamera) {
|
|
451
|
-
if (!(
|
|
451
|
+
if (!(p != null && p.userData.tres__registerCamera))
|
|
452
452
|
throw "could not find tres__registerCamera on scene's userData";
|
|
453
|
-
(c =
|
|
453
|
+
(c = p == null ? void 0 : (i = p.userData).tres__registerCamera) == null || c.call(i, e);
|
|
454
454
|
}
|
|
455
455
|
if (e != null && e.onClick || e != null && e.onPointerMove || e != null && e.onPointerEnter || e != null && e.onPointerLeave) {
|
|
456
|
-
if (!(
|
|
456
|
+
if (!(p != null && p.userData.tres__registerAtPointerEventHandler))
|
|
457
457
|
throw "could not find tres__registerAtPointerEventHandler on scene's userData";
|
|
458
|
-
(
|
|
458
|
+
(m = p == null ? void 0 : (u = p.userData).tres__registerAtPointerEventHandler) == null || m.call(u, e);
|
|
459
459
|
}
|
|
460
460
|
}
|
|
461
461
|
e != null && e.isObject3D && (n != null && n.isObject3D) ? (n.add(e), e.dispatchEvent({ type: "added" })) : e != null && e.isFog ? n.fog = e : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[n == null ? void 0 : n.attach], n && (n[e.attach] = e));
|
|
@@ -464,63 +464,63 @@ const { logError: ee } = B(), at = {
|
|
|
464
464
|
var n, t;
|
|
465
465
|
if (e) {
|
|
466
466
|
if (e.isObject3D) {
|
|
467
|
-
const r = e, a = (
|
|
468
|
-
var
|
|
469
|
-
const
|
|
470
|
-
|
|
471
|
-
}, o =
|
|
472
|
-
var
|
|
467
|
+
const r = e, a = (u) => {
|
|
468
|
+
var l, s;
|
|
469
|
+
const m = u;
|
|
470
|
+
u.userData.tres__materialViaProp || (l = m.material) == null || l.dispose(), u.userData.tres__geometryViaProp || (s = m.geometry) == null || s.dispose();
|
|
471
|
+
}, o = p == null ? void 0 : p.userData.tres__deregisterAtPointerEventHandler, f = p == null ? void 0 : p.userData.tres__deregisterBlockingObjectAtPointerEventHandler, i = (u) => {
|
|
472
|
+
var m, l;
|
|
473
473
|
if (!f)
|
|
474
474
|
throw "could not find tres__deregisterBlockingObjectAtPointerEventHandler on scene's userData";
|
|
475
|
-
if ((
|
|
475
|
+
if ((l = p == null ? void 0 : (m = p.userData).tres__deregisterBlockingObjectAtPointerEventHandler) == null || l.call(m, u), !o)
|
|
476
476
|
throw "could not find tres__deregisterAtPointerEventHandler on scene's userData";
|
|
477
|
-
(
|
|
478
|
-
}, c = (
|
|
479
|
-
const
|
|
480
|
-
if (!
|
|
477
|
+
(u != null && u.onClick || u != null && u.onPointerMove || u != null && u.onPointerEnter || u != null && u.onPointerLeave) && (o == null || o(u));
|
|
478
|
+
}, c = (u) => {
|
|
479
|
+
const m = p == null ? void 0 : p.userData.tres__deregisterCamera;
|
|
480
|
+
if (!m)
|
|
481
481
|
throw "could not find tres__deregisterCamera on scene's userData";
|
|
482
|
-
|
|
482
|
+
u.isCamera && (m == null || m(u));
|
|
483
483
|
};
|
|
484
|
-
r.traverse((
|
|
485
|
-
a(
|
|
486
|
-
}), a(r), c(r),
|
|
484
|
+
r.traverse((u) => {
|
|
485
|
+
a(u), c(u), i == null || i(u);
|
|
486
|
+
}), a(r), c(r), i == null || i(r);
|
|
487
487
|
}
|
|
488
488
|
(n = e.removeFromParent) == null || n.call(e), (t = e.dispose) == null || t.call(e);
|
|
489
489
|
}
|
|
490
490
|
},
|
|
491
491
|
patchProp(e, n, t, r) {
|
|
492
|
-
var a, o, f,
|
|
492
|
+
var a, o, f, i;
|
|
493
493
|
if (e) {
|
|
494
|
-
let c = e,
|
|
495
|
-
if (e.isObject3D &&
|
|
496
|
-
r || r === "" ? (o =
|
|
494
|
+
let c = e, u = n;
|
|
495
|
+
if (e.isObject3D && u === "blocks-pointer-events") {
|
|
496
|
+
r || r === "" ? (o = p == null ? void 0 : (a = p.userData).tres__registerBlockingObjectAtPointerEventHandler) == null || o.call(a, e) : (i = p == null ? void 0 : (f = p.userData).tres__deregisterBlockingObjectAtPointerEventHandler) == null || i.call(f, e);
|
|
497
497
|
return;
|
|
498
498
|
}
|
|
499
|
-
let
|
|
500
|
-
if (
|
|
501
|
-
const
|
|
502
|
-
|
|
499
|
+
let m = T(u), l = c == null ? void 0 : c[m];
|
|
500
|
+
if (u === "args") {
|
|
501
|
+
const v = e, y = t ?? [], d = r ?? [], w = e.userData.tres__name || e.type;
|
|
502
|
+
w && y.length && !Xe(y, d) && (c = Object.assign(v, new $.value[w](...r)));
|
|
503
503
|
return;
|
|
504
504
|
}
|
|
505
505
|
if (c.type === "BufferGeometry") {
|
|
506
|
-
if (
|
|
506
|
+
if (u === "args")
|
|
507
507
|
return;
|
|
508
508
|
c.setAttribute(
|
|
509
|
-
T(
|
|
509
|
+
T(u),
|
|
510
510
|
new Be(...r)
|
|
511
511
|
);
|
|
512
512
|
return;
|
|
513
513
|
}
|
|
514
|
-
if (
|
|
515
|
-
const
|
|
516
|
-
|
|
514
|
+
if (u.includes("-") && l === void 0) {
|
|
515
|
+
const v = u.split("-");
|
|
516
|
+
l = v.reduce((y, d) => y[T(d)], c), u = v.pop(), m = u.toLowerCase(), l != null && l.set || (c = v.reduce((y, d) => y[T(d)], c));
|
|
517
517
|
}
|
|
518
|
-
let
|
|
519
|
-
if (
|
|
520
|
-
Array.isArray(
|
|
518
|
+
let s = r;
|
|
519
|
+
if (s === "" && (s = !0), Z(l)) {
|
|
520
|
+
Array.isArray(s) ? e[m](...s) : e[m](s);
|
|
521
521
|
return;
|
|
522
522
|
}
|
|
523
|
-
!(
|
|
523
|
+
!(l != null && l.set) && !Z(l) ? c[m] = s : l.constructor === s.constructor && (l != null && l.copy) ? l == null || l.copy(s) : Array.isArray(s) ? l.set(...s) : !l.isColor && l.setScalar ? l.setScalar(s) : l.set(s);
|
|
524
524
|
}
|
|
525
525
|
},
|
|
526
526
|
parentNode(e) {
|
|
@@ -564,52 +564,54 @@ const st = ["data-scene"], it = /* @__PURE__ */ U({
|
|
|
564
564
|
failIfMajorPerformanceCaveat: { type: Boolean, default: void 0 }
|
|
565
565
|
},
|
|
566
566
|
setup(e) {
|
|
567
|
+
var m;
|
|
567
568
|
const n = e, { logWarning: t } = B(), r = h(), a = F(new Le());
|
|
568
569
|
ae();
|
|
569
|
-
const o =
|
|
570
|
+
const o = me(), f = (m = J()) == null ? void 0 : m.appContext.app, i = (l) => U({
|
|
570
571
|
setup() {
|
|
571
|
-
|
|
572
|
-
|
|
572
|
+
var v;
|
|
573
|
+
const s = (v = J()) == null ? void 0 : v.appContext;
|
|
574
|
+
return s && (s.app = f), I("useTres", l), I("extend", q), () => K(ye, null, o != null && o.default ? o.default() : []);
|
|
573
575
|
}
|
|
574
|
-
}), c = (
|
|
575
|
-
const
|
|
576
|
-
ot(K(
|
|
577
|
-
},
|
|
578
|
-
return
|
|
579
|
-
const
|
|
576
|
+
}), c = (l) => {
|
|
577
|
+
const s = i(l);
|
|
578
|
+
ot(K(s), a.value);
|
|
579
|
+
}, u = k(() => n.disableRender);
|
|
580
|
+
return pe(() => {
|
|
581
|
+
const l = r, s = rt({
|
|
580
582
|
scene: a.value,
|
|
581
|
-
canvas:
|
|
583
|
+
canvas: l,
|
|
582
584
|
windowSize: n.windowSize,
|
|
583
|
-
disableRender:
|
|
585
|
+
disableRender: u,
|
|
584
586
|
rendererOptions: n
|
|
585
587
|
});
|
|
586
|
-
tt({ scene: a.value, contextParts:
|
|
587
|
-
const { registerCamera:
|
|
588
|
-
c(
|
|
589
|
-
const
|
|
590
|
-
const
|
|
588
|
+
tt({ scene: a.value, contextParts: s });
|
|
589
|
+
const { registerCamera: v, camera: y, cameras: d, deregisterCamera: w } = s;
|
|
590
|
+
c(s);
|
|
591
|
+
const E = () => {
|
|
592
|
+
const C = new W(
|
|
591
593
|
45,
|
|
592
594
|
window.innerWidth / window.innerHeight,
|
|
593
595
|
0.1,
|
|
594
596
|
1e3
|
|
595
597
|
);
|
|
596
|
-
|
|
598
|
+
C.position.set(3, 3, 3), C.lookAt(0, 0, 0), v(C);
|
|
597
599
|
const _ = D(() => {
|
|
598
|
-
|
|
600
|
+
d.value.length >= 2 && (C.removeFromParent(), w(C), _ == null || _());
|
|
599
601
|
});
|
|
600
602
|
};
|
|
601
603
|
te(
|
|
602
604
|
() => n.camera,
|
|
603
|
-
(
|
|
604
|
-
|
|
605
|
+
(C, _) => {
|
|
606
|
+
C ? v(C) : _ && (_.removeFromParent(), w(_));
|
|
605
607
|
},
|
|
606
608
|
{
|
|
607
609
|
immediate: !0
|
|
608
610
|
}
|
|
609
|
-
),
|
|
611
|
+
), y.value || (t(
|
|
610
612
|
"No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."
|
|
611
|
-
),
|
|
612
|
-
}), (
|
|
613
|
+
), E());
|
|
614
|
+
}), (l, s) => (ve(), de("canvas", {
|
|
613
615
|
ref_key: "canvas",
|
|
614
616
|
ref: r,
|
|
615
617
|
"data-scene": a.value.uuid,
|
|
@@ -617,7 +619,7 @@ const st = ["data-scene"], it = /* @__PURE__ */ U({
|
|
|
617
619
|
display: "block",
|
|
618
620
|
width: "100%",
|
|
619
621
|
height: "100%",
|
|
620
|
-
position:
|
|
622
|
+
position: l.windowSize ? "fixed" : "relative",
|
|
621
623
|
top: 0,
|
|
622
624
|
left: 0,
|
|
623
625
|
pointerEvents: "auto",
|
|
@@ -645,7 +647,7 @@ export {
|
|
|
645
647
|
$ as catalogue,
|
|
646
648
|
_t as default,
|
|
647
649
|
q as extend,
|
|
648
|
-
|
|
650
|
+
pt as isProd,
|
|
649
651
|
Ne as normalizeColor,
|
|
650
652
|
vt as normalizeVectorFlexibleParam,
|
|
651
653
|
Ct as templateCompilerOptions,
|
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v3.2.1-next.
|
|
3
|
+
* version: v3.2.1-next.4
|
|
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(v,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):(v=typeof globalThis<"u"?globalThis:v||self,c(v.tres={},v.Vue,v.Three,v.VueUseCore))})(this,function(v,c,_,y){"use strict";function se(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const ie=se(_),I=({sizes:e,scene:n})=>{const t=c.ref([]),r=c.computed(()=>t.value[0]),a=(s,f=!1)=>{t.value.some(({uuid:i})=>i===s.uuid)||(f?m(s):t.value.push(s))},o=s=>{t.value=t.value.filter(({uuid:f})=>f!==s.uuid)},m=s=>{const f=s instanceof _.Camera?s:t.value.find(d=>d.uuid===s);if(!f)return;const i=t.value.filter(({uuid:d})=>d!==f.uuid);t.value=[f,...i]};return c.watchEffect(()=>{e.aspectRatio.value&&t.value.forEach(s=>{s instanceof _.PerspectiveCamera&&(s.aspect=e.aspectRatio.value),(s instanceof _.PerspectiveCamera||s instanceof _.OrthographicCamera)&&s.updateProjectionMatrix()})}),n.userData.tres__registerCamera=a,n.userData.tres__deregisterCamera=o,c.onUnmounted(()=>{t.value=[]}),{camera:r,cameras:t,registerCamera:a,deregisterCamera:o,setCameraActive:m}},W=y.createEventHook(),N=y.createEventHook(),F=y.createEventHook(),S=new _.Clock;let B=0,x=0;const{pause:le,resume:ue,isActive:ce}=y.useRafFn(()=>{W.trigger({delta:B,elapsed:x,clock:S}),N.trigger({delta:B,elapsed:x,clock:S}),F.trigger({delta:B,elapsed:x,clock:S})},{immediate:!1});F.on(()=>{B=S.getDelta(),x=S.getElapsedTime()});const G=()=>({onBeforeLoop:W.on,onLoop:N.on,onAfterLoop:F.on,pause:le,resume:ue,isActive:ce}),fe=!0,$="[TresJS ▲ ■ ●] ";function L(){function e(r,a){console.error(`${$} ${r}`,a||"")}function n(r){console.warn(`${$} ${r}`)}function t(r,a){}return{logError:e,logWarning:n,logMessage:t}}function me(e){return typeof e=="number"?[e,e,e]:e instanceof _.Vector3?[e.x,e.y,e.z]:e}function q(e){return e instanceof _.Color?e:Array.isArray(e)?new _.Color(...e):new _.Color(e)}const U=(e,n)=>{for(const t of Object.keys(n))n[t]instanceof Object&&Object.assign(n[t],U(e[t],n[t]));return Object.assign(e||{},n),e},de=pe("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 H(e){return e&&e.nodeType===1}function j(e){return e.replace(/-([a-z])/g,(n,t)=>t.toUpperCase())}function pe(e,n){const t=Object.create(null),r=e.split(",");for(let a=0;a<r.length;a++)t[r[a]]=!0;return n?a=>!!t[a.toLowerCase()]:a=>!!t[a]}const ge=(e,n)=>{const t=new Set,r=[];for(const a of e){const o=n(a);t.has(o)||(t.add(o),r.push(a))}return r},J=(e,n)=>{if(!n)return;const t=Array.isArray(n)?n:n.match(/([^[.\]])+/g);return t==null?void 0:t.reduce((r,a)=>r&&r[a],e)},ve=(e,n,t)=>{const r=Array.isArray(n)?n:n.match(/([^[.\]])+/g);r&&r.reduce((a,o,m)=>(a[o]===void 0&&(a[o]={}),m===r.length-1&&(a[o]=t),a[o]),e)};function K(e,n){if(H(e)&&H(n)){const a=e.attributes,o=n.attributes;return a.length!==o.length?!1:Array.from(a).every(({name:m,value:s})=>n.getAttribute(m)===s)}if(e===n)return!0;if(e===null||typeof e!="object"||n===null||typeof n!="object")return!1;const t=Object.keys(e),r=Object.keys(n);if(t.length!==r.length)return!1;for(const a of t)if(!r.includes(a)||!K(e[a],n[a]))return!1;return!0}function ye(e,n){if(!Array.isArray(e)||!Array.isArray(n)||e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!K(e[t],n[t]))return!1;return!0}const we=Number.parseInt(_.REVISION.replace("dev","")),T={realistic:{outputColorSpace:_.SRGBColorSpace,toneMapping:_.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:_.PCFSoftShadowMap}}};function X({scene:e,canvas:n,options:t,disableRender:r,contextParts:{sizes:a,camera:o}}){const m=c.computed(()=>({alpha:y.toValue(t.alpha),depth:y.toValue(t.depth),canvas:y.unrefElement(n),context:y.toValue(t.context),stencil:y.toValue(t.stencil),antialias:y.toValue(t.antialias)===void 0?!0:y.toValue(t.antialias),precision:y.toValue(t.precision),powerPreference:y.toValue(t.powerPreference),premultipliedAlpha:y.toValue(t.premultipliedAlpha),preserveDrawingBuffer:y.toValue(t.preserveDrawingBuffer),logarithmicDepthBuffer:y.toValue(t.logarithmicDepthBuffer),failIfMajorPerformanceCaveat:y.toValue(t.failIfMajorPerformanceCaveat)})),s=c.shallowRef(new _.WebGLRenderer(m.value));c.watch(m,()=>{s.value.dispose(),s.value=new _.WebGLRenderer(m.value)}),c.watchEffect(()=>{s.value.setSize(a.width.value,a.height.value)});const{pixelRatio:f}=y.useDevicePixelRatio();c.watchEffect(()=>{s.value.setPixelRatio(f.value)});const{logError:i}=L(),l=(()=>{const g=new _.WebGLRenderer,b={shadowMap:{enabled:g.shadowMap.enabled,type:g.shadowMap.type},toneMapping:g.toneMapping,toneMappingExposure:g.toneMappingExposure,outputColorSpace:g.outputColorSpace};return g.dispose(),b})();c.watchEffect(()=>{const g=y.toValue(t.preset);g&&(g in T||i(`Renderer Preset must be one of these: ${Object.keys(T).join(", ")}`),U(s.value,T[g]));const b=(A,O)=>{const D=y.toValue(A),z=()=>{if(g)return J(T[g],O)};if(D!==void 0)return D;const w=z();return w!==void 0?w:J(l,O)},M=(A,O)=>ve(s.value,O,b(A,O));M(t.shadows,"shadowMap.enabled"),M(t.toneMapping,"toneMapping"),M(t.shadowMapType,"shadowMap.type"),we<150&&M(!t.useLegacyLights,"physicallyCorrectLights"),M(t.outputColorSpace,"outputColorSpace"),M(t.toneMappingExposure,"toneMappingExposure");const k=b(t.clearColor,"clearColor");k&&s.value.setClearColor(k?q(k):new _.Color(0))});const{pause:u,resume:C,onLoop:P}=G();return P(()=>{o.value&&!y.toValue(r)&&s.value.render(e,o.value)}),C(),c.onUnmounted(()=>{u(),s.value.dispose(),s.value.forceContextLoss()}),{renderer:s}}const Y=e=>typeof e=="function",Q=e=>!!e&&e.constructor===Array;function Z(e){const n={nodes:{},materials:{}};return e&&e.traverse(t=>{t.name&&(n.nodes[t.name]=t),t.material&&!n.materials[t.material.name]&&(n.materials[t.material.name]=t.material)}),n}async function Ce(e,n,t,r,a){const{logError:o}=L(),m=new e;a&&a(m),t&&t(m);const f=(Array.isArray(n)?n:[n]).map(i=>new Promise((d,l)=>{m.load(i,u=>{u.scene&&Object.assign(u,Z(u.scene)),d(u)},r,u=>l(o("[useLoader] - Failed to load resource",u)))}));return Q(n)?await Promise.all(f):await f[0]}async function Pe(e){const n=new _.LoadingManager,t=new _.TextureLoader(n),r=a=>new Promise((o,m)=>{t.load(a,s=>o(s),()=>null,()=>{m(new Error("[useTextures] - Failed to load texture"))})});if(Q(e)){const a=await Promise.all(e.map(o=>r(o)));return e.length>1?a:a[0]}else{const{map:a,displacementMap:o,normalMap:m,roughnessMap:s,metalnessMap:f,aoMap:i,alphaMap:d,matcap:l}=e;return{map:a?await r(a):null,displacementMap:o?await r(o):null,normalMap:m?await r(m):null,roughnessMap:s?await r(s):null,metalnessMap:f?await r(f):null,aoMap:i?await r(i):null,alphaMap:d?await r(d):null,matcap:l?await r(l):null}}}const ee=(e,{renderer:n,camera:t,raycaster:r})=>{const a=c.computed(()=>n.value.domElement),{x:o,y:m}=y.usePointer({target:a}),{width:s,height:f,top:i,left:d}=y.useElementBounding(a),l=({x:w,y:h})=>{if(a.value)return{x:(w-d.value)/s.value*2-1,y:-((h-i.value)/f.value)*2+1}},u=({x:w,y:h})=>{if(t.value)return r.value.setFromCamera(new _.Vector2(w,h),t.value),r.value.intersectObjects(e.value,!1)},C=w=>{const h=l({x:(w==null?void 0:w.clientX)??o.value,y:(w==null?void 0:w.clientY)??m.value});return h?u(h)||[]:[]},P=c.computed(()=>C()),g=y.createEventHook(),b=y.createEventHook(),M=(w,h)=>{w.trigger({event:h,intersects:C(h)})},k=w=>{M(b,w)};let A;const O=w=>{var h;A=(h=C(w)[0])==null?void 0:h.object},D=w=>{var h;w instanceof PointerEvent&&A===((h=C(w)[0])==null?void 0:h.object)&&M(g,w)},z=w=>b.trigger({event:w,intersects:[]});return a.value.addEventListener("pointerup",D),a.value.addEventListener("pointerdown",O),a.value.addEventListener("pointermove",k),a.value.addEventListener("pointerleave",z),c.onUnmounted(()=>{a!=null&&a.value&&(a.value.removeEventListener("pointerup",D),a.value.removeEventListener("pointerdown",O),a.value.removeEventListener("pointermove",k),a.value.removeEventListener("pointerleave",z))}),{intersects:P,onClick:w=>g.on(w).off,onPointerMove:w=>b.on(w).off}};function _e(){const{logWarning:e}=L();function n(r,a,o){let m=null;return r.traverse(s=>{s[a]===o&&(m=s)}),m||e(`Child with ${a} '${o}' not found.`),m}function t(r,a){return n(r,"name",a)}return{seek:n,seekByName:t}}const te=({scene:e,contextParts:n})=>{const t=c.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),r=c.ref(new Set),a=u=>{r.value.add(u)},o=u=>{r.value.delete(u)},m=u=>{Object.values(t).forEach(C=>C.delete(u)),o(u)},s=u=>{const{onClick:C,onPointerMove:P,onPointerEnter:g,onPointerLeave:b}=u;C&&t.click.set(u,C),P&&t.pointerMove.set(u,P),g&&t.pointerEnter.set(u,g),b&&t.pointerLeave.set(u,b)};e.userData.tres__registerAtPointerEventHandler=s,e.userData.tres__deregisterAtPointerEventHandler=m,e.userData.tres__registerBlockingObjectAtPointerEventHandler=a,e.userData.tres__deregisterBlockingObjectAtPointerEventHandler=o;const f=c.computed(()=>ge([...Array.from(r.value),...Object.values(t).map(u=>Array.from(u.keys())).flat()],({uuid:u})=>u)),{onClick:i,onPointerMove:d}=ee(f,n);i(({intersects:u,event:C})=>{var P;u.length&&((P=t.click.get(u[0].object))==null||P(u[0],C))});let l;return d(({intersects:u,event:C})=>{var k,A,O,D;const P=(k=u==null?void 0:u[0])==null?void 0:k.object,{pointerLeave:g,pointerEnter:b,pointerMove:M}=t;l&&l!==P&&((A=g.get(l))==null||A(l,C)),P&&(l!==P&&((O=b.get(P))==null||O(u[0],C)),(D=M.get(P))==null||D(u[0],C)),l=P||null}),{registerObject:s,deregisterObject:m}},E=c.ref({}),V=e=>Object.assign(E.value,e);function re({scene:e,canvas:n,windowSize:t,disableRender:r,rendererOptions:a}){const o=c.computed(()=>y.toValue(t)?y.useWindowSize():y.useElementSize(y.toValue(n).parentElement)),m=c.computed(()=>o.value.width.value),s=c.computed(()=>o.value.height.value),f=c.computed(()=>m.value/s.value),i={height:s,width:m,aspectRatio:f},d=c.shallowRef(e),{camera:l,cameras:u,registerCamera:C,deregisterCamera:P,setCameraActive:g}=I({sizes:i,scene:e}),{renderer:b}=X({scene:e,canvas:n,options:a,contextParts:{sizes:i,camera:l},disableRender:r}),M={sizes:i,scene:d,camera:l,cameras:c.readonly(u),renderer:b,raycaster:c.shallowRef(new _.Raycaster),controls:c.ref(null),extend:V,registerCamera:C,setCameraActive:g,deregisterCamera:P};return c.provide("useTres",M),M}function ne(){const e=c.inject("useTres");if(!e)throw new Error("useTresContext must be used together with useTresContextProvider");return e}const Me=ne;function Se(e){}let R=null,p=null;const{logError:ae}=L(),be={createElement(e,n,t,r){var m,s;if(r||(r={}),r.args||(r.args=[]),e==="template"||de(e))return null;let a=e.replace("Tres",""),o;if(e==="primitive"){(r==null?void 0:r.object)===void 0&&ae("Tres primitives need a prop 'object'");const f=r.object;a=f.type,o=Object.assign(f,{type:a,attach:r.attach,primitive:!0})}else{const f=E.value[a];f||ae(`${a} is not defined on the THREE namespace. Use extend to add it to the catalog.`),o=new f(...r.args)}return o.isCamera&&(r!=null&&r.position||o.position.set(3,3,3),r!=null&&r.lookAt||o.lookAt(0,0,0)),(r==null?void 0:r.attach)===void 0&&(o.isMaterial?o.attach="material":o.isBufferGeometry&&(o.attach="geometry")),o.isObject3D&&((m=r==null?void 0:r.material)!=null&&m.isMaterial&&(o.userData.tres__materialViaProp=!0),(s=r==null?void 0:r.geometry)!=null&&s.isBufferGeometry&&(o.userData.tres__geometryViaProp=!0)),o.userData={...o.userData,tres__name:a},o},insert(e,n){var t,r,a,o,m,s,f,i,d;if(n&&n.isScene&&(p=n),(((t=e==null?void 0:e.__vnode)==null?void 0:t.type)==="TresGroup"||((r=e==null?void 0:e.__vnode)==null?void 0:r.type)==="TresObject3D")&&n===null&&!((o=(a=e==null?void 0:e.__vnode)==null?void 0:a.ctx)!=null&&o.asyncResolved)){R=e;return}else(m=e==null?void 0:e.__vnode)!=null&&m.type.includes("Controls")&&n===null&&(R=p);if(n||(n=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";(f=p==null?void 0:(s=p.userData).tres__registerCamera)==null||f.call(s,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";(d=p==null?void 0:(i=p.userData).tres__registerAtPointerEventHandler)==null||d.call(i,e)}}e!=null&&e.isObject3D&&(n!=null&&n.isObject3D)?(n.add(e),e.dispatchEvent({type:"added"})):e!=null&&e.isFog?n.fog=e:typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[n==null?void 0:n.attach],n&&(n[e.attach]=e))},remove(e){var n,t;if(e){if(e.isObject3D){const r=e,a=i=>{var l,u;const d=i;i.userData.tres__materialViaProp||(l=d.material)==null||l.dispose(),i.userData.tres__geometryViaProp||(u=d.geometry)==null||u.dispose()},o=p==null?void 0:p.userData.tres__deregisterAtPointerEventHandler,m=p==null?void 0:p.userData.tres__deregisterBlockingObjectAtPointerEventHandler,s=i=>{var d,l;if(!m)throw"could not find tres__deregisterBlockingObjectAtPointerEventHandler on scene's userData";if((l=p==null?void 0:(d=p.userData).tres__deregisterBlockingObjectAtPointerEventHandler)==null||l.call(d,i),!o)throw"could not find tres__deregisterAtPointerEventHandler on scene's userData";(i!=null&&i.onClick||i!=null&&i.onPointerMove||i!=null&&i.onPointerEnter||i!=null&&i.onPointerLeave)&&(o==null||o(i))},f=i=>{const d=p==null?void 0:p.userData.tres__deregisterCamera;if(!d)throw"could not find tres__deregisterCamera on scene's userData";i.isCamera&&(d==null||d(i))};r.traverse(i=>{a(i),f(i),s==null||s(i)}),a(r),f(r),s==null||s(r)}(n=e.removeFromParent)==null||n.call(e),(t=e.dispose)==null||t.call(e)}},patchProp(e,n,t,r){var a,o,m,s;if(e){let f=e,i=n;if(e.isObject3D&&i==="blocks-pointer-events"){r||r===""?(o=p==null?void 0:(a=p.userData).tres__registerBlockingObjectAtPointerEventHandler)==null||o.call(a,e):(s=p==null?void 0:(m=p.userData).tres__deregisterBlockingObjectAtPointerEventHandler)==null||s.call(m,e);return}let d=j(i),l=f==null?void 0:f[d];if(i==="args"){const C=e,P=t??[],g=r??[],b=e.userData.tres__name||e.type;b&&P.length&&!ye(P,g)&&(f=Object.assign(C,new E.value[b](...r)));return}if(f.type==="BufferGeometry"){if(i==="args")return;f.setAttribute(j(i),new _.BufferAttribute(...r));return}if(i.includes("-")&&l===void 0){const C=i.split("-");l=C.reduce((P,g)=>P[j(g)],f),i=C.pop(),d=i.toLowerCase(),l!=null&&l.set||(f=C.reduce((P,g)=>P[j(g)],f))}let u=r;if(u===""&&(u=!0),Y(l)){Array.isArray(u)?e[d](...u):e[d](u);return}!(l!=null&&l.set)&&!Y(l)?f[d]=u:l.constructor===u.constructor&&(l!=null&&l.copy)?l==null||l.copy(u):Array.isArray(u)?l.set(...u):!l.isColor&&l.setScalar?l.setScalar(u):l.set(u)}},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},{render:ke}=c.createRenderer(be);V(ie);const he=["data-scene"],oe=c.defineComponent({__name:"TresCanvas",props:{shadows:{type:Boolean,default:void 0},clearColor:{},toneMapping:{},shadowMapType:{},useLegacyLights:{type:Boolean,default:void 0},outputColorSpace:{},toneMappingExposure:{},camera:{},preset:{},windowSize:{type:Boolean,default:void 0},disableRender:{type:Boolean,default:void 0},context:{},precision:{},alpha:{type:Boolean,default:void 0},premultipliedAlpha:{type:Boolean},antialias:{type:Boolean,default:void 0},stencil:{type:Boolean,default:void 0},preserveDrawingBuffer:{type:Boolean,default:void 0},powerPreference:{},depth:{type:Boolean,default:void 0},logarithmicDepthBuffer:{type:Boolean,default:void 0},failIfMajorPerformanceCaveat:{type:Boolean,default:void 0}},setup(e){const n=e,{logWarning:t}=L(),r=c.ref(),a=c.shallowRef(new _.Scene);G();const o=c.useSlots(),m=c.getCurrentInstance(),s=d=>c.defineComponent({setup(){const l=c.getCurrentInstance();return Object.assign(l.appContext.app,m.appContext.app),Object.assign(l.provides,l.appContext.provides),c.provide("useTres",d),c.provide("extend",V),()=>c.h(c.Fragment,null,o!=null&&o.default?o.default():[])}}),f=d=>{const l=s(d);ke(c.h(l),a.value)},i=c.computed(()=>n.disableRender);return c.onMounted(()=>{const d=r,l=re({scene:a.value,canvas:d,windowSize:n.windowSize,disableRender:i,rendererOptions:n});te({scene:a.value,contextParts:l});const{registerCamera:u,camera:C,cameras:P,deregisterCamera:g}=l;f(l);const b=()=>{const M=new _.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);M.position.set(3,3,3),M.lookAt(0,0,0),u(M);const k=c.watchEffect(()=>{P.value.length>=2&&(M.removeFromParent(),g(M),k==null||k())})};c.watch(()=>n.camera,(M,k)=>{M?u(M):k&&(k.removeFromParent(),g(k))},{immediate:!0}),C.value||(t("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."),b())}),(d,l)=>(c.openBlock(),c.createElementBlock("canvas",{ref_key:"canvas",ref:r,"data-scene":a.value.uuid,style:c.normalizeStyle({display:"block",width:"100%",height:"100%",position:d.windowSize?"fixed":"relative",top:0,left:0,pointerEvents:"auto",touchAction:"none"})},null,12,he))}}),Oe=["TresCanvas","TresLeches","TresScene"],Ae={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!Oe.includes(e)||e==="primitive"}}},De={install(e){e.component("TresCanvas",oe)}};v.TresCanvas=oe,v.catalogue=E,v.default=De,v.extend=V,v.isProd=fe,v.normalizeColor=q,v.normalizeVectorFlexibleParam=me,v.templateCompilerOptions=Ae,v.trasverseObjects=Z,v.useCamera=I,v.useLoader=Ce,v.useLogger=L,v.usePointerEventHandler=te,v.useRaycaster=ee,v.useRenderLoop=G,v.useRenderer=X,v.useSeek=_e,v.useTexture=Pe,v.useTres=Me,v.useTresContext=ne,v.useTresContextProvider=re,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
8
|
+
(function(y,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):(y=typeof globalThis<"u"?globalThis:y||self,c(y.tres={},y.Vue,y.Three,y.VueUseCore))})(this,function(y,c,_,w){"use strict";function se(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const ie=se(_),I=({sizes:e,scene:n})=>{const t=c.ref([]),r=c.computed(()=>t.value[0]),a=(i,f=!1)=>{t.value.some(({uuid:l})=>l===i.uuid)||(f?m(i):t.value.push(i))},o=i=>{t.value=t.value.filter(({uuid:f})=>f!==i.uuid)},m=i=>{const f=i instanceof _.Camera?i:t.value.find(d=>d.uuid===i);if(!f)return;const l=t.value.filter(({uuid:d})=>d!==f.uuid);t.value=[f,...l]};return c.watchEffect(()=>{e.aspectRatio.value&&t.value.forEach(i=>{i instanceof _.PerspectiveCamera&&(i.aspect=e.aspectRatio.value),(i instanceof _.PerspectiveCamera||i instanceof _.OrthographicCamera)&&i.updateProjectionMatrix()})}),n.userData.tres__registerCamera=a,n.userData.tres__deregisterCamera=o,c.onUnmounted(()=>{t.value=[]}),{camera:r,cameras:t,registerCamera:a,deregisterCamera:o,setCameraActive:m}},W=w.createEventHook(),N=w.createEventHook(),F=w.createEventHook(),S=new _.Clock;let B=0,x=0;const{pause:le,resume:ue,isActive:ce}=w.useRafFn(()=>{W.trigger({delta:B,elapsed:x,clock:S}),N.trigger({delta:B,elapsed:x,clock:S}),F.trigger({delta:B,elapsed:x,clock:S})},{immediate:!1});F.on(()=>{B=S.getDelta(),x=S.getElapsedTime()});const G=()=>({onBeforeLoop:W.on,onLoop:N.on,onAfterLoop:F.on,pause:le,resume:ue,isActive:ce}),fe=!0,$="[TresJS ▲ ■ ●] ";function L(){function e(r,a){console.error(`${$} ${r}`,a||"")}function n(r){console.warn(`${$} ${r}`)}function t(r,a){}return{logError:e,logWarning:n,logMessage:t}}function me(e){return typeof e=="number"?[e,e,e]:e instanceof _.Vector3?[e.x,e.y,e.z]:e}function q(e){return e instanceof _.Color?e:Array.isArray(e)?new _.Color(...e):new _.Color(e)}const U=(e,n)=>{for(const t of Object.keys(n))n[t]instanceof Object&&Object.assign(n[t],U(e[t],n[t]));return Object.assign(e||{},n),e},de=pe("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 H(e){return e&&e.nodeType===1}function j(e){return e.replace(/-([a-z])/g,(n,t)=>t.toUpperCase())}function pe(e,n){const t=Object.create(null),r=e.split(",");for(let a=0;a<r.length;a++)t[r[a]]=!0;return n?a=>!!t[a.toLowerCase()]:a=>!!t[a]}const ge=(e,n)=>{const t=new Set,r=[];for(const a of e){const o=n(a);t.has(o)||(t.add(o),r.push(a))}return r},J=(e,n)=>{if(!n)return;const t=Array.isArray(n)?n:n.match(/([^[.\]])+/g);return t==null?void 0:t.reduce((r,a)=>r&&r[a],e)},ve=(e,n,t)=>{const r=Array.isArray(n)?n:n.match(/([^[.\]])+/g);r&&r.reduce((a,o,m)=>(a[o]===void 0&&(a[o]={}),m===r.length-1&&(a[o]=t),a[o]),e)};function K(e,n){if(H(e)&&H(n)){const a=e.attributes,o=n.attributes;return a.length!==o.length?!1:Array.from(a).every(({name:m,value:i})=>n.getAttribute(m)===i)}if(e===n)return!0;if(e===null||typeof e!="object"||n===null||typeof n!="object")return!1;const t=Object.keys(e),r=Object.keys(n);if(t.length!==r.length)return!1;for(const a of t)if(!r.includes(a)||!K(e[a],n[a]))return!1;return!0}function ye(e,n){if(!Array.isArray(e)||!Array.isArray(n)||e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!K(e[t],n[t]))return!1;return!0}const we=Number.parseInt(_.REVISION.replace("dev","")),T={realistic:{outputColorSpace:_.SRGBColorSpace,toneMapping:_.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:_.PCFSoftShadowMap}}};function X({scene:e,canvas:n,options:t,disableRender:r,contextParts:{sizes:a,camera:o}}){const m=c.computed(()=>({alpha:w.toValue(t.alpha),depth:w.toValue(t.depth),canvas:w.unrefElement(n),context:w.toValue(t.context),stencil:w.toValue(t.stencil),antialias:w.toValue(t.antialias)===void 0?!0:w.toValue(t.antialias),precision:w.toValue(t.precision),powerPreference:w.toValue(t.powerPreference),premultipliedAlpha:w.toValue(t.premultipliedAlpha),preserveDrawingBuffer:w.toValue(t.preserveDrawingBuffer),logarithmicDepthBuffer:w.toValue(t.logarithmicDepthBuffer),failIfMajorPerformanceCaveat:w.toValue(t.failIfMajorPerformanceCaveat)})),i=c.shallowRef(new _.WebGLRenderer(m.value));c.watch(m,()=>{i.value.dispose(),i.value=new _.WebGLRenderer(m.value)}),c.watchEffect(()=>{i.value.setSize(a.width.value,a.height.value)});const{pixelRatio:f}=w.useDevicePixelRatio();c.watchEffect(()=>{i.value.setPixelRatio(f.value)});const{logError:l}=L(),u=(()=>{const v=new _.WebGLRenderer,M={shadowMap:{enabled:v.shadowMap.enabled,type:v.shadowMap.type},toneMapping:v.toneMapping,toneMappingExposure:v.toneMappingExposure,outputColorSpace:v.outputColorSpace};return v.dispose(),M})();c.watchEffect(()=>{const v=w.toValue(t.preset);v&&(v in T||l(`Renderer Preset must be one of these: ${Object.keys(T).join(", ")}`),U(i.value,T[v]));const M=(k,O)=>{const D=w.toValue(k),z=()=>{if(v)return J(T[v],O)};if(D!==void 0)return D;const C=z();return C!==void 0?C:J(u,O)},h=(k,O)=>ve(i.value,O,M(k,O));h(t.shadows,"shadowMap.enabled"),h(t.toneMapping,"toneMapping"),h(t.shadowMapType,"shadowMap.type"),we<150&&h(!t.useLegacyLights,"physicallyCorrectLights"),h(t.outputColorSpace,"outputColorSpace"),h(t.toneMappingExposure,"toneMappingExposure");const b=M(t.clearColor,"clearColor");b&&i.value.setClearColor(b?q(b):new _.Color(0))});const{pause:s,resume:g,onLoop:P}=G();return P(()=>{o.value&&!w.toValue(r)&&i.value.render(e,o.value)}),g(),c.onUnmounted(()=>{s(),i.value.dispose(),i.value.forceContextLoss()}),{renderer:i}}const Y=e=>typeof e=="function",Q=e=>!!e&&e.constructor===Array;function Z(e){const n={nodes:{},materials:{}};return e&&e.traverse(t=>{t.name&&(n.nodes[t.name]=t),t.material&&!n.materials[t.material.name]&&(n.materials[t.material.name]=t.material)}),n}async function Ce(e,n,t,r,a){const{logError:o}=L(),m=new e;a&&a(m),t&&t(m);const f=(Array.isArray(n)?n:[n]).map(l=>new Promise((d,u)=>{m.load(l,s=>{s.scene&&Object.assign(s,Z(s.scene)),d(s)},r,s=>u(o("[useLoader] - Failed to load resource",s)))}));return Q(n)?await Promise.all(f):await f[0]}async function Pe(e){const n=new _.LoadingManager,t=new _.TextureLoader(n),r=a=>new Promise((o,m)=>{t.load(a,i=>o(i),()=>null,()=>{m(new Error("[useTextures] - Failed to load texture"))})});if(Q(e)){const a=await Promise.all(e.map(o=>r(o)));return e.length>1?a:a[0]}else{const{map:a,displacementMap:o,normalMap:m,roughnessMap:i,metalnessMap:f,aoMap:l,alphaMap:d,matcap:u}=e;return{map:a?await r(a):null,displacementMap:o?await r(o):null,normalMap:m?await r(m):null,roughnessMap:i?await r(i):null,metalnessMap:f?await r(f):null,aoMap:l?await r(l):null,alphaMap:d?await r(d):null,matcap:u?await r(u):null}}}const ee=(e,{renderer:n,camera:t,raycaster:r})=>{const a=c.computed(()=>n.value.domElement),{x:o,y:m}=w.usePointer({target:a}),{width:i,height:f,top:l,left:d}=w.useElementBounding(a),u=({x:C,y:A})=>{if(a.value)return{x:(C-d.value)/i.value*2-1,y:-((A-l.value)/f.value)*2+1}},s=({x:C,y:A})=>{if(t.value)return r.value.setFromCamera(new _.Vector2(C,A),t.value),r.value.intersectObjects(e.value,!1)},g=C=>{const A=u({x:(C==null?void 0:C.clientX)??o.value,y:(C==null?void 0:C.clientY)??m.value});return A?s(A)||[]:[]},P=c.computed(()=>g()),v=w.createEventHook(),M=w.createEventHook(),h=(C,A)=>{C.trigger({event:A,intersects:g(A)})},b=C=>{h(M,C)};let k;const O=C=>{var A;k=(A=g(C)[0])==null?void 0:A.object},D=C=>{var A;C instanceof PointerEvent&&k===((A=g(C)[0])==null?void 0:A.object)&&h(v,C)},z=C=>M.trigger({event:C,intersects:[]});return a.value.addEventListener("pointerup",D),a.value.addEventListener("pointerdown",O),a.value.addEventListener("pointermove",b),a.value.addEventListener("pointerleave",z),c.onUnmounted(()=>{a!=null&&a.value&&(a.value.removeEventListener("pointerup",D),a.value.removeEventListener("pointerdown",O),a.value.removeEventListener("pointermove",b),a.value.removeEventListener("pointerleave",z))}),{intersects:P,onClick:C=>v.on(C).off,onPointerMove:C=>M.on(C).off}};function _e(){const{logWarning:e}=L();function n(r,a,o){let m=null;return r.traverse(i=>{i[a]===o&&(m=i)}),m||e(`Child with ${a} '${o}' not found.`),m}function t(r,a){return n(r,"name",a)}return{seek:n,seekByName:t}}const te=({scene:e,contextParts:n})=>{const t=c.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),r=c.ref(new Set),a=s=>{r.value.add(s)},o=s=>{r.value.delete(s)},m=s=>{Object.values(t).forEach(g=>g.delete(s)),o(s)},i=s=>{const{onClick:g,onPointerMove:P,onPointerEnter:v,onPointerLeave:M}=s;g&&t.click.set(s,g),P&&t.pointerMove.set(s,P),v&&t.pointerEnter.set(s,v),M&&t.pointerLeave.set(s,M)};e.userData.tres__registerAtPointerEventHandler=i,e.userData.tres__deregisterAtPointerEventHandler=m,e.userData.tres__registerBlockingObjectAtPointerEventHandler=a,e.userData.tres__deregisterBlockingObjectAtPointerEventHandler=o;const f=c.computed(()=>ge([...Array.from(r.value),...Object.values(t).map(s=>Array.from(s.keys())).flat()],({uuid:s})=>s)),{onClick:l,onPointerMove:d}=ee(f,n);l(({intersects:s,event:g})=>{var P;s.length&&((P=t.click.get(s[0].object))==null||P(s[0],g))});let u;return d(({intersects:s,event:g})=>{var b,k,O,D;const P=(b=s==null?void 0:s[0])==null?void 0:b.object,{pointerLeave:v,pointerEnter:M,pointerMove:h}=t;u&&u!==P&&((k=v.get(u))==null||k(u,g)),P&&(u!==P&&((O=M.get(P))==null||O(s[0],g)),(D=h.get(P))==null||D(s[0],g)),u=P||null}),{registerObject:i,deregisterObject:m}},E=c.ref({}),V=e=>Object.assign(E.value,e);function re({scene:e,canvas:n,windowSize:t,disableRender:r,rendererOptions:a}){const o=c.computed(()=>w.toValue(t)?w.useWindowSize():w.useElementSize(w.toValue(n).parentElement)),m=c.computed(()=>o.value.width.value),i=c.computed(()=>o.value.height.value),f=c.computed(()=>m.value/i.value),l={height:i,width:m,aspectRatio:f},d=c.shallowRef(e),{camera:u,cameras:s,registerCamera:g,deregisterCamera:P,setCameraActive:v}=I({sizes:l,scene:e}),{renderer:M}=X({scene:e,canvas:n,options:a,contextParts:{sizes:l,camera:u},disableRender:r}),h={sizes:l,scene:d,camera:u,cameras:c.readonly(s),renderer:M,raycaster:c.shallowRef(new _.Raycaster),controls:c.ref(null),extend:V,registerCamera:g,setCameraActive:v,deregisterCamera:P};return c.provide("useTres",h),h}function ne(){const e=c.inject("useTres");if(!e)throw new Error("useTresContext must be used together with useTresContextProvider");return e}const Me=ne;function Se(e){}let R=null,p=null;const{logError:ae}=L(),be={createElement(e,n,t,r){var m,i;if(r||(r={}),r.args||(r.args=[]),e==="template"||de(e))return null;let a=e.replace("Tres",""),o;if(e==="primitive"){(r==null?void 0:r.object)===void 0&&ae("Tres primitives need a prop 'object'");const f=r.object;a=f.type,o=Object.assign(f,{type:a,attach:r.attach,primitive:!0})}else{const f=E.value[a];f||ae(`${a} is not defined on the THREE namespace. Use extend to add it to the catalog.`),o=new f(...r.args)}return o.isCamera&&(r!=null&&r.position||o.position.set(3,3,3),r!=null&&r.lookAt||o.lookAt(0,0,0)),(r==null?void 0:r.attach)===void 0&&(o.isMaterial?o.attach="material":o.isBufferGeometry&&(o.attach="geometry")),o.isObject3D&&((m=r==null?void 0:r.material)!=null&&m.isMaterial&&(o.userData.tres__materialViaProp=!0),(i=r==null?void 0:r.geometry)!=null&&i.isBufferGeometry&&(o.userData.tres__geometryViaProp=!0)),o.userData={...o.userData,tres__name:a},o},insert(e,n){var t,r,a,o,m,i,f,l,d;if(n&&n.isScene&&(p=n),(((t=e==null?void 0:e.__vnode)==null?void 0:t.type)==="TresGroup"||((r=e==null?void 0:e.__vnode)==null?void 0:r.type)==="TresObject3D")&&n===null&&!((o=(a=e==null?void 0:e.__vnode)==null?void 0:a.ctx)!=null&&o.asyncResolved)){R=e;return}else(m=e==null?void 0:e.__vnode)!=null&&m.type.includes("Controls")&&n===null&&(R=p);if(n||(n=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";(f=p==null?void 0:(i=p.userData).tres__registerCamera)==null||f.call(i,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";(d=p==null?void 0:(l=p.userData).tres__registerAtPointerEventHandler)==null||d.call(l,e)}}e!=null&&e.isObject3D&&(n!=null&&n.isObject3D)?(n.add(e),e.dispatchEvent({type:"added"})):e!=null&&e.isFog?n.fog=e:typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[n==null?void 0:n.attach],n&&(n[e.attach]=e))},remove(e){var n,t;if(e){if(e.isObject3D){const r=e,a=l=>{var u,s;const d=l;l.userData.tres__materialViaProp||(u=d.material)==null||u.dispose(),l.userData.tres__geometryViaProp||(s=d.geometry)==null||s.dispose()},o=p==null?void 0:p.userData.tres__deregisterAtPointerEventHandler,m=p==null?void 0:p.userData.tres__deregisterBlockingObjectAtPointerEventHandler,i=l=>{var d,u;if(!m)throw"could not find tres__deregisterBlockingObjectAtPointerEventHandler on scene's userData";if((u=p==null?void 0:(d=p.userData).tres__deregisterBlockingObjectAtPointerEventHandler)==null||u.call(d,l),!o)throw"could not find tres__deregisterAtPointerEventHandler on scene's userData";(l!=null&&l.onClick||l!=null&&l.onPointerMove||l!=null&&l.onPointerEnter||l!=null&&l.onPointerLeave)&&(o==null||o(l))},f=l=>{const d=p==null?void 0:p.userData.tres__deregisterCamera;if(!d)throw"could not find tres__deregisterCamera on scene's userData";l.isCamera&&(d==null||d(l))};r.traverse(l=>{a(l),f(l),i==null||i(l)}),a(r),f(r),i==null||i(r)}(n=e.removeFromParent)==null||n.call(e),(t=e.dispose)==null||t.call(e)}},patchProp(e,n,t,r){var a,o,m,i;if(e){let f=e,l=n;if(e.isObject3D&&l==="blocks-pointer-events"){r||r===""?(o=p==null?void 0:(a=p.userData).tres__registerBlockingObjectAtPointerEventHandler)==null||o.call(a,e):(i=p==null?void 0:(m=p.userData).tres__deregisterBlockingObjectAtPointerEventHandler)==null||i.call(m,e);return}let d=j(l),u=f==null?void 0:f[d];if(l==="args"){const g=e,P=t??[],v=r??[],M=e.userData.tres__name||e.type;M&&P.length&&!ye(P,v)&&(f=Object.assign(g,new E.value[M](...r)));return}if(f.type==="BufferGeometry"){if(l==="args")return;f.setAttribute(j(l),new _.BufferAttribute(...r));return}if(l.includes("-")&&u===void 0){const g=l.split("-");u=g.reduce((P,v)=>P[j(v)],f),l=g.pop(),d=l.toLowerCase(),u!=null&&u.set||(f=g.reduce((P,v)=>P[j(v)],f))}let s=r;if(s===""&&(s=!0),Y(u)){Array.isArray(s)?e[d](...s):e[d](s);return}!(u!=null&&u.set)&&!Y(u)?f[d]=s:u.constructor===s.constructor&&(u!=null&&u.copy)?u==null||u.copy(s):Array.isArray(s)?u.set(...s):!u.isColor&&u.setScalar?u.setScalar(s):u.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},{render:ke}=c.createRenderer(be);V(ie);const he=["data-scene"],oe=c.defineComponent({__name:"TresCanvas",props:{shadows:{type:Boolean,default:void 0},clearColor:{},toneMapping:{},shadowMapType:{},useLegacyLights:{type:Boolean,default:void 0},outputColorSpace:{},toneMappingExposure:{},camera:{},preset:{},windowSize:{type:Boolean,default:void 0},disableRender:{type:Boolean,default:void 0},context:{},precision:{},alpha:{type:Boolean,default:void 0},premultipliedAlpha:{type:Boolean},antialias:{type:Boolean,default:void 0},stencil:{type:Boolean,default:void 0},preserveDrawingBuffer:{type:Boolean,default:void 0},powerPreference:{},depth:{type:Boolean,default:void 0},logarithmicDepthBuffer:{type:Boolean,default:void 0},failIfMajorPerformanceCaveat:{type:Boolean,default:void 0}},setup(e){var d;const n=e,{logWarning:t}=L(),r=c.ref(),a=c.shallowRef(new _.Scene);G();const o=c.useSlots(),m=(d=c.getCurrentInstance())==null?void 0:d.appContext.app,i=u=>c.defineComponent({setup(){var g;const s=(g=c.getCurrentInstance())==null?void 0:g.appContext;return s&&(s.app=m),c.provide("useTres",u),c.provide("extend",V),()=>c.h(c.Fragment,null,o!=null&&o.default?o.default():[])}}),f=u=>{const s=i(u);ke(c.h(s),a.value)},l=c.computed(()=>n.disableRender);return c.onMounted(()=>{const u=r,s=re({scene:a.value,canvas:u,windowSize:n.windowSize,disableRender:l,rendererOptions:n});te({scene:a.value,contextParts:s});const{registerCamera:g,camera:P,cameras:v,deregisterCamera:M}=s;f(s);const h=()=>{const b=new _.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);b.position.set(3,3,3),b.lookAt(0,0,0),g(b);const k=c.watchEffect(()=>{v.value.length>=2&&(b.removeFromParent(),M(b),k==null||k())})};c.watch(()=>n.camera,(b,k)=>{b?g(b):k&&(k.removeFromParent(),M(k))},{immediate:!0}),P.value||(t("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."),h())}),(u,s)=>(c.openBlock(),c.createElementBlock("canvas",{ref_key:"canvas",ref:r,"data-scene":a.value.uuid,style:c.normalizeStyle({display:"block",width:"100%",height:"100%",position:u.windowSize?"fixed":"relative",top:0,left:0,pointerEvents:"auto",touchAction:"none"})},null,12,he))}}),Ae=["TresCanvas","TresLeches","TresScene"],Oe={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!Ae.includes(e)||e==="primitive"}}},De={install(e){e.component("TresCanvas",oe)}};y.TresCanvas=oe,y.catalogue=E,y.default=De,y.extend=V,y.isProd=fe,y.normalizeColor=q,y.normalizeVectorFlexibleParam=me,y.templateCompilerOptions=Oe,y.trasverseObjects=Z,y.useCamera=I,y.useLoader=Ce,y.useLogger=L,y.usePointerEventHandler=te,y.useRaycaster=ee,y.useRenderLoop=G,y.useRenderer=X,y.useSeek=_e,y.useTexture=Pe,y.useTres=Me,y.useTresContext=ne,y.useTresContextProvider=re,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tresjs/core",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "3.2.1-next.
|
|
4
|
+
"version": "3.2.1-next.4",
|
|
5
5
|
"packageManager": "pnpm@8.3.1",
|
|
6
6
|
"description": "Declarative ThreeJS using Vue Components",
|
|
7
7
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|