@tresjs/core 1.2.1 → 1.3.1
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 +122 -120
- package/dist/tres.umd.cjs +2 -2
- package/package.json +19 -17
package/dist/tres.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v1.2.
|
|
3
|
+
* version: v1.2.1
|
|
4
4
|
* (c) 2022
|
|
5
5
|
* description: Declarative ThreeJS using Vue Components
|
|
6
6
|
* author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
|
|
7
7
|
*/
|
|
8
|
-
import { computed as j, watch as O, inject as T, ref as P, defineComponent as
|
|
8
|
+
import { computed as j, watch as O, inject as T, ref as P, defineComponent as N, shallowRef as k, reactive as ve, toRefs as ye, provide as b, onBeforeUnmount as Ce, h as q } from "vue";
|
|
9
9
|
import { useWindowSize as ee, createEventHook as W, useRafFn as Se, useElementSize as Me, useDevicePixelRatio as xe, unrefElement as z, resolveUnref as y } from "@vueuse/core";
|
|
10
10
|
import * as Q from "three";
|
|
11
|
-
import { PerspectiveCamera as
|
|
12
|
-
var
|
|
11
|
+
import { PerspectiveCamera as $, OrthographicCamera as te, Color as D, Vector3 as Ee, Clock as Te, Scene as Pe, LoadingManager as Re, TextureLoader as Le, PCFShadowMap as Oe, LinearEncoding as be, NoToneMapping as $e, WebGLRenderer as Ae } from "three";
|
|
12
|
+
var Ie = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Ie || {});
|
|
13
13
|
const M = {
|
|
14
14
|
cameras: []
|
|
15
|
-
},
|
|
15
|
+
}, _e = 45;
|
|
16
16
|
let C;
|
|
17
17
|
function ne() {
|
|
18
18
|
const { width: e, height: t } = ee(), { setState: n } = le();
|
|
19
|
-
function
|
|
19
|
+
function s(r = "Perspective", u) {
|
|
20
20
|
if (r === "Perspective") {
|
|
21
|
-
const { near:
|
|
21
|
+
const { near: a, far: c, fov: p } = u || {
|
|
22
22
|
near: 0.1,
|
|
23
23
|
far: 1e3,
|
|
24
|
-
fov:
|
|
24
|
+
fov: _e
|
|
25
25
|
};
|
|
26
|
-
C = new
|
|
26
|
+
C = new $(p, i.value, a, c), M.cameras.push(C);
|
|
27
27
|
} else {
|
|
28
|
-
const { left:
|
|
28
|
+
const { left: a, right: c, top: p, bottom: m, near: g, far: v } = u || {
|
|
29
29
|
left: -100,
|
|
30
30
|
right: 100,
|
|
31
31
|
top: 100,
|
|
@@ -33,34 +33,34 @@ function ne() {
|
|
|
33
33
|
near: 0.1,
|
|
34
34
|
far: 1e3
|
|
35
35
|
};
|
|
36
|
-
C = new te(
|
|
36
|
+
C = new te(a, c, p, m, g, v), M.cameras.push(C);
|
|
37
37
|
}
|
|
38
38
|
return M.cameras.push(C), C;
|
|
39
39
|
}
|
|
40
40
|
const i = j(() => e.value / t.value), l = j(() => M.cameras[0]);
|
|
41
41
|
function f() {
|
|
42
|
-
l.value instanceof
|
|
42
|
+
l.value instanceof $ && (l.value.aspect = i.value), l.value.updateProjectionMatrix();
|
|
43
43
|
}
|
|
44
|
-
function
|
|
44
|
+
function o(r) {
|
|
45
45
|
const u = T("camera");
|
|
46
|
-
r && u && (u.value = r, n("camera", u.value)), M.cameras.push(r), r instanceof
|
|
46
|
+
r && u && (u.value = r, n("camera", u.value)), M.cameras.push(r), r instanceof $ && (r.aspect = i.value), r.updateProjectionMatrix();
|
|
47
47
|
}
|
|
48
48
|
return O(i, f), {
|
|
49
49
|
activeCamera: l,
|
|
50
|
-
createCamera:
|
|
50
|
+
createCamera: s,
|
|
51
51
|
updateCamera: f,
|
|
52
|
-
pushCamera:
|
|
52
|
+
pushCamera: o
|
|
53
53
|
};
|
|
54
54
|
}
|
|
55
|
-
const X = "[TresJS
|
|
56
|
-
function
|
|
57
|
-
function e(
|
|
58
|
-
console.error(`${X} ${
|
|
55
|
+
const X = "[TresJS ▲ ■ ●] ";
|
|
56
|
+
function I() {
|
|
57
|
+
function e(s, i) {
|
|
58
|
+
console.error(`${X} ${s}`, i || "");
|
|
59
59
|
}
|
|
60
|
-
function t(
|
|
61
|
-
console.warn(`${X} ${
|
|
60
|
+
function t(s) {
|
|
61
|
+
console.warn(`${X} ${s}`);
|
|
62
62
|
}
|
|
63
|
-
function n(
|
|
63
|
+
function n(s, i) {
|
|
64
64
|
}
|
|
65
65
|
return {
|
|
66
66
|
logError: e,
|
|
@@ -72,25 +72,25 @@ const E = P({ ...Q, uuid: Q.MathUtils.generateUUID() });
|
|
|
72
72
|
delete E.value.Scene;
|
|
73
73
|
let x;
|
|
74
74
|
function re(e, t = "Tres") {
|
|
75
|
-
const { logMessage: n, logError:
|
|
75
|
+
const { logMessage: n, logError: s } = I();
|
|
76
76
|
!x && e && (x = e);
|
|
77
|
-
const { createComponentInstances: i } =
|
|
77
|
+
const { createComponentInstances: i } = oe(t);
|
|
78
78
|
return {
|
|
79
79
|
extend: (f) => {
|
|
80
80
|
if (!f) {
|
|
81
|
-
|
|
81
|
+
s("No objects provided to extend catalogue");
|
|
82
82
|
return;
|
|
83
83
|
}
|
|
84
84
|
E.value = Object.assign(E.value, f);
|
|
85
|
-
const
|
|
86
|
-
n("Adding objects to catalogue", { objects: f, catalogue: E.value.uuid }), x &&
|
|
85
|
+
const o = i(P(f));
|
|
86
|
+
n("Adding objects to catalogue", { objects: f, catalogue: E.value.uuid }), x && o.forEach(([r, u]) => {
|
|
87
87
|
x._context.components[r] || x.component(r, u);
|
|
88
88
|
});
|
|
89
89
|
},
|
|
90
90
|
catalogue: E
|
|
91
91
|
};
|
|
92
92
|
}
|
|
93
|
-
const U = (e) => typeof e < "u",
|
|
93
|
+
const U = (e) => typeof e < "u", Be = (e) => typeof e == "function", A = (e) => !!e && e.constructor === Array;
|
|
94
94
|
function Fe(e) {
|
|
95
95
|
return typeof e == "number" ? [e, e, e] : e instanceof Ee ? [e.x, e.y, e.z] : e;
|
|
96
96
|
}
|
|
@@ -98,22 +98,24 @@ function Y(e) {
|
|
|
98
98
|
return e instanceof D ? e : Array.isArray(e) ? new D(...e) : new D(e);
|
|
99
99
|
}
|
|
100
100
|
const ze = ["rotation", "scale", "position"];
|
|
101
|
-
function
|
|
102
|
-
const { logMessage: t, logError: n } =
|
|
103
|
-
function o
|
|
104
|
-
|
|
101
|
+
function oe(e) {
|
|
102
|
+
const { logMessage: t, logError: n } = I();
|
|
103
|
+
function s(o, r) {
|
|
104
|
+
U(o) && U(r) && Object.entries(o).forEach(([u, a]) => {
|
|
105
105
|
const c = u.replace(/(-\w)/g, (p) => p[1].toUpperCase());
|
|
106
|
-
if (!(c === "args" ||
|
|
107
|
-
ze.includes(c) &&
|
|
106
|
+
if (!(c === "args" || a === void 0)) {
|
|
107
|
+
ze.includes(c) && a && (a = Fe(a)), o.ref && (o.ref = r);
|
|
108
108
|
try {
|
|
109
109
|
if (r[c] && U(r[c].set))
|
|
110
|
-
r[c].set(
|
|
110
|
+
r[c].set(...A(a) ? a : [a]);
|
|
111
111
|
else {
|
|
112
|
-
if (
|
|
113
|
-
|
|
112
|
+
if (a === "" && (a = !0), Be(r[c])) {
|
|
113
|
+
if (u === "center" && !a)
|
|
114
|
+
return;
|
|
115
|
+
r[c](...A(a) ? a : [a]);
|
|
114
116
|
return;
|
|
115
117
|
}
|
|
116
|
-
r[c] =
|
|
118
|
+
r[c] = a;
|
|
117
119
|
}
|
|
118
120
|
} catch (p) {
|
|
119
121
|
n(`There was an error setting ${c} property`, p);
|
|
@@ -121,37 +123,37 @@ function ae(e) {
|
|
|
121
123
|
}
|
|
122
124
|
});
|
|
123
125
|
}
|
|
124
|
-
function i(
|
|
125
|
-
var
|
|
126
|
+
function i(o) {
|
|
127
|
+
var a;
|
|
126
128
|
const r = /^Symbol\(Fragment\)$/g, u = /^Symbol\(Text\)$/g;
|
|
127
|
-
if (r.test(
|
|
128
|
-
return
|
|
129
|
-
if (u.test(
|
|
129
|
+
if (r.test(o.type.toString()))
|
|
130
|
+
return o.children.map((c) => i(c));
|
|
131
|
+
if (u.test(o.type.toString()))
|
|
130
132
|
return;
|
|
131
133
|
{
|
|
132
|
-
const c =
|
|
134
|
+
const c = o.type.name.replace(e, ""), { catalogue: p } = re(), m = T("catalogue") || p;
|
|
133
135
|
let g;
|
|
134
|
-
return m && ((
|
|
136
|
+
return m && ((a = o == null ? void 0 : o.props) != null && a.args ? m != null && m.value[c] ? g = new m.value[c](...o.props.args) : n(`There is no ${c} in the catalogue`, m == null ? void 0 : m.value.uuid) : g = new m.value[c]()), o != null && o.props && s(o.props, g), g;
|
|
135
137
|
}
|
|
136
138
|
}
|
|
137
|
-
function l(
|
|
138
|
-
if (u.default && (u
|
|
139
|
-
const
|
|
140
|
-
return new
|
|
139
|
+
function l(o, r, u) {
|
|
140
|
+
if (u.default && (u != null && u.default())) {
|
|
141
|
+
const a = u.default().map((c) => i(c));
|
|
142
|
+
return new o(...a.flat().filter(Boolean));
|
|
141
143
|
} else
|
|
142
|
-
return r.args ? new
|
|
144
|
+
return r.args ? new o(...r.args) : new o();
|
|
143
145
|
}
|
|
144
|
-
function f(
|
|
145
|
-
return Object.entries(
|
|
146
|
-
var
|
|
147
|
-
return (c = (
|
|
146
|
+
function f(o) {
|
|
147
|
+
return Object.entries(o.value).filter(([r, u]) => {
|
|
148
|
+
var a, c;
|
|
149
|
+
return (c = (a = u == null ? void 0 : u.prototype) == null ? void 0 : a.constructor) == null ? void 0 : c.toString().includes("class");
|
|
148
150
|
}).map(([r, u]) => {
|
|
149
|
-
const
|
|
150
|
-
name:
|
|
151
|
+
const a = `${e}${r}`, c = N({
|
|
152
|
+
name: a,
|
|
151
153
|
setup(p, { slots: m, attrs: g, ...v }) {
|
|
152
|
-
const { scene: R } = ue(), w = T("local-scene") || R, S = T("catalogue"), { pushCamera:
|
|
154
|
+
const { scene: R } = ue(), w = T("local-scene") || R, S = T("catalogue"), { pushCamera: _ } = ne();
|
|
153
155
|
let h = l(u, g, m);
|
|
154
|
-
return
|
|
156
|
+
return s(g, h), (h instanceof $ || h instanceof te) && _(h), h.isObject3D && (w == null || w.value.add(h)), v.expose(h), t(a, {
|
|
155
157
|
sceneuuid: w == null ? void 0 : w.value.uuid,
|
|
156
158
|
catalogue: S == null ? void 0 : S.value.uuid,
|
|
157
159
|
props: p,
|
|
@@ -163,25 +165,25 @@ function ae(e) {
|
|
|
163
165
|
};
|
|
164
166
|
}
|
|
165
167
|
});
|
|
166
|
-
return [
|
|
168
|
+
return [a, c];
|
|
167
169
|
});
|
|
168
170
|
}
|
|
169
171
|
return {
|
|
170
172
|
createComponentInstances: f,
|
|
171
|
-
processProps:
|
|
173
|
+
processProps: s,
|
|
172
174
|
createInstanceFromVNode: i
|
|
173
175
|
};
|
|
174
176
|
}
|
|
175
|
-
const
|
|
177
|
+
const ae = W(), se = W(), ie = W(), Z = new Te(), { pause: De, resume: Ue, isActive: Ve } = Se(
|
|
176
178
|
() => {
|
|
177
179
|
const e = Z.getElapsedTime(), t = Z.getDelta();
|
|
178
|
-
|
|
180
|
+
ae.trigger({ delta: t, elapsed: e }), se.trigger({ delta: t, elapsed: e }), ie.trigger({ delta: t, elapsed: e });
|
|
179
181
|
},
|
|
180
182
|
{ immediate: !1 }
|
|
181
183
|
);
|
|
182
184
|
function ce() {
|
|
183
185
|
return {
|
|
184
|
-
onBeforeLoop:
|
|
186
|
+
onBeforeLoop: ae.on,
|
|
185
187
|
onLoop: se.on,
|
|
186
188
|
onAfterLoop: ie.on,
|
|
187
189
|
pause: De,
|
|
@@ -189,58 +191,58 @@ function ce() {
|
|
|
189
191
|
isActive: Ve
|
|
190
192
|
};
|
|
191
193
|
}
|
|
192
|
-
const je =
|
|
194
|
+
const je = k(new Pe());
|
|
193
195
|
function ue() {
|
|
194
196
|
return {
|
|
195
197
|
scene: je
|
|
196
198
|
};
|
|
197
199
|
}
|
|
198
|
-
function
|
|
200
|
+
function Ne(e) {
|
|
199
201
|
const t = { nodes: {}, materials: {} };
|
|
200
202
|
return e && e.traverse((n) => {
|
|
201
203
|
n.name && (t.nodes[n.name] = n), n.material && !t.materials[n.material.name] && (t.materials[n.material.name] = n.material);
|
|
202
204
|
}), t;
|
|
203
205
|
}
|
|
204
|
-
async function Qe(e, t, n,
|
|
205
|
-
const { logError: l } =
|
|
206
|
+
async function Qe(e, t, n, s, i) {
|
|
207
|
+
const { logError: l } = I(), f = new e();
|
|
206
208
|
i && i(f), n && n(e);
|
|
207
209
|
const r = (Array.isArray(t) ? t : [t]).map(
|
|
208
|
-
(u) => new Promise((
|
|
210
|
+
(u) => new Promise((a, c) => {
|
|
209
211
|
f.load(
|
|
210
212
|
u,
|
|
211
213
|
(p) => {
|
|
212
|
-
p.scene && Object.assign(p,
|
|
214
|
+
p.scene && Object.assign(p, Ne(p.scene)), a(p);
|
|
213
215
|
},
|
|
214
|
-
|
|
216
|
+
s,
|
|
215
217
|
(p) => c(l("[useLoader] - Failed to load resource", p))
|
|
216
218
|
);
|
|
217
219
|
})
|
|
218
220
|
);
|
|
219
|
-
return
|
|
221
|
+
return A(t) ? await Promise.all(r) : await r[0];
|
|
220
222
|
}
|
|
221
223
|
async function Xe(e) {
|
|
222
|
-
const t = new Re(), n = new Le(t),
|
|
224
|
+
const t = new Re(), n = new Le(t), s = (i) => new Promise((l, f) => {
|
|
223
225
|
n.load(
|
|
224
226
|
i,
|
|
225
|
-
(
|
|
227
|
+
(o) => l(o),
|
|
226
228
|
() => null,
|
|
227
229
|
() => {
|
|
228
230
|
f(new Error("[useTextures] - Failed to load texture"));
|
|
229
231
|
}
|
|
230
232
|
);
|
|
231
233
|
});
|
|
232
|
-
if (
|
|
233
|
-
const i = await Promise.all(e.map((l) =>
|
|
234
|
+
if (A(e)) {
|
|
235
|
+
const i = await Promise.all(e.map((l) => s(l)));
|
|
234
236
|
return e.length > 1 ? i : i[0];
|
|
235
237
|
} else {
|
|
236
|
-
const { map: i, displacementMap: l, normalMap: f, roughnessMap:
|
|
238
|
+
const { map: i, displacementMap: l, normalMap: f, roughnessMap: o, metalnessMap: r, aoMap: u } = e;
|
|
237
239
|
return {
|
|
238
|
-
map: i ? await
|
|
239
|
-
displacementMap: l ? await
|
|
240
|
-
normalMap: f ? await
|
|
241
|
-
roughnessMap:
|
|
242
|
-
metalnessMap: r ? await
|
|
243
|
-
aoMap: u ? await
|
|
240
|
+
map: i ? await s(i) : null,
|
|
241
|
+
displacementMap: l ? await s(l) : null,
|
|
242
|
+
normalMap: f ? await s(f) : null,
|
|
243
|
+
roughnessMap: o ? await s(o) : null,
|
|
244
|
+
metalnessMap: r ? await s(r) : null,
|
|
245
|
+
aoMap: u ? await s(u) : null
|
|
244
246
|
};
|
|
245
247
|
}
|
|
246
248
|
}
|
|
@@ -249,8 +251,8 @@ function le() {
|
|
|
249
251
|
function e(n) {
|
|
250
252
|
return L[n];
|
|
251
253
|
}
|
|
252
|
-
function t(n,
|
|
253
|
-
L[n] =
|
|
254
|
+
function t(n, s) {
|
|
255
|
+
L[n] = s;
|
|
254
256
|
}
|
|
255
257
|
return {
|
|
256
258
|
state: L,
|
|
@@ -259,56 +261,56 @@ function le() {
|
|
|
259
261
|
setState: t
|
|
260
262
|
};
|
|
261
263
|
}
|
|
262
|
-
const d =
|
|
263
|
-
function
|
|
264
|
+
const d = k(), V = P(!1);
|
|
265
|
+
function ke(e, t, n) {
|
|
264
266
|
const {
|
|
265
|
-
alpha:
|
|
267
|
+
alpha: s = !1,
|
|
266
268
|
antialias: i,
|
|
267
269
|
depth: l,
|
|
268
270
|
logarithmicDepthBuffer: f,
|
|
269
|
-
failIfMajorPerformanceCaveat:
|
|
271
|
+
failIfMajorPerformanceCaveat: o,
|
|
270
272
|
precision: r,
|
|
271
273
|
premultipliedAlpha: u,
|
|
272
|
-
stencil:
|
|
274
|
+
stencil: a,
|
|
273
275
|
shadows: c = !1,
|
|
274
276
|
shadowMapType: p = Oe,
|
|
275
277
|
physicallyCorrectLights: m = !1,
|
|
276
278
|
outputEncoding: g = be,
|
|
277
|
-
toneMapping: v =
|
|
279
|
+
toneMapping: v = $e,
|
|
278
280
|
toneMappingExposure: R = 1,
|
|
279
281
|
context: w = void 0,
|
|
280
282
|
powerPreference: S = "default",
|
|
281
|
-
preserveDrawingBuffer:
|
|
283
|
+
preserveDrawingBuffer: _ = !1,
|
|
282
284
|
clearColor: h = Y("#000000"),
|
|
283
285
|
windowSize: fe = !1
|
|
284
|
-
} = n, { width:
|
|
285
|
-
|
|
286
|
+
} = n, { width: B, height: F } = fe ? ee() : Me(t), { pixelRatio: H } = xe(), { pause: pe, resume: me } = ce(), de = j(() => B.value / F.value), G = () => {
|
|
287
|
+
d.value && (d.value.setSize(B.value, F.value), d.value.setPixelRatio(Math.min(H.value, 2)));
|
|
286
288
|
}, J = () => {
|
|
287
|
-
|
|
289
|
+
d.value && (d.value.shadowMap.enabled = y(c), d.value.outputEncoding = y(g), d.value.shadowMap.type = y(p), d.value.physicallyCorrectLights = y(m), d.value.toneMapping = y(v), d.value.toneMappingExposure = y(R), d.value.setClearColor(Y(y(h))));
|
|
288
290
|
}, ge = () => {
|
|
289
291
|
const K = z(e);
|
|
290
292
|
if (d.value || !K)
|
|
291
293
|
return;
|
|
292
|
-
d.value = new
|
|
294
|
+
d.value = new Ae({
|
|
293
295
|
canvas: K,
|
|
294
|
-
alpha:
|
|
296
|
+
alpha: s,
|
|
295
297
|
antialias: i,
|
|
296
298
|
context: w,
|
|
297
299
|
depth: l,
|
|
298
|
-
failIfMajorPerformanceCaveat:
|
|
300
|
+
failIfMajorPerformanceCaveat: o,
|
|
299
301
|
logarithmicDepthBuffer: f,
|
|
300
302
|
powerPreference: S,
|
|
301
303
|
precision: r,
|
|
302
|
-
stencil:
|
|
303
|
-
preserveDrawingBuffer:
|
|
304
|
+
stencil: a,
|
|
305
|
+
preserveDrawingBuffer: _,
|
|
304
306
|
premultipliedAlpha: u
|
|
305
307
|
});
|
|
306
308
|
const { setState: we } = le();
|
|
307
309
|
we("renderer", d.value), J(), G(), me(), V.value = !0;
|
|
308
310
|
}, he = () => {
|
|
309
|
-
|
|
311
|
+
d.value && (d.value.dispose(), d.value = void 0, V.value = !1, pe());
|
|
310
312
|
};
|
|
311
|
-
return O([
|
|
313
|
+
return O([B, F, H], G), O(
|
|
312
314
|
() => [
|
|
313
315
|
c,
|
|
314
316
|
p,
|
|
@@ -332,7 +334,7 @@ function Ne(e, t, n) {
|
|
|
332
334
|
aspectRatio: de
|
|
333
335
|
};
|
|
334
336
|
}
|
|
335
|
-
const We =
|
|
337
|
+
const We = N({
|
|
336
338
|
name: "TresCanvas",
|
|
337
339
|
props: {
|
|
338
340
|
shadows: Boolean,
|
|
@@ -348,11 +350,11 @@ const We = k({
|
|
|
348
350
|
windowSize: Boolean
|
|
349
351
|
},
|
|
350
352
|
setup(e, { slots: t, attrs: n }) {
|
|
351
|
-
const { logError:
|
|
352
|
-
return b("camera", u), b("renderer", f), b("aspect-ratio", r), t.default && !t.default().some((
|
|
353
|
+
const { logError: s } = I(), i = P(), l = P(), { renderer: f, dispose: o, aspectRatio: r } = ke(i, l, e), u = k();
|
|
354
|
+
return b("camera", u), b("renderer", f), b("aspect-ratio", r), t.default && !t.default().some((a) => a.type.name === "Scene") && s("TresCanvas must contain a Scene component."), t.default && !t.default().some((a) => {
|
|
353
355
|
var c;
|
|
354
|
-
return (c =
|
|
355
|
-
}) &&
|
|
356
|
+
return (c = a.type.name) == null ? void 0 : c.includes("Camera");
|
|
357
|
+
}) && s("Scene must contain a Camera component."), Ce(() => o()), () => {
|
|
356
358
|
if (t.default)
|
|
357
359
|
return q(
|
|
358
360
|
"div",
|
|
@@ -375,26 +377,26 @@ const We = k({
|
|
|
375
377
|
);
|
|
376
378
|
};
|
|
377
379
|
}
|
|
378
|
-
}), He =
|
|
380
|
+
}), He = N({
|
|
379
381
|
name: "Scene",
|
|
380
382
|
setup(e, { slots: t }) {
|
|
381
|
-
const { scene: n } = ue(),
|
|
383
|
+
const { scene: n } = ue(), s = T("renderer"), { activeCamera: i } = ne(), { onLoop: l } = ce();
|
|
382
384
|
return b("local-scene", n), l(() => {
|
|
383
|
-
|
|
385
|
+
s != null && s.value && (i != null && i.value) && (n != null && n.value) && s.value.render(n == null ? void 0 : n.value, i.value);
|
|
384
386
|
}), () => {
|
|
385
387
|
if (t.default)
|
|
386
388
|
return t.default();
|
|
387
389
|
};
|
|
388
390
|
}
|
|
389
|
-
}), Ye = Symbol("UseTresState"), Ge = "1.2.
|
|
391
|
+
}), Ye = Symbol("UseTresState"), Ge = "1.2.1", Ze = {
|
|
390
392
|
install(e, t) {
|
|
391
393
|
const n = (t == null ? void 0 : t.prefix) || "Tres";
|
|
392
394
|
e.component(`${n}Canvas`, We), e.component(`${n}Scene`, He);
|
|
393
|
-
const { catalogue:
|
|
394
|
-
e.provide("catalogue",
|
|
395
|
-
const { createComponentInstances: l } =
|
|
396
|
-
l(
|
|
397
|
-
e.component(
|
|
395
|
+
const { catalogue: s, extend: i } = re(e, n);
|
|
396
|
+
e.provide("catalogue", s), e.provide("extend", i);
|
|
397
|
+
const { createComponentInstances: l } = oe(n);
|
|
398
|
+
l(s).forEach(([o, r]) => {
|
|
399
|
+
e.component(o, r);
|
|
398
400
|
}), window.__TRES__ = {
|
|
399
401
|
app: e,
|
|
400
402
|
version: Ge
|
|
@@ -402,16 +404,16 @@ const We = k({
|
|
|
402
404
|
}
|
|
403
405
|
};
|
|
404
406
|
export {
|
|
405
|
-
|
|
407
|
+
Ie as CameraType,
|
|
406
408
|
Ye as UseTresStateSymbol,
|
|
407
409
|
Ze as default,
|
|
408
|
-
|
|
410
|
+
Ne as trasverseObjects,
|
|
409
411
|
ne as useCamera,
|
|
410
412
|
re as useCatalogue,
|
|
411
|
-
|
|
413
|
+
oe as useInstanceCreator,
|
|
412
414
|
Qe as useLoader,
|
|
413
415
|
ce as useRenderLoop,
|
|
414
|
-
|
|
416
|
+
ke as useRenderer,
|
|
415
417
|
ue as useScene,
|
|
416
418
|
Xe as useTexture,
|
|
417
419
|
le as useTres
|
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v1.2.
|
|
3
|
+
* version: v1.2.1
|
|
4
4
|
* (c) 2022
|
|
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,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("@vueuse/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","three"],i):(d=typeof globalThis<"u"?globalThis:d||self,i(d.tres={},d.Vue,d.VueUseCore,d.Three))})(this,function(d,i,h,g){"use strict";function re(e){
|
|
8
|
+
(function(d,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("@vueuse/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","three"],i):(d=typeof globalThis<"u"?globalThis:d||self,i(d.tres={},d.Vue,d.VueUseCore,d.Three))})(this,function(d,i,h,g){"use strict";function re(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const W=re(g);var q=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(q||{});const O={cameras:[]},ae=45;let P;function A(){const{width:e,height:t}=h.useWindowSize(),{setState:n}=F();function r(a="Perspective",l){if(a==="Perspective"){const{near:s,far:u,fov:m}=l||{near:.1,far:1e3,fov:ae};P=new g.PerspectiveCamera(m,c.value,s,u),O.cameras.push(P)}else{const{left:s,right:u,top:m,bottom:C,near:y,far:M}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};P=new g.OrthographicCamera(s,u,m,C,y,M),O.cameras.push(P)}return O.cameras.push(P),P}const c=i.computed(()=>e.value/t.value),f=i.computed(()=>O.cameras[0]);function p(){f.value instanceof g.PerspectiveCamera&&(f.value.aspect=c.value),f.value.updateProjectionMatrix()}function o(a){const l=i.inject("camera");a&&l&&(l.value=a,n("camera",l.value)),O.cameras.push(a),a instanceof g.PerspectiveCamera&&(a.aspect=c.value),a.updateProjectionMatrix()}return i.watch(c,p),{activeCamera:f,createCamera:r,updateCamera:p,pushCamera:o}}const G="[TresJS ▲ ■ ●] ";function _(){function e(r,c){console.error(`${G} ${r}`,c||"")}function t(r){console.warn(`${G} ${r}`)}function n(r,c){}return{logError:e,logWarning:t,logMessage:n}}const b=i.ref({...W,uuid:W.MathUtils.generateUUID()});delete b.value.Scene;let L;function I(e,t="Tres"){const{logMessage:n,logError:r}=_();!L&&e&&(L=e);const{createComponentInstances:c}=z(t);return{extend:p=>{if(!p){r("No objects provided to extend catalogue");return}b.value=Object.assign(b.value,p);const o=c(i.ref(p));n("Adding objects to catalogue",{objects:p,catalogue:b.value.uuid}),L&&o.forEach(([a,l])=>{L._context.components[a]||L.component(a,l)})},catalogue:b}}const $=e=>typeof e<"u",oe=e=>typeof e=="function",j=e=>!!e&&e.constructor===Array;function se(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function J(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}const ie=["rotation","scale","position"];function z(e){const{logMessage:t,logError:n}=_();function r(o,a){$(o)&&$(a)&&Object.entries(o).forEach(([l,s])=>{const u=l.replace(/(-\w)/g,m=>m[1].toUpperCase());if(!(u==="args"||s===void 0)){ie.includes(u)&&s&&(s=se(s)),o.ref&&(o.ref=a);try{if(a[u]&&$(a[u].set))a[u].set(...j(s)?s:[s]);else{if(s===""&&(s=!0),oe(a[u])){if(l==="center"&&!s)return;a[u](...j(s)?s:[s]);return}a[u]=s}}catch(m){n(`There was an error setting ${u} property`,m)}}})}function c(o){var s;const a=/^Symbol\(Fragment\)$/g,l=/^Symbol\(Text\)$/g;if(a.test(o.type.toString()))return o.children.map(u=>c(u));if(l.test(o.type.toString()))return;{const u=o.type.name.replace(e,""),{catalogue:m}=I(),C=i.inject("catalogue")||m;let y;return C&&((s=o==null?void 0:o.props)!=null&&s.args?C!=null&&C.value[u]?y=new C.value[u](...o.props.args):n(`There is no ${u} in the catalogue`,C==null?void 0:C.value.uuid):y=new C.value[u]),o!=null&&o.props&&r(o.props,y),y}}function f(o,a,l){if(l.default&&(l!=null&&l.default())){const s=l.default().map(u=>c(u));return new o(...s.flat().filter(Boolean))}else return a.args?new o(...a.args):new o}function p(o){return Object.entries(o.value).filter(([a,l])=>{var s,u;return(u=(s=l==null?void 0:l.prototype)==null?void 0:s.constructor)==null?void 0:u.toString().includes("class")}).map(([a,l])=>{const s=`${e}${a}`,u=i.defineComponent({name:s,setup(m,{slots:C,attrs:y,...M}){const{scene:T}=D(),v=i.inject("local-scene")||T,x=i.inject("catalogue"),{pushCamera:V}=A();let S=f(l,y,C);return r(y,S),(S instanceof g.PerspectiveCamera||S instanceof g.OrthographicCamera)&&V(S),S.isObject3D&&(v==null||v.value.add(S)),M.expose(S),t(s,{sceneuuid:v==null?void 0:v.value.uuid,catalogue:x==null?void 0:x.value.uuid,props:m,slots:C.default?C.default():void 0,attrs:y,ctx:M,scene:v}),()=>{}}});return[s,u]})}return{createComponentInstances:p,processProps:r,createInstanceFromVNode:c}}const K=h.createEventHook(),Q=h.createEventHook(),X=h.createEventHook(),Y=new g.Clock,{pause:ce,resume:ue,isActive:le}=h.useRafFn(()=>{const e=Y.getElapsedTime(),t=Y.getDelta();K.trigger({delta:t,elapsed:e}),Q.trigger({delta:t,elapsed:e}),X.trigger({delta:t,elapsed:e})},{immediate:!1});function B(){return{onBeforeLoop:K.on,onLoop:Q.on,onAfterLoop:X.on,pause:ce,resume:ue,isActive:le}}const fe=i.shallowRef(new g.Scene);function D(){return{scene:fe}}function Z(e){const t={nodes:{},materials:{}};return e&&e.traverse(n=>{n.name&&(t.nodes[n.name]=n),n.material&&!t.materials[n.material.name]&&(t.materials[n.material.name]=n.material)}),t}async function pe(e,t,n,r,c){const{logError:f}=_(),p=new e;c&&c(p),n&&n(e);const a=(Array.isArray(t)?t:[t]).map(l=>new Promise((s,u)=>{p.load(l,m=>{m.scene&&Object.assign(m,Z(m.scene)),s(m)},r,m=>u(f("[useLoader] - Failed to load resource",m)))}));return j(t)?await Promise.all(a):await a[0]}async function de(e){const t=new g.LoadingManager,n=new g.TextureLoader(t),r=c=>new Promise((f,p)=>{n.load(c,o=>f(o),()=>null,()=>{p(new Error("[useTextures] - Failed to load texture"))})});if(j(e)){const c=await Promise.all(e.map(f=>r(f)));return e.length>1?c:c[0]}else{const{map:c,displacementMap:f,normalMap:p,roughnessMap:o,metalnessMap:a,aoMap:l}=e;return{map:c?await r(c):null,displacementMap:f?await r(f):null,normalMap:p?await r(p):null,roughnessMap:o?await r(o):null,metalnessMap:a?await r(a):null,aoMap:l?await r(l):null}}}const U=i.reactive({});function F(){function e(n){return U[n]}function t(n,r){U[n]=r}return{state:U,...i.toRefs(U),getState:e,setState:t}}const w=i.shallowRef(),R=i.ref(!1);function E(e,t,n){const{alpha:r=!1,antialias:c,depth:f,logarithmicDepthBuffer:p,failIfMajorPerformanceCaveat:o,precision:a,premultipliedAlpha:l,stencil:s,shadows:u=!1,shadowMapType:m=g.PCFShadowMap,physicallyCorrectLights:C=!1,outputEncoding:y=g.LinearEncoding,toneMapping:M=g.NoToneMapping,toneMappingExposure:T=1,context:v=void 0,powerPreference:x="default",preserveDrawingBuffer:V=!1,clearColor:S=J("#000000"),windowSize:ye=!1}=n,{width:k,height:N}=ye?h.useWindowSize():h.useElementSize(t),{pixelRatio:H}=h.useDevicePixelRatio(),{pause:Se,resume:ve}=B(),Me=i.computed(()=>k.value/N.value),ee=()=>{w.value&&(w.value.setSize(k.value,N.value),w.value.setPixelRatio(Math.min(H.value,2)))},te=()=>{w.value&&(w.value.shadowMap.enabled=h.resolveUnref(u),w.value.outputEncoding=h.resolveUnref(y),w.value.shadowMap.type=h.resolveUnref(m),w.value.physicallyCorrectLights=h.resolveUnref(C),w.value.toneMapping=h.resolveUnref(M),w.value.toneMappingExposure=h.resolveUnref(T),w.value.setClearColor(J(h.resolveUnref(S))))},Pe=()=>{const ne=h.unrefElement(e);if(w.value||!ne)return;w.value=new g.WebGLRenderer({canvas:ne,alpha:r,antialias:c,context:v,depth:f,failIfMajorPerformanceCaveat:o,logarithmicDepthBuffer:p,powerPreference:x,precision:a,stencil:s,preserveDrawingBuffer:V,premultipliedAlpha:l});const{setState:be}=F();be("renderer",w.value),te(),ee(),ve(),R.value=!0},Oe=()=>{w.value&&(w.value.dispose(),w.value=void 0,R.value=!1,Se())};return i.watch([k,N,H],ee),i.watch(()=>[u,m,y,C,M,T,S],te),i.watch(()=>[e,t],()=>{h.unrefElement(e)&&h.unrefElement(t)&&Pe()},{immediate:!0,deep:!0}),{renderer:w,isReady:R,dispose:Oe,aspectRatio:Me}}const me=i.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Object,physicallyCorrectLights:Boolean,outputEncoding:Object,toneMapping:Object,toneMappingExposure:Number,context:Object,powerPreference:Object,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:Boolean},setup(e,{slots:t,attrs:n}){const{logError:r}=_(),c=i.ref(),f=i.ref(),{renderer:p,dispose:o,aspectRatio:a}=E(c,f,e),l=i.shallowRef();return i.provide("camera",l),i.provide("renderer",p),i.provide("aspect-ratio",a),t.default&&!t.default().some(s=>s.type.name==="Scene")&&r("TresCanvas must contain a Scene component."),t.default&&!t.default().some(s=>{var u;return(u=s.type.name)==null?void 0:u.includes("Camera")})&&r("Scene must contain a Camera component."),i.onBeforeUnmount(()=>o()),()=>{if(t.default)return i.h("div",{ref:f,style:{position:"relative",width:"100%",height:"100vh",...n.style}},[i.h("canvas",{ref:c,style:{width:"100%",height:"100%",position:"absolute",top:0,left:0}}),t.default()])}}}),ge=i.defineComponent({name:"Scene",setup(e,{slots:t}){const{scene:n}=D(),r=i.inject("renderer"),{activeCamera:c}=A(),{onLoop:f}=B();return i.provide("local-scene",n),f(()=>{r!=null&&r.value&&(c!=null&&c.value)&&(n!=null&&n.value)&&r.value.render(n==null?void 0:n.value,c.value)}),()=>{if(t.default)return t.default()}}}),he=Symbol("UseTresState"),we="1.2.1",Ce={install(e,t){const n=(t==null?void 0:t.prefix)||"Tres";e.component(`${n}Canvas`,me),e.component(`${n}Scene`,ge);const{catalogue:r,extend:c}=I(e,n);e.provide("catalogue",r),e.provide("extend",c);const{createComponentInstances:f}=z(n);f(r).forEach(([o,a])=>{e.component(o,a)}),window.__TRES__={app:e,version:we}}};d.CameraType=q,d.UseTresStateSymbol=he,d.default=Ce,d.trasverseObjects=Z,d.useCamera=A,d.useCatalogue=I,d.useInstanceCreator=z,d.useLoader=pe,d.useRenderLoop=B,d.useRenderer=E,d.useScene=D,d.useTexture=de,d.useTres=F,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": "1.
|
|
4
|
+
"version": "1.3.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
7
7
|
"files": [
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"threejs-vue"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"three": "^0.
|
|
33
|
+
"three": "^0.147.0",
|
|
34
34
|
"vue": "^3.2.45"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
@@ -39,26 +39,27 @@
|
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@alvarosabu/utils": "^2.2.0",
|
|
41
41
|
"@histoire/plugin-vue": "0.11.7",
|
|
42
|
-
"@tresjs/cientos": "^1.1
|
|
42
|
+
"@tresjs/cientos": "^1.2.1",
|
|
43
43
|
"@types/three": "^0.146.0",
|
|
44
|
-
"@vitejs/plugin-vue": "^
|
|
45
|
-
"@vitest/coverage-c8": "^0.25.
|
|
46
|
-
"@vitest/ui": "^0.25.
|
|
47
|
-
"@vueuse/core": "^9.
|
|
44
|
+
"@vitejs/plugin-vue": "^4.0.0",
|
|
45
|
+
"@vitest/coverage-c8": "^0.25.8",
|
|
46
|
+
"@vitest/ui": "^0.25.8",
|
|
47
|
+
"@vueuse/core": "^9.7.0",
|
|
48
48
|
"gl": "6.0.1",
|
|
49
|
-
"happy-dom": "^
|
|
50
|
-
"histoire": "0.11.
|
|
49
|
+
"happy-dom": "^8.1.0",
|
|
50
|
+
"histoire": "0.11.9",
|
|
51
51
|
"kolorist": "^1.6.0",
|
|
52
|
-
"pathe": "^0.
|
|
52
|
+
"pathe": "^1.0.0",
|
|
53
|
+
"release-it": "^15.5.1",
|
|
53
54
|
"rollup-plugin-analyzer": "^4.0.0",
|
|
54
55
|
"rollup-plugin-visualizer": "^5.8.3",
|
|
55
|
-
"unplugin-vue-components": "^0.22.
|
|
56
|
-
"vite": "^
|
|
57
|
-
"vite-plugin-banner": "^0.
|
|
58
|
-
"vite-plugin-dts": "^1.7.
|
|
59
|
-
"vite-plugin-glsl": "^0.
|
|
56
|
+
"unplugin-vue-components": "^0.22.12",
|
|
57
|
+
"vite": "^4.0.2",
|
|
58
|
+
"vite-plugin-banner": "^0.7.0",
|
|
59
|
+
"vite-plugin-dts": "^1.7.1",
|
|
60
|
+
"vite-plugin-glsl": "^1.0.1",
|
|
60
61
|
"vite-plugin-require-transform": "^1.0.4",
|
|
61
|
-
"vitest": "^0.25.
|
|
62
|
+
"vitest": "^0.25.8",
|
|
62
63
|
"vue-demi": "^0.13.11"
|
|
63
64
|
},
|
|
64
65
|
"scripts": {
|
|
@@ -72,6 +73,7 @@
|
|
|
72
73
|
"story:dev": "histoire dev",
|
|
73
74
|
"story:build": "histoire build",
|
|
74
75
|
"story:preview": "histoire preview",
|
|
75
|
-
"lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue"
|
|
76
|
+
"lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
|
|
77
|
+
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
|
|
76
78
|
}
|
|
77
79
|
}
|