@tresjs/core 2.0.0-beta.3 → 2.0.0-beta.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 +76 -76
- package/dist/tres.umd.cjs +3 -3
- package/package.json +1 -1
package/dist/tres.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v2.0.0-beta.
|
|
3
|
+
* version: v2.0.0-beta.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
|
|
8
|
+
import { ref as k, watchEffect as ie, toRef as Pe, shallowRef as se, toRefs as ce, computed as ue, watch as H, shallowReactive as le, provide as Re, inject as ke, onUnmounted as fe, createRenderer as Ae, defineComponent as de, onMounted as Oe, h as A } from "vue";
|
|
9
9
|
import * as pe from "three";
|
|
10
|
-
import { MathUtils as je, PerspectiveCamera as
|
|
10
|
+
import { MathUtils as je, PerspectiveCamera as B, OrthographicCamera as _e, Clock as me, Color as U, sRGBEncoding as ze, ACESFilmicToneMapping as Be, PCFSoftShadowMap as De, PCFShadowMap as Fe, LinearEncoding as ne, NoToneMapping as ae, WebGLRenderer as Ie, LoadingManager as We, TextureLoader as He, Raycaster as Ue, Vector2 as Ge, BufferAttribute as Ne } from "three";
|
|
11
11
|
import { createEventHook as V, useRafFn as $e, resolveUnref as u, useWindowSize as qe, useElementSize as Ve, useDevicePixelRatio as Ye, unrefElement as G, isFunction as re, useEventListener as Ke } from "@vueuse/core";
|
|
12
|
-
const $ =
|
|
12
|
+
const $ = k({ uuid: je.generateUUID() }), ve = (e) => void Object.assign($.value, e);
|
|
13
13
|
var Xe = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Xe || {});
|
|
14
14
|
const Je = 45;
|
|
15
|
-
let
|
|
15
|
+
let R;
|
|
16
16
|
function q() {
|
|
17
|
-
const { state: e, setState: t, aspectRatio: r } =
|
|
17
|
+
const { state: e, setState: t, aspectRatio: r } = j();
|
|
18
18
|
function a(o = "Perspective", c) {
|
|
19
19
|
var l, v, d;
|
|
20
20
|
if (o === "Perspective") {
|
|
21
|
-
const { near: f, far:
|
|
21
|
+
const { near: f, far: E, fov: h } = c || {
|
|
22
22
|
near: 0.1,
|
|
23
23
|
far: 1e3,
|
|
24
24
|
fov: Je
|
|
25
25
|
};
|
|
26
|
-
|
|
26
|
+
R = new B(h, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, f, E), (v = e.cameras) == null || v.push(R);
|
|
27
27
|
} else {
|
|
28
|
-
const { left: f, right:
|
|
28
|
+
const { left: f, right: E, top: h, bottom: L, near: w, far: p } = c || {
|
|
29
29
|
left: -100,
|
|
30
30
|
right: 100,
|
|
31
31
|
top: 100,
|
|
@@ -33,17 +33,17 @@ function q() {
|
|
|
33
33
|
near: 0.1,
|
|
34
34
|
far: 1e3
|
|
35
35
|
};
|
|
36
|
-
|
|
36
|
+
R = new _e(f, E, h, L, w, p), (d = e.cameras) == null || d.push(R);
|
|
37
37
|
}
|
|
38
|
-
return e.camera =
|
|
38
|
+
return e.camera = R, t("camera", e.camera), R;
|
|
39
39
|
}
|
|
40
40
|
function n() {
|
|
41
41
|
var o;
|
|
42
|
-
e.camera instanceof
|
|
42
|
+
e.camera instanceof B && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (o = e.camera) == null || o.updateProjectionMatrix();
|
|
43
43
|
}
|
|
44
44
|
function i(o) {
|
|
45
45
|
var c;
|
|
46
|
-
(c = e.cameras) == null || c.push(o), o instanceof
|
|
46
|
+
(c = e.cameras) == null || c.push(o), o instanceof B && e.aspectRatio && (o.aspect = e.aspectRatio.value), o.updateProjectionMatrix(), t("camera", o);
|
|
47
47
|
}
|
|
48
48
|
function s() {
|
|
49
49
|
e.cameras = [];
|
|
@@ -58,16 +58,16 @@ function q() {
|
|
|
58
58
|
clearCameras: s
|
|
59
59
|
};
|
|
60
60
|
}
|
|
61
|
-
const he = V(), ge = V(), Y = V(),
|
|
62
|
-
let
|
|
61
|
+
const he = V(), ge = V(), Y = V(), O = new me();
|
|
62
|
+
let D = 0, F = 0;
|
|
63
63
|
const { pause: Qe, resume: Ze, isActive: et } = $e(
|
|
64
64
|
() => {
|
|
65
|
-
he.trigger({ delta:
|
|
65
|
+
he.trigger({ delta: D, elapsed: F, clock: O }), ge.trigger({ delta: D, elapsed: F, clock: O }), Y.trigger({ delta: D, elapsed: F, clock: O });
|
|
66
66
|
},
|
|
67
67
|
{ immediate: !1 }
|
|
68
68
|
);
|
|
69
69
|
Y.on(() => {
|
|
70
|
-
|
|
70
|
+
D = O.getDelta(), F = O.getElapsedTime();
|
|
71
71
|
});
|
|
72
72
|
function we() {
|
|
73
73
|
return {
|
|
@@ -97,7 +97,7 @@ const N = {
|
|
|
97
97
|
t[r] instanceof Object && Object.assign(t[r], be(e[r], t[r]));
|
|
98
98
|
return Object.assign(e || {}, t), e;
|
|
99
99
|
}, nt = "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", at = /* @__PURE__ */ rt(nt);
|
|
100
|
-
function
|
|
100
|
+
function _(e) {
|
|
101
101
|
return e.replace(/-([a-z])/g, (t, r) => r.toUpperCase());
|
|
102
102
|
}
|
|
103
103
|
function rt(e, t) {
|
|
@@ -108,7 +108,7 @@ function rt(e, t) {
|
|
|
108
108
|
}
|
|
109
109
|
function ot(e) {
|
|
110
110
|
var ee, te;
|
|
111
|
-
const t = se(), r =
|
|
111
|
+
const t = se(), r = k(!1), {
|
|
112
112
|
alpha: a = !0,
|
|
113
113
|
antialias: n = !0,
|
|
114
114
|
depth: i,
|
|
@@ -119,57 +119,57 @@ function ot(e) {
|
|
|
119
119
|
stencil: v,
|
|
120
120
|
shadows: d = !1,
|
|
121
121
|
shadowMapType: f = Fe,
|
|
122
|
-
physicallyCorrectLights:
|
|
122
|
+
physicallyCorrectLights: E = !1,
|
|
123
123
|
useLegacyLights: h = !1,
|
|
124
|
-
outputEncoding:
|
|
125
|
-
toneMapping:
|
|
124
|
+
outputEncoding: L = ne,
|
|
125
|
+
toneMapping: w = ae,
|
|
126
126
|
toneMappingExposure: p = 1,
|
|
127
|
-
context:
|
|
128
|
-
powerPreference:
|
|
129
|
-
preserveDrawingBuffer:
|
|
130
|
-
clearColor:
|
|
131
|
-
windowSize:
|
|
132
|
-
preset:
|
|
133
|
-
} = ce(e), { state:
|
|
134
|
-
!u(
|
|
127
|
+
context: M = void 0,
|
|
128
|
+
powerPreference: b = "default",
|
|
129
|
+
preserveDrawingBuffer: y = !1,
|
|
130
|
+
clearColor: x,
|
|
131
|
+
windowSize: C = !1,
|
|
132
|
+
preset: S = void 0
|
|
133
|
+
} = ce(e), { state: g, setState: T } = j(), { width: K, height: X } = u(C) == !0 || u(C) === "" || u(C) === "true" ? qe() : Ve(g.container), { logError: Me, logWarning: Ce } = I(), { pixelRatio: J } = Ye(), { pause: Ee, resume: Le } = we(), W = ue(() => K.value / X.value);
|
|
134
|
+
!u(C) && ((te = (ee = g.container) == null ? void 0 : ee.value) == null ? void 0 : te.offsetHeight) === 0 && Ce(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
|
|
135
135
|
You could set windowSize=true to force the canvas to be the size of the window.`);
|
|
136
136
|
const Q = () => {
|
|
137
137
|
t.value && (t.value.setSize(K.value, X.value), t.value.setPixelRatio(Math.min(J.value, 2)));
|
|
138
138
|
}, Z = () => {
|
|
139
139
|
if (!t.value)
|
|
140
140
|
return;
|
|
141
|
-
const
|
|
142
|
-
if (
|
|
143
|
-
|
|
141
|
+
const P = u(S);
|
|
142
|
+
if (P) {
|
|
143
|
+
P in N || Me("Renderer Preset must be one of these: " + Object.keys(N).join(", ")), be(t.value, N[P]);
|
|
144
144
|
return;
|
|
145
145
|
}
|
|
146
|
-
t.value.shadowMap.enabled = u(d), t.value.shadowMap.type = u(f), t.value.toneMapping = u(
|
|
146
|
+
t.value.shadowMap.enabled = u(d), t.value.shadowMap.type = u(f), t.value.toneMapping = u(w) || ae, t.value.toneMappingExposure = u(p), t.value.outputEncoding = u(L) || ne, x != null && x.value && t.value.setClearColor(tt(u(x))), t.value.useLegacyLights = u(h);
|
|
147
147
|
}, Se = () => {
|
|
148
|
-
const
|
|
149
|
-
|
|
150
|
-
canvas:
|
|
148
|
+
const P = G(g.canvas);
|
|
149
|
+
P && (t.value = new Ie({
|
|
150
|
+
canvas: P,
|
|
151
151
|
alpha: u(a),
|
|
152
152
|
antialias: u(n),
|
|
153
|
-
context: u(
|
|
153
|
+
context: u(M),
|
|
154
154
|
depth: u(i),
|
|
155
155
|
failIfMajorPerformanceCaveat: u(o),
|
|
156
156
|
logarithmicDepthBuffer: u(s),
|
|
157
|
-
powerPreference: u(
|
|
157
|
+
powerPreference: u(b),
|
|
158
158
|
precision: u(c),
|
|
159
159
|
stencil: u(v),
|
|
160
|
-
preserveDrawingBuffer: u(
|
|
160
|
+
preserveDrawingBuffer: u(y),
|
|
161
161
|
premultipliedAlpha: u(l)
|
|
162
|
-
}),
|
|
162
|
+
}), T("renderer", t.value), T("clock", new me()), T("aspectRatio", W), Z(), Q(), Le(), r.value = !0);
|
|
163
163
|
}, Te = () => {
|
|
164
164
|
t.value && (t.value.dispose(), t.value = void 0, r.value = !1, Ee());
|
|
165
165
|
};
|
|
166
166
|
return H([W, J], Q), H(
|
|
167
|
-
[d, f,
|
|
167
|
+
[d, f, L, h, w, p, x],
|
|
168
168
|
Z
|
|
169
169
|
), H(
|
|
170
|
-
() => [
|
|
170
|
+
() => [g.canvas, g.container],
|
|
171
171
|
() => {
|
|
172
|
-
G(
|
|
172
|
+
G(g.canvas) && G(g.container) && Se();
|
|
173
173
|
},
|
|
174
174
|
{ immediate: !0, deep: !0 }
|
|
175
175
|
), {
|
|
@@ -187,7 +187,7 @@ function it(e) {
|
|
|
187
187
|
}), t;
|
|
188
188
|
}
|
|
189
189
|
async function xt(e, t, r, a, n) {
|
|
190
|
-
const { logError: i } =
|
|
190
|
+
const { logError: i } = I(), s = new e();
|
|
191
191
|
n && n(s), r && r(s);
|
|
192
192
|
const c = (Array.isArray(t) ? t : [t]).map(
|
|
193
193
|
(l) => new Promise((v, d) => {
|
|
@@ -269,7 +269,7 @@ function ct() {
|
|
|
269
269
|
};
|
|
270
270
|
return Re(xe, a), a;
|
|
271
271
|
}
|
|
272
|
-
const
|
|
272
|
+
const j = () => ke(xe, {
|
|
273
273
|
state: le({
|
|
274
274
|
camera: void 0,
|
|
275
275
|
cameras: [],
|
|
@@ -279,7 +279,7 @@ const k = () => ke(xe, {
|
|
|
279
279
|
});
|
|
280
280
|
function ut() {
|
|
281
281
|
var s;
|
|
282
|
-
const e = se(new Ue()), t =
|
|
282
|
+
const e = se(new Ue()), t = k(new Ge()), r = k(null), { setState: a, state: n } = j();
|
|
283
283
|
a("raycaster", e.value), a("pointer", t), a("currentInstance", r);
|
|
284
284
|
function i(o) {
|
|
285
285
|
t.value.x = o.clientX / window.innerWidth * 2 - 1, t.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
|
|
@@ -293,7 +293,7 @@ function ut() {
|
|
|
293
293
|
};
|
|
294
294
|
}
|
|
295
295
|
const Ct = !0, oe = "[TresJS ▲ ■ ●] ";
|
|
296
|
-
function
|
|
296
|
+
function I() {
|
|
297
297
|
function e(a, n) {
|
|
298
298
|
console.error(`${oe} ${a}`, n || "");
|
|
299
299
|
}
|
|
@@ -309,7 +309,7 @@ function F() {
|
|
|
309
309
|
};
|
|
310
310
|
}
|
|
311
311
|
function Et() {
|
|
312
|
-
const { logWarning: e } =
|
|
312
|
+
const { logWarning: e } = I();
|
|
313
313
|
function t(a, n, i) {
|
|
314
314
|
let s = null;
|
|
315
315
|
return a.traverse((o) => {
|
|
@@ -325,7 +325,7 @@ function Et() {
|
|
|
325
325
|
};
|
|
326
326
|
}
|
|
327
327
|
const lt = /^on[^a-z]/, ft = (e) => lt.test(e);
|
|
328
|
-
let
|
|
328
|
+
let z = null;
|
|
329
329
|
const dt = {
|
|
330
330
|
createElement(e, t, r, a) {
|
|
331
331
|
if (e === "template" || at(e))
|
|
@@ -339,7 +339,7 @@ const dt = {
|
|
|
339
339
|
return (a == null ? void 0 : a.attach) === void 0 && (n.isMaterial ? n.attach = "material" : n.isBufferGeometry && (n.attach = "geometry")), n.events = {}, n;
|
|
340
340
|
},
|
|
341
341
|
insert(e, t, r) {
|
|
342
|
-
if (
|
|
342
|
+
if (z === null && t.isScene && (z = t), t === null && (t = z), t != null && t.isObject3D && (e != null && e.isObject3D)) {
|
|
343
343
|
const a = r ? t.children.indexOf(r) : 0;
|
|
344
344
|
e.parent = t, t.children.splice(a, 0, e), e.dispatchEvent({ type: "added" });
|
|
345
345
|
} else
|
|
@@ -354,18 +354,18 @@ const dt = {
|
|
|
354
354
|
patchProp(e, t, r, a) {
|
|
355
355
|
if (e) {
|
|
356
356
|
let n = e, i = t;
|
|
357
|
-
const s =
|
|
357
|
+
const s = _(i);
|
|
358
358
|
let o = n == null ? void 0 : n[s];
|
|
359
|
-
if (e.parent || (e.parent =
|
|
359
|
+
if (e.parent || (e.parent = z), n.type === "BufferGeometry") {
|
|
360
360
|
n.setAttribute(
|
|
361
|
-
|
|
361
|
+
_(i),
|
|
362
362
|
new Ne(...a)
|
|
363
363
|
);
|
|
364
364
|
return;
|
|
365
365
|
}
|
|
366
366
|
if (i.includes("-") && o === void 0) {
|
|
367
367
|
const l = i.split("-");
|
|
368
|
-
o = l.reduce((v, d) => v[
|
|
368
|
+
o = l.reduce((v, d) => v[_(d)], n), i = l.pop(), o != null && o.set || (n = l.reduce((v, d) => v[_(d)], n));
|
|
369
369
|
}
|
|
370
370
|
ft(i) && (e.events[i] = a);
|
|
371
371
|
let c = a;
|
|
@@ -396,7 +396,7 @@ const dt = {
|
|
|
396
396
|
return t;
|
|
397
397
|
};
|
|
398
398
|
ve(pe);
|
|
399
|
-
const { logWarning: vt } =
|
|
399
|
+
const { logWarning: vt } = I(), ht = de({
|
|
400
400
|
name: "TresScene",
|
|
401
401
|
props: [
|
|
402
402
|
"shadows",
|
|
@@ -415,38 +415,38 @@ const { logWarning: vt } = F(), ht = de({
|
|
|
415
415
|
],
|
|
416
416
|
setup(e, { slots: t, expose: r }) {
|
|
417
417
|
e.physicallyCorrectLights === !0 && vt("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
|
|
418
|
-
const a =
|
|
418
|
+
const a = k(), n = k(), i = new pe.Scene(), { setState: s } = j();
|
|
419
419
|
s("scene", i), s("canvas", n), s("container", a);
|
|
420
420
|
const { pushCamera: o } = q();
|
|
421
|
-
o(new
|
|
421
|
+
o(new B()), Oe(() => {
|
|
422
422
|
c();
|
|
423
423
|
}), fe(() => {
|
|
424
424
|
s("renderer", null);
|
|
425
425
|
});
|
|
426
426
|
function c() {
|
|
427
|
-
const { renderer: d } = ot(e), { activeCamera: f } = q(), { onLoop:
|
|
428
|
-
let
|
|
427
|
+
const { renderer: d } = ot(e), { activeCamera: f } = q(), { onLoop: E } = we(), { raycaster: h, pointer: L } = ut();
|
|
428
|
+
let w = null, p = null;
|
|
429
429
|
ie(() => {
|
|
430
|
-
f.value && h.value.setFromCamera(
|
|
431
|
-
}),
|
|
432
|
-
var b, y,
|
|
433
|
-
if (f.value && ((
|
|
434
|
-
const
|
|
435
|
-
|
|
430
|
+
f.value && h.value.setFromCamera(L.value, f.value);
|
|
431
|
+
}), E(() => {
|
|
432
|
+
var M, b, y, x, C, S, g;
|
|
433
|
+
if (f.value && ((M = d.value) == null || M.render(i, f.value)), h.value) {
|
|
434
|
+
const T = h.value.intersectObjects(i.children);
|
|
435
|
+
T.length > 0 ? (p = T[0], w === null && ((x = (y = (b = p.object) == null ? void 0 : b.events) == null ? void 0 : y.onPointerEnter) == null || x.call(y, p))) : w !== null && ((g = (S = (C = p == null ? void 0 : p.object) == null ? void 0 : C.events) == null ? void 0 : S.onPointerLeave) == null || g.call(S, w), p = null), w = p;
|
|
436
436
|
}
|
|
437
437
|
}), Ke(n.value, "click", () => {
|
|
438
|
-
var b, y;
|
|
439
|
-
p !== null && ((y = (b = p.object.events).onClick) == null || y.call(b, p));
|
|
438
|
+
var M, b, y;
|
|
439
|
+
p !== null && ((y = (b = (M = p.object) == null ? void 0 : M.events) == null ? void 0 : b.onClick) == null || y.call(b, p));
|
|
440
440
|
});
|
|
441
441
|
}
|
|
442
442
|
let l;
|
|
443
443
|
function v() {
|
|
444
|
-
l = mt(t), l.provide("useTres",
|
|
444
|
+
l = mt(t), l.provide("useTres", j()), l.provide("extend", ve), l.mount(i);
|
|
445
445
|
}
|
|
446
446
|
return v(), r({
|
|
447
447
|
scene: i
|
|
448
|
-
}), () =>
|
|
449
|
-
|
|
448
|
+
}), () => A(
|
|
449
|
+
A(
|
|
450
450
|
"div",
|
|
451
451
|
{
|
|
452
452
|
ref: a,
|
|
@@ -461,7 +461,7 @@ const { logWarning: vt } = F(), ht = de({
|
|
|
461
461
|
}
|
|
462
462
|
},
|
|
463
463
|
[
|
|
464
|
-
|
|
464
|
+
A(
|
|
465
465
|
"div",
|
|
466
466
|
{
|
|
467
467
|
style: {
|
|
@@ -470,7 +470,7 @@ const { logWarning: vt } = F(), ht = de({
|
|
|
470
470
|
}
|
|
471
471
|
},
|
|
472
472
|
[
|
|
473
|
-
|
|
473
|
+
A("canvas", {
|
|
474
474
|
ref: n,
|
|
475
475
|
"data-scene": i.uuid,
|
|
476
476
|
style: {
|
|
@@ -507,7 +507,7 @@ const { logWarning: vt } = F(), ht = de({
|
|
|
507
507
|
],
|
|
508
508
|
setup(e, { slots: t, expose: r }) {
|
|
509
509
|
const a = ct();
|
|
510
|
-
return r(a), () =>
|
|
510
|
+
return r(a), () => A(ht, e, t);
|
|
511
511
|
}
|
|
512
512
|
}), Lt = {
|
|
513
513
|
install(e) {
|
|
@@ -524,12 +524,12 @@ export {
|
|
|
524
524
|
it as trasverseObjects,
|
|
525
525
|
q as useCamera,
|
|
526
526
|
xt as useLoader,
|
|
527
|
-
|
|
527
|
+
I as useLogger,
|
|
528
528
|
ut as useRaycaster,
|
|
529
529
|
we as useRenderLoop,
|
|
530
530
|
ot as useRenderer,
|
|
531
531
|
Et as useSeek,
|
|
532
532
|
Mt as useTexture,
|
|
533
|
-
|
|
533
|
+
j as useTres,
|
|
534
534
|
ct as useTresProvider
|
|
535
535
|
};
|
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v2.0.0-beta.
|
|
3
|
+
* version: v2.0.0-beta.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(d,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],s):(d=typeof globalThis<"u"?globalThis:d||self,s(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,s,u,c){"use strict";function pe(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const K=pe(u),
|
|
9
|
-
You could set windowSize=true to force the canvas to be the size of the window.`);const fe=()=>{t.value&&(t.value.setSize(ie.value,se.value),t.value.setPixelRatio(Math.min(ce.value,2)))},le=()=>{if(!t.value)return;const A=c.resolveUnref(W);if(A){A in $||De("Renderer Preset must be one of these: "+Object.keys($).join(", ")),Z(t.value,$[A]);return}t.value.shadowMap.enabled=c.resolveUnref(h),t.value.shadowMap.type=c.resolveUnref(m),t.value.toneMapping=c.resolveUnref(y)||u.NoToneMapping,t.value.toneMappingExposure=c.resolveUnref(g),t.value.outputEncoding=c.resolveUnref(O)||u.LinearEncoding,C!=null&&C.value&&t.value.setClearColor(we(c.resolveUnref(C))),t.value.useLegacyLights=c.resolveUnref(b)},Re=()=>{const A=c.unrefElement(x.canvas);A&&(t.value=new u.WebGLRenderer({canvas:A,alpha:c.resolveUnref(a),antialias:c.resolveUnref(n),context:c.resolveUnref(M),depth:c.resolveUnref(i),failIfMajorPerformanceCaveat:c.resolveUnref(o),logarithmicDepthBuffer:c.resolveUnref(f),powerPreference:c.resolveUnref(L),precision:c.resolveUnref(l),stencil:c.resolveUnref(w),preserveDrawingBuffer:c.resolveUnref(I),premultipliedAlpha:c.resolveUnref(p)}),V("renderer",t.value),V("clock",new u.Clock),V("aspectRatio",Y),le(),fe(),Fe(),r.value=!0)},Ie=()=>{t.value&&(t.value.dispose(),t.value=void 0,r.value=!1,Be())};return s.watch([Y,ce],fe),s.watch([h,m,O,b,y,g,C],le),s.watch(()=>[x.canvas,x.container],()=>{c.unrefElement(x.canvas)&&c.unrefElement(x.container)&&Re()},{immediate:!0,deep:!0}),{renderer:t,isReady:r,dispose:Ie,aspectRatio:Y}}const H=e=>!!e&&e.constructor===Array;function ee(e){const t={nodes:{},materials:{}};return e&&e.traverse(r=>{r.name&&(t.nodes[r.name]=r),r.material&&!t.materials[r.material.name]&&(t.materials[r.material.name]=r.material)}),t}async function Ce(e,t,r,a,n){const{logError:i}=T(),f=new e;n&&n(f),r&&r(f);const l=(Array.isArray(t)?t:[t]).map(p=>new Promise((w,h)=>{f.load(p,m=>{m.scene&&Object.assign(m,ee(m.scene)),w(m)},a,m=>h(i("[useLoader] - Failed to load resource",m)))}));return H(t)?await Promise.all(l):await l[0]}async function Me(e){const t=new u.LoadingManager,r=new u.TextureLoader(t),a=n=>new Promise((i,f)=>{r.load(n,o=>i(o),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(H(e)){const n=await Promise.all(e.map(i=>a(i)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:i,normalMap:f,roughnessMap:o,metalnessMap:l,aoMap:p,alphaMap:w,matcap:h}=e;return{map:n?await a(n):null,displacementMap:i?await a(i):null,normalMap:f?await a(f):null,roughnessMap:o?await a(o):null,metalnessMap:l?await a(l):null,aoMap:p?await a(p):null,alphaMap:w?await a(w):null,matcap:h?await a(h):null}}}const v=["00","01","02","03","04","05","06","07","08","09","0a","0b","0c","0d","0e","0f","10","11","12","13","14","15","16","17","18","19","1a","1b","1c","1d","1e","1f","20","21","22","23","24","25","26","27","28","29","2a","2b","2c","2d","2e","2f","30","31","32","33","34","35","36","37","38","39","3a","3b","3c","3d","3e","3f","40","41","42","43","44","45","46","47","48","49","4a","4b","4c","4d","4e","4f","50","51","52","53","54","55","56","57","58","59","5a","5b","5c","5d","5e","5f","60","61","62","63","64","65","66","67","68","69","6a","6b","6c","6d","6e","6f","70","71","72","73","74","75","76","77","78","79","7a","7b","7c","7d","7e","7f","80","81","82","83","84","85","86","87","88","89","8a","8b","8c","8d","8e","8f","90","91","92","93","94","95","96","97","98","99","9a","9b","9c","9d","9e","9f","a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","aa","ab","ac","ad","ae","af","b0","b1","b2","b3","b4","b5","b6","b7","b8","b9","ba","bb","bc","bd","be","bf","c0","c1","c2","c3","c4","c5","c6","c7","c8","c9","ca","cb","cc","cd","ce","cf","d0","d1","d2","d3","d4","d5","d6","d7","d8","d9","da","db","dc","dd","de","df","e0","e1","e2","e3","e4","e5","e6","e7","e8","e9","ea","eb","ec","ed","ee","ef","f0","f1","f2","f3","f4","f5","f6","f7","f8","f9","fa","fb","fc","fd","fe","ff"];function Le(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,r=Math.random()*4294967295|0,a=Math.random()*4294967295|0;return(v[e&255]+v[e>>8&255]+v[e>>16&255]+v[e>>24&255]+"-"+v[t&255]+v[t>>8&255]+"-"+v[t>>16&15|64]+v[t>>24&255]+"-"+v[r&63|128]+v[r>>8&255]+"-"+v[r>>16&255]+v[r>>24&255]+v[a&255]+v[a>>8&255]+v[a>>16&255]+v[a>>24&255]).toLowerCase()}const te=Symbol();function ne(){const e=s.shallowReactive({uuid:Le(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:s.computed(()=>window.innerWidth/window.innerHeight)});function t(n){return e[n]}function r(n,i){e[n]=i}const a={state:e,...s.toRefs(e),getState:t,setState:r};return s.provide(te,a),a}const k=()=>s.inject(te,{state:s.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});function ae(){var f;const e=s.shallowRef(new u.Raycaster),t=s.ref(new u.Vector2),r=s.ref(null),{setState:a,state:n}=k();a("raycaster",e.value),a("pointer",t),a("currentInstance",r);function i(o){t.value.x=o.clientX/window.innerWidth*2-1,t.value.y=-(o.clientY/window.innerHeight)*2+1}return(f=n==null?void 0:n.renderer)==null||f.domElement.addEventListener("pointermove",i),s.onUnmounted(()=>{var o;(o=n==null?void 0:n.renderer)==null||o.domElement.removeEventListener("pointermove",i)}),{raycaster:e,pointer:t}}const Se=!0,re="[TresJS ▲ ■ ●] ";function T(){function e(a,n){console.error(`${re} ${a}`,n||"")}function t(a){console.warn(`${re} ${a}`)}function r(a,n){}return{logError:e,logWarning:t,logMessage:r}}function xe(){const{logWarning:e}=T();function t(a,n,i){let f=null;return a.traverse(o=>{o[n]===i&&(f=o)}),f||e(`Child with ${n} '${i}' not found.`),f}function r(a,n){return t(a,"name",n)}return{seek:t,seekByName:r}}const Pe=/^on[^a-z]/,ke=e=>Pe.test(e);function Ne(e){}let R=null;const Ue={createElement(e,t,r,a){if(e==="template"||be(e))return null;let n;if(a===null&&(a={}),a!=null&&a.args?n=new _.value[e.replace("Tres","")](...a.args):n=new _.value[e.replace("Tres","")],n.isCamera){a!=null&&a.position||n.position.set(3,3,3),a!=null&&a.lookAt||n.lookAt(0,0,0);const{pushCamera:i}=D();i(n)}return(a==null?void 0:a.attach)===void 0&&(n.isMaterial?n.attach="material":n.isBufferGeometry&&(n.attach="geometry")),n.events={},n},insert(e,t,r){if(R===null&&t.isScene&&(R=t),t===null&&(t=R),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const a=r?t.children.indexOf(r):0;e.parent=t,t.children.splice(a,0,e),e.dispatchEvent({type:"added"})}else typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e))},remove(e){if(!e)return;const t=e.parentNode;t&&t.removeChild(e)},patchProp(e,t,r,a){if(e){let n=e,i=t;const f=F(i);let o=n==null?void 0:n[f];if(e.parent||(e.parent=R),n.type==="BufferGeometry"){n.setAttribute(F(i),new u.BufferAttribute(...a));return}if(i.includes("-")&&o===void 0){const p=i.split("-");o=p.reduce((w,h)=>w[F(h)],n),i=p.pop(),o!=null&&o.set||(n=p.reduce((w,h)=>w[F(h)],n))}ke(i)&&(e.events[i]=a);let l=a;if(l===""&&(l=!0),c.isFunction(o)){Array.isArray(l)?e[f](...l):e[f](l);return}!(o!=null&&o.set)&&!c.isFunction(o)?n[f]=l:o.constructor===l.constructor&&(o!=null&&o.copy)?o==null||o.copy(l):Array.isArray(l)?o.set(...l):!o.isColor&&o.setScalar?o.setScalar(l):o.set(l)}},parentNode(e){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{createApp:Oe}=s.createRenderer(Ue),Ae=e=>{const t=Oe(r);function r(){return e&&e.default?e.default():[]}return t};N(K);const{logWarning:je}=T(),Te=s.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:r}){e.physicallyCorrectLights===!0&&je("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=s.ref(),n=s.ref(),i=new K.Scene,{setState:f}=k();f("scene",i),f("canvas",n),f("container",a);const{pushCamera:o}=D();o(new u.PerspectiveCamera),s.onMounted(()=>{l()}),s.onUnmounted(()=>{f("renderer",null)});function l(){const{renderer:h}=E(e),{activeCamera:m}=D(),{onLoop:U}=q(),{raycaster:b,pointer:O}=ae();let y=null,g=null;s.watchEffect(()=>{m.value&&b.value.setFromCamera(O.value,m.value)}),U(()=>{var M,L,I,C,S;if(m.value&&((M=h.value)==null||M.render(i,m.value)),b.value){const W=b.value.intersectObjects(i.children);W.length>0?(g=W[0],y===null&&((I=(L=g.object.events).onPointerEnter)==null||I.call(L,g))):y!==null&&((S=g==null?void 0:(C=g.object.events).onPointerLeave)==null||S.call(C,y),g=null),y=g}}),c.useEventListener(n.value,"click",()=>{var M,L;g!==null&&((L=(M=g.object.events).onClick)==null||L.call(M,g))})}let p;function w(){p=Ae(t),p.provide("useTres",k()),p.provide("extend",N),p.mount(i)}return w(),r({scene:i}),()=>s.h(s.h("div",{ref:a,"data-scene":i.uuid,key:i.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[s.h("div",{style:{width:"100%",height:"100%"}},[s.h("canvas",{ref:n,"data-scene":i.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),oe=s.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:r}){const a=ne();return r(a),()=>s.h(Te,e,t)}}),_e={install(e){e.component("TresCanvas",oe)}};d.CameraType=X,d.TresCanvas=oe,d.catalogue=_,d.default=_e,d.extend=N,d.isProd=Se,d.trasverseObjects=ee,d.useCamera=D,d.useLoader=Ce,d.useLogger=T,d.useRaycaster=ae,d.useRenderLoop=q,d.useRenderer=E,d.useSeek=xe,d.useTexture=Me,d.useTres=k,d.useTresProvider=ne,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
8
|
+
(function(d,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],s):(d=typeof globalThis<"u"?globalThis:d||self,s(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,s,u,c){"use strict";function pe(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const K=pe(u),B=s.ref({uuid:u.MathUtils.generateUUID()}),G=e=>void Object.assign(B.value,e);var X=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(X||{});const me=45;let k;function F(){const{state:e,setState:t,aspectRatio:r}=U();function a(o="Perspective",l){var p,w,h;if(o==="Perspective"){const{near:m,far:O,fov:b}=l||{near:.1,far:1e3,fov:me};k=new u.PerspectiveCamera(b,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,m,O),(w=e.cameras)==null||w.push(k)}else{const{left:m,right:O,top:b,bottom:A,near:C,far:g}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};k=new u.OrthographicCamera(m,O,b,A,C,g),(h=e.cameras)==null||h.push(k)}return e.camera=k,t("camera",e.camera),k}function n(){var o;e.camera instanceof u.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(o=e.camera)==null||o.updateProjectionMatrix()}function i(o){var l;(l=e.cameras)==null||l.push(o),o instanceof u.PerspectiveCamera&&e.aspectRatio&&(o.aspect=e.aspectRatio.value),o.updateProjectionMatrix(),t("camera",o)}function f(){e.cameras=[]}return s.watchEffect(()=>{r!=null&&r.value&&n()}),{activeCamera:s.toRef(e,"camera"),createCamera:a,updateCamera:n,pushCamera:i,clearCameras:f}}const J=c.createEventHook(),Q=c.createEventHook(),q=c.createEventHook(),D=new u.Clock;let R=0,I=0;const{pause:ve,resume:he,isActive:ge}=c.useRafFn(()=>{J.trigger({delta:R,elapsed:I,clock:D}),Q.trigger({delta:R,elapsed:I,clock:D}),q.trigger({delta:R,elapsed:I,clock:D})},{immediate:!1});q.on(()=>{R=D.getDelta(),I=D.getElapsedTime()});function $(){return{onBeforeLoop:J.on,onLoop:Q.on,onAfterLoop:q.on,pause:ve,resume:he,isActive:ge}}function we(e){return e instanceof u.Color?e:Array.isArray(e)?new u.Color(...e):new u.Color(e)}const V={realistic:{outputEncoding:u.sRGBEncoding,toneMapping:u.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:u.PCFSoftShadowMap}}},Z=(e,t)=>{for(const r of Object.keys(t))t[r]instanceof Object&&Object.assign(t[r],Z(e[r],t[r]));return Object.assign(e||{},t),e},be=ye("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 W(e){return e.replace(/-([a-z])/g,(t,r)=>r.toUpperCase())}function ye(e,t){const r=Object.create(null),a=e.split(",");for(let n=0;n<a.length;n++)r[a[n]]=!0;return t?n=>!!r[n.toLowerCase()]:n=>!!r[n]}function E(e){var ue,de;const t=s.shallowRef(),r=s.ref(!1),{alpha:a=!0,antialias:n=!0,depth:i,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:o,precision:l,premultipliedAlpha:p,stencil:w,shadows:h=!1,shadowMapType:m=u.PCFShadowMap,physicallyCorrectLights:O=!1,useLegacyLights:b=!1,outputEncoding:A=u.LinearEncoding,toneMapping:C=u.NoToneMapping,toneMappingExposure:g=1,context:x=void 0,powerPreference:M="default",preserveDrawingBuffer:L=!1,clearColor:S,windowSize:P=!1,preset:j=void 0}=s.toRefs(e),{state:y,setState:T}=U(),{width:ie,height:se}=c.resolveUnref(P)==!0||c.resolveUnref(P)===""||c.resolveUnref(P)==="true"?c.useWindowSize():c.useElementSize(y.container),{logError:De,logWarning:ze}=z(),{pixelRatio:ce}=c.useDevicePixelRatio(),{pause:Be,resume:Fe}=$(),Y=s.computed(()=>ie.value/se.value);!c.resolveUnref(P)&&((de=(ue=y.container)==null?void 0:ue.value)==null?void 0:de.offsetHeight)===0&&ze(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
|
|
9
|
+
You could set windowSize=true to force the canvas to be the size of the window.`);const fe=()=>{t.value&&(t.value.setSize(ie.value,se.value),t.value.setPixelRatio(Math.min(ce.value,2)))},le=()=>{if(!t.value)return;const _=c.resolveUnref(j);if(_){_ in V||De("Renderer Preset must be one of these: "+Object.keys(V).join(", ")),Z(t.value,V[_]);return}t.value.shadowMap.enabled=c.resolveUnref(h),t.value.shadowMap.type=c.resolveUnref(m),t.value.toneMapping=c.resolveUnref(C)||u.NoToneMapping,t.value.toneMappingExposure=c.resolveUnref(g),t.value.outputEncoding=c.resolveUnref(A)||u.LinearEncoding,S!=null&&S.value&&t.value.setClearColor(we(c.resolveUnref(S))),t.value.useLegacyLights=c.resolveUnref(b)},Re=()=>{const _=c.unrefElement(y.canvas);_&&(t.value=new u.WebGLRenderer({canvas:_,alpha:c.resolveUnref(a),antialias:c.resolveUnref(n),context:c.resolveUnref(x),depth:c.resolveUnref(i),failIfMajorPerformanceCaveat:c.resolveUnref(o),logarithmicDepthBuffer:c.resolveUnref(f),powerPreference:c.resolveUnref(M),precision:c.resolveUnref(l),stencil:c.resolveUnref(w),preserveDrawingBuffer:c.resolveUnref(L),premultipliedAlpha:c.resolveUnref(p)}),T("renderer",t.value),T("clock",new u.Clock),T("aspectRatio",Y),le(),fe(),Fe(),r.value=!0)},Ie=()=>{t.value&&(t.value.dispose(),t.value=void 0,r.value=!1,Be())};return s.watch([Y,ce],fe),s.watch([h,m,A,b,C,g,S],le),s.watch(()=>[y.canvas,y.container],()=>{c.unrefElement(y.canvas)&&c.unrefElement(y.container)&&Re()},{immediate:!0,deep:!0}),{renderer:t,isReady:r,dispose:Ie,aspectRatio:Y}}const H=e=>!!e&&e.constructor===Array;function ee(e){const t={nodes:{},materials:{}};return e&&e.traverse(r=>{r.name&&(t.nodes[r.name]=r),r.material&&!t.materials[r.material.name]&&(t.materials[r.material.name]=r.material)}),t}async function Ce(e,t,r,a,n){const{logError:i}=z(),f=new e;n&&n(f),r&&r(f);const l=(Array.isArray(t)?t:[t]).map(p=>new Promise((w,h)=>{f.load(p,m=>{m.scene&&Object.assign(m,ee(m.scene)),w(m)},a,m=>h(i("[useLoader] - Failed to load resource",m)))}));return H(t)?await Promise.all(l):await l[0]}async function Me(e){const t=new u.LoadingManager,r=new u.TextureLoader(t),a=n=>new Promise((i,f)=>{r.load(n,o=>i(o),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(H(e)){const n=await Promise.all(e.map(i=>a(i)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:i,normalMap:f,roughnessMap:o,metalnessMap:l,aoMap:p,alphaMap:w,matcap:h}=e;return{map:n?await a(n):null,displacementMap:i?await a(i):null,normalMap:f?await a(f):null,roughnessMap:o?await a(o):null,metalnessMap:l?await a(l):null,aoMap:p?await a(p):null,alphaMap:w?await a(w):null,matcap:h?await a(h):null}}}const v=["00","01","02","03","04","05","06","07","08","09","0a","0b","0c","0d","0e","0f","10","11","12","13","14","15","16","17","18","19","1a","1b","1c","1d","1e","1f","20","21","22","23","24","25","26","27","28","29","2a","2b","2c","2d","2e","2f","30","31","32","33","34","35","36","37","38","39","3a","3b","3c","3d","3e","3f","40","41","42","43","44","45","46","47","48","49","4a","4b","4c","4d","4e","4f","50","51","52","53","54","55","56","57","58","59","5a","5b","5c","5d","5e","5f","60","61","62","63","64","65","66","67","68","69","6a","6b","6c","6d","6e","6f","70","71","72","73","74","75","76","77","78","79","7a","7b","7c","7d","7e","7f","80","81","82","83","84","85","86","87","88","89","8a","8b","8c","8d","8e","8f","90","91","92","93","94","95","96","97","98","99","9a","9b","9c","9d","9e","9f","a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","aa","ab","ac","ad","ae","af","b0","b1","b2","b3","b4","b5","b6","b7","b8","b9","ba","bb","bc","bd","be","bf","c0","c1","c2","c3","c4","c5","c6","c7","c8","c9","ca","cb","cc","cd","ce","cf","d0","d1","d2","d3","d4","d5","d6","d7","d8","d9","da","db","dc","dd","de","df","e0","e1","e2","e3","e4","e5","e6","e7","e8","e9","ea","eb","ec","ed","ee","ef","f0","f1","f2","f3","f4","f5","f6","f7","f8","f9","fa","fb","fc","fd","fe","ff"];function Le(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,r=Math.random()*4294967295|0,a=Math.random()*4294967295|0;return(v[e&255]+v[e>>8&255]+v[e>>16&255]+v[e>>24&255]+"-"+v[t&255]+v[t>>8&255]+"-"+v[t>>16&15|64]+v[t>>24&255]+"-"+v[r&63|128]+v[r>>8&255]+"-"+v[r>>16&255]+v[r>>24&255]+v[a&255]+v[a>>8&255]+v[a>>16&255]+v[a>>24&255]).toLowerCase()}const te=Symbol();function ne(){const e=s.shallowReactive({uuid:Le(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:s.computed(()=>window.innerWidth/window.innerHeight)});function t(n){return e[n]}function r(n,i){e[n]=i}const a={state:e,...s.toRefs(e),getState:t,setState:r};return s.provide(te,a),a}const U=()=>s.inject(te,{state:s.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});function ae(){var f;const e=s.shallowRef(new u.Raycaster),t=s.ref(new u.Vector2),r=s.ref(null),{setState:a,state:n}=U();a("raycaster",e.value),a("pointer",t),a("currentInstance",r);function i(o){t.value.x=o.clientX/window.innerWidth*2-1,t.value.y=-(o.clientY/window.innerHeight)*2+1}return(f=n==null?void 0:n.renderer)==null||f.domElement.addEventListener("pointermove",i),s.onUnmounted(()=>{var o;(o=n==null?void 0:n.renderer)==null||o.domElement.removeEventListener("pointermove",i)}),{raycaster:e,pointer:t}}const Se=!0,re="[TresJS ▲ ■ ●] ";function z(){function e(a,n){console.error(`${re} ${a}`,n||"")}function t(a){console.warn(`${re} ${a}`)}function r(a,n){}return{logError:e,logWarning:t,logMessage:r}}function xe(){const{logWarning:e}=z();function t(a,n,i){let f=null;return a.traverse(o=>{o[n]===i&&(f=o)}),f||e(`Child with ${n} '${i}' not found.`),f}function r(a,n){return t(a,"name",n)}return{seek:t,seekByName:r}}const Pe=/^on[^a-z]/,ke=e=>Pe.test(e);function Ne(e){}let N=null;const Ue={createElement(e,t,r,a){if(e==="template"||be(e))return null;let n;if(a===null&&(a={}),a!=null&&a.args?n=new B.value[e.replace("Tres","")](...a.args):n=new B.value[e.replace("Tres","")],n.isCamera){a!=null&&a.position||n.position.set(3,3,3),a!=null&&a.lookAt||n.lookAt(0,0,0);const{pushCamera:i}=F();i(n)}return(a==null?void 0:a.attach)===void 0&&(n.isMaterial?n.attach="material":n.isBufferGeometry&&(n.attach="geometry")),n.events={},n},insert(e,t,r){if(N===null&&t.isScene&&(N=t),t===null&&(t=N),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const a=r?t.children.indexOf(r):0;e.parent=t,t.children.splice(a,0,e),e.dispatchEvent({type:"added"})}else typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e))},remove(e){if(!e)return;const t=e.parentNode;t&&t.removeChild(e)},patchProp(e,t,r,a){if(e){let n=e,i=t;const f=W(i);let o=n==null?void 0:n[f];if(e.parent||(e.parent=N),n.type==="BufferGeometry"){n.setAttribute(W(i),new u.BufferAttribute(...a));return}if(i.includes("-")&&o===void 0){const p=i.split("-");o=p.reduce((w,h)=>w[W(h)],n),i=p.pop(),o!=null&&o.set||(n=p.reduce((w,h)=>w[W(h)],n))}ke(i)&&(e.events[i]=a);let l=a;if(l===""&&(l=!0),c.isFunction(o)){Array.isArray(l)?e[f](...l):e[f](l);return}!(o!=null&&o.set)&&!c.isFunction(o)?n[f]=l:o.constructor===l.constructor&&(o!=null&&o.copy)?o==null||o.copy(l):Array.isArray(l)?o.set(...l):!o.isColor&&o.setScalar?o.setScalar(l):o.set(l)}},parentNode(e){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{createApp:Oe}=s.createRenderer(Ue),Ae=e=>{const t=Oe(r);function r(){return e&&e.default?e.default():[]}return t};G(K);const{logWarning:je}=z(),Te=s.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:r}){e.physicallyCorrectLights===!0&&je("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=s.ref(),n=s.ref(),i=new K.Scene,{setState:f}=U();f("scene",i),f("canvas",n),f("container",a);const{pushCamera:o}=F();o(new u.PerspectiveCamera),s.onMounted(()=>{l()}),s.onUnmounted(()=>{f("renderer",null)});function l(){const{renderer:h}=E(e),{activeCamera:m}=F(),{onLoop:O}=$(),{raycaster:b,pointer:A}=ae();let C=null,g=null;s.watchEffect(()=>{m.value&&b.value.setFromCamera(A.value,m.value)}),O(()=>{var x,M,L,S,P,j,y;if(m.value&&((x=h.value)==null||x.render(i,m.value)),b.value){const T=b.value.intersectObjects(i.children);T.length>0?(g=T[0],C===null&&((S=(L=(M=g.object)==null?void 0:M.events)==null?void 0:L.onPointerEnter)==null||S.call(L,g))):C!==null&&((y=(j=(P=g==null?void 0:g.object)==null?void 0:P.events)==null?void 0:j.onPointerLeave)==null||y.call(j,C),g=null),C=g}}),c.useEventListener(n.value,"click",()=>{var x,M,L;g!==null&&((L=(M=(x=g.object)==null?void 0:x.events)==null?void 0:M.onClick)==null||L.call(M,g))})}let p;function w(){p=Ae(t),p.provide("useTres",U()),p.provide("extend",G),p.mount(i)}return w(),r({scene:i}),()=>s.h(s.h("div",{ref:a,"data-scene":i.uuid,key:i.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[s.h("div",{style:{width:"100%",height:"100%"}},[s.h("canvas",{ref:n,"data-scene":i.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),oe=s.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:r}){const a=ne();return r(a),()=>s.h(Te,e,t)}}),_e={install(e){e.component("TresCanvas",oe)}};d.CameraType=X,d.TresCanvas=oe,d.catalogue=B,d.default=_e,d.extend=G,d.isProd=Se,d.trasverseObjects=ee,d.useCamera=F,d.useLoader=Ce,d.useLogger=z,d.useRaycaster=ae,d.useRenderLoop=$,d.useRenderer=E,d.useSeek=xe,d.useTexture=Me,d.useTres=U,d.useTresProvider=ne,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tresjs/core",
|
|
3
3
|
"description": "Declarative ThreeJS using Vue Components",
|
|
4
|
-
"version": "2.0.0-beta.
|
|
4
|
+
"version": "2.0.0-beta.4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
7
7
|
"files": [
|