@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.
- package/dist/composables/useRenderer/index.d.ts +1 -1
- package/dist/tres.js +96 -99
- package/dist/tres.umd.cjs +3 -3
- package/package.json +4 -4
|
@@ -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.
|
|
3
|
+
* version: v2.0.0-beta.4
|
|
4
4
|
* (c) 2023
|
|
5
5
|
* description: Declarative ThreeJS using Vue Components
|
|
6
6
|
* author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
|
|
7
7
|
*/
|
|
8
|
-
import { ref as
|
|
8
|
+
import { ref as k, watchEffect as ie, toRef as Pe, shallowRef as se, toRefs as ce, computed as ue, watch as H, shallowReactive as le, provide as Re, inject as ke, onUnmounted as fe, createRenderer as Ae, defineComponent as de, onMounted as Oe, h as A } from "vue";
|
|
9
9
|
import * as pe from "three";
|
|
10
|
-
import { MathUtils as je, PerspectiveCamera as B, OrthographicCamera as _e, Clock as me, Color as U, sRGBEncoding as ze, ACESFilmicToneMapping as Be, PCFSoftShadowMap as De, PCFShadowMap as
|
|
11
|
-
import { createEventHook as V, useRafFn as
|
|
12
|
-
const
|
|
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
|
|
15
|
+
let R;
|
|
16
16
|
function q() {
|
|
17
|
-
const { state: e, setState: t, aspectRatio: r } =
|
|
17
|
+
const { state: e, setState: t, aspectRatio: r } = j();
|
|
18
18
|
function a(o = "Perspective", c) {
|
|
19
19
|
var l, v, d;
|
|
20
20
|
if (o === "Perspective") {
|
|
21
|
-
const { near: f, far:
|
|
21
|
+
const { near: f, far: E, fov: h } = c || {
|
|
22
22
|
near: 0.1,
|
|
23
23
|
far: 1e3,
|
|
24
24
|
fov: Je
|
|
25
25
|
};
|
|
26
|
-
|
|
26
|
+
R = new B(h, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, f, E), (v = e.cameras) == null || v.push(R);
|
|
27
27
|
} else {
|
|
28
|
-
const { left: f, right:
|
|
28
|
+
const { left: f, right: E, top: h, bottom: L, near: w, far: p } = c || {
|
|
29
29
|
left: -100,
|
|
30
30
|
right: 100,
|
|
31
31
|
top: 100,
|
|
@@ -33,9 +33,9 @@ function q() {
|
|
|
33
33
|
near: 0.1,
|
|
34
34
|
far: 1e3
|
|
35
35
|
};
|
|
36
|
-
|
|
36
|
+
R = new _e(f, E, h, L, w, p), (d = e.cameras) == null || d.push(R);
|
|
37
37
|
}
|
|
38
|
-
return e.camera =
|
|
38
|
+
return e.camera = R, t("camera", e.camera), R;
|
|
39
39
|
}
|
|
40
40
|
function n() {
|
|
41
41
|
var o;
|
|
@@ -58,16 +58,16 @@ function q() {
|
|
|
58
58
|
clearCameras: s
|
|
59
59
|
};
|
|
60
60
|
}
|
|
61
|
-
const he = V(), ge = V(), Y = V(),
|
|
62
|
-
let D = 0,
|
|
63
|
-
const { pause: Qe, resume: Ze, isActive: et } =
|
|
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:
|
|
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 =
|
|
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
|
|
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 =
|
|
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 =
|
|
122
|
-
physicallyCorrectLights:
|
|
121
|
+
shadowMapType: f = Fe,
|
|
122
|
+
physicallyCorrectLights: E = !1,
|
|
123
123
|
useLegacyLights: h = !1,
|
|
124
|
-
outputEncoding:
|
|
125
|
-
toneMapping:
|
|
124
|
+
outputEncoding: L = ne,
|
|
125
|
+
toneMapping: w = ae,
|
|
126
126
|
toneMappingExposure: p = 1,
|
|
127
|
-
context:
|
|
128
|
-
powerPreference:
|
|
129
|
-
preserveDrawingBuffer:
|
|
130
|
-
clearColor:
|
|
131
|
-
windowSize:
|
|
132
|
-
preset:
|
|
133
|
-
} = ce(e), { state:
|
|
134
|
-
!u(
|
|
127
|
+
context: M = void 0,
|
|
128
|
+
powerPreference: b = "default",
|
|
129
|
+
preserveDrawingBuffer: y = !1,
|
|
130
|
+
clearColor: x,
|
|
131
|
+
windowSize: C = !1,
|
|
132
|
+
preset: S = void 0
|
|
133
|
+
} = ce(e), { state: g, setState: T } = j(), { width: K, height: X } = u(C) == !0 || u(C) === "" || u(C) === "true" ? qe() : Ve(g.container), { logError: Me, logWarning: Ce } = I(), { pixelRatio: J } = Ye(), { pause: Ee, resume: Le } = we(), W = ue(() => K.value / X.value);
|
|
134
|
+
!u(C) && ((te = (ee = g.container) == null ? void 0 : ee.value) == null ? void 0 : te.offsetHeight) === 0 && Ce(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
|
|
135
135
|
You could set windowSize=true to force the canvas to be the size of the window.`);
|
|
136
136
|
const Q = () => {
|
|
137
137
|
t.value && (t.value.setSize(K.value, X.value), t.value.setPixelRatio(Math.min(J.value, 2)));
|
|
138
138
|
}, Z = () => {
|
|
139
139
|
if (!t.value)
|
|
140
140
|
return;
|
|
141
|
-
const
|
|
142
|
-
if (
|
|
143
|
-
|
|
141
|
+
const P = u(S);
|
|
142
|
+
if (P) {
|
|
143
|
+
P in N || Me("Renderer Preset must be one of these: " + Object.keys(N).join(", ")), be(t.value, N[P]);
|
|
144
144
|
return;
|
|
145
145
|
}
|
|
146
|
-
t.value.shadowMap.enabled = u(d), t.value.shadowMap.type = u(f), t.value.toneMapping = u(
|
|
146
|
+
t.value.shadowMap.enabled = u(d), t.value.shadowMap.type = u(f), t.value.toneMapping = u(w) || ae, t.value.toneMappingExposure = u(p), t.value.outputEncoding = u(L) || ne, x != null && x.value && t.value.setClearColor(tt(u(x))), t.value.useLegacyLights = u(h);
|
|
147
147
|
}, Se = () => {
|
|
148
|
-
const
|
|
149
|
-
|
|
150
|
-
canvas:
|
|
148
|
+
const P = G(g.canvas);
|
|
149
|
+
P && (t.value = new Ie({
|
|
150
|
+
canvas: P,
|
|
151
151
|
alpha: u(a),
|
|
152
152
|
antialias: u(n),
|
|
153
|
-
context: u(
|
|
153
|
+
context: u(M),
|
|
154
154
|
depth: u(i),
|
|
155
155
|
failIfMajorPerformanceCaveat: u(o),
|
|
156
156
|
logarithmicDepthBuffer: u(s),
|
|
157
|
-
powerPreference: u(
|
|
157
|
+
powerPreference: u(b),
|
|
158
158
|
precision: u(c),
|
|
159
159
|
stencil: u(v),
|
|
160
|
-
preserveDrawingBuffer: u(
|
|
160
|
+
preserveDrawingBuffer: u(y),
|
|
161
161
|
premultipliedAlpha: u(l)
|
|
162
|
-
}),
|
|
162
|
+
}), T("renderer", t.value), T("clock", new me()), T("aspectRatio", W), Z(), Q(), Le(), r.value = !0);
|
|
163
163
|
}, Te = () => {
|
|
164
164
|
t.value && (t.value.dispose(), t.value = void 0, r.value = !1, Ee());
|
|
165
165
|
};
|
|
166
|
-
return H([
|
|
167
|
-
[d, f,
|
|
166
|
+
return H([W, J], Q), H(
|
|
167
|
+
[d, f, L, h, w, p, x],
|
|
168
168
|
Z
|
|
169
169
|
), H(
|
|
170
|
-
() => [
|
|
170
|
+
() => [g.canvas, g.container],
|
|
171
171
|
() => {
|
|
172
|
-
|
|
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:
|
|
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
|
|
190
|
-
const { logError: i } =
|
|
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
|
|
207
|
-
const t = new
|
|
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
|
|
272
|
+
const j = () => ke(xe, {
|
|
273
273
|
state: le({
|
|
274
274
|
camera: void 0,
|
|
275
275
|
cameras: [],
|
|
@@ -279,7 +279,7 @@ const k = () => ke(xe, {
|
|
|
279
279
|
});
|
|
280
280
|
function ut() {
|
|
281
281
|
var s;
|
|
282
|
-
const e = se(new Ue()), t =
|
|
282
|
+
const e = se(new Ue()), t = k(new Ge()), r = k(null), { setState: a, state: n } = j();
|
|
283
283
|
a("raycaster", e.value), a("pointer", t), a("currentInstance", r);
|
|
284
284
|
function i(o) {
|
|
285
285
|
t.value.x = o.clientX / window.innerWidth * 2 - 1, t.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
|
|
@@ -292,8 +292,8 @@ function ut() {
|
|
|
292
292
|
pointer: t
|
|
293
293
|
};
|
|
294
294
|
}
|
|
295
|
-
const
|
|
296
|
-
function
|
|
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
|
|
312
|
-
const { logWarning: e } =
|
|
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
|
|
327
|
+
const lt = /^on[^a-z]/, ft = (e) => lt.test(e);
|
|
328
328
|
let z = null;
|
|
329
|
-
const
|
|
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
|
|
335
|
-
|
|
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
|
|
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
|
-
|
|
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:
|
|
395
|
-
const t =
|
|
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:
|
|
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 &&
|
|
421
|
-
const a =
|
|
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:
|
|
431
|
-
let
|
|
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(
|
|
434
|
-
}),
|
|
435
|
-
var b, y,
|
|
436
|
-
if (f.value && ((
|
|
437
|
-
const
|
|
438
|
-
|
|
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 =
|
|
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
|
-
}), () =>
|
|
452
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
}),
|
|
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), () =>
|
|
510
|
+
return r(a), () => A(ht, e, t);
|
|
514
511
|
}
|
|
515
|
-
}),
|
|
512
|
+
}), Lt = {
|
|
516
513
|
install(e) {
|
|
517
|
-
e.component("TresCanvas",
|
|
514
|
+
e.component("TresCanvas", gt);
|
|
518
515
|
}
|
|
519
516
|
};
|
|
520
517
|
export {
|
|
521
518
|
Xe as CameraType,
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
519
|
+
gt as TresCanvas,
|
|
520
|
+
$ as catalogue,
|
|
521
|
+
Lt as default,
|
|
525
522
|
ve as extend,
|
|
526
|
-
|
|
523
|
+
Ct as isProd,
|
|
527
524
|
it as trasverseObjects,
|
|
528
525
|
q as useCamera,
|
|
529
|
-
|
|
530
|
-
|
|
526
|
+
xt as useLoader,
|
|
527
|
+
I as useLogger,
|
|
531
528
|
ut as useRaycaster,
|
|
532
529
|
we as useRenderLoop,
|
|
533
530
|
ot as useRenderer,
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
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.
|
|
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
|
|
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.
|
|
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-
|
|
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": "
|
|
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",
|