@mml-io/3d-web-client-core 0.0.0-experimental-26809cc-20240518 → 0.0.0-experimental-2404df1-20240520
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/build/camera/CameraManager.d.ts +15 -9
- package/build/index.js +247 -67
- package/build/index.js.map +4 -4
- package/build/rendering/composer.d.ts +2 -0
- package/build/tweakpane/TweakPane.d.ts +5 -1
- package/build/tweakpane/blades/cameraFolder.d.ts +68 -0
- package/build/tweakpane/blades/environmentFolder.d.ts +7 -2
- package/build/tweakpane/blades/rendererFolder.d.ts +2 -4
- package/package.json +3 -3
|
@@ -1,22 +1,26 @@
|
|
|
1
1
|
import { PerspectiveCamera, Vector3 } from "three";
|
|
2
2
|
import { CollisionsManager } from "../collisions/CollisionsManager";
|
|
3
|
+
import { TweakPane } from "../tweakpane/TweakPane";
|
|
3
4
|
export declare class CameraManager {
|
|
4
5
|
private collisionsManager;
|
|
5
6
|
readonly camera: PerspectiveCamera;
|
|
6
7
|
initialDistance: number;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
minDistance: number;
|
|
9
|
+
maxDistance: number;
|
|
10
|
+
initialFOV: number;
|
|
11
|
+
maxFOV: number;
|
|
12
|
+
minFOV: number;
|
|
13
|
+
damping: number;
|
|
14
|
+
dampingScale: number;
|
|
15
|
+
zoomScale: number;
|
|
16
|
+
invertFOVMapping: boolean;
|
|
17
|
+
fov: number;
|
|
13
18
|
private targetFOV;
|
|
14
19
|
minPolarAngle: number;
|
|
15
20
|
private maxPolarAngle;
|
|
16
|
-
private dampingFactor;
|
|
17
21
|
targetDistance: number;
|
|
18
|
-
|
|
19
|
-
|
|
22
|
+
distance: number;
|
|
23
|
+
desiredDistance: number;
|
|
20
24
|
private targetPhi;
|
|
21
25
|
private phi;
|
|
22
26
|
private targetTheta;
|
|
@@ -35,6 +39,7 @@ export declare class CameraManager {
|
|
|
35
39
|
private lastTouchX;
|
|
36
40
|
private lastTouchY;
|
|
37
41
|
constructor(targetElement: HTMLElement, collisionsManager: CollisionsManager, initialPhi?: number, initialTheta?: number);
|
|
42
|
+
setupTweakPane(tweakPane: TweakPane): void;
|
|
38
43
|
private onTouchStart;
|
|
39
44
|
private onTouchMove;
|
|
40
45
|
private onTouchEnd;
|
|
@@ -49,5 +54,6 @@ export declare class CameraManager {
|
|
|
49
54
|
dispose(): void;
|
|
50
55
|
private easeOutExpo;
|
|
51
56
|
updateAspect(aspect: number): void;
|
|
57
|
+
recomputeFoV(immediately?: boolean): void;
|
|
52
58
|
update(): void;
|
|
53
59
|
}
|
package/build/index.js
CHANGED
|
@@ -235,6 +235,124 @@ var VirtualJoystick = class _VirtualJoystick {
|
|
|
235
235
|
}
|
|
236
236
|
};
|
|
237
237
|
|
|
238
|
+
// src/tweakpane/blades/cameraFolder.ts
|
|
239
|
+
var camValues = {
|
|
240
|
+
initialDistance: 3.3,
|
|
241
|
+
minDistance: 0.1,
|
|
242
|
+
maxDistance: 8,
|
|
243
|
+
initialFOV: 60,
|
|
244
|
+
maxFOV: 85,
|
|
245
|
+
minFOV: 60,
|
|
246
|
+
invertFOVMapping: false,
|
|
247
|
+
damping: 0.091,
|
|
248
|
+
dampingScale: 0.01,
|
|
249
|
+
zoomScale: 0.01
|
|
250
|
+
};
|
|
251
|
+
var camOptions = {
|
|
252
|
+
initialDistance: { min: 1, max: 5, step: 0.1 },
|
|
253
|
+
minDistance: { min: 0.1, max: 2, step: 0.1 },
|
|
254
|
+
maxDistance: { min: 5, max: 20, step: 0.5 },
|
|
255
|
+
initialFOV: { min: 60, max: 85, step: 1 },
|
|
256
|
+
maxFOV: { min: 50, max: 100, step: 1 },
|
|
257
|
+
minFOV: { min: 50, max: 100, step: 1 },
|
|
258
|
+
damping: { min: 0.01, max: 0.15, step: 0.01 },
|
|
259
|
+
dampingScale: { min: 1e-3, max: 0.02, step: 1e-3 },
|
|
260
|
+
zoomScale: { min: 5e-3, max: 0.025, step: 1e-3 }
|
|
261
|
+
};
|
|
262
|
+
var CameraFolder = class {
|
|
263
|
+
constructor(parentFolder, expand = false) {
|
|
264
|
+
this.camData = {
|
|
265
|
+
distance: "0",
|
|
266
|
+
FoV: "0"
|
|
267
|
+
};
|
|
268
|
+
this.folder = parentFolder.addFolder({ title: "camera", expanded: expand });
|
|
269
|
+
this.folder.addBinding(this.camData, "distance", { readonly: true });
|
|
270
|
+
this.folder.addBinding(this.camData, "FoV", { readonly: true });
|
|
271
|
+
this.folder.addBinding(camValues, "initialDistance", camOptions.initialDistance);
|
|
272
|
+
this.folder.addBinding(camValues, "minDistance", camOptions.minDistance);
|
|
273
|
+
this.folder.addBinding(camValues, "maxDistance", camOptions.maxDistance);
|
|
274
|
+
this.folder.addBinding(camValues, "minFOV", camOptions.minFOV);
|
|
275
|
+
this.folder.addBinding(camValues, "maxFOV", camOptions.maxFOV);
|
|
276
|
+
this.folder.addBinding({ invertFOVMapping: camValues.invertFOVMapping }, "invertFOVMapping");
|
|
277
|
+
this.folder.addBinding(camValues, "damping", camOptions.damping);
|
|
278
|
+
this.folder.addBinding(camValues, "dampingScale", camOptions.dampingScale);
|
|
279
|
+
this.folder.addBinding(camValues, "zoomScale", camOptions.zoomScale);
|
|
280
|
+
}
|
|
281
|
+
setupChangeEvent(cameraManager) {
|
|
282
|
+
this.folder.on("change", (e) => {
|
|
283
|
+
const target = e.target.key;
|
|
284
|
+
if (!target)
|
|
285
|
+
return;
|
|
286
|
+
switch (target) {
|
|
287
|
+
case "initialDistance": {
|
|
288
|
+
const value = e.value;
|
|
289
|
+
cameraManager.initialDistance = value;
|
|
290
|
+
cameraManager.distance = value;
|
|
291
|
+
cameraManager.targetDistance = value;
|
|
292
|
+
cameraManager.desiredDistance = value;
|
|
293
|
+
cameraManager.recomputeFoV();
|
|
294
|
+
break;
|
|
295
|
+
}
|
|
296
|
+
case "minDistance": {
|
|
297
|
+
const value = e.value;
|
|
298
|
+
cameraManager.minDistance = value;
|
|
299
|
+
cameraManager.distance = value;
|
|
300
|
+
cameraManager.targetDistance = value;
|
|
301
|
+
cameraManager.desiredDistance = value;
|
|
302
|
+
cameraManager.recomputeFoV();
|
|
303
|
+
break;
|
|
304
|
+
}
|
|
305
|
+
case "maxDistance": {
|
|
306
|
+
const value = e.value;
|
|
307
|
+
cameraManager.maxDistance = value;
|
|
308
|
+
cameraManager.distance = value;
|
|
309
|
+
cameraManager.targetDistance = value;
|
|
310
|
+
cameraManager.desiredDistance = value;
|
|
311
|
+
cameraManager.recomputeFoV();
|
|
312
|
+
break;
|
|
313
|
+
}
|
|
314
|
+
case "minFOV": {
|
|
315
|
+
const value = e.value;
|
|
316
|
+
cameraManager.minFOV = value;
|
|
317
|
+
cameraManager.recomputeFoV();
|
|
318
|
+
break;
|
|
319
|
+
}
|
|
320
|
+
case "maxFOV": {
|
|
321
|
+
const value = e.value;
|
|
322
|
+
cameraManager.maxFOV = value;
|
|
323
|
+
cameraManager.recomputeFoV();
|
|
324
|
+
break;
|
|
325
|
+
}
|
|
326
|
+
case "invertFOVMapping":
|
|
327
|
+
const boolValue = e.value;
|
|
328
|
+
cameraManager.invertFOVMapping = boolValue;
|
|
329
|
+
break;
|
|
330
|
+
case "damping": {
|
|
331
|
+
const value = e.value;
|
|
332
|
+
cameraManager.damping = value;
|
|
333
|
+
break;
|
|
334
|
+
}
|
|
335
|
+
case "dampingScale": {
|
|
336
|
+
const value = e.value;
|
|
337
|
+
cameraManager.dampingScale = value;
|
|
338
|
+
break;
|
|
339
|
+
}
|
|
340
|
+
case "zoomScale": {
|
|
341
|
+
const value = e.value;
|
|
342
|
+
cameraManager.zoomScale = value;
|
|
343
|
+
break;
|
|
344
|
+
}
|
|
345
|
+
default:
|
|
346
|
+
break;
|
|
347
|
+
}
|
|
348
|
+
});
|
|
349
|
+
}
|
|
350
|
+
update(cameraManager) {
|
|
351
|
+
this.camData.distance = cameraManager.distance.toFixed(2);
|
|
352
|
+
this.camData.FoV = cameraManager.fov.toFixed(2);
|
|
353
|
+
}
|
|
354
|
+
};
|
|
355
|
+
|
|
238
356
|
// src/tweakpane/tweakPaneActivity.ts
|
|
239
357
|
var isTweakpaneActive = false;
|
|
240
358
|
function setTweakpaneActive(status) {
|
|
@@ -248,17 +366,20 @@ function getTweakpaneActive() {
|
|
|
248
366
|
var CameraManager = class {
|
|
249
367
|
constructor(targetElement, collisionsManager, initialPhi = Math.PI / 2, initialTheta = -Math.PI / 2) {
|
|
250
368
|
this.collisionsManager = collisionsManager;
|
|
251
|
-
this.initialDistance =
|
|
252
|
-
this.minDistance =
|
|
253
|
-
this.maxDistance =
|
|
254
|
-
this.initialFOV =
|
|
369
|
+
this.initialDistance = camValues.initialDistance;
|
|
370
|
+
this.minDistance = camValues.minDistance;
|
|
371
|
+
this.maxDistance = camValues.maxDistance;
|
|
372
|
+
this.initialFOV = camValues.initialFOV;
|
|
373
|
+
this.maxFOV = camValues.maxFOV;
|
|
374
|
+
this.minFOV = camValues.minFOV;
|
|
375
|
+
this.damping = camValues.damping;
|
|
376
|
+
this.dampingScale = 0.01;
|
|
377
|
+
this.zoomScale = camValues.zoomScale;
|
|
378
|
+
this.invertFOVMapping = camValues.invertFOVMapping;
|
|
255
379
|
this.fov = this.initialFOV;
|
|
256
|
-
this.minFOV = 85;
|
|
257
|
-
this.maxFOV = 60;
|
|
258
380
|
this.targetFOV = this.initialFOV;
|
|
259
381
|
this.minPolarAngle = Math.PI * 0.25;
|
|
260
382
|
this.maxPolarAngle = Math.PI * 0.95;
|
|
261
|
-
this.dampingFactor = 0.091;
|
|
262
383
|
this.targetDistance = this.initialDistance;
|
|
263
384
|
this.distance = this.initialDistance;
|
|
264
385
|
this.desiredDistance = this.initialDistance;
|
|
@@ -301,6 +422,9 @@ var CameraManager = class {
|
|
|
301
422
|
});
|
|
302
423
|
}
|
|
303
424
|
}
|
|
425
|
+
setupTweakPane(tweakPane) {
|
|
426
|
+
tweakPane.setupCamPane(this);
|
|
427
|
+
}
|
|
304
428
|
onTouchStart(evt) {
|
|
305
429
|
Array.from(evt.touches).forEach((touch) => {
|
|
306
430
|
this.dragging = true;
|
|
@@ -320,8 +444,8 @@ var CameraManager = class {
|
|
|
320
444
|
this.lastTouchX = touch.clientX;
|
|
321
445
|
this.lastTouchY = touch.clientY;
|
|
322
446
|
if (this.targetTheta !== null && this.targetPhi !== null) {
|
|
323
|
-
this.targetTheta += dx *
|
|
324
|
-
this.targetPhi -= dy *
|
|
447
|
+
this.targetTheta += dx * this.dampingScale;
|
|
448
|
+
this.targetPhi -= dy * this.dampingScale;
|
|
325
449
|
this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
|
|
326
450
|
}
|
|
327
451
|
}
|
|
@@ -345,13 +469,13 @@ var CameraManager = class {
|
|
|
345
469
|
return;
|
|
346
470
|
if (this.targetTheta === null || this.targetPhi === null)
|
|
347
471
|
return;
|
|
348
|
-
this.targetTheta += event.movementX *
|
|
349
|
-
this.targetPhi -= event.movementY *
|
|
472
|
+
this.targetTheta += event.movementX * this.dampingScale;
|
|
473
|
+
this.targetPhi -= event.movementY * this.dampingScale;
|
|
350
474
|
this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
|
|
351
475
|
event.preventDefault();
|
|
352
476
|
}
|
|
353
477
|
onMouseWheel(event) {
|
|
354
|
-
const scrollAmount = event.deltaY *
|
|
478
|
+
const scrollAmount = event.deltaY * this.zoomScale * 0.1;
|
|
355
479
|
this.targetDistance += scrollAmount;
|
|
356
480
|
this.targetDistance = Math.max(
|
|
357
481
|
this.minDistance,
|
|
@@ -390,14 +514,7 @@ var CameraManager = class {
|
|
|
390
514
|
this.theta = this.targetTheta;
|
|
391
515
|
this.distance = this.targetDistance;
|
|
392
516
|
this.desiredDistance = this.targetDistance;
|
|
393
|
-
this.
|
|
394
|
-
this.targetDistance,
|
|
395
|
-
this.minDistance,
|
|
396
|
-
this.maxDistance,
|
|
397
|
-
this.minFOV,
|
|
398
|
-
this.maxFOV
|
|
399
|
-
);
|
|
400
|
-
this.fov = this.targetFOV;
|
|
517
|
+
this.recomputeFoV(true);
|
|
401
518
|
}
|
|
402
519
|
adjustCameraPosition() {
|
|
403
520
|
const offsetDistance = 0.5;
|
|
@@ -412,7 +529,7 @@ var CameraManager = class {
|
|
|
412
529
|
this.targetDistance = cameraToPlayerDistance - firstRaycastHit[0];
|
|
413
530
|
this.distance = this.targetDistance;
|
|
414
531
|
} else {
|
|
415
|
-
this.targetDistance += (this.desiredDistance - this.targetDistance) * this.
|
|
532
|
+
this.targetDistance += (this.desiredDistance - this.targetDistance) * this.damping * 4;
|
|
416
533
|
}
|
|
417
534
|
}
|
|
418
535
|
dispose() {
|
|
@@ -424,6 +541,18 @@ var CameraManager = class {
|
|
|
424
541
|
updateAspect(aspect) {
|
|
425
542
|
this.camera.aspect = aspect;
|
|
426
543
|
}
|
|
544
|
+
recomputeFoV(immediately = false) {
|
|
545
|
+
this.targetFOV = remap(
|
|
546
|
+
this.targetDistance,
|
|
547
|
+
this.minDistance,
|
|
548
|
+
this.maxDistance,
|
|
549
|
+
this.invertFOVMapping ? this.minFOV : this.maxFOV,
|
|
550
|
+
this.invertFOVMapping ? this.maxFOV : this.minFOV
|
|
551
|
+
);
|
|
552
|
+
if (immediately) {
|
|
553
|
+
this.fov = this.targetFOV;
|
|
554
|
+
}
|
|
555
|
+
}
|
|
427
556
|
update() {
|
|
428
557
|
if (this.isLerping && this.lerpFactor < 1) {
|
|
429
558
|
this.lerpFactor += 0.01 / this.lerpDuration;
|
|
@@ -433,20 +562,14 @@ var CameraManager = class {
|
|
|
433
562
|
this.adjustCameraPosition();
|
|
434
563
|
}
|
|
435
564
|
if (this.phi !== null && this.targetPhi !== null && this.theta !== null && this.targetTheta !== null) {
|
|
436
|
-
this.distance += (this.targetDistance - this.distance) * this.
|
|
437
|
-
this.phi += (this.targetPhi - this.phi) * this.
|
|
438
|
-
this.theta += (this.targetTheta - this.theta) * this.
|
|
565
|
+
this.distance += (this.targetDistance - this.distance) * this.damping * 0.21;
|
|
566
|
+
this.phi += (this.targetPhi - this.phi) * this.damping;
|
|
567
|
+
this.theta += (this.targetTheta - this.theta) * this.damping;
|
|
439
568
|
const x = this.target.x + this.distance * Math.sin(this.phi) * Math.cos(this.theta);
|
|
440
569
|
const y = this.target.y + this.distance * Math.cos(this.phi);
|
|
441
570
|
const z = this.target.z + this.distance * Math.sin(this.phi) * Math.sin(this.theta);
|
|
442
|
-
this.
|
|
443
|
-
|
|
444
|
-
this.minDistance,
|
|
445
|
-
this.maxDistance,
|
|
446
|
-
this.minFOV,
|
|
447
|
-
this.maxFOV
|
|
448
|
-
);
|
|
449
|
-
this.fov += (this.targetFOV - this.fov) * this.dampingFactor;
|
|
571
|
+
this.recomputeFoV();
|
|
572
|
+
this.fov += (this.targetFOV - this.fov) * this.damping;
|
|
450
573
|
this.camera.fov = this.fov;
|
|
451
574
|
this.camera.updateProjectionMatrix();
|
|
452
575
|
this.camera.position.set(x, y, z);
|
|
@@ -713,7 +836,7 @@ var CharacterMaterial = class extends MeshStandardMaterial {
|
|
|
713
836
|
}
|
|
714
837
|
update() {
|
|
715
838
|
if (this.config.isLocal) {
|
|
716
|
-
this.targetAlpha = this.config.cameraManager.
|
|
839
|
+
this.targetAlpha = this.config.cameraManager.distance < 0.4 ? 0 : 1;
|
|
717
840
|
this.currentAlpha += ease(this.targetAlpha, this.currentAlpha, 0.07);
|
|
718
841
|
if (this.currentAlpha > 0.999) {
|
|
719
842
|
this.currentAlpha = 1;
|
|
@@ -2200,6 +2323,10 @@ var sunOptions = {
|
|
|
2200
2323
|
sunIntensity: { min: 0, max: 10, step: 0.1 }
|
|
2201
2324
|
};
|
|
2202
2325
|
var envValues = {
|
|
2326
|
+
hdrAzimuthalAngle: 0,
|
|
2327
|
+
hdrPolarAngle: 0,
|
|
2328
|
+
hdrIntensity: 0.8,
|
|
2329
|
+
hdrBlurriness: 0,
|
|
2203
2330
|
ambientLight: {
|
|
2204
2331
|
ambientLightIntensity: 0.27,
|
|
2205
2332
|
ambientLightColor: { r: 1, g: 1, b: 1 }
|
|
@@ -2211,6 +2338,10 @@ var envValues = {
|
|
|
2211
2338
|
}
|
|
2212
2339
|
};
|
|
2213
2340
|
var envOptions = {
|
|
2341
|
+
hdrAzimuthalAngle: { min: 0, max: 360, step: 1 },
|
|
2342
|
+
hdrPolarAngle: { min: 0, max: 360, step: 1 },
|
|
2343
|
+
hdrIntensity: { min: 0, max: 1.3, step: 0.01 },
|
|
2344
|
+
hdrBlurriness: { min: 0, max: 0.1, step: 1e-3 },
|
|
2214
2345
|
ambientLight: {
|
|
2215
2346
|
ambientLightIntensity: { min: 0, max: 1, step: 0.01 }
|
|
2216
2347
|
},
|
|
@@ -2238,7 +2369,11 @@ var EnvironmentFolder = class {
|
|
|
2238
2369
|
this.sun.addBinding(sunValues, "sunColor", {
|
|
2239
2370
|
color: { type: "float" }
|
|
2240
2371
|
});
|
|
2241
|
-
this.
|
|
2372
|
+
this.hdrButton = this.ambient.addButton({ title: "Set HDRI" });
|
|
2373
|
+
this.ambient.addBinding(envValues, "hdrIntensity", envOptions.hdrIntensity);
|
|
2374
|
+
this.ambient.addBinding(envValues, "hdrBlurriness", envOptions.hdrBlurriness);
|
|
2375
|
+
this.ambient.addBinding(envValues, "hdrAzimuthalAngle", envOptions.hdrAzimuthalAngle);
|
|
2376
|
+
this.ambient.addBinding(envValues, "hdrPolarAngle", envOptions.hdrPolarAngle);
|
|
2242
2377
|
this.ambient.addBinding(
|
|
2243
2378
|
envValues.ambientLight,
|
|
2244
2379
|
"ambientLightIntensity",
|
|
@@ -2253,7 +2388,7 @@ var EnvironmentFolder = class {
|
|
|
2253
2388
|
color: { type: "float" }
|
|
2254
2389
|
});
|
|
2255
2390
|
}
|
|
2256
|
-
setupChangeEvent(setHDR, setAmbientLight, setFog, sun) {
|
|
2391
|
+
setupChangeEvent(scene, setHDR, setHDRAzimuthalAngle, setHDRPolarAngle, setAmbientLight, setFog, sun) {
|
|
2257
2392
|
this.sun.on("change", (e) => {
|
|
2258
2393
|
const target = e.target.key;
|
|
2259
2394
|
if (!target)
|
|
@@ -2288,7 +2423,7 @@ var EnvironmentFolder = class {
|
|
|
2288
2423
|
break;
|
|
2289
2424
|
}
|
|
2290
2425
|
});
|
|
2291
|
-
this.
|
|
2426
|
+
this.hdrButton.on("click", () => {
|
|
2292
2427
|
setHDR();
|
|
2293
2428
|
});
|
|
2294
2429
|
this.ambient.on("change", (e) => {
|
|
@@ -2296,6 +2431,22 @@ var EnvironmentFolder = class {
|
|
|
2296
2431
|
if (!target)
|
|
2297
2432
|
return;
|
|
2298
2433
|
switch (target) {
|
|
2434
|
+
case "hdrAzimuthalAngle": {
|
|
2435
|
+
const value = e.value;
|
|
2436
|
+
setHDRAzimuthalAngle(value);
|
|
2437
|
+
break;
|
|
2438
|
+
}
|
|
2439
|
+
case "hdrPolarAngle": {
|
|
2440
|
+
const value = e.value;
|
|
2441
|
+
setHDRPolarAngle(value);
|
|
2442
|
+
break;
|
|
2443
|
+
}
|
|
2444
|
+
case "hdrIntensity":
|
|
2445
|
+
scene.backgroundIntensity = e.value;
|
|
2446
|
+
break;
|
|
2447
|
+
case "hdrBlurriness":
|
|
2448
|
+
scene.backgroundBlurriness = e.value;
|
|
2449
|
+
break;
|
|
2299
2450
|
case "ambientLightIntensity": {
|
|
2300
2451
|
envValues.ambientLight.ambientLightIntensity = e.value;
|
|
2301
2452
|
setAmbientLight();
|
|
@@ -2341,7 +2492,7 @@ var EnvironmentFolder = class {
|
|
|
2341
2492
|
// src/tweakpane/blades/postExtrasFolder.ts
|
|
2342
2493
|
var extrasValues = {
|
|
2343
2494
|
grain: 0.045,
|
|
2344
|
-
bloom: 0.
|
|
2495
|
+
bloom: 0.15
|
|
2345
2496
|
};
|
|
2346
2497
|
var extrasOptions = {
|
|
2347
2498
|
grain: {
|
|
@@ -2380,16 +2531,12 @@ var PostExtrasFolder = class {
|
|
|
2380
2531
|
var rendererValues = {
|
|
2381
2532
|
shadowMap: 2,
|
|
2382
2533
|
toneMapping: 5,
|
|
2383
|
-
exposure: 1.7
|
|
2384
|
-
bgIntensity: 0.8,
|
|
2385
|
-
bgBlurriness: 0
|
|
2534
|
+
exposure: 1.7
|
|
2386
2535
|
};
|
|
2387
2536
|
var rendererOptions = {
|
|
2388
2537
|
shadowMap: { min: 0, max: 2, step: 1 },
|
|
2389
2538
|
toneMapping: { min: 0, max: 5, step: 1 },
|
|
2390
|
-
exposure: { min: 0, max: 3, step: 0.01 }
|
|
2391
|
-
bgIntensity: { min: 0, max: 1.3, step: 0.01 },
|
|
2392
|
-
bgBlurriness: { min: 0, max: 0.1, step: 1e-3 }
|
|
2539
|
+
exposure: { min: 0, max: 3, step: 0.01 }
|
|
2393
2540
|
};
|
|
2394
2541
|
var shadowMapTypes = {
|
|
2395
2542
|
0: "BasicShadowMap",
|
|
@@ -2427,10 +2574,8 @@ var RendererFolder = class {
|
|
|
2427
2574
|
this.folder.addBinding(rendererValues, "toneMapping", rendererOptions.toneMapping);
|
|
2428
2575
|
this.folder.addBinding(monitoredValues, "toneMappingType", { readonly: true });
|
|
2429
2576
|
this.folder.addBinding(rendererValues, "exposure", rendererOptions.exposure);
|
|
2430
|
-
this.folder.addBinding(rendererValues, "bgIntensity", rendererOptions.bgIntensity);
|
|
2431
|
-
this.folder.addBinding(rendererValues, "bgBlurriness", rendererOptions.bgBlurriness);
|
|
2432
2577
|
}
|
|
2433
|
-
setupChangeEvent(
|
|
2578
|
+
setupChangeEvent(renderer, toneMappingFolder, toneMappingPass) {
|
|
2434
2579
|
this.folder.on("change", (e) => {
|
|
2435
2580
|
const target = e.target.key;
|
|
2436
2581
|
if (!target)
|
|
@@ -2451,12 +2596,6 @@ var RendererFolder = class {
|
|
|
2451
2596
|
case "exposure":
|
|
2452
2597
|
renderer.toneMappingExposure = e.value;
|
|
2453
2598
|
break;
|
|
2454
|
-
case "bgIntensity":
|
|
2455
|
-
scene.backgroundIntensity = e.value;
|
|
2456
|
-
break;
|
|
2457
|
-
case "bgBlurriness":
|
|
2458
|
-
scene.backgroundBlurriness = e.value;
|
|
2459
|
-
break;
|
|
2460
2599
|
default:
|
|
2461
2600
|
break;
|
|
2462
2601
|
}
|
|
@@ -2545,7 +2684,7 @@ var n8ssaoValues = {
|
|
|
2545
2684
|
halfRes: true,
|
|
2546
2685
|
aoRadius: 5,
|
|
2547
2686
|
distanceFalloff: 3,
|
|
2548
|
-
intensity: 1,
|
|
2687
|
+
intensity: 1.5,
|
|
2549
2688
|
color: { r: 0, g: 0, b: 0 },
|
|
2550
2689
|
aoSamples: 16,
|
|
2551
2690
|
denoiseSamples: 4,
|
|
@@ -2969,6 +3108,7 @@ var TweakPane = class {
|
|
|
2969
3108
|
this.postExtrasFolder = new PostExtrasFolder(this.gui, false);
|
|
2970
3109
|
this.character = new CharacterFolder(this.gui, false);
|
|
2971
3110
|
this.environment = new EnvironmentFolder(this.gui, false);
|
|
3111
|
+
this.camera = new CameraFolder(this.gui, false);
|
|
2972
3112
|
this.toneMappingFolder.folder.hidden = rendererValues.toneMapping === 5 ? false : true;
|
|
2973
3113
|
this.export = this.gui.addFolder({ title: "import / export", expanded: false });
|
|
2974
3114
|
window.addEventListener("keydown", this.processKey.bind(this));
|
|
@@ -2988,9 +3128,8 @@ var TweakPane = class {
|
|
|
2988
3128
|
if (e.key === "p")
|
|
2989
3129
|
this.toggleGUI();
|
|
2990
3130
|
}
|
|
2991
|
-
setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setAmbientLight, setFog) {
|
|
3131
|
+
setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setHDRAzimuthalAngle, setHDRPolarAngle, setAmbientLight, setFog) {
|
|
2992
3132
|
this.rendererFolder.setupChangeEvent(
|
|
2993
|
-
this.scene,
|
|
2994
3133
|
this.renderer,
|
|
2995
3134
|
this.toneMappingFolder.folder,
|
|
2996
3135
|
toneMappingPass
|
|
@@ -2999,7 +3138,15 @@ var TweakPane = class {
|
|
|
2999
3138
|
this.ssaoFolder.setupChangeEvent(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass);
|
|
3000
3139
|
this.bcsFolder.setupChangeEvent(brightnessContrastSaturation);
|
|
3001
3140
|
this.postExtrasFolder.setupChangeEvent(bloomEffect, gaussGrainEffect);
|
|
3002
|
-
this.environment.setupChangeEvent(
|
|
3141
|
+
this.environment.setupChangeEvent(
|
|
3142
|
+
this.scene,
|
|
3143
|
+
setHDR,
|
|
3144
|
+
setHDRAzimuthalAngle,
|
|
3145
|
+
setHDRPolarAngle,
|
|
3146
|
+
setAmbientLight,
|
|
3147
|
+
setFog,
|
|
3148
|
+
sun
|
|
3149
|
+
);
|
|
3003
3150
|
this.environment.folder.hidden = hasLighting === false || sun === null;
|
|
3004
3151
|
const exportButton = this.export.addButton({ title: "export" });
|
|
3005
3152
|
exportButton.on("click", () => {
|
|
@@ -3012,9 +3159,15 @@ var TweakPane = class {
|
|
|
3012
3159
|
});
|
|
3013
3160
|
});
|
|
3014
3161
|
}
|
|
3162
|
+
setupCamPane(cameraManager) {
|
|
3163
|
+
this.camera.setupChangeEvent(cameraManager);
|
|
3164
|
+
}
|
|
3015
3165
|
updateStats(timeManager) {
|
|
3016
3166
|
this.renderStatsFolder.update(this.renderer, this.composer, timeManager);
|
|
3017
3167
|
}
|
|
3168
|
+
updateCameraData(cameraManager) {
|
|
3169
|
+
this.camera.update(cameraManager);
|
|
3170
|
+
}
|
|
3018
3171
|
formatDateForFilename() {
|
|
3019
3172
|
const date = /* @__PURE__ */ new Date();
|
|
3020
3173
|
const year = date.getFullYear();
|
|
@@ -3100,7 +3253,9 @@ import {
|
|
|
3100
3253
|
Scene as Scene4,
|
|
3101
3254
|
Vector2 as Vector27,
|
|
3102
3255
|
WebGLRenderer as WebGLRenderer4,
|
|
3103
|
-
EquirectangularReflectionMapping
|
|
3256
|
+
EquirectangularReflectionMapping,
|
|
3257
|
+
MathUtils,
|
|
3258
|
+
Euler as Euler3
|
|
3104
3259
|
} from "three";
|
|
3105
3260
|
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
|
|
3106
3261
|
|
|
@@ -4667,6 +4822,8 @@ var Composer = class {
|
|
|
4667
4822
|
this.renderer.shadowMap.type = rendererValues.shadowMap;
|
|
4668
4823
|
this.renderer.toneMapping = rendererValues.toneMapping;
|
|
4669
4824
|
this.renderer.toneMappingExposure = rendererValues.exposure;
|
|
4825
|
+
this.scene.backgroundIntensity = envValues.hdrIntensity;
|
|
4826
|
+
this.scene.backgroundBlurriness = envValues.hdrBlurriness;
|
|
4670
4827
|
this.setAmbientLight();
|
|
4671
4828
|
this.setFog();
|
|
4672
4829
|
this.effectComposer = new EffectComposer2(this.renderer, {
|
|
@@ -4780,6 +4937,8 @@ var Composer = class {
|
|
|
4780
4937
|
this.spawnSun,
|
|
4781
4938
|
this.sun,
|
|
4782
4939
|
this.setHDRIFromFile.bind(this),
|
|
4940
|
+
this.setHDRAzimuthalAngle.bind(this),
|
|
4941
|
+
this.setHDRPolarAngle.bind(this),
|
|
4783
4942
|
this.setAmbientLight.bind(this),
|
|
4784
4943
|
this.setFog.bind(this)
|
|
4785
4944
|
);
|
|
@@ -4834,6 +4993,20 @@ var Composer = class {
|
|
|
4834
4993
|
this.renderer.clearDepth();
|
|
4835
4994
|
this.renderer.render(this.postPostScene, this.camera);
|
|
4836
4995
|
}
|
|
4996
|
+
setHDRAzimuthalAngle(azimuthalAngle) {
|
|
4997
|
+
this.scene.backgroundRotation = new Euler3(
|
|
4998
|
+
MathUtils.degToRad(envValues.hdrPolarAngle),
|
|
4999
|
+
MathUtils.degToRad(azimuthalAngle),
|
|
5000
|
+
0
|
|
5001
|
+
);
|
|
5002
|
+
}
|
|
5003
|
+
setHDRPolarAngle(polarAngle) {
|
|
5004
|
+
this.scene.backgroundRotation = new Euler3(
|
|
5005
|
+
MathUtils.degToRad(polarAngle),
|
|
5006
|
+
MathUtils.degToRad(envValues.hdrAzimuthalAngle),
|
|
5007
|
+
0
|
|
5008
|
+
);
|
|
5009
|
+
}
|
|
4837
5010
|
useHDRJPG(url, fromFile = false) {
|
|
4838
5011
|
const pmremGenerator = new PMREMGenerator(this.renderer);
|
|
4839
5012
|
const hdrJpg = new HDRJPGLoader(this.renderer).load(url, () => {
|
|
@@ -4845,7 +5018,13 @@ var Composer = class {
|
|
|
4845
5018
|
envMap.colorSpace = LinearSRGBColorSpace;
|
|
4846
5019
|
envMap.needsUpdate = true;
|
|
4847
5020
|
this.scene.background = envMap;
|
|
4848
|
-
this.scene.backgroundIntensity =
|
|
5021
|
+
this.scene.backgroundIntensity = envValues.hdrIntensity;
|
|
5022
|
+
this.scene.backgroundBlurriness = envValues.hdrBlurriness;
|
|
5023
|
+
this.scene.backgroundRotation = new Euler3(
|
|
5024
|
+
MathUtils.degToRad(envValues.hdrPolarAngle),
|
|
5025
|
+
MathUtils.degToRad(envValues.hdrAzimuthalAngle),
|
|
5026
|
+
0
|
|
5027
|
+
);
|
|
4849
5028
|
this.isEnvHDRI = true;
|
|
4850
5029
|
hdrJpgEquirectangularMap.dispose();
|
|
4851
5030
|
pmremGenerator.dispose();
|
|
@@ -4865,7 +5044,8 @@ var Composer = class {
|
|
|
4865
5044
|
envMap.colorSpace = LinearSRGBColorSpace;
|
|
4866
5045
|
envMap.needsUpdate = true;
|
|
4867
5046
|
this.scene.background = envMap;
|
|
4868
|
-
this.scene.backgroundIntensity =
|
|
5047
|
+
this.scene.backgroundIntensity = envValues.hdrIntensity;
|
|
5048
|
+
this.scene.backgroundBlurriness = envValues.hdrBlurriness;
|
|
4869
5049
|
this.isEnvHDRI = true;
|
|
4870
5050
|
texture.dispose();
|
|
4871
5051
|
pmremGenerator.dispose();
|
|
@@ -4989,7 +5169,7 @@ import {
|
|
|
4989
5169
|
Box3,
|
|
4990
5170
|
Color as Color8,
|
|
4991
5171
|
DoubleSide,
|
|
4992
|
-
Euler as
|
|
5172
|
+
Euler as Euler4,
|
|
4993
5173
|
Group as Group5,
|
|
4994
5174
|
Line3 as Line32,
|
|
4995
5175
|
Matrix4 as Matrix46,
|
|
@@ -4997,7 +5177,7 @@ import {
|
|
|
4997
5177
|
MeshBasicMaterial as MeshBasicMaterial3,
|
|
4998
5178
|
Quaternion as Quaternion6,
|
|
4999
5179
|
Ray as Ray2,
|
|
5000
|
-
Vector3 as
|
|
5180
|
+
Vector3 as Vector314
|
|
5001
5181
|
} from "three";
|
|
5002
5182
|
import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper.js";
|
|
5003
5183
|
import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
|
|
@@ -5005,15 +5185,15 @@ import { MeshBVH, MeshBVHHelper } from "three-mesh-bvh";
|
|
|
5005
5185
|
var CollisionsManager = class {
|
|
5006
5186
|
constructor(scene) {
|
|
5007
5187
|
this.debug = false;
|
|
5008
|
-
this.tempVector = new
|
|
5009
|
-
this.tempVector2 = new
|
|
5010
|
-
this.tempVector3 = new
|
|
5188
|
+
this.tempVector = new Vector314();
|
|
5189
|
+
this.tempVector2 = new Vector314();
|
|
5190
|
+
this.tempVector3 = new Vector314();
|
|
5011
5191
|
this.tempQuaternion = new Quaternion6();
|
|
5012
5192
|
this.tempRay = new Ray2();
|
|
5013
5193
|
this.tempMatrix = new Matrix46();
|
|
5014
5194
|
this.tempMatrix2 = new Matrix46();
|
|
5015
5195
|
this.tempBox = new Box3();
|
|
5016
|
-
this.tempEuler = new
|
|
5196
|
+
this.tempEuler = new Euler4();
|
|
5017
5197
|
this.tempSegment = new Line32();
|
|
5018
5198
|
this.tempSegment2 = new Line32();
|
|
5019
5199
|
this.collisionMeshState = /* @__PURE__ */ new Map();
|
|
@@ -5023,7 +5203,7 @@ var CollisionsManager = class {
|
|
|
5023
5203
|
raycastFirst(ray) {
|
|
5024
5204
|
let minimumDistance = null;
|
|
5025
5205
|
let minimumHit = null;
|
|
5026
|
-
let minimumNormal = new
|
|
5206
|
+
let minimumNormal = new Vector314();
|
|
5027
5207
|
for (const [, collisionMeshState] of this.collisionMeshState) {
|
|
5028
5208
|
this.tempRay.copy(ray).applyMatrix4(this.tempMatrix.copy(collisionMeshState.matrix).invert());
|
|
5029
5209
|
const hit = collisionMeshState.meshBVH.raycastFirst(this.tempRay, DoubleSide);
|
|
@@ -5164,7 +5344,7 @@ var CollisionsManager = class {
|
|
|
5164
5344
|
const realDistance = intersectionSegment.distance();
|
|
5165
5345
|
if (realDistance < capsuleRadius) {
|
|
5166
5346
|
if (!collisionPosition) {
|
|
5167
|
-
collisionPosition = new
|
|
5347
|
+
collisionPosition = new Vector314().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
|
|
5168
5348
|
}
|
|
5169
5349
|
const ratio = realDistance / modelReferenceDistance;
|
|
5170
5350
|
const realDepth = capsuleRadius - realDistance;
|