@tresjs/core 3.3.0 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tres.js +76 -75
- package/dist/tres.umd.cjs +2 -2
- package/package.json +4 -3
package/dist/tres.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v3.
|
|
3
|
+
* version: v3.4.0
|
|
4
4
|
* (c) 2023
|
|
5
5
|
* description: Declarative ThreeJS using Vue Components
|
|
6
6
|
* author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
|
|
7
7
|
*/
|
|
8
|
-
import { ref as B, computed as A, watchEffect as D, onUnmounted as W, shallowRef as x, watch as ee, reactive as se, readonly as ie, provide as
|
|
8
|
+
import { ref as B, computed as A, watchEffect as D, onUnmounted as W, shallowRef as x, watch as ee, reactive as se, readonly as ie, provide as $, inject as le, createRenderer as ue, defineComponent as q, useSlots as ce, getCurrentInstance as U, onMounted as fe, openBlock as pe, createElementBlock as me, mergeProps as de, h as J, Fragment as ve } from "vue";
|
|
9
9
|
import * as ge from "three";
|
|
10
|
-
import { PerspectiveCamera as
|
|
11
|
-
import { createEventHook as L, useRafFn as Be, toValue as
|
|
10
|
+
import { PerspectiveCamera as I, OrthographicCamera as ye, Camera as we, Clock as Ce, Vector3 as Pe, Color as H, REVISION as he, SRGBColorSpace as _e, ACESFilmicToneMapping as Ee, PCFSoftShadowMap as Me, WebGLRenderer as z, LoadingManager as Ae, TextureLoader as ke, Vector2 as De, Raycaster as be, BufferAttribute as xe, Scene as Le } from "three";
|
|
11
|
+
import { createEventHook as L, useRafFn as Be, toValue as _, unrefElement as Oe, useDevicePixelRatio as Te, usePointer as Se, useElementBounding as Re, useWindowSize as He, useElementSize as je } from "@vueuse/core";
|
|
12
12
|
const Fe = ({ sizes: e, scene: a }) => {
|
|
13
13
|
const t = B([]), r = A(
|
|
14
14
|
() => t.value[0]
|
|
@@ -25,7 +25,7 @@ const Fe = ({ sizes: e, scene: a }) => {
|
|
|
25
25
|
};
|
|
26
26
|
return D(() => {
|
|
27
27
|
e.aspectRatio.value && t.value.forEach((s) => {
|
|
28
|
-
s instanceof
|
|
28
|
+
s instanceof I && (s.aspect = e.aspectRatio.value), (s instanceof I || s instanceof ye) && s.updateProjectionMatrix();
|
|
29
29
|
});
|
|
30
30
|
}), a.userData.tres__registerCamera = n, a.userData.tres__deregisterCamera = o, W(() => {
|
|
31
31
|
t.value = [];
|
|
@@ -38,7 +38,7 @@ const Fe = ({ sizes: e, scene: a }) => {
|
|
|
38
38
|
};
|
|
39
39
|
}, te = L(), re = L(), N = L(), b = new Ce();
|
|
40
40
|
let j = 0, F = 0;
|
|
41
|
-
const { pause: ze, resume:
|
|
41
|
+
const { pause: ze, resume: $e, isActive: Ie } = Be(
|
|
42
42
|
() => {
|
|
43
43
|
te.trigger({ delta: j, elapsed: F, clock: b }), re.trigger({ delta: j, elapsed: F, clock: b }), N.trigger({ delta: j, elapsed: F, clock: b });
|
|
44
44
|
},
|
|
@@ -52,8 +52,8 @@ const ne = () => ({
|
|
|
52
52
|
onLoop: re.on,
|
|
53
53
|
onAfterLoop: N.on,
|
|
54
54
|
pause: ze,
|
|
55
|
-
resume:
|
|
56
|
-
isActive:
|
|
55
|
+
resume: $e,
|
|
56
|
+
isActive: Ie
|
|
57
57
|
}), mt = !0, K = "[TresJS ▲ ■ ●] ";
|
|
58
58
|
function O() {
|
|
59
59
|
function e(r, n) {
|
|
@@ -134,11 +134,11 @@ function Je(e, a) {
|
|
|
134
134
|
return !1;
|
|
135
135
|
return !0;
|
|
136
136
|
}
|
|
137
|
-
const Ke = Array.isArray, Xe = Number.parseInt(
|
|
137
|
+
const Ke = Array.isArray, Xe = Number.parseInt(he.replace("dev", "")), R = {
|
|
138
138
|
realistic: {
|
|
139
139
|
shadows: !0,
|
|
140
140
|
physicallyCorrectLights: !0,
|
|
141
|
-
outputColorSpace:
|
|
141
|
+
outputColorSpace: _e,
|
|
142
142
|
toneMapping: Ee,
|
|
143
143
|
toneMappingExposure: 3,
|
|
144
144
|
shadowMap: {
|
|
@@ -155,18 +155,18 @@ function Ye({
|
|
|
155
155
|
contextParts: { sizes: n, camera: o }
|
|
156
156
|
}) {
|
|
157
157
|
const c = A(() => ({
|
|
158
|
-
alpha:
|
|
159
|
-
depth:
|
|
158
|
+
alpha: _(t.alpha),
|
|
159
|
+
depth: _(t.depth),
|
|
160
160
|
canvas: Oe(a),
|
|
161
|
-
context:
|
|
162
|
-
stencil:
|
|
163
|
-
antialias:
|
|
164
|
-
precision:
|
|
165
|
-
powerPreference:
|
|
166
|
-
premultipliedAlpha:
|
|
167
|
-
preserveDrawingBuffer:
|
|
168
|
-
logarithmicDepthBuffer:
|
|
169
|
-
failIfMajorPerformanceCaveat:
|
|
161
|
+
context: _(t.context),
|
|
162
|
+
stencil: _(t.stencil),
|
|
163
|
+
antialias: _(t.antialias) === void 0 ? !0 : _(t.antialias),
|
|
164
|
+
precision: _(t.precision),
|
|
165
|
+
powerPreference: _(t.powerPreference),
|
|
166
|
+
premultipliedAlpha: _(t.premultipliedAlpha),
|
|
167
|
+
preserveDrawingBuffer: _(t.preserveDrawingBuffer),
|
|
168
|
+
logarithmicDepthBuffer: _(t.logarithmicDepthBuffer),
|
|
169
|
+
failIfMajorPerformanceCaveat: _(t.failIfMajorPerformanceCaveat)
|
|
170
170
|
})), s = x(new z(c.value));
|
|
171
171
|
ee(c, () => {
|
|
172
172
|
s.value.dispose(), s.value = new z(c.value);
|
|
@@ -190,10 +190,10 @@ function Ye({
|
|
|
190
190
|
return v.dispose(), w;
|
|
191
191
|
})();
|
|
192
192
|
D(() => {
|
|
193
|
-
const v =
|
|
193
|
+
const v = _(t.preset);
|
|
194
194
|
v && (v in R || l(`Renderer Preset must be one of these: ${Object.keys(R).join(", ")}`), ae(s.value, R[v]));
|
|
195
195
|
const w = (P, C) => {
|
|
196
|
-
const k =
|
|
196
|
+
const k = _(P), T = () => {
|
|
197
197
|
if (v)
|
|
198
198
|
return Y(R[v], C);
|
|
199
199
|
};
|
|
@@ -201,18 +201,18 @@ function Ye({
|
|
|
201
201
|
return k;
|
|
202
202
|
const y = T();
|
|
203
203
|
return y !== void 0 ? y : Y(u, C);
|
|
204
|
-
},
|
|
205
|
-
|
|
204
|
+
}, h = (P, C) => Ue(s.value, C, w(P, C));
|
|
205
|
+
h(t.shadows, "shadowMap.enabled"), h(t.toneMapping, "toneMapping"), h(t.shadowMapType, "shadowMap.type"), Xe < 150 && h(!t.useLegacyLights, "physicallyCorrectLights"), h(t.outputColorSpace, "outputColorSpace"), h(t.toneMappingExposure, "toneMappingExposure");
|
|
206
206
|
const M = w(t.clearColor, "clearColor");
|
|
207
207
|
M && s.value.setClearColor(
|
|
208
208
|
M ? Ge(M) : new H(0)
|
|
209
209
|
// default clear color is not easily/efficiently retrievable from three
|
|
210
210
|
);
|
|
211
211
|
});
|
|
212
|
-
const { pause: i, resume:
|
|
213
|
-
return
|
|
214
|
-
o.value && !
|
|
215
|
-
}),
|
|
212
|
+
const { pause: i, resume: m, onLoop: d } = ne();
|
|
213
|
+
return d(() => {
|
|
214
|
+
o.value && !_(r) && s.value.render(e, o.value);
|
|
215
|
+
}), m(), W(() => {
|
|
216
216
|
i(), s.value.dispose(), s.value.forceContextLoss();
|
|
217
217
|
}), {
|
|
218
218
|
renderer: s
|
|
@@ -289,29 +289,29 @@ const et = (e, { renderer: a, camera: t, raycaster: r }) => {
|
|
|
289
289
|
}, i = ({ x: y, y: E }) => {
|
|
290
290
|
if (t.value)
|
|
291
291
|
return r.value.setFromCamera(new De(y, E), t.value), r.value.intersectObjects(e.value, !1);
|
|
292
|
-
},
|
|
292
|
+
}, m = (y) => {
|
|
293
293
|
const E = u({
|
|
294
294
|
x: (y == null ? void 0 : y.clientX) ?? o.value,
|
|
295
295
|
y: (y == null ? void 0 : y.clientY) ?? c.value
|
|
296
296
|
});
|
|
297
297
|
return E ? i(E) || [] : [];
|
|
298
|
-
},
|
|
299
|
-
y.trigger({ event: E, intersects:
|
|
298
|
+
}, d = A(() => m()), v = L(), w = L(), h = (y, E) => {
|
|
299
|
+
y.trigger({ event: E, intersects: m(E) });
|
|
300
300
|
}, M = (y) => {
|
|
301
|
-
|
|
301
|
+
h(w, y);
|
|
302
302
|
};
|
|
303
303
|
let P;
|
|
304
304
|
const C = (y) => {
|
|
305
305
|
var E;
|
|
306
|
-
P = (E =
|
|
306
|
+
P = (E = m(y)[0]) == null ? void 0 : E.object;
|
|
307
307
|
}, k = (y) => {
|
|
308
308
|
var E;
|
|
309
|
-
y instanceof PointerEvent && P === ((E =
|
|
309
|
+
y instanceof PointerEvent && P === ((E = m(y)[0]) == null ? void 0 : E.object) && h(v, y);
|
|
310
310
|
}, T = (y) => w.trigger({ event: y, intersects: [] });
|
|
311
311
|
return n.value.addEventListener("pointerup", k), n.value.addEventListener("pointerdown", C), n.value.addEventListener("pointermove", M), n.value.addEventListener("pointerleave", T), W(() => {
|
|
312
312
|
n != null && n.value && (n.value.removeEventListener("pointerup", k), n.value.removeEventListener("pointerdown", C), n.value.removeEventListener("pointermove", M), n.value.removeEventListener("pointerleave", T));
|
|
313
313
|
}), {
|
|
314
|
-
intersects:
|
|
314
|
+
intersects: d,
|
|
315
315
|
onClick: (y) => v.on(y).off,
|
|
316
316
|
onPointerMove: (y) => w.on(y).off
|
|
317
317
|
};
|
|
@@ -343,10 +343,10 @@ const tt = ({ scene: e, contextParts: a }) => {
|
|
|
343
343
|
}, o = (i) => {
|
|
344
344
|
r.value.delete(i);
|
|
345
345
|
}, c = (i) => {
|
|
346
|
-
Object.values(t).forEach((
|
|
346
|
+
Object.values(t).forEach((m) => m.delete(i)), o(i);
|
|
347
347
|
}, s = (i) => {
|
|
348
|
-
const { onClick:
|
|
349
|
-
|
|
348
|
+
const { onClick: m, onPointerMove: d, onPointerEnter: v, onPointerLeave: w } = i;
|
|
349
|
+
m && t.click.set(i, m), d && t.pointerMove.set(i, d), v && t.pointerEnter.set(i, v), w && t.pointerLeave.set(i, w);
|
|
350
350
|
};
|
|
351
351
|
e.userData.tres__registerAtPointerEventHandler = s, e.userData.tres__deregisterAtPointerEventHandler = c, e.userData.tres__registerBlockingObjectAtPointerEventHandler = n, e.userData.tres__deregisterBlockingObjectAtPointerEventHandler = o;
|
|
352
352
|
const f = A(
|
|
@@ -358,15 +358,15 @@ const tt = ({ scene: e, contextParts: a }) => {
|
|
|
358
358
|
({ uuid: i }) => i
|
|
359
359
|
)
|
|
360
360
|
), { onClick: l, onPointerMove: p } = et(f, a);
|
|
361
|
-
l(({ intersects: i, event:
|
|
362
|
-
var
|
|
363
|
-
i.length && ((
|
|
361
|
+
l(({ intersects: i, event: m }) => {
|
|
362
|
+
var d;
|
|
363
|
+
i.length && ((d = t.click.get(i[0].object)) == null || d(i[0], m));
|
|
364
364
|
});
|
|
365
365
|
let u;
|
|
366
|
-
return p(({ intersects: i, event:
|
|
366
|
+
return p(({ intersects: i, event: m }) => {
|
|
367
367
|
var M, P, C, k;
|
|
368
|
-
const
|
|
369
|
-
u && u !==
|
|
368
|
+
const d = (M = i == null ? void 0 : i[0]) == null ? void 0 : M.object, { pointerLeave: v, pointerEnter: w, pointerMove: h } = t;
|
|
369
|
+
u && u !== d && ((P = v.get(u)) == null || P(u, m)), d && (u !== d && ((C = w.get(d)) == null || C(i[0], m)), (k = h.get(d)) == null || k(i[0], m)), u = d || null;
|
|
370
370
|
}), {
|
|
371
371
|
registerObject: s,
|
|
372
372
|
deregisterObject: c
|
|
@@ -380,7 +380,7 @@ function rt({
|
|
|
380
380
|
rendererOptions: n
|
|
381
381
|
}) {
|
|
382
382
|
const o = A(
|
|
383
|
-
() =>
|
|
383
|
+
() => _(t) ? He() : je(_(a).parentElement)
|
|
384
384
|
), c = A(() => o.value.width.value), s = A(() => o.value.height.value), f = A(() => c.value / s.value), l = {
|
|
385
385
|
height: s,
|
|
386
386
|
width: c,
|
|
@@ -388,8 +388,8 @@ function rt({
|
|
|
388
388
|
}, p = x(e), {
|
|
389
389
|
camera: u,
|
|
390
390
|
cameras: i,
|
|
391
|
-
registerCamera:
|
|
392
|
-
deregisterCamera:
|
|
391
|
+
registerCamera: m,
|
|
392
|
+
deregisterCamera: d,
|
|
393
393
|
setCameraActive: v
|
|
394
394
|
} = Fe({ sizes: l, scene: e }), { renderer: w } = Ye(
|
|
395
395
|
{
|
|
@@ -399,7 +399,7 @@ function rt({
|
|
|
399
399
|
contextParts: { sizes: l, camera: u },
|
|
400
400
|
disableRender: r
|
|
401
401
|
}
|
|
402
|
-
),
|
|
402
|
+
), h = {
|
|
403
403
|
sizes: l,
|
|
404
404
|
scene: p,
|
|
405
405
|
camera: u,
|
|
@@ -408,11 +408,11 @@ function rt({
|
|
|
408
408
|
raycaster: x(new be()),
|
|
409
409
|
controls: B(null),
|
|
410
410
|
extend: V,
|
|
411
|
-
registerCamera:
|
|
411
|
+
registerCamera: m,
|
|
412
412
|
setCameraActive: v,
|
|
413
|
-
deregisterCamera:
|
|
413
|
+
deregisterCamera: d
|
|
414
414
|
};
|
|
415
|
-
return
|
|
415
|
+
return $("useTres", h), h;
|
|
416
416
|
}
|
|
417
417
|
function nt() {
|
|
418
418
|
const e = le("useTres");
|
|
@@ -497,8 +497,8 @@ const { logError: Z } = O(), at = {
|
|
|
497
497
|
}
|
|
498
498
|
let p = S(l), u = f == null ? void 0 : f[p];
|
|
499
499
|
if (l === "args") {
|
|
500
|
-
const
|
|
501
|
-
w &&
|
|
500
|
+
const m = e, d = t ?? [], v = r ?? [], w = e.userData.tres__name || e.type;
|
|
501
|
+
w && d.length && !Je(d, v) && (f = Object.assign(m, new G.value[w](...r)));
|
|
502
502
|
return;
|
|
503
503
|
}
|
|
504
504
|
if (f.type === "BufferGeometry") {
|
|
@@ -511,8 +511,8 @@ const { logError: Z } = O(), at = {
|
|
|
511
511
|
return;
|
|
512
512
|
}
|
|
513
513
|
if (l.includes("-") && u === void 0) {
|
|
514
|
-
const
|
|
515
|
-
u =
|
|
514
|
+
const m = l.split("-");
|
|
515
|
+
u = m.reduce((d, v) => d[S(v)], f), l = m.pop(), p = l.toLowerCase(), u != null && u.set || (f = m.reduce((d, v) => d[S(v)], f));
|
|
516
516
|
}
|
|
517
517
|
let i = r;
|
|
518
518
|
if (i === "" && (i = !0), Q(u)) {
|
|
@@ -566,43 +566,43 @@ const st = ["data-scene"], it = /* @__PURE__ */ q({
|
|
|
566
566
|
var i;
|
|
567
567
|
const t = e, { logWarning: r } = O(), n = B(), o = x(new Le());
|
|
568
568
|
ne();
|
|
569
|
-
const c = ce(), s = (i = U()) == null ? void 0 : i.appContext.app, f = (
|
|
569
|
+
const c = ce(), s = (i = U()) == null ? void 0 : i.appContext.app, f = (m) => q({
|
|
570
570
|
setup() {
|
|
571
571
|
var v;
|
|
572
|
-
const
|
|
573
|
-
return
|
|
572
|
+
const d = (v = U()) == null ? void 0 : v.appContext;
|
|
573
|
+
return d && (d.app = s), $("useTres", m), $("extend", V), () => J(ve, null, c != null && c.default ? c.default() : []);
|
|
574
574
|
}
|
|
575
|
-
}), l = (
|
|
576
|
-
const
|
|
577
|
-
ot(J(
|
|
575
|
+
}), l = (m) => {
|
|
576
|
+
const d = f(m);
|
|
577
|
+
ot(J(d), o.value);
|
|
578
578
|
}, p = A(() => t.disableRender), u = x(null);
|
|
579
579
|
return a({ context: u }), fe(() => {
|
|
580
|
-
const
|
|
580
|
+
const m = n;
|
|
581
581
|
u.value = rt({
|
|
582
582
|
scene: o.value,
|
|
583
|
-
canvas:
|
|
583
|
+
canvas: m,
|
|
584
584
|
windowSize: t.windowSize,
|
|
585
585
|
disableRender: p,
|
|
586
586
|
rendererOptions: t
|
|
587
587
|
}), tt({ scene: o.value, contextParts: u.value });
|
|
588
|
-
const { registerCamera:
|
|
588
|
+
const { registerCamera: d, camera: v, cameras: w, deregisterCamera: h } = u.value;
|
|
589
589
|
l(u.value);
|
|
590
590
|
const M = () => {
|
|
591
|
-
const P = new
|
|
591
|
+
const P = new I(
|
|
592
592
|
45,
|
|
593
593
|
window.innerWidth / window.innerHeight,
|
|
594
594
|
0.1,
|
|
595
595
|
1e3
|
|
596
596
|
);
|
|
597
|
-
P.position.set(3, 3, 3), P.lookAt(0, 0, 0),
|
|
597
|
+
P.position.set(3, 3, 3), P.lookAt(0, 0, 0), d(P);
|
|
598
598
|
const C = D(() => {
|
|
599
|
-
w.value.length >= 2 && (P.removeFromParent(),
|
|
599
|
+
w.value.length >= 2 && (P.removeFromParent(), h(P), C == null || C());
|
|
600
600
|
});
|
|
601
601
|
};
|
|
602
602
|
ee(
|
|
603
603
|
() => t.camera,
|
|
604
604
|
(P, C) => {
|
|
605
|
-
P &&
|
|
605
|
+
P && d(P), C && (C.removeFromParent(), h(C));
|
|
606
606
|
},
|
|
607
607
|
{
|
|
608
608
|
immediate: !0
|
|
@@ -610,21 +610,22 @@ const st = ["data-scene"], it = /* @__PURE__ */ q({
|
|
|
610
610
|
), v.value || (r(
|
|
611
611
|
"No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."
|
|
612
612
|
), M());
|
|
613
|
-
}), (
|
|
613
|
+
}), (m, d) => (pe(), me("canvas", de({
|
|
614
614
|
ref_key: "canvas",
|
|
615
615
|
ref: n,
|
|
616
|
-
"data-scene": o.value.uuid
|
|
617
|
-
|
|
616
|
+
"data-scene": o.value.uuid
|
|
617
|
+
}, m.$attrs, {
|
|
618
|
+
style: {
|
|
618
619
|
display: "block",
|
|
619
620
|
width: "100%",
|
|
620
621
|
height: "100%",
|
|
621
|
-
position:
|
|
622
|
+
position: m.windowSize ? "fixed" : "relative",
|
|
622
623
|
top: 0,
|
|
623
624
|
left: 0,
|
|
624
625
|
pointerEvents: "auto",
|
|
625
626
|
touchAction: "none"
|
|
626
|
-
}
|
|
627
|
-
}, null,
|
|
627
|
+
}
|
|
628
|
+
}), null, 16, st));
|
|
628
629
|
}
|
|
629
630
|
}), lt = [
|
|
630
631
|
"TresCanvas",
|
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v3.
|
|
3
|
+
* version: v3.4.0
|
|
4
4
|
* (c) 2023
|
|
5
5
|
* description: Declarative ThreeJS using Vue Components
|
|
6
6
|
* author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
|
|
7
7
|
*/
|
|
8
|
-
(function(w,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],u):(w=typeof globalThis<"u"?globalThis:w||self,u(w.tres={},w.Vue,w.Three,w.VueUseCore))})(this,function(w,u,P,C){"use strict";function ae(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const oe=ae(P),R=({sizes:e,scene:a})=>{const t=u.ref([]),r=u.computed(()=>t.value[0]),n=(s,d=!1)=>{t.value.some(({uuid:l})=>l===s.uuid)||(d?f(s):t.value.push(s))},o=s=>{t.value=t.value.filter(({uuid:d})=>d!==s.uuid)},f=s=>{const d=s instanceof P.Camera?s:t.value.find(m=>m.uuid===s);if(!d)return;const l=t.value.filter(({uuid:m})=>m!==d.uuid);t.value=[d,...l]};return u.watchEffect(()=>{e.aspectRatio.value&&t.value.forEach(s=>{s instanceof P.PerspectiveCamera&&(s.aspect=e.aspectRatio.value),(s instanceof P.PerspectiveCamera||s instanceof P.OrthographicCamera)&&s.updateProjectionMatrix()})}),a.userData.tres__registerCamera=n,a.userData.tres__deregisterCamera=o,u.onUnmounted(()=>{t.value=[]}),{camera:r,cameras:t,registerCamera:n,deregisterCamera:o,setCameraActive:f}},I=C.createEventHook(),W=C.createEventHook(),F=C.createEventHook(),S=new P.Clock;let B=0,x=0;const{pause:se,resume:ie,isActive:le}=C.useRafFn(()=>{I.trigger({delta:B,elapsed:x,clock:S}),W.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:I.on,onLoop:W.on,onAfterLoop:F.on,pause:se,resume:ie,isActive:le}),ue=!0,$="[TresJS ▲ ■ ●] ";function L(){function e(r,n){console.error(`${$} ${r}`,n||"")}function a(r){console.warn(`${$} ${r}`)}function t(r,n){}return{logError:e,logWarning:a,logMessage:t}}function ce(e){return typeof e=="number"?[e,e,e]:e instanceof P.Vector3?[e.x,e.y,e.z]:e}function N(e){return e instanceof P.Color?e:Array.isArray(e)?new P.Color(...e):new P.Color(e)}const q=(e,a)=>{for(const t of Object.keys(a))a[t]instanceof Object&&Object.assign(a[t],q(e[t],a[t]));return Object.assign(e||{},a),e},fe=de("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 U(e){return e&&e.nodeType===1}function E(e){return e.replace(/-([a-z])/g,(a,t)=>t.toUpperCase())}function de(e,a){const t=Object.create(null),r=e.split(",");for(let n=0;n<r.length;n++)t[r[n]]=!0;return a?n=>!!t[n.toLowerCase()]:n=>!!t[n]}const me=(e,a)=>{const t=new Set,r=[];for(const n of e){const o=a(n);t.has(o)||(t.add(o),r.push(n))}return r},H=(e,a)=>{if(!a)return;const t=Array.isArray(a)?a:a.match(/([^[.\]])+/g);return t==null?void 0:t.reduce((r,n)=>r&&r[n],e)},pe=(e,a,t)=>{const r=Array.isArray(a)?a:a.match(/([^[.\]])+/g);r&&r.reduce((n,o,f)=>(n[o]===void 0&&(n[o]={}),f===r.length-1&&(n[o]=t),n[o]),e)};function J(e,a){if(U(e)&&U(a)){const n=e.attributes,o=a.attributes;return n.length!==o.length?!1:Array.from(n).every(({name:f,value:s})=>a.getAttribute(f)===s)}if(e===a)return!0;if(e===null||typeof e!="object"||a===null||typeof a!="object")return!1;const t=Object.keys(e),r=Object.keys(a);if(t.length!==r.length)return!1;for(const n of t)if(!r.includes(n)||!J(e[n],a[n]))return!1;return!0}function ge(e,a){if(!Array.isArray(e)||!Array.isArray(a)||e.length!==a.length)return!1;for(let t=0;t<e.length;t++)if(!J(e[t],a[t]))return!1;return!0}const ve=Array.isArray,ye=Number.parseInt(P.REVISION.replace("dev","")),V={realistic:{shadows:!0,physicallyCorrectLights:!0,outputColorSpace:P.SRGBColorSpace,toneMapping:P.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:P.PCFSoftShadowMap}}};function K({scene:e,canvas:a,options:t,disableRender:r,contextParts:{sizes:n,camera:o}}){const f=u.computed(()=>({alpha:C.toValue(t.alpha),depth:C.toValue(t.depth),canvas:C.unrefElement(a),context:C.toValue(t.context),stencil:C.toValue(t.stencil),antialias:C.toValue(t.antialias)===void 0?!0:C.toValue(t.antialias),precision:C.toValue(t.precision),powerPreference:C.toValue(t.powerPreference),premultipliedAlpha:C.toValue(t.premultipliedAlpha),preserveDrawingBuffer:C.toValue(t.preserveDrawingBuffer),logarithmicDepthBuffer:C.toValue(t.logarithmicDepthBuffer),failIfMajorPerformanceCaveat:C.toValue(t.failIfMajorPerformanceCaveat)})),s=u.shallowRef(new P.WebGLRenderer(f.value));u.watch(f,()=>{s.value.dispose(),s.value=new P.WebGLRenderer(f.value)}),u.watchEffect(()=>{s.value.setSize(n.width.value,n.height.value)});const{pixelRatio:d}=C.useDevicePixelRatio();u.watchEffect(()=>{s.value.setPixelRatio(d.value)});const{logError:l}=L(),c=(()=>{const v=new P.WebGLRenderer,_={shadowMap:{enabled:v.shadowMap.enabled,type:v.shadowMap.type},toneMapping:v.toneMapping,toneMappingExposure:v.toneMappingExposure,outputColorSpace:v.outputColorSpace};return v.dispose(),_})();u.watchEffect(()=>{const v=C.toValue(t.preset);v&&(v in V||l(`Renderer Preset must be one of these: ${Object.keys(V).join(", ")}`),q(s.value,V[v]));const _=(A,M)=>{const O=C.toValue(A),z=()=>{if(v)return H(V[v],M)};if(O!==void 0)return O;const h=z();return h!==void 0?h:H(c,M)},k=(A,M)=>pe(s.value,M,_(A,M));k(t.shadows,"shadowMap.enabled"),k(t.toneMapping,"toneMapping"),k(t.shadowMapType,"shadowMap.type"),ye<150&&k(!t.useLegacyLights,"physicallyCorrectLights"),k(t.outputColorSpace,"outputColorSpace"),k(t.toneMappingExposure,"toneMappingExposure");const D=_(t.clearColor,"clearColor");D&&s.value.setClearColor(D?N(D):new P.Color(0))});const{pause:i,resume:g,onLoop:p}=G();return p(()=>{o.value&&!C.toValue(r)&&s.value.render(e,o.value)}),g(),u.onUnmounted(()=>{i(),s.value.dispose(),s.value.forceContextLoss()}),{renderer:s}}const X=e=>typeof e=="function",we=e=>!!e&&e.constructor===Array;function Y(e){const a={nodes:{},materials:{}};return e&&e.traverse(t=>{t.name&&(a.nodes[t.name]=t),t.material&&!a.materials[t.material.name]&&(a.materials[t.material.name]=t.material)}),a}async function Ce(e,a,t,r,n){const{logError:o}=L(),f=new e;n&&n(f),t&&t(f);const d=(Array.isArray(a)?a:[a]).map(l=>new Promise((m,c)=>{f.load(l,i=>{i.scene&&Object.assign(i,Y(i.scene)),m(i)},r,i=>c(o("[useLoader] - Failed to load resource",i)))}));return we(a)?await Promise.all(d):await d[0]}async function he(e){const a=new P.LoadingManager,t=new P.TextureLoader(a),r=n=>new Promise((o,f)=>{t.load(n,s=>o(s),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(ve(e)){const n=await Promise.all(e.map(o=>r(o)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:o,normalMap:f,roughnessMap:s,metalnessMap:d,aoMap:l,alphaMap:m,matcap:c}=e;return{map:n?await r(n):null,displacementMap:o?await r(o):null,normalMap:f?await r(f):null,roughnessMap:s?await r(s):null,metalnessMap:d?await r(d):null,aoMap:l?await r(l):null,alphaMap:m?await r(m):null,matcap:c?await r(c):null}}}const Q=(e,{renderer:a,camera:t,raycaster:r})=>{const n=u.computed(()=>a.value.domElement),{x:o,y:f}=C.usePointer({target:n}),{width:s,height:d,top:l,left:m}=C.useElementBounding(n),c=({x:h,y:b})=>{if(n.value)return{x:(h-m.value)/s.value*2-1,y:-((b-l.value)/d.value)*2+1}},i=({x:h,y:b})=>{if(t.value)return r.value.setFromCamera(new P.Vector2(h,b),t.value),r.value.intersectObjects(e.value,!1)},g=h=>{const b=c({x:(h==null?void 0:h.clientX)??o.value,y:(h==null?void 0:h.clientY)??f.value});return b?i(b)||[]:[]},p=u.computed(()=>g()),v=C.createEventHook(),_=C.createEventHook(),k=(h,b)=>{h.trigger({event:b,intersects:g(b)})},D=h=>{k(_,h)};let A;const M=h=>{var b;A=(b=g(h)[0])==null?void 0:b.object},O=h=>{var b;h instanceof PointerEvent&&A===((b=g(h)[0])==null?void 0:b.object)&&k(v,h)},z=h=>_.trigger({event:h,intersects:[]});return n.value.addEventListener("pointerup",O),n.value.addEventListener("pointerdown",M),n.value.addEventListener("pointermove",D),n.value.addEventListener("pointerleave",z),u.onUnmounted(()=>{n!=null&&n.value&&(n.value.removeEventListener("pointerup",O),n.value.removeEventListener("pointerdown",M),n.value.removeEventListener("pointermove",D),n.value.removeEventListener("pointerleave",z))}),{intersects:p,onClick:h=>v.on(h).off,onPointerMove:h=>_.on(h).off}};function Pe(){const{logWarning:e}=L();function a(r,n,o){let f=null;return r.traverse(s=>{s[n]===o&&(f=s)}),f||e(`Child with ${n} '${o}' not found.`),f}function t(r,n){return a(r,"name",n)}return{seek:a,seekByName:t}}const Z=({scene:e,contextParts:a})=>{const t=u.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),r=u.ref(new Set),n=i=>{r.value.add(i)},o=i=>{r.value.delete(i)},f=i=>{Object.values(t).forEach(g=>g.delete(i)),o(i)},s=i=>{const{onClick:g,onPointerMove:p,onPointerEnter:v,onPointerLeave:_}=i;g&&t.click.set(i,g),p&&t.pointerMove.set(i,p),v&&t.pointerEnter.set(i,v),_&&t.pointerLeave.set(i,_)};e.userData.tres__registerAtPointerEventHandler=s,e.userData.tres__deregisterAtPointerEventHandler=f,e.userData.tres__registerBlockingObjectAtPointerEventHandler=n,e.userData.tres__deregisterBlockingObjectAtPointerEventHandler=o;const d=u.computed(()=>me([...Array.from(r.value),...Object.values(t).map(i=>Array.from(i.keys())).flat()],({uuid:i})=>i)),{onClick:l,onPointerMove:m}=Q(d,a);l(({intersects:i,event:g})=>{var p;i.length&&((p=t.click.get(i[0].object))==null||p(i[0],g))});let c;return m(({intersects:i,event:g})=>{var D,A,M,O;const p=(D=i==null?void 0:i[0])==null?void 0:D.object,{pointerLeave:v,pointerEnter:_,pointerMove:k}=t;c&&c!==p&&((A=v.get(c))==null||A(c,g)),p&&(c!==p&&((M=_.get(p))==null||M(i[0],g)),(O=k.get(p))==null||O(i[0],g)),c=p||null}),{registerObject:s,deregisterObject:f}},T=u.ref({}),j=e=>Object.assign(T.value,e);function ee({scene:e,canvas:a,windowSize:t,disableRender:r,rendererOptions:n}){const o=u.computed(()=>C.toValue(t)?C.useWindowSize():C.useElementSize(C.toValue(a).parentElement)),f=u.computed(()=>o.value.width.value),s=u.computed(()=>o.value.height.value),d=u.computed(()=>f.value/s.value),l={height:s,width:f,aspectRatio:d},m=u.shallowRef(e),{camera:c,cameras:i,registerCamera:g,deregisterCamera:p,setCameraActive:v}=R({sizes:l,scene:e}),{renderer:_}=K({scene:e,canvas:a,options:n,contextParts:{sizes:l,camera:c},disableRender:r}),k={sizes:l,scene:m,camera:c,cameras:u.readonly(i),renderer:_,raycaster:u.shallowRef(new P.Raycaster),controls:u.ref(null),extend:j,registerCamera:g,setCameraActive:v,deregisterCamera:p};return u.provide("useTres",k),k}function te(){const e=u.inject("useTres");if(!e)throw new Error("useTresContext must be used together with useTresContextProvider");return e}const _e=te;function Se(e){}let y=null;const{logError:re}=L(),Me={createElement(e,a,t,r){var f,s;if(r||(r={}),r.args||(r.args=[]),e==="template"||fe(e))return null;let n=e.replace("Tres",""),o;if(e==="primitive"){(r==null?void 0:r.object)===void 0&&re("Tres primitives need a prop 'object'");const d=r.object;n=d.type,o=Object.assign(d,{type:n,attach:r.attach,primitive:!0})}else{const d=T.value[n];d||re(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`),o=new d(...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&&((f=r==null?void 0:r.material)!=null&&f.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:n},o},insert(e,a){var r,n,o,f;a&&a.isScene&&(y=a);const t=a||y;if(e!=null&&e.isObject3D){if(e!=null&&e.isCamera){if(!(y!=null&&y.userData.tres__registerCamera))throw"could not find tres__registerCamera on scene's userData";(n=y==null?void 0:(r=y.userData).tres__registerCamera)==null||n.call(r,e)}if(e!=null&&e.onClick||e!=null&&e.onPointerMove||e!=null&&e.onPointerEnter||e!=null&&e.onPointerLeave){if(!(y!=null&&y.userData.tres__registerAtPointerEventHandler))throw"could not find tres__registerAtPointerEventHandler on scene's userData";(f=y==null?void 0:(o=y.userData).tres__registerAtPointerEventHandler)==null||f.call(o,e)}}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 a,t;if(e){if(e.isObject3D){const r=e,n=l=>{var c,i;const m=l;l.userData.tres__materialViaProp||(c=m.material)==null||c.dispose(),l.userData.tres__geometryViaProp||(i=m.geometry)==null||i.dispose()},o=y==null?void 0:y.userData.tres__deregisterAtPointerEventHandler,f=y==null?void 0:y.userData.tres__deregisterBlockingObjectAtPointerEventHandler,s=l=>{var m,c;if(!f)throw"could not find tres__deregisterBlockingObjectAtPointerEventHandler on scene's userData";if((c=y==null?void 0:(m=y.userData).tres__deregisterBlockingObjectAtPointerEventHandler)==null||c.call(m,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))},d=l=>{const m=y==null?void 0:y.userData.tres__deregisterCamera;if(!m)throw"could not find tres__deregisterCamera on scene's userData";l.isCamera&&(m==null||m(l))};r.traverse(l=>{n(l),d(l),s==null||s(l)}),n(r),d(r),s==null||s(r)}(a=e.removeFromParent)==null||a.call(e),(t=e.dispose)==null||t.call(e)}},patchProp(e,a,t,r){var n,o,f,s;if(e){let d=e,l=a;if(e.isObject3D&&l==="blocks-pointer-events"){r||r===""?(o=y==null?void 0:(n=y.userData).tres__registerBlockingObjectAtPointerEventHandler)==null||o.call(n,e):(s=y==null?void 0:(f=y.userData).tres__deregisterBlockingObjectAtPointerEventHandler)==null||s.call(f,e);return}let m=E(l),c=d==null?void 0:d[m];if(l==="args"){const g=e,p=t??[],v=r??[],_=e.userData.tres__name||e.type;_&&p.length&&!ge(p,v)&&(d=Object.assign(g,new T.value[_](...r)));return}if(d.type==="BufferGeometry"){if(l==="args")return;d.setAttribute(E(l),new P.BufferAttribute(...r));return}if(l.includes("-")&&c===void 0){const g=l.split("-");c=g.reduce((p,v)=>p[E(v)],d),l=g.pop(),m=l.toLowerCase(),c!=null&&c.set||(d=g.reduce((p,v)=>p[E(v)],d))}let i=r;if(i===""&&(i=!0),X(c)){Array.isArray(i)?e[m](...i):e[m](i);return}!(c!=null&&c.set)&&!X(c)?d[m]=i:c.constructor===i.constructor&&(c!=null&&c.copy)?c==null||c.copy(i):Array.isArray(i)?c.set(...i):!c.isColor&&c.setScalar?c.setScalar(i):c.set(i)}},parentNode(e){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{render:Ae}=u.createRenderer(Me);j(oe);const ke=["data-scene"],ne=u.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,{expose:a}){var i;const t=e,{logWarning:r}=L(),n=u.ref(),o=u.shallowRef(new P.Scene);G();const f=u.useSlots(),s=(i=u.getCurrentInstance())==null?void 0:i.appContext.app,d=g=>u.defineComponent({setup(){var v;const p=(v=u.getCurrentInstance())==null?void 0:v.appContext;return p&&(p.app=s),u.provide("useTres",g),u.provide("extend",j),()=>u.h(u.Fragment,null,f!=null&&f.default?f.default():[])}}),l=g=>{const p=d(g);Ae(u.h(p),o.value)},m=u.computed(()=>t.disableRender),c=u.shallowRef(null);return a({context:c}),u.onMounted(()=>{const g=n;c.value=ee({scene:o.value,canvas:g,windowSize:t.windowSize,disableRender:m,rendererOptions:t}),Z({scene:o.value,contextParts:c.value});const{registerCamera:p,camera:v,cameras:_,deregisterCamera:k}=c.value;l(c.value);const D=()=>{const A=new P.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);A.position.set(3,3,3),A.lookAt(0,0,0),p(A);const M=u.watchEffect(()=>{_.value.length>=2&&(A.removeFromParent(),k(A),M==null||M())})};u.watch(()=>t.camera,(A,M)=>{A&&p(A),M&&(M.removeFromParent(),k(M))},{immediate:!0}),v.value||(r("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."),D())}),(g,p)=>(u.openBlock(),u.createElementBlock("canvas",{ref_key:"canvas",ref:n,"data-scene":o.value.uuid,style:u.normalizeStyle({display:"block",width:"100%",height:"100%",position:g.windowSize?"fixed":"relative",top:0,left:0,pointerEvents:"auto",touchAction:"none"})},null,12,ke))}}),be=["TresCanvas","TresLeches","TresScene"],De={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!be.includes(e)||e==="primitive"}}},Oe={install(e){e.component("TresCanvas",ne)}};w.TresCanvas=ne,w.catalogue=T,w.default=Oe,w.extend=j,w.isProd=ue,w.normalizeColor=N,w.normalizeVectorFlexibleParam=ce,w.templateCompilerOptions=De,w.trasverseObjects=Y,w.useCamera=R,w.useLoader=Ce,w.useLogger=L,w.usePointerEventHandler=Z,w.useRaycaster=Q,w.useRenderLoop=G,w.useRenderer=K,w.useSeek=Pe,w.useTexture=he,w.useTres=_e,w.useTresContext=te,w.useTresContextProvider=ee,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
8
|
+
(function(w,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],u):(w=typeof globalThis<"u"?globalThis:w||self,u(w.tres={},w.Vue,w.Three,w.VueUseCore))})(this,function(w,u,h,C){"use strict";function ae(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const oe=ae(h),R=({sizes:e,scene:a})=>{const t=u.ref([]),r=u.computed(()=>t.value[0]),n=(s,d=!1)=>{t.value.some(({uuid:l})=>l===s.uuid)||(d?f(s):t.value.push(s))},o=s=>{t.value=t.value.filter(({uuid:d})=>d!==s.uuid)},f=s=>{const d=s instanceof h.Camera?s:t.value.find(m=>m.uuid===s);if(!d)return;const l=t.value.filter(({uuid:m})=>m!==d.uuid);t.value=[d,...l]};return u.watchEffect(()=>{e.aspectRatio.value&&t.value.forEach(s=>{s instanceof h.PerspectiveCamera&&(s.aspect=e.aspectRatio.value),(s instanceof h.PerspectiveCamera||s instanceof h.OrthographicCamera)&&s.updateProjectionMatrix()})}),a.userData.tres__registerCamera=n,a.userData.tres__deregisterCamera=o,u.onUnmounted(()=>{t.value=[]}),{camera:r,cameras:t,registerCamera:n,deregisterCamera:o,setCameraActive:f}},I=C.createEventHook(),W=C.createEventHook(),z=C.createEventHook(),B=new h.Clock;let S=0,x=0;const{pause:se,resume:ie,isActive:le}=C.useRafFn(()=>{I.trigger({delta:S,elapsed:x,clock:B}),W.trigger({delta:S,elapsed:x,clock:B}),z.trigger({delta:S,elapsed:x,clock:B})},{immediate:!1});z.on(()=>{S=B.getDelta(),x=B.getElapsedTime()});const G=()=>({onBeforeLoop:I.on,onLoop:W.on,onAfterLoop:z.on,pause:se,resume:ie,isActive:le}),ue=!0,$="[TresJS ▲ ■ ●] ";function L(){function e(r,n){console.error(`${$} ${r}`,n||"")}function a(r){console.warn(`${$} ${r}`)}function t(r,n){}return{logError:e,logWarning:a,logMessage:t}}function ce(e){return typeof e=="number"?[e,e,e]:e instanceof h.Vector3?[e.x,e.y,e.z]:e}function N(e){return e instanceof h.Color?e:Array.isArray(e)?new h.Color(...e):new h.Color(e)}const q=(e,a)=>{for(const t of Object.keys(a))a[t]instanceof Object&&Object.assign(a[t],q(e[t],a[t]));return Object.assign(e||{},a),e},fe=de("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 U(e){return e&&e.nodeType===1}function E(e){return e.replace(/-([a-z])/g,(a,t)=>t.toUpperCase())}function de(e,a){const t=Object.create(null),r=e.split(",");for(let n=0;n<r.length;n++)t[r[n]]=!0;return a?n=>!!t[n.toLowerCase()]:n=>!!t[n]}const me=(e,a)=>{const t=new Set,r=[];for(const n of e){const o=a(n);t.has(o)||(t.add(o),r.push(n))}return r},H=(e,a)=>{if(!a)return;const t=Array.isArray(a)?a:a.match(/([^[.\]])+/g);return t==null?void 0:t.reduce((r,n)=>r&&r[n],e)},pe=(e,a,t)=>{const r=Array.isArray(a)?a:a.match(/([^[.\]])+/g);r&&r.reduce((n,o,f)=>(n[o]===void 0&&(n[o]={}),f===r.length-1&&(n[o]=t),n[o]),e)};function J(e,a){if(U(e)&&U(a)){const n=e.attributes,o=a.attributes;return n.length!==o.length?!1:Array.from(n).every(({name:f,value:s})=>a.getAttribute(f)===s)}if(e===a)return!0;if(e===null||typeof e!="object"||a===null||typeof a!="object")return!1;const t=Object.keys(e),r=Object.keys(a);if(t.length!==r.length)return!1;for(const n of t)if(!r.includes(n)||!J(e[n],a[n]))return!1;return!0}function ge(e,a){if(!Array.isArray(e)||!Array.isArray(a)||e.length!==a.length)return!1;for(let t=0;t<e.length;t++)if(!J(e[t],a[t]))return!1;return!0}const ve=Array.isArray,ye=Number.parseInt(h.REVISION.replace("dev","")),V={realistic:{shadows:!0,physicallyCorrectLights:!0,outputColorSpace:h.SRGBColorSpace,toneMapping:h.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:h.PCFSoftShadowMap}}};function K({scene:e,canvas:a,options:t,disableRender:r,contextParts:{sizes:n,camera:o}}){const f=u.computed(()=>({alpha:C.toValue(t.alpha),depth:C.toValue(t.depth),canvas:C.unrefElement(a),context:C.toValue(t.context),stencil:C.toValue(t.stencil),antialias:C.toValue(t.antialias)===void 0?!0:C.toValue(t.antialias),precision:C.toValue(t.precision),powerPreference:C.toValue(t.powerPreference),premultipliedAlpha:C.toValue(t.premultipliedAlpha),preserveDrawingBuffer:C.toValue(t.preserveDrawingBuffer),logarithmicDepthBuffer:C.toValue(t.logarithmicDepthBuffer),failIfMajorPerformanceCaveat:C.toValue(t.failIfMajorPerformanceCaveat)})),s=u.shallowRef(new h.WebGLRenderer(f.value));u.watch(f,()=>{s.value.dispose(),s.value=new h.WebGLRenderer(f.value)}),u.watchEffect(()=>{s.value.setSize(n.width.value,n.height.value)});const{pixelRatio:d}=C.useDevicePixelRatio();u.watchEffect(()=>{s.value.setPixelRatio(d.value)});const{logError:l}=L(),c=(()=>{const v=new h.WebGLRenderer,_={shadowMap:{enabled:v.shadowMap.enabled,type:v.shadowMap.type},toneMapping:v.toneMapping,toneMappingExposure:v.toneMappingExposure,outputColorSpace:v.outputColorSpace};return v.dispose(),_})();u.watchEffect(()=>{const v=C.toValue(t.preset);v&&(v in V||l(`Renderer Preset must be one of these: ${Object.keys(V).join(", ")}`),q(s.value,V[v]));const _=(A,M)=>{const O=C.toValue(A),F=()=>{if(v)return H(V[v],M)};if(O!==void 0)return O;const P=F();return P!==void 0?P:H(c,M)},k=(A,M)=>pe(s.value,M,_(A,M));k(t.shadows,"shadowMap.enabled"),k(t.toneMapping,"toneMapping"),k(t.shadowMapType,"shadowMap.type"),ye<150&&k(!t.useLegacyLights,"physicallyCorrectLights"),k(t.outputColorSpace,"outputColorSpace"),k(t.toneMappingExposure,"toneMappingExposure");const D=_(t.clearColor,"clearColor");D&&s.value.setClearColor(D?N(D):new h.Color(0))});const{pause:i,resume:p,onLoop:g}=G();return g(()=>{o.value&&!C.toValue(r)&&s.value.render(e,o.value)}),p(),u.onUnmounted(()=>{i(),s.value.dispose(),s.value.forceContextLoss()}),{renderer:s}}const X=e=>typeof e=="function",we=e=>!!e&&e.constructor===Array;function Y(e){const a={nodes:{},materials:{}};return e&&e.traverse(t=>{t.name&&(a.nodes[t.name]=t),t.material&&!a.materials[t.material.name]&&(a.materials[t.material.name]=t.material)}),a}async function Ce(e,a,t,r,n){const{logError:o}=L(),f=new e;n&&n(f),t&&t(f);const d=(Array.isArray(a)?a:[a]).map(l=>new Promise((m,c)=>{f.load(l,i=>{i.scene&&Object.assign(i,Y(i.scene)),m(i)},r,i=>c(o("[useLoader] - Failed to load resource",i)))}));return we(a)?await Promise.all(d):await d[0]}async function Pe(e){const a=new h.LoadingManager,t=new h.TextureLoader(a),r=n=>new Promise((o,f)=>{t.load(n,s=>o(s),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(ve(e)){const n=await Promise.all(e.map(o=>r(o)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:o,normalMap:f,roughnessMap:s,metalnessMap:d,aoMap:l,alphaMap:m,matcap:c}=e;return{map:n?await r(n):null,displacementMap:o?await r(o):null,normalMap:f?await r(f):null,roughnessMap:s?await r(s):null,metalnessMap:d?await r(d):null,aoMap:l?await r(l):null,alphaMap:m?await r(m):null,matcap:c?await r(c):null}}}const Q=(e,{renderer:a,camera:t,raycaster:r})=>{const n=u.computed(()=>a.value.domElement),{x:o,y:f}=C.usePointer({target:n}),{width:s,height:d,top:l,left:m}=C.useElementBounding(n),c=({x:P,y:b})=>{if(n.value)return{x:(P-m.value)/s.value*2-1,y:-((b-l.value)/d.value)*2+1}},i=({x:P,y:b})=>{if(t.value)return r.value.setFromCamera(new h.Vector2(P,b),t.value),r.value.intersectObjects(e.value,!1)},p=P=>{const b=c({x:(P==null?void 0:P.clientX)??o.value,y:(P==null?void 0:P.clientY)??f.value});return b?i(b)||[]:[]},g=u.computed(()=>p()),v=C.createEventHook(),_=C.createEventHook(),k=(P,b)=>{P.trigger({event:b,intersects:p(b)})},D=P=>{k(_,P)};let A;const M=P=>{var b;A=(b=p(P)[0])==null?void 0:b.object},O=P=>{var b;P instanceof PointerEvent&&A===((b=p(P)[0])==null?void 0:b.object)&&k(v,P)},F=P=>_.trigger({event:P,intersects:[]});return n.value.addEventListener("pointerup",O),n.value.addEventListener("pointerdown",M),n.value.addEventListener("pointermove",D),n.value.addEventListener("pointerleave",F),u.onUnmounted(()=>{n!=null&&n.value&&(n.value.removeEventListener("pointerup",O),n.value.removeEventListener("pointerdown",M),n.value.removeEventListener("pointermove",D),n.value.removeEventListener("pointerleave",F))}),{intersects:g,onClick:P=>v.on(P).off,onPointerMove:P=>_.on(P).off}};function he(){const{logWarning:e}=L();function a(r,n,o){let f=null;return r.traverse(s=>{s[n]===o&&(f=s)}),f||e(`Child with ${n} '${o}' not found.`),f}function t(r,n){return a(r,"name",n)}return{seek:a,seekByName:t}}const Z=({scene:e,contextParts:a})=>{const t=u.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),r=u.ref(new Set),n=i=>{r.value.add(i)},o=i=>{r.value.delete(i)},f=i=>{Object.values(t).forEach(p=>p.delete(i)),o(i)},s=i=>{const{onClick:p,onPointerMove:g,onPointerEnter:v,onPointerLeave:_}=i;p&&t.click.set(i,p),g&&t.pointerMove.set(i,g),v&&t.pointerEnter.set(i,v),_&&t.pointerLeave.set(i,_)};e.userData.tres__registerAtPointerEventHandler=s,e.userData.tres__deregisterAtPointerEventHandler=f,e.userData.tres__registerBlockingObjectAtPointerEventHandler=n,e.userData.tres__deregisterBlockingObjectAtPointerEventHandler=o;const d=u.computed(()=>me([...Array.from(r.value),...Object.values(t).map(i=>Array.from(i.keys())).flat()],({uuid:i})=>i)),{onClick:l,onPointerMove:m}=Q(d,a);l(({intersects:i,event:p})=>{var g;i.length&&((g=t.click.get(i[0].object))==null||g(i[0],p))});let c;return m(({intersects:i,event:p})=>{var D,A,M,O;const g=(D=i==null?void 0:i[0])==null?void 0:D.object,{pointerLeave:v,pointerEnter:_,pointerMove:k}=t;c&&c!==g&&((A=v.get(c))==null||A(c,p)),g&&(c!==g&&((M=_.get(g))==null||M(i[0],p)),(O=k.get(g))==null||O(i[0],p)),c=g||null}),{registerObject:s,deregisterObject:f}},T=u.ref({}),j=e=>Object.assign(T.value,e);function ee({scene:e,canvas:a,windowSize:t,disableRender:r,rendererOptions:n}){const o=u.computed(()=>C.toValue(t)?C.useWindowSize():C.useElementSize(C.toValue(a).parentElement)),f=u.computed(()=>o.value.width.value),s=u.computed(()=>o.value.height.value),d=u.computed(()=>f.value/s.value),l={height:s,width:f,aspectRatio:d},m=u.shallowRef(e),{camera:c,cameras:i,registerCamera:p,deregisterCamera:g,setCameraActive:v}=R({sizes:l,scene:e}),{renderer:_}=K({scene:e,canvas:a,options:n,contextParts:{sizes:l,camera:c},disableRender:r}),k={sizes:l,scene:m,camera:c,cameras:u.readonly(i),renderer:_,raycaster:u.shallowRef(new h.Raycaster),controls:u.ref(null),extend:j,registerCamera:p,setCameraActive:v,deregisterCamera:g};return u.provide("useTres",k),k}function te(){const e=u.inject("useTres");if(!e)throw new Error("useTresContext must be used together with useTresContextProvider");return e}const _e=te;function Be(e){}let y=null;const{logError:re}=L(),Me={createElement(e,a,t,r){var f,s;if(r||(r={}),r.args||(r.args=[]),e==="template"||fe(e))return null;let n=e.replace("Tres",""),o;if(e==="primitive"){(r==null?void 0:r.object)===void 0&&re("Tres primitives need a prop 'object'");const d=r.object;n=d.type,o=Object.assign(d,{type:n,attach:r.attach,primitive:!0})}else{const d=T.value[n];d||re(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`),o=new d(...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&&((f=r==null?void 0:r.material)!=null&&f.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:n},o},insert(e,a){var r,n,o,f;a&&a.isScene&&(y=a);const t=a||y;if(e!=null&&e.isObject3D){if(e!=null&&e.isCamera){if(!(y!=null&&y.userData.tres__registerCamera))throw"could not find tres__registerCamera on scene's userData";(n=y==null?void 0:(r=y.userData).tres__registerCamera)==null||n.call(r,e)}if(e!=null&&e.onClick||e!=null&&e.onPointerMove||e!=null&&e.onPointerEnter||e!=null&&e.onPointerLeave){if(!(y!=null&&y.userData.tres__registerAtPointerEventHandler))throw"could not find tres__registerAtPointerEventHandler on scene's userData";(f=y==null?void 0:(o=y.userData).tres__registerAtPointerEventHandler)==null||f.call(o,e)}}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 a,t;if(e){if(e.isObject3D){const r=e,n=l=>{var c,i;const m=l;l.userData.tres__materialViaProp||(c=m.material)==null||c.dispose(),l.userData.tres__geometryViaProp||(i=m.geometry)==null||i.dispose()},o=y==null?void 0:y.userData.tres__deregisterAtPointerEventHandler,f=y==null?void 0:y.userData.tres__deregisterBlockingObjectAtPointerEventHandler,s=l=>{var m,c;if(!f)throw"could not find tres__deregisterBlockingObjectAtPointerEventHandler on scene's userData";if((c=y==null?void 0:(m=y.userData).tres__deregisterBlockingObjectAtPointerEventHandler)==null||c.call(m,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))},d=l=>{const m=y==null?void 0:y.userData.tres__deregisterCamera;if(!m)throw"could not find tres__deregisterCamera on scene's userData";l.isCamera&&(m==null||m(l))};r.traverse(l=>{n(l),d(l),s==null||s(l)}),n(r),d(r),s==null||s(r)}(a=e.removeFromParent)==null||a.call(e),(t=e.dispose)==null||t.call(e)}},patchProp(e,a,t,r){var n,o,f,s;if(e){let d=e,l=a;if(e.isObject3D&&l==="blocks-pointer-events"){r||r===""?(o=y==null?void 0:(n=y.userData).tres__registerBlockingObjectAtPointerEventHandler)==null||o.call(n,e):(s=y==null?void 0:(f=y.userData).tres__deregisterBlockingObjectAtPointerEventHandler)==null||s.call(f,e);return}let m=E(l),c=d==null?void 0:d[m];if(l==="args"){const p=e,g=t??[],v=r??[],_=e.userData.tres__name||e.type;_&&g.length&&!ge(g,v)&&(d=Object.assign(p,new T.value[_](...r)));return}if(d.type==="BufferGeometry"){if(l==="args")return;d.setAttribute(E(l),new h.BufferAttribute(...r));return}if(l.includes("-")&&c===void 0){const p=l.split("-");c=p.reduce((g,v)=>g[E(v)],d),l=p.pop(),m=l.toLowerCase(),c!=null&&c.set||(d=p.reduce((g,v)=>g[E(v)],d))}let i=r;if(i===""&&(i=!0),X(c)){Array.isArray(i)?e[m](...i):e[m](i);return}!(c!=null&&c.set)&&!X(c)?d[m]=i:c.constructor===i.constructor&&(c!=null&&c.copy)?c==null||c.copy(i):Array.isArray(i)?c.set(...i):!c.isColor&&c.setScalar?c.setScalar(i):c.set(i)}},parentNode(e){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{render:Ae}=u.createRenderer(Me);j(oe);const ke=["data-scene"],ne=u.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,{expose:a}){var i;const t=e,{logWarning:r}=L(),n=u.ref(),o=u.shallowRef(new h.Scene);G();const f=u.useSlots(),s=(i=u.getCurrentInstance())==null?void 0:i.appContext.app,d=p=>u.defineComponent({setup(){var v;const g=(v=u.getCurrentInstance())==null?void 0:v.appContext;return g&&(g.app=s),u.provide("useTres",p),u.provide("extend",j),()=>u.h(u.Fragment,null,f!=null&&f.default?f.default():[])}}),l=p=>{const g=d(p);Ae(u.h(g),o.value)},m=u.computed(()=>t.disableRender),c=u.shallowRef(null);return a({context:c}),u.onMounted(()=>{const p=n;c.value=ee({scene:o.value,canvas:p,windowSize:t.windowSize,disableRender:m,rendererOptions:t}),Z({scene:o.value,contextParts:c.value});const{registerCamera:g,camera:v,cameras:_,deregisterCamera:k}=c.value;l(c.value);const D=()=>{const A=new h.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);A.position.set(3,3,3),A.lookAt(0,0,0),g(A);const M=u.watchEffect(()=>{_.value.length>=2&&(A.removeFromParent(),k(A),M==null||M())})};u.watch(()=>t.camera,(A,M)=>{A&&g(A),M&&(M.removeFromParent(),k(M))},{immediate:!0}),v.value||(r("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."),D())}),(p,g)=>(u.openBlock(),u.createElementBlock("canvas",u.mergeProps({ref_key:"canvas",ref:n,"data-scene":o.value.uuid},p.$attrs,{style:{display:"block",width:"100%",height:"100%",position:p.windowSize?"fixed":"relative",top:0,left:0,pointerEvents:"auto",touchAction:"none"}}),null,16,ke))}}),be=["TresCanvas","TresLeches","TresScene"],De={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!be.includes(e)||e==="primitive"}}},Oe={install(e){e.component("TresCanvas",ne)}};w.TresCanvas=ne,w.catalogue=T,w.default=Oe,w.extend=j,w.isProd=ue,w.normalizeColor=N,w.normalizeVectorFlexibleParam=ce,w.templateCompilerOptions=De,w.trasverseObjects=Y,w.useCamera=R,w.useLoader=Ce,w.useLogger=L,w.usePointerEventHandler=Z,w.useRaycaster=Q,w.useRenderLoop=G,w.useRenderer=K,w.useSeek=he,w.useTexture=Pe,w.useTres=_e,w.useTresContext=te,w.useTresContextProvider=ee,Object.defineProperties(w,{__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.
|
|
4
|
+
"version": "3.4.0",
|
|
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/)",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
"exports": {
|
|
18
18
|
".": {
|
|
19
19
|
"types": "./dist/index.d.ts",
|
|
20
|
-
"import": "./dist/tres.js"
|
|
20
|
+
"import": "./dist/tres.js",
|
|
21
|
+
"require": "./dist/tres.umd.cjs"
|
|
21
22
|
},
|
|
22
23
|
"./components": {
|
|
23
24
|
"types": "./dist/components/index.d.ts"
|
|
@@ -72,7 +73,7 @@
|
|
|
72
73
|
"@release-it/conventional-changelog": "^7.0.0",
|
|
73
74
|
"@stackblitz/sdk": "^1.9.0",
|
|
74
75
|
"@tresjs/cientos": "3.1.0",
|
|
75
|
-
"@tresjs/eslint-config-vue": "^0.
|
|
76
|
+
"@tresjs/eslint-config-vue": "^0.2.0",
|
|
76
77
|
"@types/three": "^0.155.1",
|
|
77
78
|
"@typescript-eslint/eslint-plugin": "^6.4.1",
|
|
78
79
|
"@typescript-eslint/parser": "^6.4.1",
|