@tresjs/core 2.1.2 → 2.1.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/tres.js +177 -176
- package/dist/tres.umd.cjs +3 -3
- package/dist/types/index.d.ts +2 -1
- package/package.json +28 -28
package/dist/tres.js
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v2.1.
|
|
3
|
+
* version: v2.1.3
|
|
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 E, shallowReactive as
|
|
9
|
-
import * as
|
|
10
|
-
import { PerspectiveCamera as N, OrthographicCamera as
|
|
11
|
-
import { createEventHook as X, useRafFn as
|
|
12
|
-
const
|
|
13
|
-
function
|
|
8
|
+
import { ref as E, shallowReactive as le, computed as de, toRefs as me, provide as Ae, inject as _e, watchEffect as pe, toRef as Oe, shallowRef as ve, watch as H, onUnmounted as ge, createRenderer as ke, defineComponent as we, onMounted as je, h as D } from "vue";
|
|
9
|
+
import * as be from "three";
|
|
10
|
+
import { PerspectiveCamera as N, OrthographicCamera as De, Clock as he, Color as U, SRGBColorSpace as Ie, ACESFilmicToneMapping as Be, PCFSoftShadowMap as Fe, PCFShadowMap as ze, LinearSRGBColorSpace as ae, NoToneMapping as ne, WebGLRenderer as Ge, LoadingManager as Ve, TextureLoader as He, Raycaster as We, Vector2 as Ye, BufferAttribute as $e } from "three";
|
|
11
|
+
import { createEventHook as X, useRafFn as Ne, toValue as f, useWindowSize as Ue, useElementSize as Ke, useDevicePixelRatio as qe, unrefElement as K, useEventListener as Je } from "@vueuse/core";
|
|
12
|
+
const re = (e) => typeof e == "function", Xe = (e) => typeof e == "string", ye = (e) => !!e && e.constructor === Array, Ce = E({}), Me = (e) => void Object.assign(Ce.value, e), p = ["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"];
|
|
13
|
+
function Qe() {
|
|
14
14
|
const e = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0, o = Math.random() * 4294967295 | 0, a = Math.random() * 4294967295 | 0;
|
|
15
15
|
return (p[e & 255] + p[e >> 8 & 255] + p[e >> 16 & 255] + p[e >> 24 & 255] + "-" + p[t & 255] + p[t >> 8 & 255] + "-" + p[t >> 16 & 15 | 64] + p[t >> 24 & 255] + "-" + p[o & 63 | 128] + p[o >> 8 & 255] + "-" + p[o >> 16 & 255] + p[o >> 24 & 255] + p[a & 255] + p[a >> 8 & 255] + p[a >> 16 & 255] + p[a >> 24 & 255]).toLowerCase();
|
|
16
16
|
}
|
|
17
17
|
const Q = Symbol();
|
|
18
|
-
function
|
|
19
|
-
const e =
|
|
20
|
-
uuid:
|
|
18
|
+
function Ze() {
|
|
19
|
+
const e = le({
|
|
20
|
+
uuid: Qe(),
|
|
21
21
|
camera: void 0,
|
|
22
22
|
cameras: [],
|
|
23
23
|
scene: void 0,
|
|
24
24
|
renderer: void 0,
|
|
25
|
-
aspectRatio:
|
|
25
|
+
aspectRatio: de(() => window.innerWidth / window.innerHeight)
|
|
26
26
|
});
|
|
27
27
|
function t(n) {
|
|
28
28
|
return e[n];
|
|
@@ -32,36 +32,36 @@ function tt() {
|
|
|
32
32
|
}
|
|
33
33
|
const a = {
|
|
34
34
|
state: e,
|
|
35
|
-
...
|
|
35
|
+
...me(e),
|
|
36
36
|
getState: t,
|
|
37
37
|
setState: o
|
|
38
38
|
};
|
|
39
|
-
return
|
|
39
|
+
return Ae(Q, a), a;
|
|
40
40
|
}
|
|
41
|
-
const B = () =>
|
|
42
|
-
state:
|
|
41
|
+
const B = () => _e(Q, {
|
|
42
|
+
state: le({
|
|
43
43
|
camera: void 0,
|
|
44
44
|
cameras: [],
|
|
45
45
|
scene: void 0,
|
|
46
46
|
renderer: void 0
|
|
47
47
|
})
|
|
48
48
|
});
|
|
49
|
-
var
|
|
50
|
-
const
|
|
51
|
-
let
|
|
52
|
-
function
|
|
49
|
+
var et = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(et || {});
|
|
50
|
+
const tt = 45;
|
|
51
|
+
let _;
|
|
52
|
+
function xe() {
|
|
53
53
|
const { state: e, setState: t, aspectRatio: o } = B();
|
|
54
|
-
function a(s = "Perspective",
|
|
54
|
+
function a(s = "Perspective", u) {
|
|
55
55
|
var l, d, v;
|
|
56
56
|
if (s === "Perspective") {
|
|
57
|
-
const { near: C, far: M, fov:
|
|
57
|
+
const { near: C, far: M, fov: b } = u || {
|
|
58
58
|
near: 0.1,
|
|
59
59
|
far: 1e3,
|
|
60
|
-
fov:
|
|
60
|
+
fov: tt
|
|
61
61
|
};
|
|
62
|
-
|
|
62
|
+
_ = new N(b, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, C, M), (d = e.cameras) == null || d.push(_);
|
|
63
63
|
} else {
|
|
64
|
-
const { left: C, right: M, top:
|
|
64
|
+
const { left: C, right: M, top: b, bottom: P, near: w, far: x } = u || {
|
|
65
65
|
left: -100,
|
|
66
66
|
right: 100,
|
|
67
67
|
top: 100,
|
|
@@ -69,29 +69,29 @@ function Ee() {
|
|
|
69
69
|
near: 0.1,
|
|
70
70
|
far: 1e3
|
|
71
71
|
};
|
|
72
|
-
|
|
72
|
+
_ = new De(C, M, b, P, w, x), (v = e.cameras) == null || v.push(_);
|
|
73
73
|
}
|
|
74
|
-
return e.camera =
|
|
74
|
+
return e.camera = _, t("camera", e.camera), _;
|
|
75
75
|
}
|
|
76
76
|
function n() {
|
|
77
77
|
var s;
|
|
78
78
|
e.camera instanceof N && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (s = e.camera) == null || s.updateProjectionMatrix();
|
|
79
79
|
}
|
|
80
80
|
function r(s) {
|
|
81
|
-
var
|
|
82
|
-
(
|
|
81
|
+
var u;
|
|
82
|
+
(u = e.cameras) == null || u.push(s), s instanceof N && e.aspectRatio && (s.aspect = e.aspectRatio.value), s.updateProjectionMatrix(), t("camera", s);
|
|
83
83
|
}
|
|
84
84
|
function c(s) {
|
|
85
|
-
var
|
|
86
|
-
((
|
|
85
|
+
var u;
|
|
86
|
+
((u = e.cameras) == null ? void 0 : u.length) === 0 && r(s);
|
|
87
87
|
}
|
|
88
88
|
function i() {
|
|
89
89
|
e.cameras = [];
|
|
90
90
|
}
|
|
91
|
-
return
|
|
91
|
+
return pe(() => {
|
|
92
92
|
o != null && o.value && n();
|
|
93
93
|
}), {
|
|
94
|
-
activeCamera:
|
|
94
|
+
activeCamera: Oe(e, "camera"),
|
|
95
95
|
createCamera: a,
|
|
96
96
|
updateCamera: n,
|
|
97
97
|
pushCamera: r,
|
|
@@ -99,61 +99,61 @@ function Ee() {
|
|
|
99
99
|
setFirstCamera: c
|
|
100
100
|
};
|
|
101
101
|
}
|
|
102
|
-
const
|
|
102
|
+
const Re = X(), Ee = X(), Z = X(), I = new he();
|
|
103
103
|
let W = 0, Y = 0;
|
|
104
|
-
const { pause:
|
|
104
|
+
const { pause: at, resume: nt, isActive: rt } = Ne(
|
|
105
105
|
() => {
|
|
106
|
-
|
|
106
|
+
Re.trigger({ delta: W, elapsed: Y, clock: I }), Ee.trigger({ delta: W, elapsed: Y, clock: I }), Z.trigger({ delta: W, elapsed: Y, clock: I });
|
|
107
107
|
},
|
|
108
108
|
{ immediate: !1 }
|
|
109
109
|
);
|
|
110
110
|
Z.on(() => {
|
|
111
111
|
W = I.getDelta(), Y = I.getElapsedTime();
|
|
112
112
|
});
|
|
113
|
-
function
|
|
113
|
+
function Pe() {
|
|
114
114
|
return {
|
|
115
|
-
onBeforeLoop:
|
|
116
|
-
onLoop:
|
|
115
|
+
onBeforeLoop: Re.on,
|
|
116
|
+
onLoop: Ee.on,
|
|
117
117
|
onAfterLoop: Z.on,
|
|
118
|
-
pause:
|
|
119
|
-
resume:
|
|
120
|
-
isActive:
|
|
118
|
+
pause: at,
|
|
119
|
+
resume: nt,
|
|
120
|
+
isActive: rt
|
|
121
121
|
};
|
|
122
122
|
}
|
|
123
|
-
function
|
|
123
|
+
function ot(e) {
|
|
124
124
|
return e instanceof U ? e : Array.isArray(e) ? new U(...e) : new U(e);
|
|
125
125
|
}
|
|
126
126
|
const q = {
|
|
127
127
|
realistic: {
|
|
128
|
-
outputColorSpace:
|
|
129
|
-
toneMapping:
|
|
128
|
+
outputColorSpace: Ie,
|
|
129
|
+
toneMapping: Be,
|
|
130
130
|
toneMappingExposure: 3,
|
|
131
131
|
shadowMap: {
|
|
132
132
|
enabled: !0,
|
|
133
|
-
type:
|
|
133
|
+
type: Fe
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
|
-
},
|
|
136
|
+
}, Se = (e, t) => {
|
|
137
137
|
for (const o of Object.keys(t))
|
|
138
|
-
t[o] instanceof Object && Object.assign(t[o],
|
|
138
|
+
t[o] instanceof Object && Object.assign(t[o], Se(e[o], t[o]));
|
|
139
139
|
return Object.assign(e || {}, t), e;
|
|
140
|
-
},
|
|
140
|
+
}, it = "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", st = /* @__PURE__ */ ct(it);
|
|
141
141
|
function V(e) {
|
|
142
142
|
return e.replace(/-([a-z])/g, (t, o) => o.toUpperCase());
|
|
143
143
|
}
|
|
144
|
-
function
|
|
144
|
+
function ct(e, t) {
|
|
145
145
|
const o = /* @__PURE__ */ Object.create(null), a = e.split(",");
|
|
146
146
|
for (let n = 0; n < a.length; n++)
|
|
147
147
|
o[a[n]] = !0;
|
|
148
148
|
return t ? (n) => !!o[n.toLowerCase()] : (n) => !!o[n];
|
|
149
149
|
}
|
|
150
|
-
const
|
|
150
|
+
const Mt = !0, oe = "[TresJS ▲ ■ ●] ";
|
|
151
151
|
function F() {
|
|
152
152
|
function e(a, n) {
|
|
153
|
-
console.error(`${
|
|
153
|
+
console.error(`${oe} ${a}`, n || "");
|
|
154
154
|
}
|
|
155
155
|
function t(a) {
|
|
156
|
-
console.warn(`${
|
|
156
|
+
console.warn(`${oe} ${a}`);
|
|
157
157
|
}
|
|
158
158
|
function o(a, n) {
|
|
159
159
|
}
|
|
@@ -163,103 +163,104 @@ function F() {
|
|
|
163
163
|
logMessage: o
|
|
164
164
|
};
|
|
165
165
|
}
|
|
166
|
-
function
|
|
167
|
-
|
|
168
|
-
const t = we(), o = E(!1), {
|
|
166
|
+
function ut(e) {
|
|
167
|
+
const t = ve(), o = E(!1), {
|
|
169
168
|
alpha: a = !0,
|
|
170
169
|
antialias: n = !0,
|
|
171
170
|
depth: r,
|
|
172
171
|
logarithmicDepthBuffer: c,
|
|
173
172
|
failIfMajorPerformanceCaveat: i,
|
|
174
173
|
precision: s,
|
|
175
|
-
premultipliedAlpha:
|
|
174
|
+
premultipliedAlpha: u,
|
|
176
175
|
stencil: l,
|
|
177
176
|
shadows: d = !1,
|
|
178
|
-
shadowMapType: v =
|
|
177
|
+
shadowMapType: v = ze,
|
|
179
178
|
useLegacyLights: C = !1,
|
|
180
|
-
outputColorSpace: M =
|
|
181
|
-
toneMapping:
|
|
182
|
-
toneMappingExposure:
|
|
179
|
+
outputColorSpace: M = ae,
|
|
180
|
+
toneMapping: b = ne,
|
|
181
|
+
toneMappingExposure: P = 1,
|
|
183
182
|
context: w = void 0,
|
|
184
183
|
powerPreference: x = "default",
|
|
185
184
|
preserveDrawingBuffer: $ = !1,
|
|
186
185
|
clearColor: y,
|
|
187
186
|
windowSize: m = !1,
|
|
188
187
|
preset: R = void 0
|
|
189
|
-
} =
|
|
190
|
-
|
|
191
|
-
|
|
188
|
+
} = me(e), { state: g, setState: h } = B(), { width: O, height: k } = f(m) == !0 || f(m) === "" || f(m) === "true" ? Ue() : Ke(g.container), { logError: S, logWarning: z } = F(), { pixelRatio: j } = qe(), { pause: T, resume: G } = Pe(), L = de(() => O.value / k.value);
|
|
189
|
+
setTimeout(() => {
|
|
190
|
+
!f(m) && !g.canvas.value.offsetHeight && z(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
|
|
191
|
+
You could set windowSize=true to force the canvas to be the size of the window.`);
|
|
192
|
+
}, 1e3);
|
|
192
193
|
const ee = () => {
|
|
193
194
|
t.value && (t.value.setSize(O.value, k.value), t.value.setPixelRatio(Math.min(j.value, 2)));
|
|
194
195
|
}, te = () => {
|
|
195
196
|
if (!t.value)
|
|
196
197
|
return;
|
|
197
|
-
const
|
|
198
|
-
if (
|
|
199
|
-
|
|
198
|
+
const A = f(R);
|
|
199
|
+
if (A) {
|
|
200
|
+
A in q || S("Renderer Preset must be one of these: " + Object.keys(q).join(", ")), Se(t.value, q[A]);
|
|
200
201
|
return;
|
|
201
202
|
}
|
|
202
|
-
t.value.shadowMap.enabled =
|
|
203
|
-
},
|
|
204
|
-
const
|
|
205
|
-
|
|
206
|
-
canvas:
|
|
207
|
-
alpha:
|
|
208
|
-
antialias:
|
|
209
|
-
context:
|
|
210
|
-
depth:
|
|
211
|
-
failIfMajorPerformanceCaveat:
|
|
212
|
-
logarithmicDepthBuffer:
|
|
213
|
-
powerPreference:
|
|
214
|
-
precision:
|
|
215
|
-
stencil:
|
|
216
|
-
preserveDrawingBuffer:
|
|
217
|
-
premultipliedAlpha: u
|
|
218
|
-
}),
|
|
219
|
-
},
|
|
203
|
+
t.value.shadowMap.enabled = f(d), t.value.shadowMap.type = f(v), t.value.toneMapping = f(b) || ne, t.value.toneMappingExposure = f(P), t.value.outputColorSpace = f(M) || ae, y != null && y.value && t.value.setClearColor(ot(f(y))), t.value.useLegacyLights = f(C);
|
|
204
|
+
}, Te = () => {
|
|
205
|
+
const A = K(g.canvas);
|
|
206
|
+
A && (t.value = new Ge({
|
|
207
|
+
canvas: A,
|
|
208
|
+
alpha: f(a),
|
|
209
|
+
antialias: f(n),
|
|
210
|
+
context: f(w),
|
|
211
|
+
depth: f(r),
|
|
212
|
+
failIfMajorPerformanceCaveat: f(i),
|
|
213
|
+
logarithmicDepthBuffer: f(c),
|
|
214
|
+
powerPreference: f(x),
|
|
215
|
+
precision: f(s),
|
|
216
|
+
stencil: f(l),
|
|
217
|
+
preserveDrawingBuffer: f($),
|
|
218
|
+
premultipliedAlpha: f(u)
|
|
219
|
+
}), h("renderer", t.value), h("clock", new he()), h("aspectRatio", L), te(), ee(), G(), o.value = !0);
|
|
220
|
+
}, Le = () => {
|
|
220
221
|
t.value && (t.value.dispose(), t.value = void 0, o.value = !1, T());
|
|
221
222
|
};
|
|
222
223
|
return H([L, j], ee), H(
|
|
223
|
-
[d, v, M, C,
|
|
224
|
+
[d, v, M, C, b, P, y],
|
|
224
225
|
te
|
|
225
226
|
), H(
|
|
226
227
|
() => [g.canvas, g.container],
|
|
227
228
|
() => {
|
|
228
|
-
K(g.canvas) && K(g.container) &&
|
|
229
|
+
K(g.canvas) && K(g.container) && Te();
|
|
229
230
|
},
|
|
230
231
|
{ immediate: !0, deep: !0 }
|
|
231
232
|
), {
|
|
232
233
|
renderer: t,
|
|
233
234
|
isReady: o,
|
|
234
|
-
dispose:
|
|
235
|
+
dispose: Le,
|
|
235
236
|
aspectRatio: L
|
|
236
237
|
};
|
|
237
238
|
}
|
|
238
|
-
function
|
|
239
|
+
function ft(e) {
|
|
239
240
|
const t = { nodes: {}, materials: {} };
|
|
240
241
|
return e && e.traverse((o) => {
|
|
241
242
|
o.name && (t.nodes[o.name] = o), o.material && !t.materials[o.material.name] && (t.materials[o.material.name] = o.material);
|
|
242
243
|
}), t;
|
|
243
244
|
}
|
|
244
|
-
async function
|
|
245
|
+
async function xt(e, t, o, a, n) {
|
|
245
246
|
const { logError: r } = F(), c = new e();
|
|
246
247
|
n && n(c), o && o(c);
|
|
247
248
|
const s = (Array.isArray(t) ? t : [t]).map(
|
|
248
|
-
(
|
|
249
|
+
(u) => new Promise((l, d) => {
|
|
249
250
|
c.load(
|
|
250
|
-
|
|
251
|
+
u,
|
|
251
252
|
(v) => {
|
|
252
|
-
v.scene && Object.assign(v,
|
|
253
|
+
v.scene && Object.assign(v, ft(v.scene)), l(v);
|
|
253
254
|
},
|
|
254
255
|
a,
|
|
255
256
|
(v) => d(r("[useLoader] - Failed to load resource", v))
|
|
256
257
|
);
|
|
257
258
|
})
|
|
258
259
|
);
|
|
259
|
-
return
|
|
260
|
+
return ye(t) ? await Promise.all(s) : await s[0];
|
|
260
261
|
}
|
|
261
|
-
async function
|
|
262
|
-
const t = new
|
|
262
|
+
async function Rt(e) {
|
|
263
|
+
const t = new Ve(), o = new He(t), a = (n) => new Promise((r, c) => {
|
|
263
264
|
o.load(
|
|
264
265
|
n,
|
|
265
266
|
(i) => r(i),
|
|
@@ -269,7 +270,7 @@ async function St(e) {
|
|
|
269
270
|
}
|
|
270
271
|
);
|
|
271
272
|
});
|
|
272
|
-
if (
|
|
273
|
+
if (ye(e)) {
|
|
273
274
|
const n = await Promise.all(e.map((r) => a(r)));
|
|
274
275
|
return e.length > 1 ? n : n[0];
|
|
275
276
|
} else {
|
|
@@ -279,7 +280,7 @@ async function St(e) {
|
|
|
279
280
|
normalMap: c,
|
|
280
281
|
roughnessMap: i,
|
|
281
282
|
metalnessMap: s,
|
|
282
|
-
aoMap:
|
|
283
|
+
aoMap: u,
|
|
283
284
|
alphaMap: l,
|
|
284
285
|
matcap: d
|
|
285
286
|
} = e;
|
|
@@ -289,20 +290,20 @@ async function St(e) {
|
|
|
289
290
|
normalMap: c ? await a(c) : null,
|
|
290
291
|
roughnessMap: i ? await a(i) : null,
|
|
291
292
|
metalnessMap: s ? await a(s) : null,
|
|
292
|
-
aoMap:
|
|
293
|
+
aoMap: u ? await a(u) : null,
|
|
293
294
|
alphaMap: l ? await a(l) : null,
|
|
294
295
|
matcap: d ? await a(d) : null
|
|
295
296
|
};
|
|
296
297
|
}
|
|
297
298
|
}
|
|
298
|
-
function
|
|
299
|
+
function lt() {
|
|
299
300
|
var c;
|
|
300
|
-
const e =
|
|
301
|
+
const e = ve(new We()), t = E(new Ye()), o = E(null), { setState: a, state: n } = B();
|
|
301
302
|
a("raycaster", e.value), a("pointer", t), a("currentInstance", o);
|
|
302
303
|
function r(i) {
|
|
303
304
|
t.value.x = i.clientX / window.innerWidth * 2 - 1, t.value.y = -(i.clientY / window.innerHeight) * 2 + 1;
|
|
304
305
|
}
|
|
305
|
-
return (c = n == null ? void 0 : n.renderer) == null || c.domElement.addEventListener("pointermove", r),
|
|
306
|
+
return (c = n == null ? void 0 : n.renderer) == null || c.domElement.addEventListener("pointermove", r), ge(() => {
|
|
306
307
|
var i;
|
|
307
308
|
(i = n == null ? void 0 : n.renderer) == null || i.domElement.removeEventListener("pointermove", r);
|
|
308
309
|
}), {
|
|
@@ -310,7 +311,7 @@ function mt() {
|
|
|
310
311
|
pointer: t
|
|
311
312
|
};
|
|
312
313
|
}
|
|
313
|
-
function
|
|
314
|
+
function Et() {
|
|
314
315
|
const { logWarning: e } = F();
|
|
315
316
|
function t(a, n, r) {
|
|
316
317
|
let c = null;
|
|
@@ -326,43 +327,43 @@ function Pt() {
|
|
|
326
327
|
seekByName: o
|
|
327
328
|
};
|
|
328
329
|
}
|
|
329
|
-
const
|
|
330
|
-
let J = null,
|
|
331
|
-
const
|
|
330
|
+
const dt = /^on[^a-z]/, mt = (e) => dt.test(e);
|
|
331
|
+
let J = null, ie = null;
|
|
332
|
+
const se = {
|
|
332
333
|
GEOMETRY_VIA_PROP: "tres__geometryViaProp",
|
|
333
334
|
MATERIAL_VIA_PROP: "tres__materialViaProp"
|
|
334
|
-
}, { logError:
|
|
335
|
-
let
|
|
336
|
-
const
|
|
335
|
+
}, { logError: ce } = F();
|
|
336
|
+
let ue = !0;
|
|
337
|
+
const pt = {
|
|
337
338
|
createElement(e, t, o, a) {
|
|
338
|
-
var s,
|
|
339
|
-
if (a || (a = {}), a.args || (a.args = []), e === "template" ||
|
|
339
|
+
var s, u;
|
|
340
|
+
if (a || (a = {}), a.args || (a.args = []), e === "template" || st(e))
|
|
340
341
|
return null;
|
|
341
342
|
let n = e.replace("Tres", ""), r;
|
|
342
343
|
if (e === "primitive") {
|
|
343
|
-
(a == null ? void 0 : a.object) === void 0 &&
|
|
344
|
+
(a == null ? void 0 : a.object) === void 0 && ce("Tres primitives need a prop 'object'");
|
|
344
345
|
const l = a.object;
|
|
345
346
|
n = l.type, r = Object.assign(l, { type: n, attach: a.attach, primitive: !0 });
|
|
346
347
|
} else {
|
|
347
|
-
const l =
|
|
348
|
-
l ||
|
|
348
|
+
const l = Ce.value[n];
|
|
349
|
+
l || ce(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`), r = new l(...a.args);
|
|
349
350
|
}
|
|
350
|
-
if (r.isCamera &&
|
|
351
|
+
if (r.isCamera && ue) {
|
|
351
352
|
a != null && a.position || r.position.set(3, 3, 3), a != null && a.lookAt || r.lookAt(0, 0, 0);
|
|
352
|
-
const { setFirstCamera: l } =
|
|
353
|
-
l(r),
|
|
353
|
+
const { setFirstCamera: l } = xe();
|
|
354
|
+
l(r), ue = !1;
|
|
354
355
|
}
|
|
355
356
|
(a == null ? void 0 : a.attach) === void 0 && (r.isMaterial ? r.attach = "material" : r.isBufferGeometry && (r.attach = "geometry"));
|
|
356
|
-
const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } =
|
|
357
|
-
return r.isObject3D && ((s = a == null ? void 0 : a.material) != null && s.isMaterial && (r.userData[i] = !0), (
|
|
357
|
+
const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } = se;
|
|
358
|
+
return r.isObject3D && ((s = a == null ? void 0 : a.material) != null && s.isMaterial && (r.userData[i] = !0), (u = a == null ? void 0 : a.geometry) != null && u.isBufferGeometry && (r.userData[c] = !0)), r.events = {}, r;
|
|
358
359
|
},
|
|
359
360
|
insert(e, t) {
|
|
360
361
|
var o, a, n, r, c;
|
|
361
|
-
if (t && t.isScene && (
|
|
362
|
+
if (t && t.isScene && (ie = t), (((o = e == null ? void 0 : e.__vnode) == null ? void 0 : o.type) === "TresGroup" || ((a = e == null ? void 0 : e.__vnode) == null ? void 0 : a.type) === "TresObject3D") && t === null && !((r = (n = e == null ? void 0 : e.__vnode) == null ? void 0 : n.ctx) != null && r.asyncResolved)) {
|
|
362
363
|
J = e;
|
|
363
364
|
return;
|
|
364
365
|
} else
|
|
365
|
-
(c = e == null ? void 0 : e.__vnode) != null && c.type.includes("Controls") && t === null && (J =
|
|
366
|
+
(c = e == null ? void 0 : e.__vnode) != null && c.type.includes("Controls") && t === null && (J = ie);
|
|
366
367
|
t || (t = J), e != null && e.isObject3D && (t != null && t.isObject3D) ? (t.add(e), e.dispatchEvent({ type: "added" })) : e != null && e.isFog ? t.fog = e : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[t == null ? void 0 : t.attach], t && (t[e.attach] = e));
|
|
367
368
|
},
|
|
368
369
|
remove(e) {
|
|
@@ -370,9 +371,9 @@ const gt = {
|
|
|
370
371
|
if (e) {
|
|
371
372
|
if (e.isObject3D) {
|
|
372
373
|
const a = e, n = (r) => {
|
|
373
|
-
var s,
|
|
374
|
-
const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } =
|
|
375
|
-
r.userData[i] || (s = r.material) == null || s.dispose(), r.userData[c] || (
|
|
374
|
+
var s, u;
|
|
375
|
+
const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } = se;
|
|
376
|
+
r.userData[i] || (s = r.material) == null || s.dispose(), r.userData[c] || (u = r.geometry) == null || u.dispose();
|
|
376
377
|
};
|
|
377
378
|
a.traverse((r) => n(r)), n(a);
|
|
378
379
|
}
|
|
@@ -387,24 +388,24 @@ const gt = {
|
|
|
387
388
|
return;
|
|
388
389
|
n.setAttribute(
|
|
389
390
|
V(r),
|
|
390
|
-
new
|
|
391
|
+
new $e(...a)
|
|
391
392
|
);
|
|
392
393
|
return;
|
|
393
394
|
}
|
|
394
395
|
if (r.includes("-") && i === void 0) {
|
|
395
|
-
const
|
|
396
|
-
i =
|
|
396
|
+
const u = r.split("-");
|
|
397
|
+
i = u.reduce((l, d) => l[V(d)], n), r = u.pop(), c = r.toLowerCase(), i != null && i.set || (n = u.reduce((l, d) => l[V(d)], n));
|
|
397
398
|
}
|
|
398
|
-
if (
|
|
399
|
-
const
|
|
400
|
-
e.events[
|
|
399
|
+
if (mt(r)) {
|
|
400
|
+
const u = r;
|
|
401
|
+
e.events[u] = a;
|
|
401
402
|
}
|
|
402
403
|
let s = a;
|
|
403
|
-
if (s === "" && (s = !0),
|
|
404
|
+
if (s === "" && (s = !0), re(i)) {
|
|
404
405
|
Array.isArray(s) ? e[c](...s) : e[c](s);
|
|
405
406
|
return;
|
|
406
407
|
}
|
|
407
|
-
!(i != null && i.set) && !
|
|
408
|
+
!(i != null && i.set) && !re(i) ? n[c] = s : i.constructor === s.constructor && (i != null && i.copy) ? i == null || i.copy(s) : Array.isArray(s) ? i.set(...s) : !i.isColor && i.setScalar ? i.setScalar(s) : i.set(s);
|
|
408
409
|
}
|
|
409
410
|
},
|
|
410
411
|
parentNode(e) {
|
|
@@ -419,15 +420,15 @@ const gt = {
|
|
|
419
420
|
setScopeId: () => void 0,
|
|
420
421
|
cloneNode: () => void 0,
|
|
421
422
|
insertStaticContent: () => void 0
|
|
422
|
-
}, { createApp:
|
|
423
|
-
const t =
|
|
423
|
+
}, { createApp: vt } = ke(pt), gt = (e) => {
|
|
424
|
+
const t = vt(o);
|
|
424
425
|
function o() {
|
|
425
426
|
return e && e.default ? e.default() : [];
|
|
426
427
|
}
|
|
427
428
|
return t;
|
|
428
429
|
};
|
|
429
|
-
|
|
430
|
-
const { logWarning:
|
|
430
|
+
Me(be);
|
|
431
|
+
const { logWarning: fe } = F(), wt = we({
|
|
431
432
|
name: "TresScene",
|
|
432
433
|
props: [
|
|
433
434
|
"shadows",
|
|
@@ -447,43 +448,43 @@ const { logWarning: de } = F(), bt = be({
|
|
|
447
448
|
"camera"
|
|
448
449
|
],
|
|
449
450
|
setup(e, { slots: t, expose: o }) {
|
|
450
|
-
e.physicallyCorrectLights === !0 &&
|
|
451
|
-
const a = E(), n = E(), r = new
|
|
451
|
+
e.physicallyCorrectLights === !0 && fe("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
|
|
452
|
+
const a = E(), n = E(), r = new be.Scene(), { setState: c } = B();
|
|
452
453
|
c("scene", r), c("canvas", n), c("container", a);
|
|
453
454
|
const i = E(), s = t && t.default && t.default();
|
|
454
|
-
s && (s == null ? void 0 : s.length) > 0 && (i.value = s.some((w) =>
|
|
455
|
-
const { onLoop:
|
|
456
|
-
|
|
455
|
+
s && (s == null ? void 0 : s.length) > 0 && (i.value = s.some((w) => Xe(w.type) && w.type.includes("Camera")) || e.camera, i.value || fe("No camera found in the scene, please add one!"));
|
|
456
|
+
const { onLoop: u, resume: l } = Pe();
|
|
457
|
+
je(() => {
|
|
457
458
|
M();
|
|
458
|
-
}),
|
|
459
|
+
}), ge(() => {
|
|
459
460
|
c("renderer", null);
|
|
460
461
|
});
|
|
461
|
-
const { activeCamera: d, pushCamera: v, clearCameras: C } =
|
|
462
|
+
const { activeCamera: d, pushCamera: v, clearCameras: C } = xe();
|
|
462
463
|
function M() {
|
|
463
|
-
const { renderer: w } =
|
|
464
|
+
const { renderer: w } = ut(e);
|
|
464
465
|
e.camera && v(e.camera);
|
|
465
|
-
const { raycaster: x, pointer: $ } =
|
|
466
|
+
const { raycaster: x, pointer: $ } = lt();
|
|
466
467
|
let y = null, m = null;
|
|
467
|
-
|
|
468
|
+
pe(() => {
|
|
468
469
|
d.value && x.value.setFromCamera($.value, d.value);
|
|
469
|
-
}),
|
|
470
|
-
var R, g,
|
|
470
|
+
}), u(() => {
|
|
471
|
+
var R, g, h, O, k, S, z, j, T, G;
|
|
471
472
|
if (d.value && e.disableRender !== !0 && ((R = w.value) == null || R.render(r, d.value)), x.value) {
|
|
472
473
|
const L = x.value.intersectObjects(r.children);
|
|
473
|
-
L.length > 0 ? (m = L[0], y === null && ((O = (
|
|
474
|
+
L.length > 0 ? (m = L[0], y === null && ((O = (h = (g = m.object) == null ? void 0 : g.events) == null ? void 0 : h.onPointerEnter) == null || O.call(h, m)), (z = (S = (k = m.object) == null ? void 0 : k.events) == null ? void 0 : S.onPointerMove) == null || z.call(S, m)) : y !== null && ((G = (T = (j = m == null ? void 0 : m.object) == null ? void 0 : j.events) == null ? void 0 : T.onPointerLeave) == null || G.call(T, y), m = null), y = m;
|
|
474
475
|
}
|
|
475
|
-
}),
|
|
476
|
-
var R, g,
|
|
477
|
-
m !== null && ((
|
|
476
|
+
}), Je(n.value, "click", () => {
|
|
477
|
+
var R, g, h;
|
|
478
|
+
m !== null && ((h = (g = (R = m.object) == null ? void 0 : R.events) == null ? void 0 : g.onClick) == null || h.call(g, m));
|
|
478
479
|
});
|
|
479
480
|
}
|
|
480
|
-
let
|
|
481
|
-
function
|
|
482
|
-
|
|
481
|
+
let b;
|
|
482
|
+
function P() {
|
|
483
|
+
b = gt(t);
|
|
483
484
|
const w = B();
|
|
484
|
-
|
|
485
|
+
b.provide("useTres", w), b.provide(Q, w), b.provide("extend", Me), b.mount(r);
|
|
485
486
|
}
|
|
486
|
-
return
|
|
487
|
+
return P(), o({
|
|
487
488
|
scene: r
|
|
488
489
|
}), H(
|
|
489
490
|
() => e.camera,
|
|
@@ -533,7 +534,7 @@ const { logWarning: de } = F(), bt = be({
|
|
|
533
534
|
)
|
|
534
535
|
);
|
|
535
536
|
}
|
|
536
|
-
}),
|
|
537
|
+
}), bt = we({
|
|
537
538
|
name: "TresCanvas",
|
|
538
539
|
props: [
|
|
539
540
|
"shadows",
|
|
@@ -553,31 +554,31 @@ const { logWarning: de } = F(), bt = be({
|
|
|
553
554
|
"camera"
|
|
554
555
|
],
|
|
555
556
|
setup(e, { slots: t, expose: o }) {
|
|
556
|
-
const a =
|
|
557
|
-
return o(a), () => D(
|
|
557
|
+
const a = Ze();
|
|
558
|
+
return o(a), () => D(wt, e, t);
|
|
558
559
|
}
|
|
559
|
-
}),
|
|
560
|
+
}), Pt = {
|
|
560
561
|
install(e) {
|
|
561
|
-
e.component("TresCanvas",
|
|
562
|
+
e.component("TresCanvas", bt);
|
|
562
563
|
}
|
|
563
564
|
};
|
|
564
565
|
export {
|
|
565
|
-
|
|
566
|
+
et as CameraType,
|
|
566
567
|
Q as TRES_CONTEXT_KEY,
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
568
|
+
bt as TresCanvas,
|
|
569
|
+
Ce as catalogue,
|
|
570
|
+
Pt as default,
|
|
571
|
+
Me as extend,
|
|
572
|
+
Mt as isProd,
|
|
573
|
+
ft as trasverseObjects,
|
|
574
|
+
xe as useCamera,
|
|
575
|
+
xt as useLoader,
|
|
575
576
|
F as useLogger,
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
577
|
+
lt as useRaycaster,
|
|
578
|
+
Pe as useRenderLoop,
|
|
579
|
+
ut as useRenderer,
|
|
580
|
+
Et as useSeek,
|
|
581
|
+
Rt as useTexture,
|
|
581
582
|
B as useTres,
|
|
582
|
-
|
|
583
|
+
Ze as useTresProvider
|
|
583
584
|
};
|
package/dist/tres.umd.cjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/core
|
|
3
|
-
* version: v2.1.
|
|
3
|
+
* version: v2.1.3
|
|
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,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],c):(d=typeof globalThis<"u"?globalThis:d||self,c(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,c,m,f){"use strict";function
|
|
9
|
-
You could set windowSize=true to force the canvas to be the size of the window.`);const we=()=>{t.value&&(t.value.setSize(B.value,
|
|
8
|
+
(function(d,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],c):(d=typeof globalThis<"u"?globalThis:d||self,c(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,c,m,f){"use strict";function ye(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,a.get?a:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const ee=ye(m),te=e=>typeof e=="function",Ce=e=>typeof e=="string",ae=e=>!!e&&e.constructor===Array,$=c.ref({}),q=e=>void Object.assign($.value,e),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 Me(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,o=Math.random()*4294967295|0,a=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[o&63|128]+h[o>>8&255]+"-"+h[o>>16&255]+h[o>>24&255]+h[a&255]+h[a>>8&255]+h[a>>16&255]+h[a>>24&255]).toLowerCase()}const z=Symbol();function ne(){const e=c.shallowReactive({uuid:Me(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:c.computed(()=>window.innerWidth/window.innerHeight)});function t(n){return e[n]}function o(n,r){e[n]=r}const a={state:e,...c.toRefs(e),getState:t,setState:o};return c.provide(z,a),a}const O=()=>c.inject(z,{state:c.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});var re=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(re||{});const Se=45;let x;function K(){const{state:e,setState:t,aspectRatio:o}=O();function a(s="Perspective",l){var p,v,w;if(s==="Perspective"){const{near:P,far:_,fov:C}=l||{near:.1,far:1e3,fov:Se};x=new m.PerspectiveCamera(C,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,P,_),(v=e.cameras)==null||v.push(x)}else{const{left:P,right:_,top:C,bottom:V,near:y,far:L}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};x=new m.OrthographicCamera(P,_,C,V,y,L),(w=e.cameras)==null||w.push(x)}return e.camera=x,t("camera",e.camera),x}function n(){var s;e.camera instanceof m.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(s=e.camera)==null||s.updateProjectionMatrix()}function r(s){var l;(l=e.cameras)==null||l.push(s),s instanceof m.PerspectiveCamera&&e.aspectRatio&&(s.aspect=e.aspectRatio.value),s.updateProjectionMatrix(),t("camera",s)}function u(s){var l;((l=e.cameras)==null?void 0:l.length)===0&&r(s)}function i(){e.cameras=[]}return c.watchEffect(()=>{o!=null&&o.value&&n()}),{activeCamera:c.toRef(e,"camera"),createCamera:a,updateCamera:n,pushCamera:r,clearCameras:i,setFirstCamera:u}}const oe=f.createEventHook(),ie=f.createEventHook(),X=f.createEventHook(),I=new m.Clock;let E=0,W=0;const{pause:Pe,resume:_e,isActive:Le}=f.useRafFn(()=>{oe.trigger({delta:E,elapsed:W,clock:I}),ie.trigger({delta:E,elapsed:W,clock:I}),X.trigger({delta:E,elapsed:W,clock:I})},{immediate:!1});X.on(()=>{E=I.getDelta(),W=I.getElapsedTime()});function J(){return{onBeforeLoop:oe.on,onLoop:ie.on,onAfterLoop:X.on,pause:Pe,resume:_e,isActive:Le}}function Ae(e){return e instanceof m.Color?e:Array.isArray(e)?new m.Color(...e):new m.Color(e)}const Q={realistic:{outputColorSpace:m.SRGBColorSpace,toneMapping:m.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:m.PCFSoftShadowMap}}},se=(e,t)=>{for(const o of Object.keys(t))t[o]instanceof Object&&Object.assign(t[o],se(e[o],t[o]));return Object.assign(e||{},t),e},Oe=xe("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 N(e){return e.replace(/-([a-z])/g,(t,o)=>o.toUpperCase())}function xe(e,t){const o=Object.create(null),a=e.split(",");for(let n=0;n<a.length;n++)o[a[n]]=!0;return t?n=>!!o[n.toLowerCase()]:n=>!!o[n]}const Te=!0,ce="[TresJS ▲ ■ ●] ";function T(){function e(a,n){console.error(`${ce} ${a}`,n||"")}function t(a){console.warn(`${ce} ${a}`)}function o(a,n){}return{logError:e,logWarning:t,logMessage:o}}function ue(e){const t=c.shallowRef(),o=c.ref(!1),{alpha:a=!0,antialias:n=!0,depth:r,logarithmicDepthBuffer:u,failIfMajorPerformanceCaveat:i,precision:s,premultipliedAlpha:l,stencil:p,shadows:v=!1,shadowMapType:w=m.PCFShadowMap,useLegacyLights:P=!1,outputColorSpace:_=m.LinearSRGBColorSpace,toneMapping:C=m.NoToneMapping,toneMappingExposure:V=1,context:y=void 0,powerPreference:L="default",preserveDrawingBuffer:H=!1,clearColor:S,windowSize:g=!1,preset:A=void 0}=c.toRefs(e),{state:b,setState:M}=O(),{width:B,height:F}=f.toValue(g)==!0||f.toValue(g)===""||f.toValue(g)==="true"?f.useWindowSize():f.useElementSize(b.container),{logError:R,logWarning:U}=T(),{pixelRatio:G}=f.useDevicePixelRatio(),{pause:k,resume:Y}=J(),j=c.computed(()=>B.value/F.value);setTimeout(()=>{!f.toValue(g)&&!b.canvas.value.offsetHeight&&U(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
|
|
9
|
+
You could set windowSize=true to force the canvas to be the size of the window.`)},1e3);const we=()=>{t.value&&(t.value.setSize(B.value,F.value),t.value.setPixelRatio(Math.min(G.value,2)))},be=()=>{if(!t.value)return;const D=f.toValue(A);if(D){D in Q||R("Renderer Preset must be one of these: "+Object.keys(Q).join(", ")),se(t.value,Q[D]);return}t.value.shadowMap.enabled=f.toValue(v),t.value.shadowMap.type=f.toValue(w),t.value.toneMapping=f.toValue(C)||m.NoToneMapping,t.value.toneMappingExposure=f.toValue(V),t.value.outputColorSpace=f.toValue(_)||m.LinearSRGBColorSpace,S!=null&&S.value&&t.value.setClearColor(Ae(f.toValue(S))),t.value.useLegacyLights=f.toValue(P)},Ee=()=>{const D=f.unrefElement(b.canvas);D&&(t.value=new m.WebGLRenderer({canvas:D,alpha:f.toValue(a),antialias:f.toValue(n),context:f.toValue(y),depth:f.toValue(r),failIfMajorPerformanceCaveat:f.toValue(i),logarithmicDepthBuffer:f.toValue(u),powerPreference:f.toValue(L),precision:f.toValue(s),stencil:f.toValue(p),preserveDrawingBuffer:f.toValue(H),premultipliedAlpha:f.toValue(l)}),M("renderer",t.value),M("clock",new m.Clock),M("aspectRatio",j),be(),we(),Y(),o.value=!0)},We=()=>{t.value&&(t.value.dispose(),t.value=void 0,o.value=!1,k())};return c.watch([j,G],we),c.watch([v,w,_,P,C,V,S],be),c.watch(()=>[b.canvas,b.container],()=>{f.unrefElement(b.canvas)&&f.unrefElement(b.container)&&Ee()},{immediate:!0,deep:!0}),{renderer:t,isReady:o,dispose:We,aspectRatio:j}}function fe(e){const t={nodes:{},materials:{}};return e&&e.traverse(o=>{o.name&&(t.nodes[o.name]=o),o.material&&!t.materials[o.material.name]&&(t.materials[o.material.name]=o.material)}),t}async function Ve(e,t,o,a,n){const{logError:r}=T(),u=new e;n&&n(u),o&&o(u);const s=(Array.isArray(t)?t:[t]).map(l=>new Promise((p,v)=>{u.load(l,w=>{w.scene&&Object.assign(w,fe(w.scene)),p(w)},a,w=>v(r("[useLoader] - Failed to load resource",w)))}));return ae(t)?await Promise.all(s):await s[0]}async function Re(e){const t=new m.LoadingManager,o=new m.TextureLoader(t),a=n=>new Promise((r,u)=>{o.load(n,i=>r(i),()=>null,()=>{u(new Error("[useTextures] - Failed to load texture"))})});if(ae(e)){const n=await Promise.all(e.map(r=>a(r)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:r,normalMap:u,roughnessMap:i,metalnessMap:s,aoMap:l,alphaMap:p,matcap:v}=e;return{map:n?await a(n):null,displacementMap:r?await a(r):null,normalMap:u?await a(u):null,roughnessMap:i?await a(i):null,metalnessMap:s?await a(s):null,aoMap:l?await a(l):null,alphaMap:p?await a(p):null,matcap:v?await a(v):null}}}function le(){var u;const e=c.shallowRef(new m.Raycaster),t=c.ref(new m.Vector2),o=c.ref(null),{setState:a,state:n}=O();a("raycaster",e.value),a("pointer",t),a("currentInstance",o);function r(i){t.value.x=i.clientX/window.innerWidth*2-1,t.value.y=-(i.clientY/window.innerHeight)*2+1}return(u=n==null?void 0:n.renderer)==null||u.domElement.addEventListener("pointermove",r),c.onUnmounted(()=>{var i;(i=n==null?void 0:n.renderer)==null||i.domElement.removeEventListener("pointermove",r)}),{raycaster:e,pointer:t}}function ke(){const{logWarning:e}=T();function t(a,n,r){let u=null;return a.traverse(i=>{i[n]===r&&(u=i)}),u||e(`Child with ${n} '${r}' not found.`),u}function o(a,n){return t(a,"name",n)}return{seek:t,seekByName:o}}const je=/^on[^a-z]/,De=e=>je.test(e);function Ue(e){}let Z=null,de=null;const me={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp"},{logError:pe}=T();let ve=!0;const Ie={createElement(e,t,o,a){var s,l;if(a||(a={}),a.args||(a.args=[]),e==="template"||Oe(e))return null;let n=e.replace("Tres",""),r;if(e==="primitive"){(a==null?void 0:a.object)===void 0&&pe("Tres primitives need a prop 'object'");const p=a.object;n=p.type,r=Object.assign(p,{type:n,attach:a.attach,primitive:!0})}else{const p=$.value[n];p||pe(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`),r=new p(...a.args)}if(r.isCamera&&ve){a!=null&&a.position||r.position.set(3,3,3),a!=null&&a.lookAt||r.lookAt(0,0,0);const{setFirstCamera:p}=K();p(r),ve=!1}(a==null?void 0:a.attach)===void 0&&(r.isMaterial?r.attach="material":r.isBufferGeometry&&(r.attach="geometry"));const{GEOMETRY_VIA_PROP:u,MATERIAL_VIA_PROP:i}=me;return r.isObject3D&&((s=a==null?void 0:a.material)!=null&&s.isMaterial&&(r.userData[i]=!0),(l=a==null?void 0:a.geometry)!=null&&l.isBufferGeometry&&(r.userData[u]=!0)),r.events={},r},insert(e,t){var o,a,n,r,u;if(t&&t.isScene&&(de=t),(((o=e==null?void 0:e.__vnode)==null?void 0:o.type)==="TresGroup"||((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresObject3D")&&t===null&&!((r=(n=e==null?void 0:e.__vnode)==null?void 0:n.ctx)!=null&&r.asyncResolved)){Z=e;return}else(u=e==null?void 0:e.__vnode)!=null&&u.type.includes("Controls")&&t===null&&(Z=de);t||(t=Z),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"})):e!=null&&e.isFog?t.fog=e:typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e))},remove(e){var t,o;if(e){if(e.isObject3D){const a=e,n=r=>{var s,l;const{GEOMETRY_VIA_PROP:u,MATERIAL_VIA_PROP:i}=me;r.userData[i]||(s=r.material)==null||s.dispose(),r.userData[u]||(l=r.geometry)==null||l.dispose()};a.traverse(r=>n(r)),n(a)}(t=e.removeFromParent)==null||t.call(e),(o=e.dispose)==null||o.call(e)}},patchProp(e,t,o,a){if(e){let n=e,r=t,u=N(r),i=n==null?void 0:n[u];if(n.type==="BufferGeometry"){if(r==="args")return;n.setAttribute(N(r),new m.BufferAttribute(...a));return}if(r.includes("-")&&i===void 0){const l=r.split("-");i=l.reduce((p,v)=>p[N(v)],n),r=l.pop(),u=r.toLowerCase(),i!=null&&i.set||(n=l.reduce((p,v)=>p[N(v)],n))}if(De(r)){const l=r;e.events[l]=a}let s=a;if(s===""&&(s=!0),te(i)){Array.isArray(s)?e[u](...s):e[u](s);return}!(i!=null&&i.set)&&!te(i)?n[u]=s:i.constructor===s.constructor&&(i!=null&&i.copy)?i==null||i.copy(s):Array.isArray(s)?i.set(...s):!i.isColor&&i.setScalar?i.setScalar(s):i.set(s)}},parentNode(e){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{createApp:Be}=c.createRenderer(Ie),Fe=e=>{const t=Be(o);function o(){return e&&e.default?e.default():[]}return t};q(ee);const{logWarning:ge}=T(),Ge=c.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:o}){e.physicallyCorrectLights===!0&&ge("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=c.ref(),n=c.ref(),r=new ee.Scene,{setState:u}=O();u("scene",r),u("canvas",n),u("container",a);const i=c.ref(),s=t&&t.default&&t.default();s&&(s==null?void 0:s.length)>0&&(i.value=s.some(y=>Ce(y.type)&&y.type.includes("Camera"))||e.camera,i.value||ge("No camera found in the scene, please add one!"));const{onLoop:l,resume:p}=J();c.onMounted(()=>{_()}),c.onUnmounted(()=>{u("renderer",null)});const{activeCamera:v,pushCamera:w,clearCameras:P}=K();function _(){const{renderer:y}=ue(e);e.camera&&w(e.camera);const{raycaster:L,pointer:H}=le();let S=null,g=null;c.watchEffect(()=>{v.value&&L.value.setFromCamera(H.value,v.value)}),l(()=>{var A,b,M,B,F,R,U,G,k,Y;if(v.value&&e.disableRender!==!0&&((A=y.value)==null||A.render(r,v.value)),L.value){const j=L.value.intersectObjects(r.children);j.length>0?(g=j[0],S===null&&((B=(M=(b=g.object)==null?void 0:b.events)==null?void 0:M.onPointerEnter)==null||B.call(M,g)),(U=(R=(F=g.object)==null?void 0:F.events)==null?void 0:R.onPointerMove)==null||U.call(R,g)):S!==null&&((Y=(k=(G=g==null?void 0:g.object)==null?void 0:G.events)==null?void 0:k.onPointerLeave)==null||Y.call(k,S),g=null),S=g}}),f.useEventListener(n.value,"click",()=>{var A,b,M;g!==null&&((M=(b=(A=g.object)==null?void 0:A.events)==null?void 0:b.onClick)==null||M.call(b,g))})}let C;function V(){C=Fe(t);const y=O();C.provide("useTres",y),C.provide(z,y),C.provide("extend",q),C.mount(r)}return V(),o({scene:r}),c.watch(()=>e.camera,y=>{y&&(P(),w(y))}),()=>c.h(c.h("div",{ref:a,"data-scene":r.uuid,key:r.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[c.h("div",{style:{width:"100%",height:"100%"}},[c.h("canvas",{ref:n,"data-scene":r.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),he=c.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:o}){const a=ne();return o(a),()=>c.h(Ge,e,t)}}),ze={install(e){e.component("TresCanvas",he)}};d.CameraType=re,d.TRES_CONTEXT_KEY=z,d.TresCanvas=he,d.catalogue=$,d.default=ze,d.extend=q,d.isProd=Te,d.trasverseObjects=fe,d.useCamera=K,d.useLoader=Ve,d.useLogger=T,d.useRaycaster=le,d.useRenderLoop=J,d.useRenderer=ue,d.useSeek=ke,d.useTexture=Re,d.useTres=O,d.useTresProvider=ne,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/types/index.d.ts
CHANGED
|
@@ -142,6 +142,7 @@ type TresComponents = {
|
|
|
142
142
|
[K in keyof ThreeInstances as `Tres${Capitalize<string & K>}`]: DefineComponent<ThreeInstances[K]>;
|
|
143
143
|
};
|
|
144
144
|
declare module 'vue' {
|
|
145
|
-
|
|
145
|
+
interface GlobalComponents extends TresComponents {
|
|
146
|
+
}
|
|
146
147
|
}
|
|
147
148
|
export {};
|
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.1.
|
|
4
|
+
"version": "2.1.3",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"packageManager": "pnpm@8.3.1",
|
|
7
7
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
@@ -57,51 +57,51 @@
|
|
|
57
57
|
"docs:serve": "vitepress serve docs"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
|
-
"three": "
|
|
61
|
-
"vue": "
|
|
60
|
+
"three": ">=0.133",
|
|
61
|
+
"vue": ">=3.3"
|
|
62
62
|
},
|
|
63
63
|
"dependencies": {
|
|
64
|
-
"@alvarosabu/utils": "^
|
|
65
|
-
"@vueuse/core": "^10.1.2"
|
|
66
|
-
"vue": "^3.3.4"
|
|
64
|
+
"@alvarosabu/utils": "^3.0.0",
|
|
65
|
+
"@vueuse/core": "^10.1.2"
|
|
67
66
|
},
|
|
68
67
|
"devDependencies": {
|
|
68
|
+
"vue": "^3.3.4",
|
|
69
69
|
"@alvarosabu/prettier-config": "^1.3.0",
|
|
70
70
|
"@huntersofbook/plausible-vue": "^1.0.0",
|
|
71
71
|
"@release-it/conventional-changelog": "^5.1.1",
|
|
72
72
|
"@stackblitz/sdk": "^1.9.0",
|
|
73
|
-
"@tresjs/cientos": "2.
|
|
74
|
-
"@types/three": "^0.152.
|
|
75
|
-
"@typescript-eslint/eslint-plugin": "^5.59.
|
|
76
|
-
"@typescript-eslint/parser": "^5.59.
|
|
73
|
+
"@tresjs/cientos": "2.1.3",
|
|
74
|
+
"@types/three": "^0.152.1",
|
|
75
|
+
"@typescript-eslint/eslint-plugin": "^5.59.11",
|
|
76
|
+
"@typescript-eslint/parser": "^5.59.11",
|
|
77
77
|
"@vitejs/plugin-vue": "^4.2.3",
|
|
78
|
-
"@vitest/coverage-c8": "^0.
|
|
79
|
-
"@vitest/ui": "^0.
|
|
78
|
+
"@vitest/coverage-c8": "^0.32.0",
|
|
79
|
+
"@vitest/ui": "^0.32.0",
|
|
80
80
|
"@vue/test-utils": "^2.3.2",
|
|
81
|
-
"eslint": "^8.
|
|
81
|
+
"eslint": "^8.42.0",
|
|
82
82
|
"eslint-config-prettier": "^8.8.0",
|
|
83
|
-
"eslint-plugin-vue": "^9.14.
|
|
84
|
-
"gsap": "^3.
|
|
85
|
-
"jsdom": "^22.
|
|
83
|
+
"eslint-plugin-vue": "^9.14.1",
|
|
84
|
+
"gsap": "^3.12.1",
|
|
85
|
+
"jsdom": "^22.1.0",
|
|
86
86
|
"kolorist": "^1.8.0",
|
|
87
|
-
"pathe": "^1.1.
|
|
87
|
+
"pathe": "^1.1.1",
|
|
88
88
|
"prettier": "^2.8.8",
|
|
89
|
-
"release-it": "^15.
|
|
89
|
+
"release-it": "^15.11.0",
|
|
90
90
|
"rollup-plugin-analyzer": "^4.0.0",
|
|
91
91
|
"rollup-plugin-copy": "^3.4.0",
|
|
92
|
-
"rollup-plugin-visualizer": "^5.9.
|
|
93
|
-
"three": "^0.
|
|
94
|
-
"unocss": "^0.
|
|
92
|
+
"rollup-plugin-visualizer": "^5.9.2",
|
|
93
|
+
"three": "^0.153.0",
|
|
94
|
+
"unocss": "^0.53.1",
|
|
95
95
|
"unplugin": "^1.3.1",
|
|
96
|
-
"unplugin-vue-components": "^0.
|
|
97
|
-
"vite": "^4.3.
|
|
96
|
+
"unplugin-vue-components": "^0.25.1",
|
|
97
|
+
"vite": "^4.3.9",
|
|
98
98
|
"vite-plugin-banner": "^0.7.0",
|
|
99
99
|
"vite-plugin-dts": "2.3.0",
|
|
100
|
-
"vite-plugin-inspect": "^0.7.
|
|
101
|
-
"vite-plugin-require-transform": "^1.0.
|
|
100
|
+
"vite-plugin-inspect": "^0.7.28",
|
|
101
|
+
"vite-plugin-require-transform": "^1.0.17",
|
|
102
102
|
"vite-svg-loader": "^4.0.0",
|
|
103
|
-
"vitepress": "1.0.0-
|
|
104
|
-
"vitest": "^0.
|
|
105
|
-
"vue-demi": "^0.14.
|
|
103
|
+
"vitepress": "1.0.0-beta.2",
|
|
104
|
+
"vitest": "^0.32.0",
|
|
105
|
+
"vue-demi": "^0.14.5"
|
|
106
106
|
}
|
|
107
107
|
}
|