From 657582e54a42e59fce71be75490d01556ae5b12a Mon Sep 17 00:00:00 2001
From: Donovan Hutchence <slimbuck7@gmail.com>
Date: Thu, 31 Oct 2024 10:03:10 +0000
Subject: [PATCH] update export camera

---
 src/png-compressor.ts                 |  2 +-
 src/templates/viewer-html-template.ts | 46 ++++++++++++++++++++-------
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/png-compressor.ts b/src/png-compressor.ts
index 37f1582..e4f22bf 100644
--- a/src/png-compressor.ts
+++ b/src/png-compressor.ts
@@ -67,7 +67,7 @@ class PngCompressor {
     compress: (pixels: Uint32Array, width: number, height: number) => Promise<ArrayBuffer>;
 
     constructor() {
-        const urlBase = new URL('/static/lib/lodepng', document.baseURI);
+        const urlBase = new URL('static/lib/lodepng', document.baseURI);
         const workerBlob = new Blob([`(${WORKER_STR})('${urlBase}')\n\n`], {
             type: 'application/javascript'
         });
diff --git a/src/templates/viewer-html-template.ts b/src/templates/viewer-html-template.ts
index 744795a..83e4402 100644
--- a/src/templates/viewer-html-template.ts
+++ b/src/templates/viewer-html-template.ts
@@ -30,26 +30,48 @@ const template = /* html */ `
                 const app = await Application.getApplication();
                 registerScript(MultiCamera, 'multiCamera');
 
-                const camera = document.querySelector('pc-entity[name="camera"]');
                 await new Promise(resolve => setTimeout(resolve));
-                const multiCamera = camera.entity.script.multiCamera;
 
-                const frameScene = () => {
-                    const gsplatComponents = app.root.findComponents('gsplat');
-                    const bbox = gsplatComponents?.[0]?.instance?.meshInstance?.aabb ?? new BoundingBox();
+                const multiCamera = document.querySelector('pc-entity[name="camera"]').entity.script.multiCamera;
+
+                const frameScene = (bbox) => {
+                    const sceneSize = bbox.halfExtents.length();
+                    multiCamera.sceneSize = sceneSize * 0.2;
+                    multiCamera.focus(bbox.center, new Vec3(2, 1, 2).normalize().mulScalar(multiCamera.sceneSize * 3).add(bbox.center));
+                };
 
-                    multiCamera.sceneSize = bbox.halfExtents.length() * 0.2;
+                const resetCamera = (bbox) => {
+                    const sceneSize = bbox.halfExtents.length();
+                    multiCamera.sceneSize = sceneSize * 0.2;
                     multiCamera.focus(Vec3.ZERO, new Vec3(2, 1, 2));
                 };
 
-                window.addEventListener('keydown', (e) => {
-                    if (e.key === 'f') {
-                        frameScene();
-                    }
-                });
+                const calcBound = () => {
+                    const gsplatComponents = app.root.findComponents('gsplat');
+                    return gsplatComponents?.[0]?.instance?.meshInstance?.aabb ?? new BoundingBox();
+                };
 
                 app.assets.on('load', () => {
-                    setTimeout(frameScene);
+                    setTimeout(() => {
+                        const bbox = calcBound();
+
+                        if (bbox.halfExtents.length() > 100) {
+                            resetCamera(bbox);
+                        } else {
+                            frameScene(bbox);
+                        }
+
+                        window.addEventListener('keydown', (e) => {
+                            switch (e.key) {
+                                case 'f':
+                                    frameScene(bbox);
+                                    break;
+                                case 'r':
+                                    resetCamera(bbox);
+                                    break;
+                            }
+                        });
+                    });
                 });
             </script>
             <pc-asset id="ply" type="gsplat" src="data:application/ply;base64,{{plyModel}}"></pc-asset>