@tresjs/core 2.0.0-beta.2 → 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.
@@ -78,7 +78,7 @@ export interface UseRendererOptions extends WebGLRendererParameters {
78
78
  * @default 0x000000
79
79
  */
80
80
  clearColor?: MaybeComputedRef<TresColor>;
81
- windowSize?: MaybeComputedRef<boolean>;
81
+ windowSize?: MaybeComputedRef<boolean | string>;
82
82
  preset?: RendererPresetsType;
83
83
  }
84
84
  /**
package/dist/tres.js CHANGED
@@ -1,31 +1,31 @@
1
1
  /**
2
2
  * name: @tresjs/core
3
- * version: v2.0.0-beta.2
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 S, 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 B, OrthographicCamera as _e, Clock as me, Color as U, sRGBEncoding as ze, ACESFilmicToneMapping as Be, PCFSoftShadowMap as De, PCFShadowMap as We, LinearEncoding as ne, NoToneMapping as ae, WebGLRenderer as Fe, LoadingManager as Ie, TextureLoader as He, Raycaster as Ue, Vector2 as $e, BufferAttribute as Ge } from "three";
11
- import { createEventHook as V, useRafFn as Ne, resolveUnref as u, useWindowSize as qe, useElementSize as Ve, useDevicePixelRatio as Ye, unrefElement as $, isFunction as re, useEventListener as Ke } from "@vueuse/core";
12
- const N = S({ uuid: je.generateUUID() }), ve = (e) => void Object.assign(N.value, e);
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
+ 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 $ = 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 L;
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: M, 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
- L = new B(h, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, f, M), (v = e.cameras) == null || v.push(L);
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: M, top: h, bottom: C, 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,9 +33,9 @@ function q() {
33
33
  near: 0.1,
34
34
  far: 1e3
35
35
  };
36
- L = new _e(f, M, h, C, g, p), (d = e.cameras) == null || d.push(L);
36
+ R = new _e(f, E, h, L, w, p), (d = e.cameras) == null || d.push(R);
37
37
  }
38
- return e.camera = L, t("camera", e.camera), L;
38
+ return e.camera = R, t("camera", e.camera), R;
39
39
  }
40
40
  function n() {
41
41
  var o;
@@ -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 D = 0, W = 0;
63
- const { pause: Qe, resume: Ze, isActive: et } = Ne(
61
+ const he = V(), ge = V(), Y = V(), O = new me();
62
+ let D = 0, F = 0;
63
+ const { pause: Qe, resume: Ze, isActive: et } = $e(
64
64
  () => {
65
- he.trigger({ delta: D, elapsed: W, clock: R }), ge.trigger({ delta: D, elapsed: W, clock: R }), Y.trigger({ delta: D, elapsed: W, 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
- D = R.getDelta(), W = R.getElapsedTime();
70
+ D = O.getDelta(), F = O.getElapsedTime();
71
71
  });
72
72
  function we() {
73
73
  return {
@@ -82,7 +82,7 @@ function we() {
82
82
  function tt(e) {
83
83
  return e instanceof U ? e : Array.isArray(e) ? new U(...e) : new U(e);
84
84
  }
85
- const G = {
85
+ const N = {
86
86
  realistic: {
87
87
  outputEncoding: ze,
88
88
  toneMapping: Be,
@@ -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 = S(!1), {
111
+ const t = se(), r = k(!1), {
112
112
  alpha: a = !0,
113
113
  antialias: n = !0,
114
114
  depth: i,
@@ -118,65 +118,65 @@ function ot(e) {
118
118
  premultipliedAlpha: l,
119
119
  stencil: v,
120
120
  shadows: d = !1,
121
- shadowMapType: f = We,
122
- physicallyCorrectLights: M = !1,
121
+ shadowMapType: f = Fe,
122
+ physicallyCorrectLights: E = !1,
123
123
  useLegacyLights: h = !1,
124
- outputEncoding: C = 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: O = !1,
130
- clearColor: w,
131
- windowSize: T = !1,
132
- preset: j = void 0
133
- } = ce(e), { state: x, setState: F } = k(), { width: K, height: X } = u(T) ? qe() : Ve(x.container), { logError: Me, logWarning: Ce } = A(), { pixelRatio: J } = Ye(), { pause: Ee, resume: Le } = we(), I = ue(() => K.value / X.value);
134
- !u(T) && ((te = (ee = x.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 E = u(j);
142
- if (E) {
143
- E in G || Me("Renderer Preset must be one of these: " + Object.keys(G).join(", ")), be(t.value, G[E]);
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(C) || 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 E = $(x.canvas);
149
- E && (t.value = new Fe({
150
- canvas: E,
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(O),
160
+ preserveDrawingBuffer: u(y),
161
161
  premultipliedAlpha: u(l)
162
- }), F("renderer", t.value), F("clock", new me()), F("aspectRatio", I), 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
- return H([I, J], Q), H(
167
- [d, f, C, h, g, p, w],
166
+ return H([W, J], Q), H(
167
+ [d, f, L, h, w, p, x],
168
168
  Z
169
169
  ), H(
170
- () => [x.canvas, x.container],
170
+ () => [g.canvas, g.container],
171
171
  () => {
172
- $(x.canvas) && $(x.container) && Se();
172
+ G(g.canvas) && G(g.container) && Se();
173
173
  },
174
174
  { immediate: !0, deep: !0 }
175
175
  ), {
176
176
  renderer: t,
177
177
  isReady: r,
178
178
  dispose: Te,
179
- aspectRatio: I
179
+ aspectRatio: W
180
180
  };
181
181
  }
182
182
  const ye = (e) => !!e && e.constructor === Array;
@@ -186,8 +186,8 @@ function it(e) {
186
186
  r.name && (t.nodes[r.name] = r), r.material && !t.materials[r.material.name] && (t.materials[r.material.name] = r.material);
187
187
  }), t;
188
188
  }
189
- async function Mt(e, t, r, a, n) {
190
- const { logError: i } = A(), s = new e();
189
+ async function xt(e, t, r, a, n) {
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) => {
@@ -203,8 +203,8 @@ async function Mt(e, t, r, a, n) {
203
203
  );
204
204
  return ye(t) ? await Promise.all(c) : await c[0];
205
205
  }
206
- async function Ct(e) {
207
- const t = new Ie(), r = new He(t), a = (n) => new Promise((i, s) => {
206
+ async function Mt(e) {
207
+ const t = new We(), r = new He(t), a = (n) => new Promise((i, s) => {
208
208
  r.load(
209
209
  n,
210
210
  (o) => i(o),
@@ -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 = S(new $e()), r = S(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;
@@ -292,8 +292,8 @@ function ut() {
292
292
  pointer: t
293
293
  };
294
294
  }
295
- const Et = !0, oe = "[TresJS ▲ ■ ●] ";
296
- function A() {
295
+ const Ct = !0, oe = "[TresJS ▲ ■ ●] ";
296
+ function I() {
297
297
  function e(a, n) {
298
298
  console.error(`${oe} ${a}`, n || "");
299
299
  }
@@ -308,8 +308,8 @@ function A() {
308
308
  logMessage: r
309
309
  };
310
310
  }
311
- function Lt() {
312
- const { logWarning: e } = A();
311
+ function Et() {
312
+ const { logWarning: e } = I();
313
313
  function t(a, n, i) {
314
314
  let s = null;
315
315
  return a.traverse((o) => {
@@ -324,18 +324,15 @@ function Lt() {
324
324
  seekByName: r
325
325
  };
326
326
  }
327
- const { logWarning: lt } = A(), ft = /^on[^a-z]/, dt = (e) => ft.test(e);
327
+ const lt = /^on[^a-z]/, ft = (e) => lt.test(e);
328
328
  let z = null;
329
- const pt = {
329
+ const dt = {
330
330
  createElement(e, t, r, a) {
331
331
  if (e === "template" || at(e))
332
332
  return null;
333
333
  let n;
334
- if (a === null && (a = {}), a != null && a.args ? n = new N.value[e.replace("Tres", "")](...a.args) : n = new N.value[e.replace("Tres", "")](), n.isCamera) {
335
- (!(a != null && a.position) || a != null && a.position.every((s) => s == 0)) && lt(
336
- // eslint-disable-next-line max-len
337
- "Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗"
338
- );
334
+ if (a === null && (a = {}), a != null && a.args ? n = new $.value[e.replace("Tres", "")](...a.args) : n = new $.value[e.replace("Tres", "")](), n.isCamera) {
335
+ a != null && a.position || n.position.set(3, 3, 3), a != null && a.lookAt || n.lookAt(0, 0, 0);
339
336
  const { pushCamera: i } = q();
340
337
  i(n);
341
338
  }
@@ -362,7 +359,7 @@ const pt = {
362
359
  if (e.parent || (e.parent = z), n.type === "BufferGeometry") {
363
360
  n.setAttribute(
364
361
  _(i),
365
- new Ge(...a)
362
+ new Ne(...a)
366
363
  );
367
364
  return;
368
365
  }
@@ -370,7 +367,7 @@ const pt = {
370
367
  const l = i.split("-");
371
368
  o = l.reduce((v, d) => v[_(d)], n), i = l.pop(), o != null && o.set || (n = l.reduce((v, d) => v[_(d)], n));
372
369
  }
373
- dt(i) && (e.events[i] = a);
370
+ ft(i) && (e.events[i] = a);
374
371
  let c = a;
375
372
  if (c === "" && (c = !0), re(o)) {
376
373
  Array.isArray(c) ? e[s](...c) : e[s](c);
@@ -391,15 +388,15 @@ const pt = {
391
388
  setScopeId: () => void 0,
392
389
  cloneNode: () => void 0,
393
390
  insertStaticContent: () => void 0
394
- }, { createApp: mt } = Ae(pt), vt = (e) => {
395
- const t = mt(r);
391
+ }, { createApp: pt } = Ae(dt), mt = (e) => {
392
+ const t = pt(r);
396
393
  function r() {
397
394
  return e && e.default ? e.default() : [];
398
395
  }
399
396
  return t;
400
397
  };
401
398
  ve(pe);
402
- const { logWarning: ht } = A(), gt = de({
399
+ const { logWarning: vt } = I(), ht = de({
403
400
  name: "TresScene",
404
401
  props: [
405
402
  "shadows",
@@ -417,8 +414,8 @@ const { logWarning: ht } = A(), gt = de({
417
414
  "preset"
418
415
  ],
419
416
  setup(e, { slots: t, expose: r }) {
420
- e.physicallyCorrectLights === !0 && ht("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
421
- const a = S(), n = S(), i = new pe.Scene(), { setState: s } = k();
417
+ e.physicallyCorrectLights === !0 && vt("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
418
+ const a = k(), n = k(), i = new pe.Scene(), { setState: s } = j();
422
419
  s("scene", i), s("canvas", n), s("container", a);
423
420
  const { pushCamera: o } = q();
424
421
  o(new B()), Oe(() => {
@@ -427,29 +424,29 @@ const { logWarning: ht } = A(), gt = de({
427
424
  s("renderer", null);
428
425
  });
429
426
  function c() {
430
- const { renderer: d } = ot(e), { activeCamera: f } = q(), { onLoop: M } = we(), { raycaster: h, pointer: C } = ut();
431
- 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;
432
429
  ie(() => {
433
- f.value && h.value.setFromCamera(C.value, f.value);
434
- }), M(() => {
435
- var b, y, O, w, T;
436
- if (f.value && ((b = d.value) == null || b.render(i, f.value)), h.value) {
437
- const j = h.value.intersectObjects(i.children);
438
- j.length > 0 ? (p = j[0], g === null && ((O = (y = p.object.events).onPointerEnter) == null || O.call(y, p))) : g !== null && ((T = p == null ? void 0 : (w = p.object.events).onPointerLeave) == null || T.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;
439
436
  }
440
437
  }), Ke(n.value, "click", () => {
441
- var b, y;
442
- 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));
443
440
  });
444
441
  }
445
442
  let l;
446
443
  function v() {
447
- l = vt(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);
448
445
  }
449
446
  return v(), r({
450
447
  scene: i
451
- }), () => P(
452
- P(
448
+ }), () => A(
449
+ A(
453
450
  "div",
454
451
  {
455
452
  ref: a,
@@ -464,7 +461,7 @@ const { logWarning: ht } = A(), gt = de({
464
461
  }
465
462
  },
466
463
  [
467
- P(
464
+ A(
468
465
  "div",
469
466
  {
470
467
  style: {
@@ -473,7 +470,7 @@ const { logWarning: ht } = A(), gt = de({
473
470
  }
474
471
  },
475
472
  [
476
- P("canvas", {
473
+ A("canvas", {
477
474
  ref: n,
478
475
  "data-scene": i.uuid,
479
476
  style: {
@@ -491,7 +488,7 @@ const { logWarning: ht } = A(), gt = de({
491
488
  )
492
489
  );
493
490
  }
494
- }), wt = de({
491
+ }), gt = de({
495
492
  name: "TresCanvas",
496
493
  props: [
497
494
  "shadows",
@@ -510,29 +507,29 @@ const { logWarning: ht } = A(), gt = de({
510
507
  ],
511
508
  setup(e, { slots: t, expose: r }) {
512
509
  const a = ct();
513
- return r(a), () => P(gt, e, t);
510
+ return r(a), () => A(ht, e, t);
514
511
  }
515
- }), St = {
512
+ }), Lt = {
516
513
  install(e) {
517
- e.component("TresCanvas", wt);
514
+ e.component("TresCanvas", gt);
518
515
  }
519
516
  };
520
517
  export {
521
518
  Xe as CameraType,
522
- wt as TresCanvas,
523
- N as catalogue,
524
- St as default,
519
+ gt as TresCanvas,
520
+ $ as catalogue,
521
+ Lt as default,
525
522
  ve as extend,
526
- Et as isProd,
523
+ Ct as isProd,
527
524
  it as trasverseObjects,
528
525
  q as useCamera,
529
- Mt as useLoader,
530
- A as useLogger,
526
+ xt as useLoader,
527
+ I as useLogger,
531
528
  ut as useRaycaster,
532
529
  we as useRenderLoop,
533
530
  ot as useRenderer,
534
- Lt as useSeek,
535
- Ct as useTexture,
536
- k as useTres,
531
+ Et as useSeek,
532
+ Mt as useTexture,
533
+ j as useTres,
537
534
  ct as useTresProvider
538
535
  };
package/dist/tres.umd.cjs CHANGED
@@ -1,9 +1,9 @@
1
1
  /**
2
2
  * name: @tresjs/core
3
- * version: v2.0.0-beta.2
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 n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{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 x;function D(){const{state:e,setState:t,aspectRatio:r}=P();function n(o="Perspective",l){var p,w,v;if(o==="Perspective"){const{near:m,far:U,fov:b}=l||{near:.1,far:1e3,fov:me};x=new u.PerspectiveCamera(b,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,m,U),(w=e.cameras)==null||w.push(x)}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};x=new u.OrthographicCamera(m,U,b,O,y,g),(v=e.cameras)==null||v.push(x)}return e.camera=x,t("camera",e.camera),x}function a(){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&&a()}),{activeCamera:s.toRef(e,"camera"),createCamera:n,updateCamera:a,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:he,resume:ve,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 $(){return{onBeforeLoop:J.on,onLoop:Q.on,onAfterLoop:G.on,pause:he,resume:ve,isActive:ge}}function we(e){return e instanceof u.Color?e:Array.isArray(e)?new u.Color(...e):new u.Color(e)}const q={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),n=e.split(",");for(let a=0;a<n.length;a++)r[n[a]]=!0;return t?a=>!!r[a.toLowerCase()]:a=>!!r[a]}function E(e){var ue,de;const t=s.shallowRef(),r=s.ref(!1),{alpha:n=!0,antialias:a=!0,depth:i,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:o,precision:l,premultipliedAlpha:p,stencil:w,shadows:v=!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:W=!1,clearColor:C,windowSize:T=!1,preset:I=void 0}=s.toRefs(e),{state:S,setState:V}=P(),{width:ie,height:se}=c.resolveUnref(T)?c.useWindowSize():c.useElementSize(S.container),{logError:ze,logWarning:Be}=k(),{pixelRatio:ce}=c.useDevicePixelRatio(),{pause:Fe,resume:Re}=$(),Y=s.computed(()=>ie.value/se.value);!c.resolveUnref(T)&&((de=(ue=S.container)==null?void 0:ue.value)==null?void 0:de.offsetHeight)===0&&Be(`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(I);if(A){A in q||ze("Renderer Preset must be one of these: "+Object.keys(q).join(", ")),Z(t.value,q[A]);return}t.value.shadowMap.enabled=c.resolveUnref(v),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)},We=()=>{const A=c.unrefElement(S.canvas);A&&(t.value=new u.WebGLRenderer({canvas:A,alpha:c.resolveUnref(n),antialias:c.resolveUnref(a),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(W),premultipliedAlpha:c.resolveUnref(p)}),V("renderer",t.value),V("clock",new u.Clock),V("aspectRatio",Y),le(),fe(),Re(),r.value=!0)},Ie=()=>{t.value&&(t.value.dispose(),t.value=void 0,r.value=!1,Fe())};return s.watch([Y,ce],fe),s.watch([v,m,O,b,y,g,C],le),s.watch(()=>[S.canvas,S.container],()=>{c.unrefElement(S.canvas)&&c.unrefElement(S.container)&&We()},{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,n,a){const{logError:i}=k(),f=new e;a&&a(f),r&&r(f);const l=(Array.isArray(t)?t:[t]).map(p=>new Promise((w,v)=>{f.load(p,m=>{m.scene&&Object.assign(m,ee(m.scene)),w(m)},n,m=>v(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),n=a=>new Promise((i,f)=>{r.load(a,o=>i(o),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(H(e)){const a=await Promise.all(e.map(i=>n(i)));return e.length>1?a:a[0]}else{const{map:a,displacementMap:i,normalMap:f,roughnessMap:o,metalnessMap:l,aoMap:p,alphaMap:w,matcap:v}=e;return{map:a?await n(a):null,displacementMap:i?await n(i):null,normalMap:f?await n(f):null,roughnessMap:o?await n(o):null,metalnessMap:l?await n(l):null,aoMap:p?await n(p):null,alphaMap:w?await n(w):null,matcap:v?await n(v):null}}}const h=["00","01","02","03","04","05","06","07","08","09","0a","0b","0c","0d","0e","0f","10","11","12","13","14","15","16","17","18","19","1a","1b","1c","1d","1e","1f","20","21","22","23","24","25","26","27","28","29","2a","2b","2c","2d","2e","2f","30","31","32","33","34","35","36","37","38","39","3a","3b","3c","3d","3e","3f","40","41","42","43","44","45","46","47","48","49","4a","4b","4c","4d","4e","4f","50","51","52","53","54","55","56","57","58","59","5a","5b","5c","5d","5e","5f","60","61","62","63","64","65","66","67","68","69","6a","6b","6c","6d","6e","6f","70","71","72","73","74","75","76","77","78","79","7a","7b","7c","7d","7e","7f","80","81","82","83","84","85","86","87","88","89","8a","8b","8c","8d","8e","8f","90","91","92","93","94","95","96","97","98","99","9a","9b","9c","9d","9e","9f","a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","aa","ab","ac","ad","ae","af","b0","b1","b2","b3","b4","b5","b6","b7","b8","b9","ba","bb","bc","bd","be","bf","c0","c1","c2","c3","c4","c5","c6","c7","c8","c9","ca","cb","cc","cd","ce","cf","d0","d1","d2","d3","d4","d5","d6","d7","d8","d9","da","db","dc","dd","de","df","e0","e1","e2","e3","e4","e5","e6","e7","e8","e9","ea","eb","ec","ed","ee","ef","f0","f1","f2","f3","f4","f5","f6","f7","f8","f9","fa","fb","fc","fd","fe","ff"];function Le(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,r=Math.random()*4294967295|0,n=Math.random()*4294967295|0;return(h[e&255]+h[e>>8&255]+h[e>>16&255]+h[e>>24&255]+"-"+h[t&255]+h[t>>8&255]+"-"+h[t>>16&15|64]+h[t>>24&255]+"-"+h[r&63|128]+h[r>>8&255]+"-"+h[r>>16&255]+h[r>>24&255]+h[n&255]+h[n>>8&255]+h[n>>16&255]+h[n>>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(a){return e[a]}function r(a,i){e[a]=i}const n={state:e,...s.toRefs(e),getState:t,setState:r};return s.provide(te,n),n}const P=()=>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:n,state:a}=P();n("raycaster",e.value),n("pointer",t),n("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=a==null?void 0:a.renderer)==null||f.domElement.addEventListener("pointermove",i),s.onUnmounted(()=>{var o;(o=a==null?void 0:a.renderer)==null||o.domElement.removeEventListener("pointermove",i)}),{raycaster:e,pointer:t}}const Se=!0,re="[TresJS ▲ ■ ●] ";function k(){function e(n,a){console.error(`${re} ${n}`,a||"")}function t(n){console.warn(`${re} ${n}`)}function r(n,a){}return{logError:e,logWarning:t,logMessage:r}}function xe(){const{logWarning:e}=k();function t(n,a,i){let f=null;return n.traverse(o=>{o[a]===i&&(f=o)}),f||e(`Child with ${a} '${i}' not found.`),f}function r(n,a){return t(n,"name",a)}return{seek:t,seekByName:r}}const{logWarning:Pe}=k(),ke=/^on[^a-z]/,Ue=e=>ke.test(e);function Ge(e){}let R=null;const Oe={createElement(e,t,r,n){if(e==="template"||be(e))return null;let a;if(n===null&&(n={}),n!=null&&n.args?a=new _.value[e.replace("Tres","")](...n.args):a=new _.value[e.replace("Tres","")],a.isCamera){(!(n!=null&&n.position)||n!=null&&n.position.every(f=>f==0))&&Pe("Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗");const{pushCamera:i}=D();i(a)}return(n==null?void 0:n.attach)===void 0&&(a.isMaterial?a.attach="material":a.isBufferGeometry&&(a.attach="geometry")),a.events={},a},insert(e,t,r){if(R===null&&t.isScene&&(R=t),t===null&&(t=R),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const n=r?t.children.indexOf(r):0;e.parent=t,t.children.splice(n,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,n){if(e){let a=e,i=t;const f=F(i);let o=a==null?void 0:a[f];if(e.parent||(e.parent=R),a.type==="BufferGeometry"){a.setAttribute(F(i),new u.BufferAttribute(...n));return}if(i.includes("-")&&o===void 0){const p=i.split("-");o=p.reduce((w,v)=>w[F(v)],a),i=p.pop(),o!=null&&o.set||(a=p.reduce((w,v)=>w[F(v)],a))}Ue(i)&&(e.events[i]=n);let l=n;if(l===""&&(l=!0),c.isFunction(o)){Array.isArray(l)?e[f](...l):e[f](l);return}!(o!=null&&o.set)&&!c.isFunction(o)?a[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:Ae}=s.createRenderer(Oe),je=e=>{const t=Ae(r);function r(){return e&&e.default?e.default():[]}return t};N(K);const{logWarning:Te}=k(),_e=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&&Te("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const n=s.ref(),a=s.ref(),i=new K.Scene,{setState:f}=P();f("scene",i),f("canvas",a),f("container",n);const{pushCamera:o}=D();o(new u.PerspectiveCamera),s.onMounted(()=>{l()}),s.onUnmounted(()=>{f("renderer",null)});function l(){const{renderer:v}=E(e),{activeCamera:m}=D(),{onLoop:U}=$(),{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,W,C,T;if(m.value&&((M=v.value)==null||M.render(i,m.value)),b.value){const I=b.value.intersectObjects(i.children);I.length>0?(g=I[0],y===null&&((W=(L=g.object.events).onPointerEnter)==null||W.call(L,g))):y!==null&&((T=g==null?void 0:(C=g.object.events).onPointerLeave)==null||T.call(C,y),g=null),y=g}}),c.useEventListener(a.value,"click",()=>{var M,L;g!==null&&((L=(M=g.object.events).onClick)==null||L.call(M,g))})}let p;function w(){p=je(t),p.provide("useTres",P()),p.provide("extend",N),p.mount(i)}return w(),r({scene:i}),()=>s.h(s.h("div",{ref:n,"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:a,"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 n=ne();return r(n),()=>s.h(_e,e,t)}}),De={install(e){e.component("TresCanvas",oe)}};d.CameraType=X,d.TresCanvas=oe,d.catalogue=_,d.default=De,d.extend=N,d.isProd=Se,d.trasverseObjects=ee,d.useCamera=D,d.useLoader=Ce,d.useLogger=k,d.useRaycaster=ae,d.useRenderLoop=$,d.useRenderer=E,d.useSeek=xe,d.useTexture=Me,d.useTres=P,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.2",
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": [
@@ -56,8 +56,8 @@
56
56
  "vue": "^3.2.47"
57
57
  },
58
58
  "dependencies": {
59
- "-": "^0.0.1",
60
59
  "@alvarosabu/utils": "^2.3.0",
60
+ "@tresjs/core": "2.0.0-beta.2",
61
61
  "@vueuse/core": "^9.13.0"
62
62
  },
63
63
  "devDependencies": {
@@ -65,7 +65,7 @@
65
65
  "@huntersofbook/plausible-vue": "^1.0.0",
66
66
  "@release-it/conventional-changelog": "^5.1.1",
67
67
  "@stackblitz/sdk": "^1.8.1",
68
- "@tresjs/cientos": "2.0.0-alpha.5",
68
+ "@tresjs/cientos": "2.0.0-beta.0",
69
69
  "@types/three": "latest",
70
70
  "@typescript-eslint/eslint-plugin": "^5.57.1",
71
71
  "@typescript-eslint/parser": "^5.57.1",
@@ -86,7 +86,7 @@
86
86
  "rollup-plugin-analyzer": "^4.0.0",
87
87
  "rollup-plugin-copy": "^3.4.0",
88
88
  "rollup-plugin-visualizer": "^5.9.0",
89
- "three": "latest",
89
+ "three": "^0.150.1",
90
90
  "unocss": "^0.50.6",
91
91
  "unplugin": "^1.3.1",
92
92
  "unplugin-vue-components": "^0.24.1",