From fae6578f7d877e552e4865c798856f818ed15174 Mon Sep 17 00:00:00 2001
From: Donovan Hutchence <slimbuck7@gmail.com>
Date: Fri, 6 Dec 2024 13:35:39 +0000
Subject: [PATCH] Use camera fov when exporting html viewer (#315)

---
 src/splat-serialize.ts                |  6 ++++--
 src/templates/viewer-html-template.ts | 19 ++++++++++++-------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/splat-serialize.ts b/src/splat-serialize.ts
index f18033b4..fb06cc15 100644
--- a/src/splat-serialize.ts
+++ b/src/splat-serialize.ts
@@ -912,6 +912,7 @@ const serializeViewer = async (splats: Splat[], write: WriteFunc) => {
 
     // use camera clear color
     const bgClr = events.invoke('bgClr');
+    const fov = events.invoke('camera.fov');
     const pose = events.invoke('camera.poses')?.[0];
     const p = pose && pose.position;
     const t = pose && pose.target;
@@ -919,9 +920,10 @@ const serializeViewer = async (splats: Splat[], write: WriteFunc) => {
     const html = ViewerHtmlTemplate
     .replace('{{backgroundColor}}', `rgb(${bgClr.r * 255} ${bgClr.g * 255} ${bgClr.b * 255})`)
     .replace('{{clearColor}}', `${bgClr.r} ${bgClr.g} ${bgClr.b}`)
-    .replace('{{plyModel}}', plyModel)
+    .replace('{{fov}}', `${fov.toFixed(2)}`)
     .replace('{{resetPosition}}', pose ? `new Vec3(${p.x}, ${p.y}, ${p.z})` : 'null')
-    .replace('{{resetTarget}}', pose ? `new Vec3(${t.x}, ${t.y}, ${t.z})` : 'null');
+    .replace('{{resetTarget}}', pose ? `new Vec3(${t.x}, ${t.y}, ${t.z})` : 'null')
+    .replace('{{plyModel}}', plyModel);
 
     await write(new TextEncoder().encode(html), true);
 };
diff --git a/src/templates/viewer-html-template.ts b/src/templates/viewer-html-template.ts
index ba2d212c..6ddb2b4b 100644
--- a/src/templates/viewer-html-template.ts
+++ b/src/templates/viewer-html-template.ts
@@ -94,7 +94,7 @@ const template = /* html */ `
                 <!-- Camera (with XR support) -->
                 <pc-entity name="camera root">
                     <pc-entity name="camera">
-                        <pc-camera clear-color="{{clearColor}}"></pc-camera>
+                        <pc-camera clear-color="{{clearColor}}" fov="{{fov}}"></pc-camera>
                         <pc-scripts>
                             <pc-script name="cameraControls"></pc-script>
                         </pc-scripts>
@@ -124,19 +124,19 @@ const template = /* html */ `
                 <h3>Controls</h3>
                 <div class="control-item">
                     <span class="control-action">Orbit</span>
-                    <span class="control-key">Left mouse button</span>
+                    <span class="control-key">Left Mouse Button</span>
                 </div>
                 <div class="control-item">
                     <span class="control-action">Pan</span>
-                    <span class="control-key">Middle mouse button</span>
+                    <span class="control-key">Middle Mouse Button</span>
                 </div>
                 <div class="control-item">
                     <span class="control-action">Look around</span>
-                    <span class="control-key">Right mouse button</span>
+                    <span class="control-key">Right Mouse Button</span>
                 </div>
                 <div class="control-item">
                     <span class="control-action">Zoom</span>
-                    <span class="control-key">Mouse wheel</span>
+                    <span class="control-key">Mouse Wheel</span>
                 </div>
                 <div class="control-item">
                     <span class="control-action">Fly</span>
@@ -151,11 +151,11 @@ const template = /* html */ `
                     <span class="control-key">Ctrl</span>
                 </div>
                 <div class="control-item">
-                    <span class="control-action">Frame the scene</span>
+                    <span class="control-action">Frame Scene</span>
                     <span class="control-key">F</span>
                 </div>
                 <div class="control-item">
-                    <span class="control-action">Return to origin</span>
+                    <span class="control-action">Reset Camera</span>
                     <span class="control-key">R</span>
                 </div>
             </div>
@@ -198,6 +198,11 @@ const template = /* html */ `
 
                         const bbox = this.calcBound();
 
+                        // configure camera
+                        this.entity.camera.horizontalFov = true;
+                        this.entity.camera.farClip = bbox.halfExtents.length() * 20;
+                        this.entity.camera.nearClip = this.entity.camera.farClip * 0.001;
+
                         if (bbox.halfExtents.length() > 100 || resetPosition || resetTarget) {
                             this.resetCamera(bbox);
                         } else {