Export first camera pose in html viewer (#314)

playcanvas · Dec 6, 2024 · 7c65fa5 · 7c65fa5
1 parent 19b0f2f
commit 7c65fa5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/splat-serialize.ts b/src/splat-serialize.ts
@@ -900,6 +900,8 @@ const encodeBase64 = (bytes: Uint8Array) => {
 };
 
 const serializeViewer = async (splats: Splat[], write: WriteFunc) => {
+    const { events } = splats[0].scene;
+
     // create compressed PLY data
     let compressedData: Uint8Array;
     serializePlyCompressed(splats, (data, finalWrite) => {
@@ -909,11 +911,17 @@ const serializeViewer = async (splats: Splat[], write: WriteFunc) => {
     const plyModel = encodeBase64(compressedData);
 
     // use camera clear color
-    const bgClr = splats[0].scene.events.invoke('bgClr');
+    const bgClr = events.invoke('bgClr');
+    const pose = events.invoke('camera.poses')?.[0];
+    const p = pose && pose.position;
+    const t = pose && pose.target;
+
     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('{{plyModel}}', plyModel)
+    .replace('{{resetPosition}}', pose ? `new Vec3(${p.x}, ${p.y}, ${p.z})` : 'null')
+    .replace('{{resetTarget}}', pose ? `new Vec3(${t.x}, ${t.y}, ${t.z})` : 'null');
 
     await write(new TextEncoder().encode(html), true);
 };

diff --git a/src/templates/viewer-html-template.ts b/src/templates/viewer-html-template.ts
@@ -171,6 +171,9 @@ const template = /* html */ `
                 const entityElement = await document.querySelector('pc-entity[name="camera"]').ready();
                 const entity = entityElement.entity;
 
+                const resetPosition = {{resetPosition}};
+                const resetTarget = {{resetTarget}};
+
                 class FrameScene extends Script {
                     frameScene(bbox) {
                         const sceneSize = bbox.halfExtents.length();
@@ -182,7 +185,7 @@ const template = /* html */ `
                     resetCamera(bbox) {
                         const sceneSize = bbox.halfExtents.length();
                         this.entity.script.cameraControls.sceneSize = sceneSize * 0.2;
-                        this.entity.script.cameraControls.focus(Vec3.ZERO, new Vec3(2, 1, 2));
+                        this.entity.script.cameraControls.focus(resetTarget ?? Vec3.ZERO, resetPosition ?? new Vec3(2, 1, 2));
                     }
 
                     calcBound() {
@@ -195,7 +198,7 @@ const template = /* html */ `
 
                         const bbox = this.calcBound();
 
-                        if (bbox.halfExtents.length() > 100) {
+                        if (bbox.halfExtents.length() > 100 || resetPosition || resetTarget) {
                             this.resetCamera(bbox);
                         } else {
                             this.frameScene(bbox);