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