@tresjs/core 2.0.0-alpha.3 → 2.0.0-alpha.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-alpha.3
3
+ * version: v2.0.0-alpha.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 M, watchEffect as Ee, toRef as xe, shallowRef as ne, toRefs as ae, computed as re, watch as O, shallowReactive as Pe, createRenderer as Re, defineComponent as Se, h as P } from "vue";
8
+ import { ref as M, watchEffect as Ee, toRef as xe, shallowRef as ne, toRefs as ae, computed as re, watch as O, shallowReactive as Pe, createRenderer as Te, defineComponent as Re, onUnmounted as Se, h as P } from "vue";
9
9
  import * as oe from "three";
10
- import { MathUtils as Te, PerspectiveCamera as _, OrthographicCamera as Ae, Clock as ie, Color as W, sRGBEncoding as Oe, ACESFilmicToneMapping as ke, PCFSoftShadowMap as je, PCFShadowMap as Be, LinearEncoding as Y, NoToneMapping as Q, WebGLRenderer as De, LoadingManager as Fe, TextureLoader as _e, Raycaster as We, Vector2 as ze, Mesh as Ie, BufferAttribute as He } from "three";
11
- import { createEventHook as U, useRafFn as Ge, resolveUnref as u, useWindowSize as Ue, useElementSize as $e, useDevicePixelRatio as Ne, unrefElement as z, useEventListener as Ve, isFunction as Z } from "@vueuse/core";
12
- const G = M({ uuid: Te.generateUUID() }), se = (e) => void Object.assign(G.value, e);
13
- var qe = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(qe || {});
14
- const Je = 45;
10
+ import { MathUtils as Ae, PerspectiveCamera as F, OrthographicCamera as Oe, Clock as ie, Color as I, sRGBEncoding as ke, ACESFilmicToneMapping as je, PCFSoftShadowMap as _e, PCFShadowMap as Be, LinearEncoding as Y, NoToneMapping as Q, WebGLRenderer as De, LoadingManager as Fe, TextureLoader as Ie, Raycaster as We, Vector2 as ze, Mesh as He, BufferAttribute as Ge } from "three";
11
+ import { createEventHook as U, useRafFn as Ue, resolveUnref as u, useWindowSize as Ne, useElementSize as $e, useDevicePixelRatio as Ve, unrefElement as W, useEventListener as qe, isFunction as Z } from "@vueuse/core";
12
+ const G = M({ uuid: Ae.generateUUID() }), se = (e) => void Object.assign(G.value, e);
13
+ var Je = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Je || {});
14
+ const Ke = 45;
15
15
  let y;
16
16
  function ce() {
17
17
  const { state: e, setState: t, aspectRatio: r } = L();
18
18
  function o(a = "Perspective", s) {
19
- var l, p, m;
19
+ var l, p, d;
20
20
  if (a === "Perspective") {
21
- const { near: d, far: w, fov: v } = s || {
21
+ const { near: m, far: w, fov: v } = s || {
22
22
  near: 0.1,
23
23
  far: 1e3,
24
- fov: Je
24
+ fov: Ke
25
25
  };
26
- y = new _(v, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, d, w), (p = e.cameras) == null || p.push(y);
26
+ y = new F(v, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, m, w), (p = e.cameras) == null || p.push(y);
27
27
  } else {
28
- const { left: d, right: w, top: v, bottom: g, near: E, far: x } = s || {
28
+ const { left: m, right: w, top: v, bottom: g, near: E, far: x } = s || {
29
29
  left: -100,
30
30
  right: 100,
31
31
  top: 100,
@@ -33,17 +33,17 @@ function ce() {
33
33
  near: 0.1,
34
34
  far: 1e3
35
35
  };
36
- y = new Ae(d, w, v, g, E, x), (m = e.cameras) == null || m.push(y);
36
+ y = new Oe(m, w, v, g, E, x), (d = e.cameras) == null || d.push(y);
37
37
  }
38
38
  return e.camera = y, t("camera", e.camera), y;
39
39
  }
40
40
  function n() {
41
41
  var a;
42
- e.camera instanceof _ && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (a = e.camera) == null || a.updateProjectionMatrix();
42
+ e.camera instanceof F && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (a = e.camera) == null || a.updateProjectionMatrix();
43
43
  }
44
44
  function i(a) {
45
45
  var s;
46
- (s = e.cameras) == null || s.push(a), a instanceof _ && e.aspectRatio && (a.aspect = e.aspectRatio.value), a.updateProjectionMatrix(), t("camera", a);
46
+ (s = e.cameras) == null || s.push(a), a instanceof F && e.aspectRatio && (a.aspect = e.aspectRatio.value), a.updateProjectionMatrix(), t("camera", a);
47
47
  }
48
48
  function c() {
49
49
  e.cameras = [];
@@ -58,56 +58,56 @@ function ce() {
58
58
  clearCameras: c
59
59
  };
60
60
  }
61
- const ue = U(), le = U(), $ = U(), C = new ie();
61
+ const ue = U(), le = U(), N = U(), C = new ie();
62
62
  let k = 0, j = 0;
63
- const { pause: Ke, resume: Xe, isActive: Ye } = Ge(
63
+ const { pause: Xe, resume: Ye, isActive: Qe } = Ue(
64
64
  () => {
65
- ue.trigger({ delta: k, elapsed: j, clock: C }), le.trigger({ delta: k, elapsed: j, clock: C }), $.trigger({ delta: k, elapsed: j, clock: C });
65
+ ue.trigger({ delta: k, elapsed: j, clock: C }), le.trigger({ delta: k, elapsed: j, clock: C }), N.trigger({ delta: k, elapsed: j, clock: C });
66
66
  },
67
67
  { immediate: !1 }
68
68
  );
69
- $.on(() => {
69
+ N.on(() => {
70
70
  k = C.getDelta(), j = C.getElapsedTime();
71
71
  });
72
- function N() {
72
+ function $() {
73
73
  return {
74
74
  onBeforeLoop: ue.on,
75
75
  onLoop: le.on,
76
- onAfterLoop: $.on,
77
- pause: Ke,
78
- resume: Xe,
79
- isActive: Ye
76
+ onAfterLoop: N.on,
77
+ pause: Xe,
78
+ resume: Ye,
79
+ isActive: Qe
80
80
  };
81
81
  }
82
- function Qe(e) {
83
- return e instanceof W ? e : Array.isArray(e) ? new W(...e) : new W(e);
82
+ function Ze(e) {
83
+ return e instanceof I ? e : Array.isArray(e) ? new I(...e) : new I(e);
84
84
  }
85
- const I = {
85
+ const z = {
86
86
  realistic: {
87
- outputEncoding: Oe,
88
- toneMapping: ke,
87
+ outputEncoding: ke,
88
+ toneMapping: je,
89
89
  toneMappingExposure: 3,
90
90
  shadowMap: {
91
91
  enabled: !0,
92
- type: je
92
+ type: _e
93
93
  }
94
94
  }
95
95
  }, fe = (e, t) => {
96
96
  for (const r of Object.keys(t))
97
97
  t[r] instanceof Object && Object.assign(t[r], fe(e[r], t[r]));
98
98
  return Object.assign(e || {}, t), e;
99
- }, Ze = "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", et = /* @__PURE__ */ tt(Ze);
100
- function R(e) {
99
+ }, et = "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", tt = /* @__PURE__ */ nt(et);
100
+ function T(e) {
101
101
  return e.replace(/-([a-z])/g, (t, r) => r.toUpperCase());
102
102
  }
103
- function tt(e, t) {
103
+ function nt(e, t) {
104
104
  const r = /* @__PURE__ */ Object.create(null), o = e.split(",");
105
105
  for (let n = 0; n < o.length; n++)
106
106
  r[o[n]] = !0;
107
107
  return t ? (n) => !!r[n.toLowerCase()] : (n) => !!r[n];
108
108
  }
109
109
  const f = ne(), H = M(!1);
110
- function nt(e, t, r) {
110
+ function at(e, t, r) {
111
111
  const {
112
112
  alpha: o = !0,
113
113
  antialias: n = !0,
@@ -117,37 +117,37 @@ function nt(e, t, r) {
117
117
  precision: s,
118
118
  premultipliedAlpha: l,
119
119
  stencil: p,
120
- shadows: m = !1,
121
- shadowMapType: d = Be,
120
+ shadows: d = !1,
121
+ shadowMapType: m = Be,
122
122
  physicallyCorrectLights: w = !1,
123
123
  useLegacyLights: v = !1,
124
124
  outputEncoding: g = Y,
125
125
  toneMapping: E = Q,
126
126
  toneMappingExposure: x = 1,
127
- context: de = void 0,
127
+ context: me = void 0,
128
128
  powerPreference: ve = "default",
129
129
  preserveDrawingBuffer: ge = !1,
130
130
  clearColor: b,
131
131
  windowSize: we = !1,
132
132
  preset: he = void 0
133
- } = ae(r), { setState: D } = L(), { width: V, height: q } = u(we) ? Ue() : $e(t), { logError: ye } = B(), { pixelRatio: J } = Ne(), { pause: Me, resume: be } = N(), F = re(() => V.value / q.value), K = () => {
133
+ } = ae(r), { setState: B } = L(), { width: V, height: q } = u(we) ? Ne() : $e(t), { logError: ye } = _(), { pixelRatio: J } = Ve(), { pause: Me, resume: be } = $(), D = re(() => V.value / q.value), K = () => {
134
134
  f.value && (f.value.setSize(V.value, q.value), f.value.setPixelRatio(Math.min(J.value, 2)));
135
135
  }, X = () => {
136
136
  if (!f.value)
137
137
  return;
138
138
  const h = u(he);
139
139
  if (h) {
140
- h in I || ye("Renderer Preset must be one of these: " + Object.keys(I).join(", ")), fe(f.value, I[h]);
140
+ h in z || ye("Renderer Preset must be one of these: " + Object.keys(z).join(", ")), fe(f.value, z[h]);
141
141
  return;
142
142
  }
143
- f.value.shadowMap.enabled = u(m), f.value.shadowMap.type = u(d), f.value.toneMapping = u(E) || Q, f.value.toneMappingExposure = u(x), f.value.outputEncoding = u(g) || Y, b != null && b.value && f.value.setClearColor(Qe(u(b))), f.value.useLegacyLights = u(v);
143
+ f.value.shadowMap.enabled = u(d), f.value.shadowMap.type = u(m), f.value.toneMapping = u(E) || Q, f.value.toneMappingExposure = u(x), f.value.outputEncoding = u(g) || Y, b != null && b.value && f.value.setClearColor(Ze(u(b))), f.value.useLegacyLights = u(v);
144
144
  }, Ce = () => {
145
- const h = z(e);
145
+ const h = W(e);
146
146
  h && (f.value = new De({
147
147
  canvas: h,
148
148
  alpha: u(o),
149
149
  antialias: u(n),
150
- context: u(de),
150
+ context: u(me),
151
151
  depth: u(i),
152
152
  failIfMajorPerformanceCaveat: u(a),
153
153
  logarithmicDepthBuffer: u(c),
@@ -156,52 +156,52 @@ function nt(e, t, r) {
156
156
  stencil: u(p),
157
157
  preserveDrawingBuffer: u(ge),
158
158
  premultipliedAlpha: u(l)
159
- }), D("renderer", f.value), D("clock", new ie()), D("aspectRatio", F), X(), K(), be(), H.value = !0);
159
+ }), B("renderer", f.value), B("clock", new ie()), B("aspectRatio", D), X(), K(), be(), H.value = !0);
160
160
  }, Le = () => {
161
161
  f.value && (f.value.dispose(), f.value = void 0, H.value = !1, Me());
162
162
  };
163
- return O([F, J], K), O(
164
- [m, d, g, v, E, x, b],
163
+ return O([D, J], K), O(
164
+ [d, m, g, v, E, x, b],
165
165
  X
166
166
  ), O(
167
167
  () => [e, t],
168
168
  () => {
169
- z(e) && z(t) && Ce();
169
+ W(e) && W(t) && Ce();
170
170
  },
171
171
  { immediate: !0, deep: !0 }
172
172
  ), {
173
173
  renderer: f,
174
174
  isReady: H,
175
175
  dispose: Le,
176
- aspectRatio: F
176
+ aspectRatio: D
177
177
  };
178
178
  }
179
179
  const pe = (e) => !!e && e.constructor === Array;
180
- function at(e) {
180
+ function rt(e) {
181
181
  const t = { nodes: {}, materials: {} };
182
182
  return e && e.traverse((r) => {
183
183
  r.name && (t.nodes[r.name] = r), r.material && !t.materials[r.material.name] && (t.materials[r.material.name] = r.material);
184
184
  }), t;
185
185
  }
186
- async function vt(e, t, r, o, n) {
187
- const { logError: i } = B(), c = new e();
186
+ async function wt(e, t, r, o, n) {
187
+ const { logError: i } = _(), c = new e();
188
188
  n && n(c), r && r(c);
189
189
  const s = (Array.isArray(t) ? t : [t]).map(
190
- (l) => new Promise((p, m) => {
190
+ (l) => new Promise((p, d) => {
191
191
  c.load(
192
192
  l,
193
- (d) => {
194
- d.scene && Object.assign(d, at(d.scene)), p(d);
193
+ (m) => {
194
+ m.scene && Object.assign(m, rt(m.scene)), p(m);
195
195
  },
196
196
  o,
197
- (d) => m(i("[useLoader] - Failed to load resource", d))
197
+ (m) => d(i("[useLoader] - Failed to load resource", m))
198
198
  );
199
199
  })
200
200
  );
201
201
  return pe(t) ? await Promise.all(s) : await s[0];
202
202
  }
203
- async function gt(e) {
204
- const t = new Fe(), r = new _e(t), o = (n) => new Promise((i, c) => {
203
+ async function ht(e) {
204
+ const t = new Fe(), r = new Ie(t), o = (n) => new Promise((i, c) => {
205
205
  r.load(
206
206
  n,
207
207
  (a) => i(a),
@@ -226,39 +226,41 @@ async function gt(e) {
226
226
  };
227
227
  }
228
228
  }
229
- const S = Pe({
229
+ const ot = {
230
230
  camera: void 0,
231
231
  cameras: [],
232
+ scene: void 0,
233
+ renderer: void 0,
232
234
  aspectRatio: re(() => window.innerWidth / window.innerHeight)
233
- });
235
+ }, R = Pe(ot);
234
236
  function L() {
235
237
  function e(r) {
236
- return S[r];
238
+ return R[r];
237
239
  }
238
240
  function t(r, o) {
239
- S[r] = o;
241
+ R[r] = o;
240
242
  }
241
243
  return {
242
- state: S,
243
- ...ae(S),
244
+ state: R,
245
+ ...ae(R),
244
246
  getState: e,
245
247
  setState: t
246
248
  };
247
249
  }
248
- const ee = ne(new We()), T = M(new ze()), rt = M(null);
249
- function me() {
250
+ const ee = ne(new We()), S = M(new ze()), it = M(null);
251
+ function de() {
250
252
  const { setState: e } = L();
251
- e("raycaster", ee.value), e("pointer", T), e("currentInstance", rt);
253
+ e("raycaster", ee.value), e("pointer", S), e("currentInstance", it);
252
254
  function t(r) {
253
- T.value.x = r.clientX / window.innerWidth * 2 - 1, T.value.y = -(r.clientY / window.innerHeight) * 2 + 1;
255
+ S.value.x = r.clientX / window.innerWidth * 2 - 1, S.value.y = -(r.clientY / window.innerHeight) * 2 + 1;
254
256
  }
255
257
  return window.addEventListener("pointermove", t), {
256
258
  raycaster: ee,
257
- pointer: T
259
+ pointer: S
258
260
  };
259
261
  }
260
- const wt = !0, te = "[TresJS ▲ ■ ●] ";
261
- function B() {
262
+ const yt = !0, te = "[TresJS ▲ ■ ●] ";
263
+ function _() {
262
264
  function e(o, n) {
263
265
  console.error(`${te} ${o}`, n || "");
264
266
  }
@@ -273,21 +275,21 @@ function B() {
273
275
  logMessage: r
274
276
  };
275
277
  }
276
- const { logWarning: ot } = B();
277
- function it(e) {
278
+ const { logWarning: st } = _();
279
+ function ct(e) {
278
280
  for (const t in e)
279
281
  if (t.indexOf("on") === 0)
280
282
  return !0;
281
283
  return !1;
282
284
  }
283
285
  let A = null;
284
- const st = {
286
+ const ut = {
285
287
  createElement(e, t, r, o) {
286
- if (e === "template" || et(e))
288
+ if (e === "template" || tt(e))
287
289
  return null;
288
290
  let n;
289
291
  if (o === null && (o = {}), o != null && o.args ? n = new G.value[e.replace("Tres", "")](...o.args) : n = new G.value[e.replace("Tres", "")](), n.isCamera) {
290
- (!(o != null && o.position) || o != null && o.position.every((c) => c == 0)) && ot(
292
+ (!(o != null && o.position) || o != null && o.position.every((c) => c == 0)) && st(
291
293
  // eslint-disable-next-line max-len
292
294
  "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 🤗"
293
295
  );
@@ -302,16 +304,16 @@ const st = {
302
304
  e.parent = t, t.children.splice(a, 0, e), e.dispatchEvent({ type: "added" });
303
305
  } else
304
306
  typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[t == null ? void 0 : t.attach], t && (t[e.attach] = e));
305
- const { onLoop: o } = N();
307
+ const { onLoop: o } = $();
306
308
  let n = null, i = null;
307
- const { raycaster: c } = me();
308
- e && e instanceof Ie && it(e) && (o(() => {
309
+ const { raycaster: c } = de();
310
+ e && e instanceof He && ct(e) && (o(() => {
309
311
  var a, s, l;
310
312
  if (t != null && t.children && e && c) {
311
313
  const p = c.value.intersectObjects(t.children);
312
314
  p.length > 0 && p[0].object.uuid === e.uuid ? (i = p[0], (n === null || n.object.uuid !== (i == null ? void 0 : i.object.uuid)) && ((a = e.onPointerEnter) == null || a.call(e, i)), (s = e.onPointerMove) == null || s.call(e, i)) : (i = null, n !== null && ((l = e.onPointerLeave) == null || l.call(e, n))), n = i;
313
315
  }
314
- }), Ve(window, "click", () => {
316
+ }), qe(window, "click", () => {
315
317
  var a;
316
318
  i !== null && ((a = e.onClick) == null || a.call(e, i));
317
319
  }));
@@ -325,14 +327,14 @@ const st = {
325
327
  patchProp(e, t, r, o) {
326
328
  if (e) {
327
329
  let n = e, i = t;
328
- const c = R(i);
330
+ const c = T(i);
329
331
  let a = n == null ? void 0 : n[c];
330
332
  if (e.parent || (e.parent = A), n.type === "BufferGeometry" && (i = i.split("-").pop(), n.setAttribute(
331
- R(i),
332
- new He(...o)
333
+ T(i),
334
+ new Ge(...o)
333
335
  )), i.includes("-") && a === void 0) {
334
336
  const l = i.split("-");
335
- a = l.reduce((p, m) => p[R(m)], n), i = l.pop(), a != null && a.set || (n = l.reduce((p, m) => p[R(m)], n));
337
+ a = l.reduce((p, d) => p[T(d)], n), i = l.pop(), a != null && a.set || (n = l.reduce((p, d) => p[T(d)], n));
336
338
  }
337
339
  let s = o;
338
340
  if (s === "" && (s = !0), Z(a)) {
@@ -354,15 +356,15 @@ const st = {
354
356
  setScopeId: () => void 0,
355
357
  cloneNode: () => void 0,
356
358
  insertStaticContent: () => void 0
357
- }, { createApp: ct } = Re(st), ut = (e) => {
358
- const t = ct(r);
359
+ }, { createApp: lt } = Te(ut), ft = (e) => {
360
+ const t = lt(r);
359
361
  function r() {
360
362
  return e && e.default ? e.default() : [];
361
363
  }
362
364
  return t;
363
365
  };
364
366
  se(oe);
365
- const { logWarning: lt } = B(), ft = Se({
367
+ const { logWarning: pt } = _(), dt = Re({
366
368
  name: "TresCanvas",
367
369
  props: [
368
370
  "shadows",
@@ -380,20 +382,22 @@ const { logWarning: lt } = B(), ft = Se({
380
382
  "preset"
381
383
  ],
382
384
  setup(e, { slots: t, expose: r }) {
383
- e.physicallyCorrectLights === !0 && lt("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
385
+ e.physicallyCorrectLights === !0 && pt("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
384
386
  const o = M(), n = M(), i = new oe.Scene(), { setState: c } = L();
385
- c("scene", i);
387
+ c("scene", i), Se(() => {
388
+ c("renderer", null);
389
+ });
386
390
  function a() {
387
- const { renderer: p } = nt(n, o, e), { activeCamera: m } = ce(), { onLoop: d } = N(), { raycaster: w, pointer: v } = me();
388
- d(() => {
391
+ const { renderer: p } = at(n, o, e), { activeCamera: d } = ce(), { onLoop: m } = $(), { raycaster: w, pointer: v } = de();
392
+ m(() => {
389
393
  var g;
390
- m.value && (w.value.setFromCamera(v.value, m.value), (g = p.value) == null || g.render(i, m.value));
394
+ d.value && (w.value.setFromCamera(v.value, d.value), (g = p.value) == null || g.render(i, d.value));
391
395
  });
392
396
  }
393
397
  O(n, a);
394
398
  let s;
395
399
  function l() {
396
- s = ut(t), s.provide("useTres", L()), s.provide("extend", se), s.mount(i);
400
+ s = ft(t), s.provide("useTres", L()), s.provide("extend", se), s.mount(i);
397
401
  }
398
402
  return l(), r({
399
403
  scene: i
@@ -402,6 +406,8 @@ const { logWarning: lt } = B(), ft = Se({
402
406
  "div",
403
407
  {
404
408
  ref: o,
409
+ "data-scene": i.uuid,
410
+ key: i.uuid,
405
411
  style: {
406
412
  position: "relative",
407
413
  width: "100%",
@@ -422,6 +428,7 @@ const { logWarning: lt } = B(), ft = Se({
422
428
  [
423
429
  P("canvas", {
424
430
  ref: n,
431
+ "data-scene": i.uuid,
425
432
  style: {
426
433
  display: "block",
427
434
  width: "100%",
@@ -437,25 +444,25 @@ const { logWarning: lt } = B(), ft = Se({
437
444
  )
438
445
  );
439
446
  }
440
- }), ht = {
447
+ }), Mt = {
441
448
  install(e) {
442
- e.component("TresCanvas", ft);
449
+ e.component("TresCanvas", dt);
443
450
  }
444
451
  };
445
452
  export {
446
- qe as CameraType,
447
- ft as TresCanvas,
453
+ Je as CameraType,
454
+ dt as TresCanvas,
448
455
  G as catalogue,
449
- ht as default,
456
+ Mt as default,
450
457
  se as extend,
451
- wt as isProd,
452
- at as trasverseObjects,
458
+ yt as isProd,
459
+ rt as trasverseObjects,
453
460
  ce as useCamera,
454
- vt as useLoader,
455
- B as useLogger,
456
- me as useRaycaster,
457
- N as useRenderLoop,
458
- nt as useRenderer,
459
- gt as useTexture,
461
+ wt as useLoader,
462
+ _ as useLogger,
463
+ de as useRaycaster,
464
+ $ as useRenderLoop,
465
+ at as useRenderer,
466
+ ht as useTexture,
460
467
  L as useTres
461
468
  };
package/dist/tres.umd.cjs CHANGED
@@ -1,8 +1,8 @@
1
1
  /**
2
2
  * name: @tresjs/core
3
- * version: v2.0.0-alpha.3
3
+ * version: v2.0.0-alpha.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(p,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],l):(p=typeof globalThis<"u"?globalThis:p||self,l(p.tres={},p.Vue,p.Three,p.VueUseCore))})(this,function(p,l,c,u){"use strict";function se(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const $=se(c),U=l.ref({uuid:c.MathUtils.generateUUID()}),z=e=>void Object.assign(U.value,e);var J=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(J||{});const ue=45;let C;function W(){const{state:e,setState:t,aspectRatio:a}=M();function o(r="Perspective",s){var d,v,g;if(r==="Perspective"){const{near:w,far:b,fov:h}=s||{near:.1,far:1e3,fov:ue};C=new c.PerspectiveCamera(h,((d=e.aspectRatio)==null?void 0:d.value)||window.innerWidth/window.innerHeight,w,b),(v=e.cameras)==null||v.push(C)}else{const{left:w,right:b,top:h,bottom:y,near:F,far:B}=s||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};C=new c.OrthographicCamera(w,b,h,y,F,B),(g=e.cameras)==null||g.push(C)}return e.camera=C,t("camera",e.camera),C}function n(){var r;e.camera instanceof c.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(r=e.camera)==null||r.updateProjectionMatrix()}function i(r){var s;(s=e.cameras)==null||s.push(r),r instanceof c.PerspectiveCamera&&e.aspectRatio&&(r.aspect=e.aspectRatio.value),r.updateProjectionMatrix(),t("camera",r)}function f(){e.cameras=[]}return l.watchEffect(()=>{a!=null&&a.value&&n()}),{activeCamera:l.toRef(e,"camera"),createCamera:o,updateCamera:n,pushCamera:i,clearCameras:f}}const K=u.createEventHook(),X=u.createEventHook(),I=u.createEventHook(),P=new c.Clock;let A=0,k=0;const{pause:le,resume:ce,isActive:fe}=u.useRafFn(()=>{K.trigger({delta:A,elapsed:k,clock:P}),X.trigger({delta:A,elapsed:k,clock:P}),I.trigger({delta:A,elapsed:k,clock:P})},{immediate:!1});I.on(()=>{A=P.getDelta(),k=P.getElapsedTime()});function j(){return{onBeforeLoop:K.on,onLoop:X.on,onAfterLoop:I.on,pause:le,resume:ce,isActive:fe}}function pe(e){return e instanceof c.Color?e:Array.isArray(e)?new c.Color(...e):new c.Color(e)}const R={realistic:{outputEncoding:c.sRGBEncoding,toneMapping:c.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:c.PCFSoftShadowMap}}},Y=(e,t)=>{for(const a of Object.keys(t))t[a]instanceof Object&&Object.assign(t[a],Y(e[a],t[a]));return Object.assign(e||{},t),e},de=me("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 x(e){return e.replace(/-([a-z])/g,(t,a)=>a.toUpperCase())}function me(e,t){const a=Object.create(null),o=e.split(",");for(let n=0;n<o.length;n++)a[o[n]]=!0;return t?n=>!!a[n.toLowerCase()]:n=>!!a[n]}const m=l.shallowRef(),G=l.ref(!1);function Q(e,t,a){const{alpha:o=!0,antialias:n=!0,depth:i,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:r,precision:s,premultipliedAlpha:d,stencil:v,shadows:g=!1,shadowMapType:w=c.PCFShadowMap,physicallyCorrectLights:b=!1,useLegacyLights:h=!1,outputEncoding:y=c.LinearEncoding,toneMapping:F=c.NoToneMapping,toneMappingExposure:B=1,context:Oe=void 0,powerPreference:Ue="default",preserveDrawingBuffer:Ae=!1,clearColor:O,windowSize:ke=!1,preset:je=void 0}=l.toRefs(a),{setState:N}=M(),{width:ne,height:ae}=u.resolveUnref(ke)?u.useWindowSize():u.useElementSize(t),{logError:xe}=S(),{pixelRatio:re}=u.useDevicePixelRatio(),{pause:_e,resume:Te}=j(),V=l.computed(()=>ne.value/ae.value),oe=()=>{m.value&&(m.value.setSize(ne.value,ae.value),m.value.setPixelRatio(Math.min(re.value,2)))},ie=()=>{if(!m.value)return;const L=u.resolveUnref(je);if(L){L in R||xe("Renderer Preset must be one of these: "+Object.keys(R).join(", ")),Y(m.value,R[L]);return}m.value.shadowMap.enabled=u.resolveUnref(g),m.value.shadowMap.type=u.resolveUnref(w),m.value.toneMapping=u.resolveUnref(F)||c.NoToneMapping,m.value.toneMappingExposure=u.resolveUnref(B),m.value.outputEncoding=u.resolveUnref(y)||c.LinearEncoding,O!=null&&O.value&&m.value.setClearColor(pe(u.resolveUnref(O))),m.value.useLegacyLights=u.resolveUnref(h)},De=()=>{const L=u.unrefElement(e);L&&(m.value=new c.WebGLRenderer({canvas:L,alpha:u.resolveUnref(o),antialias:u.resolveUnref(n),context:u.resolveUnref(Oe),depth:u.resolveUnref(i),failIfMajorPerformanceCaveat:u.resolveUnref(r),logarithmicDepthBuffer:u.resolveUnref(f),powerPreference:u.resolveUnref(Ue),precision:u.resolveUnref(s),stencil:u.resolveUnref(v),preserveDrawingBuffer:u.resolveUnref(Ae),premultipliedAlpha:u.resolveUnref(d)}),N("renderer",m.value),N("clock",new c.Clock),N("aspectRatio",V),ie(),oe(),Te(),G.value=!0)},Fe=()=>{m.value&&(m.value.dispose(),m.value=void 0,G.value=!1,_e())};return l.watch([V,re],oe),l.watch([g,w,y,h,F,B,O],ie),l.watch(()=>[e,t],()=>{u.unrefElement(e)&&u.unrefElement(t)&&De()},{immediate:!0,deep:!0}),{renderer:m,isReady:G,dispose:Fe,aspectRatio:V}}const Z=e=>!!e&&e.constructor===Array;function E(e){const t={nodes:{},materials:{}};return e&&e.traverse(a=>{a.name&&(t.nodes[a.name]=a),a.material&&!t.materials[a.material.name]&&(t.materials[a.material.name]=a.material)}),t}async function ve(e,t,a,o,n){const{logError:i}=S(),f=new e;n&&n(f),a&&a(f);const s=(Array.isArray(t)?t:[t]).map(d=>new Promise((v,g)=>{f.load(d,w=>{w.scene&&Object.assign(w,E(w.scene)),v(w)},o,w=>g(i("[useLoader] - Failed to load resource",w)))}));return Z(t)?await Promise.all(s):await s[0]}async function ge(e){const t=new c.LoadingManager,a=new c.TextureLoader(t),o=n=>new Promise((i,f)=>{a.load(n,r=>i(r),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(Z(e)){const n=await Promise.all(e.map(i=>o(i)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:i,normalMap:f,roughnessMap:r,metalnessMap:s,aoMap:d}=e;return{map:n?await o(n):null,displacementMap:i?await o(i):null,normalMap:f?await o(f):null,roughnessMap:r?await o(r):null,metalnessMap:s?await o(s):null,aoMap:d?await o(d):null}}}const _=l.shallowReactive({camera:void 0,cameras:[],aspectRatio:l.computed(()=>window.innerWidth/window.innerHeight)});function M(){function e(a){return _[a]}function t(a,o){_[a]=o}return{state:_,...l.toRefs(_),getState:e,setState:t}}const H=l.shallowRef(new c.Raycaster),T=l.ref(new c.Vector2),we=l.ref(null);function q(){const{setState:e}=M();e("raycaster",H.value),e("pointer",T),e("currentInstance",we);function t(a){T.value.x=a.clientX/window.innerWidth*2-1,T.value.y=-(a.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",t),{raycaster:H,pointer:T}}const he=!0,ee="[TresJS ▲ ■ ●] ";function S(){function e(o,n){console.error(`${ee} ${o}`,n||"")}function t(o){console.warn(`${ee} ${o}`)}function a(o,n){}return{logError:e,logWarning:t,logMessage:a}}const{logWarning:ye}=S();function Ce(e){for(const t in e)if(t.indexOf("on")===0)return!0;return!1}function ze(e){}let D=null;const Me={createElement(e,t,a,o){if(e==="template"||de(e))return null;let n;if(o===null&&(o={}),o!=null&&o.args?n=new U.value[e.replace("Tres","")](...o.args):n=new U.value[e.replace("Tres","")],n.isCamera){(!(o!=null&&o.position)||o!=null&&o.position.every(f=>f==0))&&ye("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}=W();i(n)}return(o==null?void 0:o.attach)===void 0&&(n.isMaterial?n.attach="material":n.isBufferGeometry&&(n.attach="geometry")),n},insert(e,t,a){if(D===null&&t.isScene&&(D=t),t===null&&(t=D),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const r=a?t.children.indexOf(a):0;e.parent=t,t.children.splice(r,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));const{onLoop:o}=j();let n=null,i=null;const{raycaster:f}=q();e&&e instanceof c.Mesh&&Ce(e)&&(o(()=>{var r,s,d;if(t!=null&&t.children&&e&&f){const v=f.value.intersectObjects(t.children);v.length>0&&v[0].object.uuid===e.uuid?(i=v[0],(n===null||n.object.uuid!==(i==null?void 0:i.object.uuid))&&((r=e.onPointerEnter)==null||r.call(e,i)),(s=e.onPointerMove)==null||s.call(e,i)):(i=null,n!==null&&((d=e.onPointerLeave)==null||d.call(e,n))),n=i}}),u.useEventListener(window,"click",()=>{var r;i!==null&&((r=e.onClick)==null||r.call(e,i))}))},remove(e){if(!e)return;const t=e.parentNode;t&&t.removeChild(e)},patchProp(e,t,a,o){if(e){let n=e,i=t;const f=x(i);let r=n==null?void 0:n[f];if(e.parent||(e.parent=D),n.type==="BufferGeometry"&&(i=i.split("-").pop(),n.setAttribute(x(i),new c.BufferAttribute(...o))),i.includes("-")&&r===void 0){const d=i.split("-");r=d.reduce((v,g)=>v[x(g)],n),i=d.pop(),r!=null&&r.set||(n=d.reduce((v,g)=>v[x(g)],n))}let s=o;if(s===""&&(s=!0),u.isFunction(r)){Array.isArray(s)?e[f](...s):e[f](s);return}!(r!=null&&r.set)&&!u.isFunction(r)?n[f]=s:r.constructor===s.constructor&&(r!=null&&r.copy)?r==null||r.copy(s):Array.isArray(s)?r.set(...s):!r.isColor&&r.setScalar?r.setScalar(s):r.set(s)}},parentNode(e){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{createApp:be}=l.createRenderer(Me),Le=e=>{const t=be(a);function a(){return e&&e.default?e.default():[]}return t};z($);const{logWarning:Pe}=S(),te=l.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:a}){e.physicallyCorrectLights===!0&&Pe("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const o=l.ref(),n=l.ref(),i=new $.Scene,{setState:f}=M();f("scene",i);function r(){const{renderer:v}=Q(n,o,e),{activeCamera:g}=W(),{onLoop:w}=j(),{raycaster:b,pointer:h}=q();w(()=>{var y;g.value&&(b.value.setFromCamera(h.value,g.value),(y=v.value)==null||y.render(i,g.value))})}l.watch(n,r);let s;function d(){s=Le(t),s.provide("useTres",M()),s.provide("extend",z),s.mount(i)}return d(),a({scene:i}),()=>l.h(l.h("div",{ref:o,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[l.h("div",{style:{width:"100%",height:"100%"}},[l.h("canvas",{ref:n,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),Se={install(e){e.component("TresCanvas",te)}};p.CameraType=J,p.TresCanvas=te,p.catalogue=U,p.default=Se,p.extend=z,p.isProd=he,p.trasverseObjects=E,p.useCamera=W,p.useLoader=ve,p.useLogger=S,p.useRaycaster=q,p.useRenderLoop=j,p.useRenderer=Q,p.useTexture=ge,p.useTres=M,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
8
+ (function(p,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],l):(p=typeof globalThis<"u"?globalThis:p||self,l(p.tres={},p.Vue,p.Three,p.VueUseCore))})(this,function(p,l,c,u){"use strict";function se(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const $=se(c),U=l.ref({uuid:c.MathUtils.generateUUID()}),I=e=>void Object.assign(U.value,e);var J=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(J||{});const ue=45;let C;function z(){const{state:e,setState:t,aspectRatio:a}=M();function o(r="Perspective",s){var d,v,g;if(r==="Perspective"){const{near:w,far:b,fov:h}=s||{near:.1,far:1e3,fov:ue};C=new c.PerspectiveCamera(h,((d=e.aspectRatio)==null?void 0:d.value)||window.innerWidth/window.innerHeight,w,b),(v=e.cameras)==null||v.push(C)}else{const{left:w,right:b,top:h,bottom:y,near:F,far:B}=s||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};C=new c.OrthographicCamera(w,b,h,y,F,B),(g=e.cameras)==null||g.push(C)}return e.camera=C,t("camera",e.camera),C}function n(){var r;e.camera instanceof c.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(r=e.camera)==null||r.updateProjectionMatrix()}function i(r){var s;(s=e.cameras)==null||s.push(r),r instanceof c.PerspectiveCamera&&e.aspectRatio&&(r.aspect=e.aspectRatio.value),r.updateProjectionMatrix(),t("camera",r)}function f(){e.cameras=[]}return l.watchEffect(()=>{a!=null&&a.value&&n()}),{activeCamera:l.toRef(e,"camera"),createCamera:o,updateCamera:n,pushCamera:i,clearCameras:f}}const K=u.createEventHook(),X=u.createEventHook(),W=u.createEventHook(),P=new c.Clock;let A=0,k=0;const{pause:le,resume:ce,isActive:fe}=u.useRafFn(()=>{K.trigger({delta:A,elapsed:k,clock:P}),X.trigger({delta:A,elapsed:k,clock:P}),W.trigger({delta:A,elapsed:k,clock:P})},{immediate:!1});W.on(()=>{A=P.getDelta(),k=P.getElapsedTime()});function j(){return{onBeforeLoop:K.on,onLoop:X.on,onAfterLoop:W.on,pause:le,resume:ce,isActive:fe}}function pe(e){return e instanceof c.Color?e:Array.isArray(e)?new c.Color(...e):new c.Color(e)}const R={realistic:{outputEncoding:c.sRGBEncoding,toneMapping:c.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:c.PCFSoftShadowMap}}},Y=(e,t)=>{for(const a of Object.keys(t))t[a]instanceof Object&&Object.assign(t[a],Y(e[a],t[a]));return Object.assign(e||{},t),e},de=me("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 x(e){return e.replace(/-([a-z])/g,(t,a)=>a.toUpperCase())}function me(e,t){const a=Object.create(null),o=e.split(",");for(let n=0;n<o.length;n++)a[o[n]]=!0;return t?n=>!!a[n.toLowerCase()]:n=>!!a[n]}const m=l.shallowRef(),G=l.ref(!1);function Q(e,t,a){const{alpha:o=!0,antialias:n=!0,depth:i,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:r,precision:s,premultipliedAlpha:d,stencil:v,shadows:g=!1,shadowMapType:w=c.PCFShadowMap,physicallyCorrectLights:b=!1,useLegacyLights:h=!1,outputEncoding:y=c.LinearEncoding,toneMapping:F=c.NoToneMapping,toneMappingExposure:B=1,context:Ue=void 0,powerPreference:Ae="default",preserveDrawingBuffer:ke=!1,clearColor:O,windowSize:je=!1,preset:xe=void 0}=l.toRefs(a),{setState:q}=M(),{width:ne,height:ae}=u.resolveUnref(je)?u.useWindowSize():u.useElementSize(t),{logError:_e}=S(),{pixelRatio:re}=u.useDevicePixelRatio(),{pause:Te,resume:De}=j(),V=l.computed(()=>ne.value/ae.value),oe=()=>{m.value&&(m.value.setSize(ne.value,ae.value),m.value.setPixelRatio(Math.min(re.value,2)))},ie=()=>{if(!m.value)return;const L=u.resolveUnref(xe);if(L){L in R||_e("Renderer Preset must be one of these: "+Object.keys(R).join(", ")),Y(m.value,R[L]);return}m.value.shadowMap.enabled=u.resolveUnref(g),m.value.shadowMap.type=u.resolveUnref(w),m.value.toneMapping=u.resolveUnref(F)||c.NoToneMapping,m.value.toneMappingExposure=u.resolveUnref(B),m.value.outputEncoding=u.resolveUnref(y)||c.LinearEncoding,O!=null&&O.value&&m.value.setClearColor(pe(u.resolveUnref(O))),m.value.useLegacyLights=u.resolveUnref(h)},Fe=()=>{const L=u.unrefElement(e);L&&(m.value=new c.WebGLRenderer({canvas:L,alpha:u.resolveUnref(o),antialias:u.resolveUnref(n),context:u.resolveUnref(Ue),depth:u.resolveUnref(i),failIfMajorPerformanceCaveat:u.resolveUnref(r),logarithmicDepthBuffer:u.resolveUnref(f),powerPreference:u.resolveUnref(Ae),precision:u.resolveUnref(s),stencil:u.resolveUnref(v),preserveDrawingBuffer:u.resolveUnref(ke),premultipliedAlpha:u.resolveUnref(d)}),q("renderer",m.value),q("clock",new c.Clock),q("aspectRatio",V),ie(),oe(),De(),G.value=!0)},Be=()=>{m.value&&(m.value.dispose(),m.value=void 0,G.value=!1,Te())};return l.watch([V,re],oe),l.watch([g,w,y,h,F,B,O],ie),l.watch(()=>[e,t],()=>{u.unrefElement(e)&&u.unrefElement(t)&&Fe()},{immediate:!0,deep:!0}),{renderer:m,isReady:G,dispose:Be,aspectRatio:V}}const Z=e=>!!e&&e.constructor===Array;function E(e){const t={nodes:{},materials:{}};return e&&e.traverse(a=>{a.name&&(t.nodes[a.name]=a),a.material&&!t.materials[a.material.name]&&(t.materials[a.material.name]=a.material)}),t}async function ve(e,t,a,o,n){const{logError:i}=S(),f=new e;n&&n(f),a&&a(f);const s=(Array.isArray(t)?t:[t]).map(d=>new Promise((v,g)=>{f.load(d,w=>{w.scene&&Object.assign(w,E(w.scene)),v(w)},o,w=>g(i("[useLoader] - Failed to load resource",w)))}));return Z(t)?await Promise.all(s):await s[0]}async function ge(e){const t=new c.LoadingManager,a=new c.TextureLoader(t),o=n=>new Promise((i,f)=>{a.load(n,r=>i(r),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(Z(e)){const n=await Promise.all(e.map(i=>o(i)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:i,normalMap:f,roughnessMap:r,metalnessMap:s,aoMap:d}=e;return{map:n?await o(n):null,displacementMap:i?await o(i):null,normalMap:f?await o(f):null,roughnessMap:r?await o(r):null,metalnessMap:s?await o(s):null,aoMap:d?await o(d):null}}}const we={camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:l.computed(()=>window.innerWidth/window.innerHeight)},_=l.shallowReactive(we);function M(){function e(a){return _[a]}function t(a,o){_[a]=o}return{state:_,...l.toRefs(_),getState:e,setState:t}}const H=l.shallowRef(new c.Raycaster),T=l.ref(new c.Vector2),he=l.ref(null);function N(){const{setState:e}=M();e("raycaster",H.value),e("pointer",T),e("currentInstance",he);function t(a){T.value.x=a.clientX/window.innerWidth*2-1,T.value.y=-(a.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",t),{raycaster:H,pointer:T}}const ye=!0,ee="[TresJS ▲ ■ ●] ";function S(){function e(o,n){console.error(`${ee} ${o}`,n||"")}function t(o){console.warn(`${ee} ${o}`)}function a(o,n){}return{logError:e,logWarning:t,logMessage:a}}const{logWarning:Ce}=S();function Me(e){for(const t in e)if(t.indexOf("on")===0)return!0;return!1}function ze(e){}let D=null;const be={createElement(e,t,a,o){if(e==="template"||de(e))return null;let n;if(o===null&&(o={}),o!=null&&o.args?n=new U.value[e.replace("Tres","")](...o.args):n=new U.value[e.replace("Tres","")],n.isCamera){(!(o!=null&&o.position)||o!=null&&o.position.every(f=>f==0))&&Ce("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}=z();i(n)}return(o==null?void 0:o.attach)===void 0&&(n.isMaterial?n.attach="material":n.isBufferGeometry&&(n.attach="geometry")),n},insert(e,t,a){if(D===null&&t.isScene&&(D=t),t===null&&(t=D),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const r=a?t.children.indexOf(a):0;e.parent=t,t.children.splice(r,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));const{onLoop:o}=j();let n=null,i=null;const{raycaster:f}=N();e&&e instanceof c.Mesh&&Me(e)&&(o(()=>{var r,s,d;if(t!=null&&t.children&&e&&f){const v=f.value.intersectObjects(t.children);v.length>0&&v[0].object.uuid===e.uuid?(i=v[0],(n===null||n.object.uuid!==(i==null?void 0:i.object.uuid))&&((r=e.onPointerEnter)==null||r.call(e,i)),(s=e.onPointerMove)==null||s.call(e,i)):(i=null,n!==null&&((d=e.onPointerLeave)==null||d.call(e,n))),n=i}}),u.useEventListener(window,"click",()=>{var r;i!==null&&((r=e.onClick)==null||r.call(e,i))}))},remove(e){if(!e)return;const t=e.parentNode;t&&t.removeChild(e)},patchProp(e,t,a,o){if(e){let n=e,i=t;const f=x(i);let r=n==null?void 0:n[f];if(e.parent||(e.parent=D),n.type==="BufferGeometry"&&(i=i.split("-").pop(),n.setAttribute(x(i),new c.BufferAttribute(...o))),i.includes("-")&&r===void 0){const d=i.split("-");r=d.reduce((v,g)=>v[x(g)],n),i=d.pop(),r!=null&&r.set||(n=d.reduce((v,g)=>v[x(g)],n))}let s=o;if(s===""&&(s=!0),u.isFunction(r)){Array.isArray(s)?e[f](...s):e[f](s);return}!(r!=null&&r.set)&&!u.isFunction(r)?n[f]=s:r.constructor===s.constructor&&(r!=null&&r.copy)?r==null||r.copy(s):Array.isArray(s)?r.set(...s):!r.isColor&&r.setScalar?r.setScalar(s):r.set(s)}},parentNode(e){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{createApp:Le}=l.createRenderer(be),Pe=e=>{const t=Le(a);function a(){return e&&e.default?e.default():[]}return t};I($);const{logWarning:Se}=S(),te=l.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:a}){e.physicallyCorrectLights===!0&&Se("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const o=l.ref(),n=l.ref(),i=new $.Scene,{setState:f}=M();f("scene",i),l.onUnmounted(()=>{f("renderer",null)});function r(){const{renderer:v}=Q(n,o,e),{activeCamera:g}=z(),{onLoop:w}=j(),{raycaster:b,pointer:h}=N();w(()=>{var y;g.value&&(b.value.setFromCamera(h.value,g.value),(y=v.value)==null||y.render(i,g.value))})}l.watch(n,r);let s;function d(){s=Pe(t),s.provide("useTres",M()),s.provide("extend",I),s.mount(i)}return d(),a({scene:i}),()=>l.h(l.h("div",{ref:o,"data-scene":i.uuid,key:i.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[l.h("div",{style:{width:"100%",height:"100%"}},[l.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={install(e){e.component("TresCanvas",te)}};p.CameraType=J,p.TresCanvas=te,p.catalogue=U,p.default=Oe,p.extend=I,p.isProd=ye,p.trasverseObjects=E,p.useCamera=z,p.useLoader=ve,p.useLogger=S,p.useRaycaster=N,p.useRenderLoop=j,p.useRenderer=Q,p.useTexture=ge,p.useTres=M,Object.defineProperties(p,{__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-alpha.3",
4
+ "version": "2.0.0-alpha.4",
5
5
  "type": "module",
6
6
  "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
7
7
  "files": [