Skip to content

Commit

Permalink
Update viewer to PlayCanvas Web Components 0.1.9
Browse files Browse the repository at this point in the history
  • Loading branch information
@willeastcott
willeastcott committed Dec 5, 2024
1 parent 911d5cf commit ff63a19
Showing 1 changed file with 50 additions and 49 deletions.
99 changes: 50 additions & 49 deletions src/templates/viewer-html-template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const template = /* html */ `
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>3D Gaussian Splat Viewer</title>
<style>
* {
Expand Down Expand Up @@ -55,22 +55,24 @@ const template = /* html */ `
<script type="importmap">
{
"imports": {
"playcanvas": "https://esm.run/[email protected]",
"multi-camera": "https://cdn.jsdelivr.net/npm/[email protected]/scripts/camera/multi-camera.js"
"playcanvas": "https://cdn.jsdelivr.net/npm/[email protected]/build/playcanvas.mjs"
}
}
</script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/[email protected].7/dist/pwc.mjs"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/[email protected].9/dist/pwc.mjs"></script>
</head>
<body>
<pc-app antialias="false" depth="false" high-resolution="true" stencil="false">
<pc-asset id="ply" type="gsplat" src="data:application/ply;base64,{{plyModel}}"></pc-asset>
<pc-asset id="ply" type="gsplat" src="data:application/ply;base64,{{plyModel}} preload></pc-asset>
<pc-asset id="camera-controls" src="https://cdn.jsdelivr.net/npm/[email protected]/scripts/esm/camera-controls.mjs" preload></pc-asset>
<pc-asset id="xr-controllers" src="https://cdn.jsdelivr.net/npm/[email protected]/scripts/esm/xr-controllers.mjs" preload></pc-asset>
<pc-asset id="xr-navigation" src="https://cdn.jsdelivr.net/npm/[email protected]/scripts/esm/xr-navigation.mjs" preload></pc-asset>
<pc-scene>
<!-- Camera -->
<pc-entity name="camera">
<pc-camera clear-color="{{clearColor}}"></pc-camera>
<pc-camera clear-color="0.4 0.4 0.4"></pc-camera>
<pc-scripts>
<pc-script name="multiCamera"></pc-script>
<pc-script name="cameraControls"></pc-script>
</pc-scripts>
</pc-entity>
<!-- Splat -->
Expand All @@ -82,58 +84,57 @@ const template = /* html */ `
<!-- Camera Controls -->
<script type="module">
import { BoundingBox, registerScript, Vec3 } from 'playcanvas';
import { MultiCamera } from 'multi-camera';
import { BoundingBox, Script, Vec3 } from 'playcanvas';
const appElement = await document.querySelector('pc-app').ready();
const app = await appElement.app;
registerScript(MultiCamera, 'multiCamera');
document.addEventListener('DOMContentLoaded', async () => {
const appElement = await document.querySelector('pc-app').ready();
const app = await appElement.app;
await new Promise(resolve => setTimeout(resolve));
const entityElement = await document.querySelector('pc-entity[name="camera"]').ready();
const entity = entityElement.entity;
const entityElement = await document.querySelector('pc-entity[name="camera"]').ready();
const entity = entityElement.entity;
const multiCamera = entity.script.multiCamera;
class FrameScene extends Script {
frameScene(bbox) {
const sceneSize = bbox.halfExtents.length();
const distance = sceneSize / Math.sin(this.entity.camera.fov / 180 * Math.PI * 0.5);
this.entity.script.cameraControls.sceneSize = sceneSize;
this.entity.script.cameraControls.focus(bbox.center, new Vec3(2, 1, 2).normalize().mulScalar(distance).add(bbox.center));
}
const frameScene = (bbox) => {
const sceneSize = bbox.halfExtents.length();
const distance = sceneSize / Math.sin(entity.camera.fov / 180 * Math.PI * 0.5);
multiCamera.sceneSize = sceneSize;
multiCamera.focus(bbox.center, new Vec3(2, 1, 2).normalize().mulScalar(distance).add(bbox.center));
};
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));
}
const resetCamera = (bbox) => {
const sceneSize = bbox.halfExtents.length();
multiCamera.sceneSize = sceneSize * 0.2;
multiCamera.focus(Vec3.ZERO, new Vec3(2, 1, 2));
};
calcBound() {
const gsplatComponents = this.app.root.findComponents('gsplat');
return gsplatComponents?.[0]?.instance?.meshInstance?.aabb ?? new BoundingBox();
}
const calcBound = () => {
const gsplatComponents = app.root.findComponents('gsplat');
return gsplatComponents?.[0]?.instance?.meshInstance?.aabb ?? new BoundingBox();
};
postInitialize() {
const bbox = this.calcBound();
app.assets.on('load', () => {
setTimeout(() => {
const bbox = calcBound();
if (bbox.halfExtents.length() > 100) {
this.resetCamera(bbox);
} else {
this.frameScene(bbox);
}
if (bbox.halfExtents.length() > 100) {
resetCamera(bbox);
} else {
frameScene(bbox);
window.addEventListener('keydown', (e) => {
switch (e.key) {
case 'f':
this.frameScene(bbox);
break;
case 'r':
this.resetCamera(bbox);
break;
}
});
}
}
window.addEventListener('keydown', (e) => {
switch (e.key) {
case 'f':
frameScene(bbox);
break;
case 'r':
resetCamera(bbox);
break;
}
});
});
entity.script.create(FrameScene);
});
</script>
Expand Down

0 comments on commit ff63a19

Please sign in to comment.