@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 CHANGED
@@ -1,31 +1,31 @@
1
1
  /**
2
2
  * name: @tresjs/core
3
- * version: v2.0.0-beta.3
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 T, 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 P } from "vue";
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 z, 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";
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 $ = T({ uuid: je.generateUUID() }), ve = (e) => void Object.assign($.value, e);
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 S;
15
+ let R;
16
16
  function q() {
17
- const { state: e, setState: t, aspectRatio: r } = k();
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: C, fov: h } = c || {
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
- S = new z(h, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, f, C), (v = e.cameras) == null || v.push(S);
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: C, top: h, bottom: E, near: g, far: p } = c || {
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
- S = new _e(f, C, h, E, g, p), (d = e.cameras) == null || d.push(S);
36
+ R = new _e(f, E, h, L, w, p), (d = e.cameras) == null || d.push(R);
37
37
  }
38
- return e.camera = S, t("camera", e.camera), S;
38
+ return e.camera = R, t("camera", e.camera), R;
39
39
  }
40
40
  function n() {
41
41
  var o;
42
- e.camera instanceof z && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (o = e.camera) == null || o.updateProjectionMatrix();
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 z && e.aspectRatio && (o.aspect = e.aspectRatio.value), o.updateProjectionMatrix(), t("camera", o);
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(), R = new me();
62
- let B = 0, D = 0;
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: B, elapsed: D, clock: R }), ge.trigger({ delta: B, elapsed: D, clock: R }), Y.trigger({ delta: B, elapsed: D, clock: R });
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
- B = R.getDelta(), D = R.getElapsedTime();
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 j(e) {
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 = T(!1), {
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: C = !1,
122
+ physicallyCorrectLights: E = !1,
123
123
  useLegacyLights: h = !1,
124
- outputEncoding: E = ne,
125
- toneMapping: g = ae,
124
+ outputEncoding: L = ne,
125
+ toneMapping: w = ae,
126
126
  toneMappingExposure: p = 1,
127
- context: b = void 0,
128
- powerPreference: y = "default",
129
- preserveDrawingBuffer: A = !1,
130
- clearColor: w,
131
- windowSize: x = !1,
132
- preset: O = void 0
133
- } = ce(e), { state: M, setState: I } = k(), { width: K, height: X } = u(x) == !0 || u(x) === "" || u(x) === "true" ? qe() : Ve(M.container), { logError: Me, logWarning: Ce } = F(), { pixelRatio: J } = Ye(), { pause: Ee, resume: Le } = we(), W = ue(() => K.value / X.value);
134
- !u(x) && ((te = (ee = M.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.
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 L = u(O);
142
- if (L) {
143
- L in N || Me("Renderer Preset must be one of these: " + Object.keys(N).join(", ")), be(t.value, N[L]);
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(g) || ae, t.value.toneMappingExposure = u(p), t.value.outputEncoding = u(E) || ne, w != null && w.value && t.value.setClearColor(tt(u(w))), t.value.useLegacyLights = u(h);
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 L = G(M.canvas);
149
- L && (t.value = new Ie({
150
- canvas: L,
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(b),
153
+ context: u(M),
154
154
  depth: u(i),
155
155
  failIfMajorPerformanceCaveat: u(o),
156
156
  logarithmicDepthBuffer: u(s),
157
- powerPreference: u(y),
157
+ powerPreference: u(b),
158
158
  precision: u(c),
159
159
  stencil: u(v),
160
- preserveDrawingBuffer: u(A),
160
+ preserveDrawingBuffer: u(y),
161
161
  premultipliedAlpha: u(l)
162
- }), I("renderer", t.value), I("clock", new me()), I("aspectRatio", W), Z(), Q(), Le(), r.value = !0);
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, E, h, g, p, w],
167
+ [d, f, L, h, w, p, x],
168
168
  Z
169
169
  ), H(
170
- () => [M.canvas, M.container],
170
+ () => [g.canvas, g.container],
171
171
  () => {
172
- G(M.canvas) && G(M.container) && Se();
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 } = F(), s = new e();
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 k = () => ke(xe, {
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 = T(new Ge()), r = T(null), { setState: a, state: n } = k();
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 F() {
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 } = F();
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 _ = null;
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 (_ === null && t.isScene && (_ = t), t === null && (t = _), t != null && t.isObject3D && (e != null && e.isObject3D)) {
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 = j(i);
357
+ const s = _(i);
358
358
  let o = n == null ? void 0 : n[s];
359
- if (e.parent || (e.parent = _), n.type === "BufferGeometry") {
359
+ if (e.parent || (e.parent = z), n.type === "BufferGeometry") {
360
360
  n.setAttribute(
361
- j(i),
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[j(d)], n), i = l.pop(), o != null && o.set || (n = l.reduce((v, d) => v[j(d)], n));
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 } = F(), ht = de({
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 = T(), n = T(), i = new pe.Scene(), { setState: s } = k();
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 z()), Oe(() => {
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: C } = we(), { raycaster: h, pointer: E } = ut();
428
- let g = null, p = null;
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(E.value, f.value);
431
- }), C(() => {
432
- var b, y, A, w, x;
433
- if (f.value && ((b = d.value) == null || b.render(i, f.value)), h.value) {
434
- const O = h.value.intersectObjects(i.children);
435
- O.length > 0 ? (p = O[0], g === null && ((A = (y = p.object.events).onPointerEnter) == null || A.call(y, p))) : g !== null && ((x = p == null ? void 0 : (w = p.object.events).onPointerLeave) == null || x.call(w, g), p = null), g = p;
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", k()), l.provide("extend", ve), l.mount(i);
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
- }), () => P(
449
- P(
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
- P(
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
- P("canvas", {
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), () => P(ht, e, t);
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
- F as useLogger,
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
- k as useTres,
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
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),_=s.ref({uuid:u.MathUtils.generateUUID()}),N=e=>void Object.assign(_.value,e);var X=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(X||{});const me=45;let P;function D(){const{state:e,setState:t,aspectRatio:r}=k();function a(o="Perspective",l){var p,w,h;if(o==="Perspective"){const{near:m,far:U,fov:b}=l||{near:.1,far:1e3,fov:me};P=new u.PerspectiveCamera(b,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,m,U),(w=e.cameras)==null||w.push(P)}else{const{left:m,right:U,top:b,bottom:O,near:y,far:g}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};P=new u.OrthographicCamera(m,U,b,O,y,g),(h=e.cameras)==null||h.push(P)}return e.camera=P,t("camera",e.camera),P}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(),G=c.createEventHook(),j=new u.Clock;let z=0,B=0;const{pause:ve,resume:he,isActive:ge}=c.useRafFn(()=>{J.trigger({delta:z,elapsed:B,clock:j}),Q.trigger({delta:z,elapsed:B,clock:j}),G.trigger({delta:z,elapsed:B,clock:j})},{immediate:!1});G.on(()=>{z=j.getDelta(),B=j.getElapsedTime()});function q(){return{onBeforeLoop:J.on,onLoop:Q.on,onAfterLoop:G.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 $={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 F(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:U=!1,useLegacyLights:b=!1,outputEncoding:O=u.LinearEncoding,toneMapping:y=u.NoToneMapping,toneMappingExposure:g=1,context:M=void 0,powerPreference:L="default",preserveDrawingBuffer:I=!1,clearColor:C,windowSize:S=!1,preset:W=void 0}=s.toRefs(e),{state:x,setState:V}=k(),{width:ie,height:se}=c.resolveUnref(S)==!0||c.resolveUnref(S)===""||c.resolveUnref(S)==="true"?c.useWindowSize():c.useElementSize(x.container),{logError:De,logWarning:ze}=T(),{pixelRatio:ce}=c.useDevicePixelRatio(),{pause:Be,resume:Fe}=q(),Y=s.computed(()=>ie.value/se.value);!c.resolveUnref(S)&&((de=(ue=x.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 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.3",
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": [