diff --git a/src/splat-serialize.ts b/src/splat-serialize.ts index c3c6399a..f18033b4 100644 --- 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 index 3bacd266..ba2d212c 100644 --- 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);