@tresjs/core 1.3.1 → 1.3.3
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/core/useRenderer/index.d.ts +6 -1
- package/dist/tres.js +158 -166
- package/dist/tres.umd.cjs +2 -2
- package/dist/types/index.d.ts +1 -0
- package/package.json +2 -2
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { MaybeComputedRef, MaybeElementRef } from '@vueuse/core';
|
|
2
2
|
import { WebGLRendererParameters, WebGLRenderer, ShadowMapType } from 'three';
|
|
3
3
|
import type { TextureEncoding, ToneMapping } from 'three';
|
|
4
|
+
import { TresColor } from '../../types';
|
|
4
5
|
export interface UseRendererOptions extends WebGLRendererParameters {
|
|
5
6
|
/**
|
|
6
7
|
* Enable shadows in the Renderer
|
|
@@ -10,6 +11,8 @@ export interface UseRendererOptions extends WebGLRendererParameters {
|
|
|
10
11
|
shadows?: MaybeComputedRef<boolean>;
|
|
11
12
|
/**
|
|
12
13
|
* Set the shadow map type
|
|
14
|
+
* Can be PCFShadowMap, PCFSoftShadowMap, BasicShadowMap, VSMShadowMap
|
|
15
|
+
* [see](https://threejs.org/docs/?q=we#api/en/constants/Renderer)
|
|
13
16
|
*
|
|
14
17
|
* @default PCFSoftShadowMap
|
|
15
18
|
*/
|
|
@@ -23,12 +26,14 @@ export interface UseRendererOptions extends WebGLRendererParameters {
|
|
|
23
26
|
physicallyCorrectLights?: MaybeComputedRef<boolean>;
|
|
24
27
|
/**
|
|
25
28
|
* Defines the output encoding of the renderer.
|
|
29
|
+
* Can be LinearEncoding, sRGBEncoding
|
|
26
30
|
*
|
|
27
31
|
* @default LinearEncoding
|
|
28
32
|
*/
|
|
29
33
|
outputEncoding?: MaybeComputedRef<TextureEncoding>;
|
|
30
34
|
/**
|
|
31
35
|
* Defines the tone mapping used by the renderer.
|
|
36
|
+
* Can be NoToneMapping, LinearToneMapping, ReinhardToneMapping, Uncharted2ToneMapping, CineonToneMapping, ACESFilmicToneMapping, CustomToneMapping
|
|
32
37
|
*
|
|
33
38
|
* @default NoToneMapping
|
|
34
39
|
*/
|
|
@@ -63,7 +68,7 @@ export interface UseRendererOptions extends WebGLRendererParameters {
|
|
|
63
68
|
*
|
|
64
69
|
* @default 0x000000
|
|
65
70
|
*/
|
|
66
|
-
clearColor?: MaybeComputedRef<
|
|
71
|
+
clearColor?: MaybeComputedRef<TresColor>;
|
|
67
72
|
windowSize?: MaybeComputedRef<boolean>;
|
|
68
73
|
}
|
|
69
74
|
/**
|
package/dist/tres.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v1.
|
|
3
|
+
* version: v1.3.3
|
|
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
|
|
9
|
-
import { useWindowSize as
|
|
8
|
+
import { computed as V, watch as O, inject as P, ref as T, defineComponent as N, shallowRef as k, reactive as Ce, toRefs as te, provide as b, onBeforeUnmount as Se, h as q } from "vue";
|
|
9
|
+
import { useWindowSize as ne, createEventHook as W, useRafFn as Me, resolveUnref as m, useElementSize as xe, useDevicePixelRatio as Ee, unrefElement as F } from "@vueuse/core";
|
|
10
10
|
import * as Q from "three";
|
|
11
|
-
import { PerspectiveCamera as
|
|
12
|
-
var
|
|
11
|
+
import { PerspectiveCamera as A, OrthographicCamera as re, Vector3 as Pe, Color as z, Clock as Te, Scene as Re, LoadingManager as Le, TextureLoader as Oe, PCFShadowMap as be, LinearEncoding as X, NoToneMapping as Y, WebGLRenderer as Ae } from "three";
|
|
12
|
+
var $e = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))($e || {});
|
|
13
13
|
const M = {
|
|
14
14
|
cameras: []
|
|
15
|
-
},
|
|
15
|
+
}, Be = 45;
|
|
16
16
|
let C;
|
|
17
|
-
function
|
|
18
|
-
const { width: e, height: t } =
|
|
17
|
+
function ae() {
|
|
18
|
+
const { width: e, height: t } = ne(), { setState: n } = pe();
|
|
19
19
|
function s(r = "Perspective", u) {
|
|
20
20
|
if (r === "Perspective") {
|
|
21
|
-
const { near:
|
|
21
|
+
const { near: o, far: c, fov: p } = u || {
|
|
22
22
|
near: 0.1,
|
|
23
23
|
far: 1e3,
|
|
24
|
-
fov:
|
|
24
|
+
fov: Be
|
|
25
25
|
};
|
|
26
|
-
C = new
|
|
26
|
+
C = new A(p, i.value, o, c), M.cameras.push(C);
|
|
27
27
|
} else {
|
|
28
|
-
const { left:
|
|
28
|
+
const { left: o, right: c, top: p, bottom: d, near: w, far: y } = u || {
|
|
29
29
|
left: -100,
|
|
30
30
|
right: 100,
|
|
31
31
|
top: 100,
|
|
@@ -33,32 +33,32 @@ function ne() {
|
|
|
33
33
|
near: 0.1,
|
|
34
34
|
far: 1e3
|
|
35
35
|
};
|
|
36
|
-
C = new
|
|
36
|
+
C = new re(o, c, p, d, w, y), M.cameras.push(C);
|
|
37
37
|
}
|
|
38
38
|
return M.cameras.push(C), C;
|
|
39
39
|
}
|
|
40
|
-
const i =
|
|
40
|
+
const i = V(() => e.value / t.value), l = V(() => M.cameras[0]);
|
|
41
41
|
function f() {
|
|
42
|
-
l.value instanceof
|
|
42
|
+
l.value instanceof A && (l.value.aspect = i.value), l.value.updateProjectionMatrix();
|
|
43
43
|
}
|
|
44
|
-
function
|
|
45
|
-
const u =
|
|
46
|
-
r && u && (u.value = r, n("camera", u.value)), M.cameras.push(r), r instanceof
|
|
44
|
+
function a(r) {
|
|
45
|
+
const u = P("camera");
|
|
46
|
+
r && u && (u.value = r, n("camera", u.value)), M.cameras.push(r), r instanceof A && (r.aspect = i.value), r.updateProjectionMatrix();
|
|
47
47
|
}
|
|
48
48
|
return O(i, f), {
|
|
49
49
|
activeCamera: l,
|
|
50
50
|
createCamera: s,
|
|
51
51
|
updateCamera: f,
|
|
52
|
-
pushCamera:
|
|
52
|
+
pushCamera: a
|
|
53
53
|
};
|
|
54
54
|
}
|
|
55
|
-
const
|
|
56
|
-
function
|
|
55
|
+
const Z = "[TresJS ▲ ■ ●] ";
|
|
56
|
+
function B() {
|
|
57
57
|
function e(s, i) {
|
|
58
|
-
console.error(`${
|
|
58
|
+
console.error(`${Z} ${s}`, i || "");
|
|
59
59
|
}
|
|
60
60
|
function t(s) {
|
|
61
|
-
console.warn(`${
|
|
61
|
+
console.warn(`${Z} ${s}`);
|
|
62
62
|
}
|
|
63
63
|
function n(s, i) {
|
|
64
64
|
}
|
|
@@ -68,13 +68,13 @@ function I() {
|
|
|
68
68
|
logMessage: n
|
|
69
69
|
};
|
|
70
70
|
}
|
|
71
|
-
const E =
|
|
71
|
+
const E = T({ ...Q, uuid: Q.MathUtils.generateUUID() });
|
|
72
72
|
delete E.value.Scene;
|
|
73
73
|
let x;
|
|
74
|
-
function
|
|
75
|
-
const { logMessage: n, logError: s } =
|
|
74
|
+
function oe(e, t = "Tres") {
|
|
75
|
+
const { logMessage: n, logError: s } = B();
|
|
76
76
|
!x && e && (x = e);
|
|
77
|
-
const { createComponentInstances: i } =
|
|
77
|
+
const { createComponentInstances: i } = se(t);
|
|
78
78
|
return {
|
|
79
79
|
extend: (f) => {
|
|
80
80
|
if (!f) {
|
|
@@ -82,40 +82,40 @@ function re(e, t = "Tres") {
|
|
|
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 a = i(T(f));
|
|
86
|
+
n("Adding objects to catalogue", { objects: f, catalogue: E.value.uuid }), x && a.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",
|
|
94
|
-
function
|
|
95
|
-
return typeof e == "number" ? [e, e, e] : e instanceof
|
|
93
|
+
const U = (e) => typeof e < "u", Ie = (e) => typeof e == "function", $ = (e) => !!e && e.constructor === Array;
|
|
94
|
+
function _e(e) {
|
|
95
|
+
return typeof e == "number" ? [e, e, e] : e instanceof Pe ? [e.x, e.y, e.z] : e;
|
|
96
96
|
}
|
|
97
|
-
function
|
|
98
|
-
return e instanceof
|
|
97
|
+
function De(e) {
|
|
98
|
+
return e instanceof z ? e : Array.isArray(e) ? new z(...e) : new z(e);
|
|
99
99
|
}
|
|
100
|
-
const
|
|
101
|
-
function
|
|
102
|
-
const { logMessage: t, logError: n } =
|
|
103
|
-
function s(
|
|
104
|
-
U(
|
|
100
|
+
const Fe = ["rotation", "scale", "position"];
|
|
101
|
+
function se(e) {
|
|
102
|
+
const { logMessage: t, logError: n } = B();
|
|
103
|
+
function s(a, r) {
|
|
104
|
+
U(a) && U(r) && Object.entries(a).forEach(([u, o]) => {
|
|
105
105
|
const c = u.replace(/(-\w)/g, (p) => p[1].toUpperCase());
|
|
106
|
-
if (!(c === "args" ||
|
|
107
|
-
|
|
106
|
+
if (!(c === "args" || o === void 0)) {
|
|
107
|
+
Fe.includes(c) && o && (o = _e(o)), a.ref && (a.ref = r);
|
|
108
108
|
try {
|
|
109
109
|
if (r[c] && U(r[c].set))
|
|
110
|
-
r[c].set(
|
|
110
|
+
r[c].set(...$(o) ? o : [o]);
|
|
111
111
|
else {
|
|
112
|
-
if (
|
|
113
|
-
if (u === "center" && !
|
|
112
|
+
if (o === "" && (o = !0), Ie(r[c])) {
|
|
113
|
+
if (u === "center" && !o)
|
|
114
114
|
return;
|
|
115
|
-
r[c](
|
|
115
|
+
r[c](...$(o) ? o : [o]);
|
|
116
116
|
return;
|
|
117
117
|
}
|
|
118
|
-
r[c] =
|
|
118
|
+
r[c] = o;
|
|
119
119
|
}
|
|
120
120
|
} catch (p) {
|
|
121
121
|
n(`There was an error setting ${c} property`, p);
|
|
@@ -123,49 +123,49 @@ function oe(e) {
|
|
|
123
123
|
}
|
|
124
124
|
});
|
|
125
125
|
}
|
|
126
|
-
function i(
|
|
127
|
-
var
|
|
126
|
+
function i(a) {
|
|
127
|
+
var o;
|
|
128
128
|
const r = /^Symbol\(Fragment\)$/g, u = /^Symbol\(Text\)$/g;
|
|
129
|
-
if (r.test(
|
|
130
|
-
return
|
|
131
|
-
if (u.test(
|
|
129
|
+
if (r.test(a.type.toString()))
|
|
130
|
+
return a.children.map((c) => i(c));
|
|
131
|
+
if (u.test(a.type.toString()))
|
|
132
132
|
return;
|
|
133
133
|
{
|
|
134
|
-
const c =
|
|
135
|
-
let
|
|
136
|
-
return
|
|
134
|
+
const c = a.type.name.replace(e, ""), { catalogue: p } = oe(), d = P("catalogue") || p;
|
|
135
|
+
let w;
|
|
136
|
+
return d && ((o = a == null ? void 0 : a.props) != null && o.args ? d != null && d.value[c] ? w = new d.value[c](...a.props.args) : n(`There is no ${c} in the catalogue`, d == null ? void 0 : d.value.uuid) : w = new d.value[c]()), a != null && a.props && s(a.props, w), w;
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
|
-
function l(
|
|
139
|
+
function l(a, r, u) {
|
|
140
140
|
if (u.default && (u != null && u.default())) {
|
|
141
|
-
const
|
|
142
|
-
return new
|
|
141
|
+
const o = u.default().map((c) => i(c));
|
|
142
|
+
return new a(...o.flat().filter(Boolean));
|
|
143
143
|
} else
|
|
144
|
-
return r.args ? new
|
|
144
|
+
return r.args ? new a(...r.args) : new a();
|
|
145
145
|
}
|
|
146
|
-
function f(
|
|
147
|
-
return Object.entries(
|
|
148
|
-
var
|
|
149
|
-
return (c = (
|
|
146
|
+
function f(a) {
|
|
147
|
+
return Object.entries(a.value).filter(([r, u]) => {
|
|
148
|
+
var o, c;
|
|
149
|
+
return (c = (o = u == null ? void 0 : u.prototype) == null ? void 0 : o.constructor) == null ? void 0 : c.toString().includes("class");
|
|
150
150
|
}).map(([r, u]) => {
|
|
151
|
-
const
|
|
152
|
-
name:
|
|
153
|
-
setup(p, { slots:
|
|
154
|
-
const { scene: R } =
|
|
155
|
-
let h = l(u,
|
|
156
|
-
return s(
|
|
157
|
-
sceneuuid:
|
|
151
|
+
const o = `${e}${r}`, c = N({
|
|
152
|
+
name: o,
|
|
153
|
+
setup(p, { slots: d, attrs: w, ...y }) {
|
|
154
|
+
const { scene: R } = fe(), v = P("local-scene") || R, S = P("catalogue"), { pushCamera: I } = ae();
|
|
155
|
+
let h = l(u, w, d);
|
|
156
|
+
return s(w, h), (h instanceof A || h instanceof re) && I(h), h.isObject3D && (v == null || v.value.add(h)), v != null && v.value && h.isFog && (v.value.fog = h), y.expose(h), t(o, {
|
|
157
|
+
sceneuuid: v == null ? void 0 : v.value.uuid,
|
|
158
158
|
catalogue: S == null ? void 0 : S.value.uuid,
|
|
159
159
|
props: p,
|
|
160
|
-
slots:
|
|
161
|
-
attrs:
|
|
162
|
-
ctx:
|
|
163
|
-
scene:
|
|
160
|
+
slots: d.default ? d.default() : void 0,
|
|
161
|
+
attrs: w,
|
|
162
|
+
ctx: y,
|
|
163
|
+
scene: v
|
|
164
164
|
}), () => {
|
|
165
165
|
};
|
|
166
166
|
}
|
|
167
167
|
});
|
|
168
|
-
return [
|
|
168
|
+
return [o, c];
|
|
169
169
|
});
|
|
170
170
|
}
|
|
171
171
|
return {
|
|
@@ -174,27 +174,27 @@ function oe(e) {
|
|
|
174
174
|
createInstanceFromVNode: i
|
|
175
175
|
};
|
|
176
176
|
}
|
|
177
|
-
const
|
|
177
|
+
const ie = W(), ce = W(), ue = W(), ee = new Te(), { pause: ze, resume: Ue, isActive: je } = Me(
|
|
178
178
|
() => {
|
|
179
|
-
const e =
|
|
180
|
-
|
|
179
|
+
const e = ee.getElapsedTime(), t = ee.getDelta();
|
|
180
|
+
ie.trigger({ delta: t, elapsed: e }), ce.trigger({ delta: t, elapsed: e }), ue.trigger({ delta: t, elapsed: e });
|
|
181
181
|
},
|
|
182
182
|
{ immediate: !1 }
|
|
183
183
|
);
|
|
184
|
-
function
|
|
184
|
+
function le() {
|
|
185
185
|
return {
|
|
186
|
-
onBeforeLoop:
|
|
187
|
-
onLoop:
|
|
188
|
-
onAfterLoop:
|
|
189
|
-
pause:
|
|
186
|
+
onBeforeLoop: ie.on,
|
|
187
|
+
onLoop: ce.on,
|
|
188
|
+
onAfterLoop: ue.on,
|
|
189
|
+
pause: ze,
|
|
190
190
|
resume: Ue,
|
|
191
|
-
isActive:
|
|
191
|
+
isActive: je
|
|
192
192
|
};
|
|
193
193
|
}
|
|
194
|
-
const
|
|
195
|
-
function
|
|
194
|
+
const Ve = k(new Re());
|
|
195
|
+
function fe() {
|
|
196
196
|
return {
|
|
197
|
-
scene:
|
|
197
|
+
scene: Ve
|
|
198
198
|
};
|
|
199
199
|
}
|
|
200
200
|
function Ne(e) {
|
|
@@ -204,50 +204,50 @@ function Ne(e) {
|
|
|
204
204
|
}), t;
|
|
205
205
|
}
|
|
206
206
|
async function Qe(e, t, n, s, i) {
|
|
207
|
-
const { logError: l } =
|
|
208
|
-
i && i(f), n && n(
|
|
207
|
+
const { logError: l } = B(), f = new e();
|
|
208
|
+
i && i(f), n && n(f);
|
|
209
209
|
const r = (Array.isArray(t) ? t : [t]).map(
|
|
210
|
-
(u) => new Promise((
|
|
210
|
+
(u) => new Promise((o, c) => {
|
|
211
211
|
f.load(
|
|
212
212
|
u,
|
|
213
213
|
(p) => {
|
|
214
|
-
p.scene && Object.assign(p, Ne(p.scene)),
|
|
214
|
+
p.scene && Object.assign(p, Ne(p.scene)), o(p);
|
|
215
215
|
},
|
|
216
216
|
s,
|
|
217
217
|
(p) => c(l("[useLoader] - Failed to load resource", p))
|
|
218
218
|
);
|
|
219
219
|
})
|
|
220
220
|
);
|
|
221
|
-
return
|
|
221
|
+
return $(t) ? await Promise.all(r) : await r[0];
|
|
222
222
|
}
|
|
223
223
|
async function Xe(e) {
|
|
224
|
-
const t = new
|
|
224
|
+
const t = new Le(), n = new Oe(t), s = (i) => new Promise((l, f) => {
|
|
225
225
|
n.load(
|
|
226
226
|
i,
|
|
227
|
-
(
|
|
227
|
+
(a) => l(a),
|
|
228
228
|
() => null,
|
|
229
229
|
() => {
|
|
230
230
|
f(new Error("[useTextures] - Failed to load texture"));
|
|
231
231
|
}
|
|
232
232
|
);
|
|
233
233
|
});
|
|
234
|
-
if (
|
|
234
|
+
if ($(e)) {
|
|
235
235
|
const i = await Promise.all(e.map((l) => s(l)));
|
|
236
236
|
return e.length > 1 ? i : i[0];
|
|
237
237
|
} else {
|
|
238
|
-
const { map: i, displacementMap: l, normalMap: f, roughnessMap:
|
|
238
|
+
const { map: i, displacementMap: l, normalMap: f, roughnessMap: a, metalnessMap: r, aoMap: u } = e;
|
|
239
239
|
return {
|
|
240
240
|
map: i ? await s(i) : null,
|
|
241
241
|
displacementMap: l ? await s(l) : null,
|
|
242
242
|
normalMap: f ? await s(f) : null,
|
|
243
|
-
roughnessMap:
|
|
243
|
+
roughnessMap: a ? await s(a) : null,
|
|
244
244
|
metalnessMap: r ? await s(r) : null,
|
|
245
245
|
aoMap: u ? await s(u) : null
|
|
246
246
|
};
|
|
247
247
|
}
|
|
248
248
|
}
|
|
249
|
-
const L =
|
|
250
|
-
function
|
|
249
|
+
const L = Ce({});
|
|
250
|
+
function pe() {
|
|
251
251
|
function e(n) {
|
|
252
252
|
return L[n];
|
|
253
253
|
}
|
|
@@ -256,82 +256,74 @@ function le() {
|
|
|
256
256
|
}
|
|
257
257
|
return {
|
|
258
258
|
state: L,
|
|
259
|
-
...
|
|
259
|
+
...te(L),
|
|
260
260
|
getState: e,
|
|
261
261
|
setState: t
|
|
262
262
|
};
|
|
263
263
|
}
|
|
264
|
-
const
|
|
264
|
+
const g = k(), j = T(!1);
|
|
265
265
|
function ke(e, t, n) {
|
|
266
266
|
const {
|
|
267
|
-
alpha: s = !
|
|
268
|
-
antialias: i,
|
|
267
|
+
alpha: s = !0,
|
|
268
|
+
antialias: i = !0,
|
|
269
269
|
depth: l,
|
|
270
270
|
logarithmicDepthBuffer: f,
|
|
271
|
-
failIfMajorPerformanceCaveat:
|
|
271
|
+
failIfMajorPerformanceCaveat: a,
|
|
272
272
|
precision: r,
|
|
273
273
|
premultipliedAlpha: u,
|
|
274
|
-
stencil:
|
|
274
|
+
stencil: o,
|
|
275
275
|
shadows: c = !1,
|
|
276
|
-
shadowMapType: p =
|
|
277
|
-
physicallyCorrectLights:
|
|
278
|
-
outputEncoding:
|
|
279
|
-
toneMapping:
|
|
276
|
+
shadowMapType: p = be,
|
|
277
|
+
physicallyCorrectLights: d = !1,
|
|
278
|
+
outputEncoding: w = X,
|
|
279
|
+
toneMapping: y = Y,
|
|
280
280
|
toneMappingExposure: R = 1,
|
|
281
|
-
context:
|
|
281
|
+
context: v = void 0,
|
|
282
282
|
powerPreference: S = "default",
|
|
283
|
-
preserveDrawingBuffer:
|
|
284
|
-
clearColor: h
|
|
285
|
-
windowSize:
|
|
286
|
-
} = n, { width:
|
|
287
|
-
|
|
283
|
+
preserveDrawingBuffer: I = !1,
|
|
284
|
+
clearColor: h,
|
|
285
|
+
windowSize: me = !1
|
|
286
|
+
} = te(n), { width: _, height: D } = m(me) ? ne() : xe(t), { pixelRatio: H } = Ee(), { pause: de, resume: ge } = le(), he = V(() => _.value / D.value), G = () => {
|
|
287
|
+
g.value && (g.value.setSize(_.value, D.value), g.value.setPixelRatio(Math.min(H.value, 2)));
|
|
288
288
|
}, J = () => {
|
|
289
|
-
|
|
290
|
-
},
|
|
291
|
-
const K =
|
|
292
|
-
if (
|
|
289
|
+
g.value && (g.value.shadowMap.enabled = m(c), g.value.shadowMap.type = m(p), g.value.toneMapping = m(y) || Y, g.value.toneMappingExposure = m(R), g.value.outputEncoding = m(w) || X, h != null && h.value && g.value.setClearColor(De(m(h))), g.value.physicallyCorrectLights = m(d));
|
|
290
|
+
}, we = () => {
|
|
291
|
+
const K = F(e);
|
|
292
|
+
if (g.value || !K)
|
|
293
293
|
return;
|
|
294
|
-
|
|
294
|
+
g.value = new Ae({
|
|
295
295
|
canvas: K,
|
|
296
|
-
alpha: s,
|
|
297
|
-
antialias: i,
|
|
298
|
-
context:
|
|
299
|
-
depth: l,
|
|
300
|
-
failIfMajorPerformanceCaveat:
|
|
301
|
-
logarithmicDepthBuffer: f,
|
|
302
|
-
powerPreference: S,
|
|
303
|
-
precision: r,
|
|
304
|
-
stencil:
|
|
305
|
-
preserveDrawingBuffer:
|
|
306
|
-
premultipliedAlpha: u
|
|
296
|
+
alpha: m(s),
|
|
297
|
+
antialias: m(i),
|
|
298
|
+
context: m(v),
|
|
299
|
+
depth: m(l),
|
|
300
|
+
failIfMajorPerformanceCaveat: m(a),
|
|
301
|
+
logarithmicDepthBuffer: m(f),
|
|
302
|
+
powerPreference: m(S),
|
|
303
|
+
precision: m(r),
|
|
304
|
+
stencil: m(o),
|
|
305
|
+
preserveDrawingBuffer: m(I),
|
|
306
|
+
premultipliedAlpha: m(u)
|
|
307
307
|
});
|
|
308
|
-
const { setState:
|
|
309
|
-
|
|
310
|
-
},
|
|
311
|
-
|
|
308
|
+
const { setState: ye } = pe();
|
|
309
|
+
ye("renderer", g.value), J(), G(), ge(), j.value = !0;
|
|
310
|
+
}, ve = () => {
|
|
311
|
+
g.value && (g.value.dispose(), g.value = void 0, j.value = !1, de());
|
|
312
312
|
};
|
|
313
|
-
return O([
|
|
314
|
-
|
|
315
|
-
c,
|
|
316
|
-
p,
|
|
317
|
-
g,
|
|
318
|
-
m,
|
|
319
|
-
v,
|
|
320
|
-
R,
|
|
321
|
-
h
|
|
322
|
-
],
|
|
313
|
+
return O([_, D, H], G), O(
|
|
314
|
+
[c, p, w, d, y, R, h],
|
|
323
315
|
J
|
|
324
316
|
), O(
|
|
325
317
|
() => [e, t],
|
|
326
318
|
() => {
|
|
327
|
-
|
|
319
|
+
F(e) && F(t) && we();
|
|
328
320
|
},
|
|
329
321
|
{ immediate: !0, deep: !0 }
|
|
330
322
|
), {
|
|
331
|
-
renderer:
|
|
332
|
-
isReady:
|
|
333
|
-
dispose:
|
|
334
|
-
aspectRatio:
|
|
323
|
+
renderer: g,
|
|
324
|
+
isReady: j,
|
|
325
|
+
dispose: ve,
|
|
326
|
+
aspectRatio: he
|
|
335
327
|
};
|
|
336
328
|
}
|
|
337
329
|
const We = N({
|
|
@@ -350,11 +342,11 @@ const We = N({
|
|
|
350
342
|
windowSize: Boolean
|
|
351
343
|
},
|
|
352
344
|
setup(e, { slots: t, attrs: n }) {
|
|
353
|
-
const { logError: s } =
|
|
354
|
-
return b("camera", u), b("renderer", f), b("aspect-ratio", r), t.default && !t.default().some((
|
|
345
|
+
const { logError: s } = B(), i = T(), l = T(), { renderer: f, dispose: a, aspectRatio: r } = ke(i, l, e), u = k();
|
|
346
|
+
return b("camera", u), b("renderer", f), b("aspect-ratio", r), t.default && !t.default().some((o) => o.type.name === "Scene") && s("TresCanvas must contain a Scene component."), t.default && !t.default().some((o) => {
|
|
355
347
|
var c;
|
|
356
|
-
return (c =
|
|
357
|
-
}) && s("Scene must contain a Camera component."),
|
|
348
|
+
return (c = o.type.name) == null ? void 0 : c.includes("Camera");
|
|
349
|
+
}) && s("Scene must contain a Camera component."), Se(() => a()), () => {
|
|
358
350
|
if (t.default)
|
|
359
351
|
return q(
|
|
360
352
|
"div",
|
|
@@ -380,7 +372,7 @@ const We = N({
|
|
|
380
372
|
}), He = N({
|
|
381
373
|
name: "Scene",
|
|
382
374
|
setup(e, { slots: t }) {
|
|
383
|
-
const { scene: n } =
|
|
375
|
+
const { scene: n } = fe(), s = P("renderer"), { activeCamera: i } = ae(), { onLoop: l } = le();
|
|
384
376
|
return b("local-scene", n), l(() => {
|
|
385
377
|
s != null && s.value && (i != null && i.value) && (n != null && n.value) && s.value.render(n == null ? void 0 : n.value, i.value);
|
|
386
378
|
}), () => {
|
|
@@ -388,15 +380,15 @@ const We = N({
|
|
|
388
380
|
return t.default();
|
|
389
381
|
};
|
|
390
382
|
}
|
|
391
|
-
}), Ye = Symbol("UseTresState"), Ge = "1.
|
|
383
|
+
}), Ye = Symbol("UseTresState"), Ge = "1.3.3", Ze = {
|
|
392
384
|
install(e, t) {
|
|
393
385
|
const n = (t == null ? void 0 : t.prefix) || "Tres";
|
|
394
386
|
e.component(`${n}Canvas`, We), e.component(`${n}Scene`, He);
|
|
395
|
-
const { catalogue: s, extend: i } =
|
|
387
|
+
const { catalogue: s, extend: i } = oe(e, n);
|
|
396
388
|
e.provide("catalogue", s), e.provide("extend", i);
|
|
397
|
-
const { createComponentInstances: l } =
|
|
398
|
-
l(s).forEach(([
|
|
399
|
-
e.component(
|
|
389
|
+
const { createComponentInstances: l } = se(n);
|
|
390
|
+
l(s).forEach(([a, r]) => {
|
|
391
|
+
e.component(a, r);
|
|
400
392
|
}), window.__TRES__ = {
|
|
401
393
|
app: e,
|
|
402
394
|
version: Ge
|
|
@@ -404,17 +396,17 @@ const We = N({
|
|
|
404
396
|
}
|
|
405
397
|
};
|
|
406
398
|
export {
|
|
407
|
-
|
|
399
|
+
$e as CameraType,
|
|
408
400
|
Ye as UseTresStateSymbol,
|
|
409
401
|
Ze as default,
|
|
410
402
|
Ne as trasverseObjects,
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
403
|
+
ae as useCamera,
|
|
404
|
+
oe as useCatalogue,
|
|
405
|
+
se as useInstanceCreator,
|
|
414
406
|
Qe as useLoader,
|
|
415
|
-
|
|
407
|
+
le as useRenderLoop,
|
|
416
408
|
ke as useRenderer,
|
|
417
|
-
|
|
409
|
+
fe as useScene,
|
|
418
410
|
Xe as useTexture,
|
|
419
|
-
|
|
411
|
+
pe as useTres
|
|
420
412
|
};
|
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v1.
|
|
3
|
+
* version: v1.3.3
|
|
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(
|
|
8
|
+
(function(m,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):(m=typeof globalThis<"u"?globalThis:m||self,i(m.tres={},m.Vue,m.VueUseCore,m.Three))})(this,function(m,i,f,g){"use strict";function ne(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=ne(g);var q=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(q||{});const U={cameras:[]},re=45;let P;function I(){const{width:e,height:t}=f.useWindowSize(),{setState:n}=F();function r(a="Perspective",l){if(a==="Perspective"){const{near:s,far:u,fov:h}=l||{near:.1,far:1e3,fov:re};P=new g.PerspectiveCamera(h,c.value,s,u),U.cameras.push(P)}else{const{left:s,right:u,top:h,bottom:v,near:y,far:M}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};P=new g.OrthographicCamera(s,u,h,v,y,M),U.cameras.push(P)}return U.cameras.push(P),P}const c=i.computed(()=>e.value/t.value),p=i.computed(()=>U.cameras[0]);function d(){p.value instanceof g.PerspectiveCamera&&(p.value.aspect=c.value),p.value.updateProjectionMatrix()}function o(a){const l=i.inject("camera");a&&l&&(l.value=a,n("camera",l.value)),U.cameras.push(a),a instanceof g.PerspectiveCamera&&(a.aspect=c.value),a.updateProjectionMatrix()}return i.watch(c,d),{activeCamera:p,createCamera:r,updateCamera:d,pushCamera:o}}const G="[TresJS ▲ ■ ●] ";function x(){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 L=i.ref({...W,uuid:W.MathUtils.generateUUID()});delete L.value.Scene;let O;function T(e,t="Tres"){const{logMessage:n,logError:r}=x();!O&&e&&(O=e);const{createComponentInstances:c}=D(t);return{extend:d=>{if(!d){r("No objects provided to extend catalogue");return}L.value=Object.assign(L.value,d);const o=c(i.ref(d));n("Adding objects to catalogue",{objects:d,catalogue:L.value.uuid}),O&&o.forEach(([a,l])=>{O._context.components[a]||O.component(a,l)})},catalogue:L}}const B=e=>typeof e<"u",ae=e=>typeof e=="function",j=e=>!!e&&e.constructor===Array;function oe(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function se(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}const ie=["rotation","scale","position"];function D(e){const{logMessage:t,logError:n}=x();function r(o,a){B(o)&&B(a)&&Object.entries(o).forEach(([l,s])=>{const u=l.replace(/(-\w)/g,h=>h[1].toUpperCase());if(!(u==="args"||s===void 0)){ie.includes(u)&&s&&(s=oe(s)),o.ref&&(o.ref=a);try{if(a[u]&&B(a[u].set))a[u].set(...j(s)?s:[s]);else{if(s===""&&(s=!0),ae(a[u])){if(l==="center"&&!s)return;a[u](...j(s)?s:[s]);return}a[u]=s}}catch(h){n(`There was an error setting ${u} property`,h)}}})}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:h}=T(),v=i.inject("catalogue")||h;let y;return v&&((s=o==null?void 0:o.props)!=null&&s.args?v!=null&&v.value[u]?y=new v.value[u](...o.props.args):n(`There is no ${u} in the catalogue`,v==null?void 0:v.value.uuid):y=new v.value[u]),o!=null&&o.props&&r(o.props,y),y}}function p(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 d(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(h,{slots:v,attrs:y,...M}){const{scene:A}=z(),S=i.inject("local-scene")||A,b=i.inject("catalogue"),{pushCamera:k}=I();let C=p(l,y,v);return r(y,C),(C instanceof g.PerspectiveCamera||C instanceof g.OrthographicCamera)&&k(C),C.isObject3D&&(S==null||S.value.add(C)),S!=null&&S.value&&C.isFog&&(S.value.fog=C),M.expose(C),t(s,{sceneuuid:S==null?void 0:S.value.uuid,catalogue:b==null?void 0:b.value.uuid,props:h,slots:v.default?v.default():void 0,attrs:y,ctx:M,scene:S}),()=>{}}});return[s,u]})}return{createComponentInstances:d,processProps:r,createInstanceFromVNode:c}}const J=f.createEventHook(),K=f.createEventHook(),Q=f.createEventHook(),X=new g.Clock,{pause:ce,resume:ue,isActive:le}=f.useRafFn(()=>{const e=X.getElapsedTime(),t=X.getDelta();J.trigger({delta:t,elapsed:e}),K.trigger({delta:t,elapsed:e}),Q.trigger({delta:t,elapsed:e})},{immediate:!1});function $(){return{onBeforeLoop:J.on,onLoop:K.on,onAfterLoop:Q.on,pause:ce,resume:ue,isActive:le}}const fe=i.shallowRef(new g.Scene);function z(){return{scene:fe}}function Y(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:p}=x(),d=new e;c&&c(d),n&&n(d);const a=(Array.isArray(t)?t:[t]).map(l=>new Promise((s,u)=>{d.load(l,h=>{h.scene&&Object.assign(h,Y(h.scene)),s(h)},r,h=>u(p("[useLoader] - Failed to load resource",h)))}));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((p,d)=>{n.load(c,o=>p(o),()=>null,()=>{d(new Error("[useTextures] - Failed to load texture"))})});if(j(e)){const c=await Promise.all(e.map(p=>r(p)));return e.length>1?c:c[0]}else{const{map:c,displacementMap:p,normalMap:d,roughnessMap:o,metalnessMap:a,aoMap:l}=e;return{map:c?await r(c):null,displacementMap:p?await r(p):null,normalMap:d?await r(d):null,roughnessMap:o?await r(o):null,metalnessMap:a?await r(a):null,aoMap:l?await r(l):null}}}const _=i.reactive({});function F(){function e(n){return _[n]}function t(n,r){_[n]=r}return{state:_,...i.toRefs(_),getState:e,setState:t}}const w=i.shallowRef(),V=i.ref(!1);function Z(e,t,n){const{alpha:r=!0,antialias:c=!0,depth:p,logarithmicDepthBuffer:d,failIfMajorPerformanceCaveat:o,precision:a,premultipliedAlpha:l,stencil:s,shadows:u=!1,shadowMapType:h=g.PCFShadowMap,physicallyCorrectLights:v=!1,outputEncoding:y=g.LinearEncoding,toneMapping:M=g.NoToneMapping,toneMappingExposure:A=1,context:S=void 0,powerPreference:b="default",preserveDrawingBuffer:k=!1,clearColor:C,windowSize:Ce=!1}=i.toRefs(n),{width:N,height:R}=f.resolveUnref(Ce)?f.useWindowSize():f.useElementSize(t),{pixelRatio:E}=f.useDevicePixelRatio(),{pause:ye,resume:Se}=$(),Me=i.computed(()=>N.value/R.value),H=()=>{w.value&&(w.value.setSize(N.value,R.value),w.value.setPixelRatio(Math.min(E.value,2)))},ee=()=>{w.value&&(w.value.shadowMap.enabled=f.resolveUnref(u),w.value.shadowMap.type=f.resolveUnref(h),w.value.toneMapping=f.resolveUnref(M)||g.NoToneMapping,w.value.toneMappingExposure=f.resolveUnref(A),w.value.outputEncoding=f.resolveUnref(y)||g.LinearEncoding,C!=null&&C.value&&w.value.setClearColor(se(f.resolveUnref(C))),w.value.physicallyCorrectLights=f.resolveUnref(v))},Pe=()=>{const te=f.unrefElement(e);if(w.value||!te)return;w.value=new g.WebGLRenderer({canvas:te,alpha:f.resolveUnref(r),antialias:f.resolveUnref(c),context:f.resolveUnref(S),depth:f.resolveUnref(p),failIfMajorPerformanceCaveat:f.resolveUnref(o),logarithmicDepthBuffer:f.resolveUnref(d),powerPreference:f.resolveUnref(b),precision:f.resolveUnref(a),stencil:f.resolveUnref(s),preserveDrawingBuffer:f.resolveUnref(k),premultipliedAlpha:f.resolveUnref(l)});const{setState:Le}=F();Le("renderer",w.value),ee(),H(),Se(),V.value=!0},Ue=()=>{w.value&&(w.value.dispose(),w.value=void 0,V.value=!1,ye())};return i.watch([N,R,E],H),i.watch([u,h,y,v,M,A,C],ee),i.watch(()=>[e,t],()=>{f.unrefElement(e)&&f.unrefElement(t)&&Pe()},{immediate:!0,deep:!0}),{renderer:w,isReady:V,dispose:Ue,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}=x(),c=i.ref(),p=i.ref(),{renderer:d,dispose:o,aspectRatio:a}=Z(c,p,e),l=i.shallowRef();return i.provide("camera",l),i.provide("renderer",d),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:p,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}=z(),r=i.inject("renderer"),{activeCamera:c}=I(),{onLoop:p}=$();return i.provide("local-scene",n),p(()=>{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.3.3",ve={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}=T(e,n);e.provide("catalogue",r),e.provide("extend",c);const{createComponentInstances:p}=D(n);p(r).forEach(([o,a])=>{e.component(o,a)}),window.__TRES__={app:e,version:we}}};m.CameraType=q,m.UseTresStateSymbol=he,m.default=ve,m.trasverseObjects=Y,m.useCamera=I,m.useCatalogue=T,m.useInstanceCreator=D,m.useLoader=pe,m.useRenderLoop=$,m.useRenderer=Z,m.useScene=z,m.useTexture=de,m.useTres=F,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/types/index.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ export type TresVNodeType = VNodeTypes & {
|
|
|
12
12
|
export type TresVNode = VNode & { children?: Array<VNode>; type: TresVNodeType }
|
|
13
13
|
export type TresAttributes = Record<string, any> & { args?: number[] }
|
|
14
14
|
|
|
15
|
+
export type TresColor = string | number | Color | number[]
|
|
15
16
|
declare global {
|
|
16
17
|
// Define the window interface, with type annotations for the properties and methods of the window object
|
|
17
18
|
interface Window {
|
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.3.
|
|
4
|
+
"version": "1.3.3",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
7
7
|
"files": [
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@alvarosabu/utils": "^2.2.0",
|
|
41
41
|
"@histoire/plugin-vue": "0.11.7",
|
|
42
|
-
"@tresjs/cientos": "^1.2.
|
|
42
|
+
"@tresjs/cientos": "^1.2.2",
|
|
43
43
|
"@types/three": "^0.146.0",
|
|
44
44
|
"@vitejs/plugin-vue": "^4.0.0",
|
|
45
45
|
"@vitest/coverage-c8": "^0.25.8",
|