Поддержка зума, с возможными границами из конфигурации

Author: CAPCHIK

CHANGELOG.md

@@ -1,4 +1,5 @@
 * `0.9.28`
+  * ✨ Поддержка зума через колесико мыши
   * 🔨 Поддержка вращения камеры при работе с редактором
 * `0.9.27`
   * 🐛 Исправлена возможность хостить экскурсию по подпути

ReleaseNotes.md

@@ -1 +1,2 @@
+* ✨ Поддержка зума через колесико мыши
 * 🔨 Поддержка вращения камеры при работе с редактором

src/Configuration/Configuration.ts

@@ -3,6 +3,8 @@ export class Configuration {
     public logoUrl: string;
     public bottomImage: BottomImageConfiguration | null = null;
     public forceInputProfileWebXr: string | null;
+    public minFOV?: number;
+    public maxFOV?: number;
 }
 export class BottomImageConfiguration {
     public url: string;

src/Viewer.ts

@@ -38,7 +38,7 @@ import "@babylonjs/core/Culling/ray"; // нужно для работы клик
 import { PrefetchResourcesManager } from "./Models/PrefetchResourcesManager";
 import { WebXRInterface } from "./AsyncModules/AsyncModuleInterfaces";
 import { PlayAudioHelper } from "./WorkWithAudio/PlayAudioHelper";
-import { KeyboardEventTypes } from "@babylonjs/core";
+import { KeyboardEventTypes, PointerEventTypes } from "@babylonjs/core";
 
 export class Viewer {
   private currentImage: DynamicPhotoDome | null = null;
@@ -68,7 +68,7 @@ export class Viewer {
 
   private backgroundRadius = 500;
 
-  public createScene() {
+  public createScene(minFov?: number, maxFov?: number) {
     const canvas = document.querySelector("#renderCanvas") as HTMLCanvasElement;
     this.canvas = canvas;
     const engine = new Engine(canvas, true, {
@@ -145,6 +145,7 @@ export class Viewer {
     camera.angularSensibility = -10000;
     camera.attachControl(canvas, true);
     camera.inputs.addGamepad();
+    camera.fov = 1;
     this.freeCamera = camera;
 
     if ("xr" in window.navigator) {
@@ -173,6 +174,20 @@ export class Viewer {
 
     scene.actionManager = new ActionManager(scene);
 
+    scene.onPointerObservable.add(e => {
+      const event = e.event as WheelEvent;
+      let fov = this.freeCamera.fov;
+      if (event.deltaY > 0) {
+        fov += 0.1;
+      } else {
+        fov -= 0.1;
+      }
+      minFov = minFov ?? 0.8;
+      maxFov = maxFov ?? 1.8;
+      fov = Math.max(Math.min(fov, maxFov), minFov);
+      this.freeCamera.fov = fov;
+    }, PointerEventTypes.POINTERWHEEL);
+
     if (BuildConfiguration.NeedDebugLayer) {
       import("./AsyncModules/InspectorLogic").then((module) => {
         module.InspectorLogic.registerInspector(scene);

src/index.ts

@@ -16,7 +16,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   }
   const configuration = (await configurationResponse.json()) as Configuration;
   const viewer = new Viewer(configuration);
-  viewer.createScene();
+  viewer.createScene(configuration.minFOV, configuration.maxFOV);
   (document as any).viewer = viewer;
   try {
     if (configuration.sceneUrl && !configuration.sceneUrl.endsWith("/")) {