Fix fov calc and add basics video (#260)

* fov fix * add help link to basis video
playcanvas · Nov 5, 2024 · a3cb76e · a3cb76e
1 parent fb50fa5
commit a3cb76e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/src/camera.ts b/src/camera.ts
@@ -456,7 +456,12 @@ class Camera extends Element {
     }
 
     get fovFactor() {
-        return Math.sin(this.fov * math.DEG_TO_RAD * 0.5);
+        // we set the fov of the longer axis. here we get the fov of the other (smaller) axis so framing
+        // doesn't cut off the scene.
+        const { width, height } = this.scene.targetSize;
+        const aspect = (width && height) ? this.entity.camera.horizontalFov ? height / width : width / height : 1;
+        const fov = 2 * Math.atan(Math.tan(this.fov * math.DEG_TO_RAD * 0.5) * aspect);
+        return Math.sin(fov * 0.5);
     }
 
     // intersect the scene at the given screen coordinate and focus the camera on this location

diff --git a/src/ui/localization.ts b/src/ui/localization.ts
@@ -43,6 +43,7 @@ const localizeInit = () => {
                         "help.user-guide": "Handbuch",
                         "help.log-issue": "Problem melden",
                         "help.github-repo": "GitHub Repository",
+                        "help.basics-video": "Grundlagen Video",
                         "help.discord": "Discord Server",
                         "help.forum": "Forum",
                         "help.about": "Über SuperSplat",
@@ -187,6 +188,7 @@ const localizeInit = () => {
                         "help.user-guide": "User Guide",
                         "help.log-issue": "Log an Issue",
                         "help.github-repo": "GitHub Repo",
+                        "help.basics-video": "Basics Video",
                         "help.discord": "Discord Server",
                         "help.forum": "Forum",
                         "help.about": "About SuperSplat",
@@ -331,6 +333,7 @@ const localizeInit = () => {
                         "help.user-guide": "Guide utilisateur",
                         "help.log-issue": "Signaler un problème",
                         "help.github-repo": "Dépôt GitHub",
+                        "help.basics-video": "Vidéo de base",
                         "help.discord": "Serveur Discord",
                         "help.forum": "Forum",
                         "help.about": "À propos de SuperSplat",
@@ -468,6 +471,7 @@ const localizeInit = () => {
                         "help.user-guide": "ユーザーガイド",
                         "help.log-issue": "問題を報告",
                         "help.github-repo": "GitHubリポジトリ",
+                        "help.basics-video": "基本ビデオ",
                         "help.discord": "Discordサーバー",
                         "help.forum": "フォーラム",
                         "help.about": "SuperSplatについて",
@@ -611,6 +615,7 @@ const localizeInit = () => {
                         "help.user-guide": "사용자 가이드",
                         "help.log-issue": "문제 보고",
                         "help.github-repo": "GitHub 저장소",
+                        "help.basics-video": "기본 비디오",
                         "help.discord": "Discord 서버",
                         "help.forum": "포럼",
                         "help.about": "SuperSplat 정보",
@@ -754,6 +759,7 @@ const localizeInit = () => {
                         "help.user-guide": "用户指南",
                         "help.log-issue": "报告问题",
                         "help.github-repo": "GitHub 仓库",
+                        "help.basics-video": "基础视频",
                         "help.discord": "Discord 服务器",
                         "help.forum": "论坛",
                         "help.about": "关于 SuperSplat",

diff --git a/src/ui/menu.ts b/src/ui/menu.ts
@@ -229,6 +229,12 @@ class Menu extends Container {
             onSelect: () => window.open('https://github.com/playcanvas/supersplat', '_blank').focus()
         }, {
             // separator
+        }, {
+            text: localize('help.basics-video'),
+            icon: 'E261',
+            onSelect: () => window.open('https://youtu.be/MwzaEM2I55I', '_blank').focus()
+        }, {
+            // separator
         }, {
             text: localize('help.discord'),
             icon: 'E233',