Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <title>SuperSplat Viewer</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> | |
| <base href=""> | |
| <link rel="stylesheet" href="./index.css"> | |
| <script type="module"> | |
| const createImage = (url) => { | |
| const img = new Image(); | |
| img.src = url; | |
| return img; | |
| }; | |
| const url = new URL(location.href); | |
| const posterUrl = url.searchParams.get('poster'); | |
| const skyboxUrl = url.searchParams.get('skybox'); | |
| const settingsUrl = url.searchParams.has('settings') ? url.searchParams.get('settings') : './settings.json'; | |
| const contentUrl = url.searchParams.has('content') ? url.searchParams.get('content') : './scene.compressed.ply'; | |
| const sseConfig = { | |
| poster: posterUrl && createImage(posterUrl), | |
| skyboxUrl, | |
| contentUrl, | |
| contents: fetch(contentUrl), | |
| noui: url.searchParams.has('noui'), | |
| noanim: url.searchParams.has('noanim'), | |
| minimal: url.searchParams.has('minimal'), | |
| ministats: url.searchParams.has('ministats'), | |
| colorize: url.searchParams.has('colorize'), | |
| unified: url.searchParams.has('unified'), | |
| aa: url.searchParams.has('aa') | |
| }; | |
| window.sse = { | |
| config: sseConfig, | |
| settings: fetch(settingsUrl).then(response => response.json()) | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <pc-app antialias="false" depth="true" high-resolution="true" stencil="false"> | |
| <pc-scene> | |
| <!-- Camera (with XR support) --> | |
| <pc-entity name="camera root"> | |
| <pc-entity name="camera"></pc-entity> | |
| </pc-entity> | |
| <!-- Light (for XR controllers) --> | |
| <pc-entity name="light" rotation="35 45 0"> | |
| <pc-light color="white" intensity="1.5"></pc-light> | |
| </pc-entity> | |
| <!-- Splat --> | |
| <pc-entity name="splat" rotation="0 0 180"> | |
| </pc-entity> | |
| </pc-scene> | |
| </pc-app> | |
| <div id="ui"> | |
| <div id="poster"></div> | |
| <!-- Loading Indicator --> | |
| <div id="loadingWrap"> | |
| <div id="loadingText"></div> | |
| <div id="loadingBar"></div> | |
| </div> | |
| <div id="controlsWrap" class="faded-in"> | |
| <!-- Timeline Panel --> | |
| <div id="timelineContainer" class="hidden"> | |
| <div id="line"></div> | |
| <div id="handle"></div> | |
| <div id="time" class="hidden">0:00</div> | |
| </div> | |
| <!-- Buttons Panel --> | |
| <div id="buttonsContainer"> | |
| <button id="play" class="controlButton hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> | |
| <g class='stroke'><use href="#playIcon"/></g> | |
| <g class='fill'><use href="#playIcon"/></g> | |
| </svg> | |
| </button> | |
| <button id="pause" class="controlButton hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"> | |
| <g class='stroke'><use href="#pauseIcon"/></g> | |
| <g class='fill'><use href="#pauseIcon"/></g> | |
| </svg> | |
| </button> | |
| <div class="spacer"></div> | |
| <button id="orbitCamera" class="controlButton toggle left hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> | |
| <g class='stroke'><use href="#orbitIcon"/></g> | |
| <g class='fill'><use href="#orbitIcon"/></g> | |
| </svg> | |
| </button> | |
| <button id="flyCamera" class="controlButton toggle right hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> | |
| <g class='stroke'><use href="#flyIcon"/></g> | |
| <g class='fill'><use href="#flyIcon"/></g> | |
| </svg> | |
| </button> | |
| <button id="arMode" class="controlButton hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"> | |
| <g class='stroke'><use href="#arIcon"/></g> | |
| <g class='fill'><use href="#arIcon"/></g> | |
| </svg> | |
| </button> | |
| <button id="vrMode" class="controlButton hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"> | |
| <g class='stroke'><use href="#vrIcon"/></g> | |
| <g class='fill'><use href="#vrIcon"/></g> | |
| </svg> | |
| </button> | |
| <button id="info" class="controlButton"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> | |
| <g class='stroke'><use href="#infoIcon"/></g> | |
| <g class='fill'><use href="#infoIcon"/></g> | |
| </svg> | |
| </button> | |
| <button id="settings" class="controlButton"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> | |
| <g class='stroke'><use href="#settingsIcon"/></g> | |
| <g class='fill'><use href="#settingsIcon"/></g> | |
| </svg> | |
| </button> | |
| <button id="enterFullscreen" class="controlButton"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> | |
| <g class='stroke'><use href="#enterFullscreenIcon"/></g> | |
| <g class='fill'><use href="#enterFullscreenIcon"/></g> | |
| </svg> | |
| </button> | |
| <button id="exitFullscreen" class="controlButton hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> | |
| <g class='stroke'><use href="#exitFullscreenIcon"/></g> | |
| <g class='fill'><use href="#exitFullscreenIcon"/></g> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Settings Panel --> | |
| <div id="settingsPanel" class="hidden"> | |
| <div class="settingsRow hidden"> | |
| <div id="hqCheck" class="checkMark">✓</div> | |
| <div id="hqOption">High Quality Render</div> | |
| </div> | |
| <div class="settingsRow hidden"> | |
| <div id="lqCheck" class="checkMark">✓</div> | |
| <div id="lqOption">Low Quality Render</div> | |
| </div> | |
| <div class="divider hidden"></div> | |
| <div class="settingsRow sliderContainer"> | |
| <div class="slider"> | |
| <div class="sliderHeader"> | |
| <label>Hue</label> | |
| <span id="bgHueValue">0°</span> | |
| </div> | |
| <input id="bgHue" type="range" min="0" max="360" step="1"> | |
| </div> | |
| <div class="slider"> | |
| <div class="sliderHeader"> | |
| <label>Saturation</label> | |
| <span id="bgSaturationValue">0%</span> | |
| </div> | |
| <input id="bgSaturation" type="range" min="0" max="100" step="1"> | |
| </div> | |
| <div class="slider"> | |
| <div class="sliderHeader"> | |
| <label>Lightness</label> | |
| <span id="bgLightnessValue">0%</span> | |
| </div> | |
| <input id="bgLightness" type="range" min="0" max="100" step="1"> | |
| </div> | |
| </div> | |
| <div class="divider"></div> | |
| <div class="settingsRow"> | |
| <div class="slider"> | |
| <div class="sliderHeader"> | |
| <label>FOV</label> | |
| <span id="fovValue">0°</span> | |
| </div> | |
| <input id="fov" type="range" min="1" max="180" step="1"> | |
| </div> | |
| </div> | |
| <div class="divider"></div> | |
| <div class="settingsRow"> | |
| <button id="screenshot">Capture Image</button> | |
| </div> | |
| <div class="divider hidden"></div> | |
| <div class="settingsRow hidden"> | |
| <button id="frame">Frame</button> | |
| <button id="reset">Reset</button> | |
| </div> | |
| </div> | |
| <!-- Info Panel --> | |
| <div id="infoPanel" class="hidden"> | |
| <div id="infoPanelContent" onpointerdown="event.stopPropagation()"> | |
| <div id="tabs"> | |
| <div id="desktopTab" class="tab active">Desktop</div> | |
| <div id="touchTab" class="tab">Touch</div> | |
| </div> | |
| <div id="infoPanels"> | |
| <div id="desktopInfoPanel"> | |
| <div class="control-spacer"></div> | |
| <h1>Orbit Mode</h1> | |
| <div class="control-item"> | |
| <span class="control-action">Orbit</span> | |
| <span class="control-key">Left Mouse</span> | |
| </div> | |
| <div class="control-item"> | |
| <span class="control-action">Pan</span> | |
| <span class="control-key">Right Mouse</span> | |
| </div> | |
| <div class="control-item"> | |
| <span class="control-action">Zoom</span> | |
| <span class="control-key">Mouse Wheel</span> | |
| </div> | |
| <div class="control-item"> | |
| <span class="control-action">Set Focus</span> | |
| <span class="control-key">Double Click</span> | |
| </div> | |
| <div class="control-spacer"></div> | |
| <h1>Fly Mode</h1> | |
| <div class="control-item"> | |
| <span class="control-action">Look Around</span> | |
| <span class="control-key">Left Mouse</span> | |
| </div> | |
| <div class="control-item"> | |
| <span class="control-action">Fly Forward / Backward</span> | |
| <span class="control-key">W / S or Up / Down Arrows</span> | |
| </div> | |
| <div class="control-item"> | |
| <span class="control-action">Fly Left / Right</span> | |
| <span class="control-key">A / D or Left / Right Arrows</span> | |
| </div> | |
| <div class="control-item"> | |
| <span class="control-action">Fly Up / Down</span> | |
| <span class="control-key">Q / E</span> | |
| </div> | |
| <div class="control-item"> | |
| <span class="control-action">Fast / Slow</span> | |
| <span class="control-key">Shift / Ctrl</span> | |
| </div> | |
| <div class="control-spacer"></div> | |
| <div class="control-item"> | |
| <span class="control-action">Frame Scene</span> | |
| <span class="control-key">F</span> | |
| </div> | |
| <div class="control-item"> | |
| <span class="control-action">Reset Camera</span> | |
| <span class="control-key">R</span> | |
| </div> | |
| </div> | |
| <div id="touchInfoPanel" class="hidden"> | |
| <div class="control-spacer"></div> | |
| <h1>Orbit Mode</h1> | |
| <div class="control-item"> | |
| <span class="control-action">Orbit</span> | |
| <span class="control-key">One Finger Drag</span> | |
| </div> | |
| <div class="control-item"> | |
| <span class="control-action">Pan</span> | |
| <span class="control-key">Two Finger Drag</span> | |
| </div> | |
| <div class="control-item"> | |
| <span class="control-action">Zoom</span> | |
| <span class="control-key">Pinch</span> | |
| </div> | |
| <div class="control-item"> | |
| <span class="control-action">Set Focus</span> | |
| <span class="control-key">Double Tap</span> | |
| </div> | |
| <div class="control-spacer"></div> | |
| <h1>Fly Mode</h1> | |
| <div class="control-item"> | |
| <span class="control-action">Look Around</span> | |
| <span class="control-key">Touch on Right</span> | |
| </div> | |
| <div class="control-item"> | |
| <span class="control-action">Fly</span> | |
| <span class="control-key">Touch on Left</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Touch Joystick --> | |
| <div id="joystickBase" class="hidden"> | |
| <div id="joystick"></div> | |
| </div> | |
| <!-- Tooltip --> | |
| <div id="tooltip"></div> | |
| </div> | |
| <!-- SVG Icons --> | |
| <svg> | |
| <symbol id="playIcon" viewBox="-2 0 24 24"> | |
| <path | |
| d="M1 1.98725C1 1.20022 1.87789 0.730421 2.5332 1.16694L14.5605 9.18061C15.146 9.57066 15.146 10.4302 14.5605 10.8203L2.5332 18.833C1.87788 19.2695 1 18.7997 1 18.0126V1.98725Z" | |
| transform="translate(2 2)" | |
| /> | |
| </symbol> | |
| <symbol id="pauseIcon" viewBox="0 0 20 20"> | |
| <path d="M5 16V4h3v12H5zm7-12h3v12h-3V4z"/> | |
| </symbol> | |
| <symbol id="orbitIcon" viewBox="-2 -2 20 20"> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M4.44728 1.7561C6.14077 0.763957 8.53159 1.57857 10.4375 3.58357C12.75 3.02099 14.4585 3.40647 14.6491 4.73071C14.7831 5.66256 14.139 6.87994 12.9942 8.09008C13.7427 10.7586 13.2413 13.2551 11.5527 14.2444C9.85867 15.2369 7.46679 14.4208 5.56056 12.4143C3.34914 12.9521 1.691 12.6254 1.38412 11.4371L1.35092 11.2698C1.21678 10.3379 1.85972 9.11931 3.00457 7.90909C2.28693 5.34963 2.72037 2.94871 4.24741 1.88435L4.44728 1.7561ZM11.9889 9.03995C11.002 9.88136 9.79998 10.6808 8.47918 11.3303L8.13673 11.4937C7.70533 11.6942 7.28148 11.8681 6.8698 12.0172C7.32387 12.4287 7.79226 12.7587 8.25326 12.9983C9.39237 13.5903 10.3231 13.574 10.946 13.2092C11.5745 12.841 12.0613 12.0184 12.1263 10.7086C12.1518 10.1934 12.1065 9.62999 11.9889 9.03995ZM3.46225 9.20206C3.15128 9.5802 2.91825 9.93412 2.76238 10.2489C2.54363 10.6909 2.51958 10.967 2.53842 11.0985C2.54902 11.1721 2.56635 11.2146 2.67058 11.2763C2.81832 11.3636 3.12484 11.4626 3.6478 11.467C3.95641 11.4696 4.3074 11.4373 4.69402 11.3707C4.45655 11.0439 4.23084 10.6971 4.02215 10.3303C3.81017 9.95774 3.62416 9.58004 3.46225 9.20206ZM10.0358 4.9423C9.42018 5.13611 8.75205 5.40184 8.05014 5.74698C6.61265 6.45384 5.33887 7.34291 4.37175 8.24373C4.55213 8.73829 4.78227 9.2401 5.06511 9.73722C5.33995 10.2202 5.64271 10.6614 5.96355 11.0575C6.5793 10.8637 7.24782 10.5987 7.94988 10.2535C9.38732 9.54667 10.6605 8.65688 11.6276 7.7561C11.4473 7.26173 11.2176 6.76019 10.9349 6.26326C10.66 5.78001 10.3568 5.33855 10.0358 4.9423ZM7.74675 3.00219C6.60759 2.41015 5.67698 2.42644 5.05405 2.79126C4.42548 3.15953 3.93866 3.98199 3.87371 5.29191C3.84822 5.80668 3.89236 6.36967 4.00978 6.95922C4.91091 6.19088 5.9923 5.45862 7.17905 4.84269L7.52084 4.67016C8.07056 4.39986 8.6096 4.17089 9.12957 3.98266C8.67568 3.57138 8.20757 3.24172 7.74675 3.00219ZM12.3522 4.53344C12.0433 4.53086 11.6918 4.56177 11.3047 4.6285C11.5425 4.95566 11.7689 5.3029 11.9779 5.67016C12.1897 6.04255 12.3753 6.41999 12.5371 6.79777C12.8481 6.41965 13.0818 6.06635 13.2376 5.75154C13.4564 5.30973 13.4804 5.03352 13.4616 4.90193C13.451 4.82831 13.4337 4.7859 13.3294 4.7242C13.1817 4.63684 12.8753 4.53787 12.3522 4.53344Z"/> | |
| </symbol> | |
| <symbol id="flyIcon" viewBox="-2 -2 20 20"> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.33337C13.4727 1.33337 14.6666 2.52728 14.6666 4.00004C14.6666 5.4728 13.4727 6.66671 12 6.66671C11.4931 6.66671 11.0194 6.52491 10.6159 6.27934L10.2721 6.62374C10.0345 6.86142 9.90102 7.18411 9.90102 7.52022V8.47986C9.90102 8.81597 10.0345 9.13866 10.2721 9.37634L10.6159 9.72009C11.0193 9.47463 11.4932 9.33337 12 9.33337C13.4727 9.33337 14.6666 10.5273 14.6666 12C14.6666 13.4728 13.4727 14.6667 12 14.6667C10.5272 14.6667 9.33331 13.4728 9.33331 12C9.33331 11.4932 9.47457 11.0194 9.72003 10.6159L9.37628 10.2722C9.1386 10.0345 8.81591 9.90108 8.4798 9.90108H7.52016C7.18405 9.90108 6.86136 10.0345 6.62368 10.2722L6.27928 10.6159C6.52485 11.0195 6.66665 11.4931 6.66665 12C6.66665 13.4728 5.47274 14.6667 3.99998 14.6667C2.52722 14.6667 1.33331 13.4728 1.33331 12C1.33331 10.5273 2.52722 9.33337 3.99998 9.33337C4.50658 9.33337 4.98008 9.47481 5.38344 9.72009L5.72784 9.37634C5.9655 9.13866 6.09894 8.81597 6.09894 8.47986V7.52022C6.09894 7.18411 5.9655 6.86142 5.72784 6.62374L5.38344 6.27934C4.98001 6.52473 4.5067 6.66671 3.99998 6.66671C2.52722 6.66671 1.33331 5.4728 1.33331 4.00004C1.33331 2.52728 2.52722 1.33337 3.99998 1.33337C5.47274 1.33337 6.66665 2.52728 6.66665 4.00004C6.66665 4.50676 6.52467 4.98008 6.27928 5.3835L6.62368 5.72791C6.86136 5.96556 7.18405 6.099 7.52016 6.099H8.4798C8.81591 6.099 9.1386 5.96556 9.37628 5.72791L9.72003 5.3835C9.47475 4.98014 9.33331 4.50664 9.33331 4.00004C9.33331 2.52728 10.5272 1.33337 12 1.33337ZM3.99998 10.3998C3.11632 10.3998 2.39972 11.1164 2.39972 12C2.39972 12.8837 3.11632 13.6003 3.99998 13.6003C4.88364 13.6003 5.60024 12.8837 5.60024 12C5.60024 11.7911 5.55917 11.5919 5.48631 11.4089L4.41469 12.4812C4.16723 12.7284 3.76625 12.7286 3.51886 12.4812C3.27147 12.2338 3.27158 11.8328 3.51886 11.5853L4.59047 10.5131C4.40769 10.4404 4.20862 10.3998 3.99998 10.3998ZM12 10.3998C11.7911 10.3998 11.5918 10.4403 11.4088 10.5131L12.4811 11.5853C12.7284 11.8328 12.7285 12.2338 12.4811 12.4812C12.2337 12.7286 11.8327 12.7284 11.5853 12.4812L10.513 11.4089C10.4402 11.5918 10.3997 11.7912 10.3997 12C10.3997 12.8837 11.1163 13.6003 12 13.6003C12.8836 13.6003 13.6002 12.8837 13.6002 12C13.6002 11.1164 12.8836 10.3998 12 10.3998ZM3.99998 2.39978C3.11632 2.39978 2.39972 3.11639 2.39972 4.00004C2.39972 4.8837 3.11632 5.6003 3.99998 5.6003C4.20871 5.6003 4.40763 5.55909 4.59047 5.48637L3.51886 4.41475C3.27158 4.16729 3.27147 3.76631 3.51886 3.51892C3.76625 3.27153 4.16723 3.27164 4.41469 3.51892L5.48631 4.59054C5.55903 4.40769 5.60024 4.20877 5.60024 4.00004C5.60024 3.11639 4.88364 2.39978 3.99998 2.39978ZM12 2.39978C11.1163 2.39978 10.3997 3.11639 10.3997 4.00004C10.3997 4.20868 10.4403 4.40775 10.513 4.59054L11.5853 3.51892C11.8327 3.27164 12.2337 3.27153 12.4811 3.51892C12.7285 3.76631 12.7284 4.16729 12.4811 4.41475L11.4088 5.48637C11.5918 5.55923 11.791 5.6003 12 5.6003C12.8836 5.6003 13.6002 4.8837 13.6002 4.00004C13.6002 3.11639 12.8836 2.39978 12 2.39978Z"/> | |
| </symbol> | |
| <symbol id="arIcon" viewBox="-2 -6 28 28"> | |
| <path d="M10.9482 16.9199C10.9799 16.9389 11.0201 16.9389 11.0518 16.9199L15.918 14H19.416L11.9775 18.4629C11.3758 18.8239 10.6242 18.8239 10.0225 18.4629L2.58398 14H6.08203L10.9482 16.9199Z"/> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M12.041 12H9.40527L8.35742 9.27441H3.56055L2.57031 12H0L4.67383 0H7.23633L12.041 12ZM4.30566 7.25195H7.58008L5.92676 2.7998L4.30566 7.25195Z"/> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M17.0039 0C18.2519 0 19.1577 0.108901 19.7207 0.327148C20.289 0.539972 20.7431 0.922473 21.083 1.47363C21.4229 2.02476 21.5928 2.65491 21.5928 3.36426C21.5928 4.26454 21.3353 5.00931 20.8203 5.59863C20.3051 6.18253 19.5348 6.5513 18.5098 6.7041C19.0196 7.00969 19.4393 7.34532 19.7686 7.71094C20.1031 8.07658 20.5523 8.72611 21.1152 9.65918L22.541 12H19.7207L18.0156 9.38867C17.4104 8.45586 16.9965 7.8691 16.7734 7.62891C16.5505 7.38348 16.3139 7.21724 16.0645 7.12988C15.8148 7.03711 15.4187 6.99023 14.877 6.99023H14.3994V12H12.041V0H17.0039ZM14.3994 5.0752H16.1436C17.2746 5.0752 17.9811 5.02592 18.2627 4.92773C18.5442 4.82951 18.7645 4.66003 18.9238 4.41992C19.0831 4.17982 19.1631 3.87966 19.1631 3.51953C19.163 3.11597 19.057 2.79138 18.8447 2.5459C18.6376 2.29488 18.3424 2.13677 17.96 2.07129C17.7687 2.04401 17.1951 2.03027 16.2393 2.03027H14.3994V5.0752Z"/> | |
| </symbol> | |
| <symbol id="vrIcon" viewBox="-2 -6 28 28"> | |
| <path d="M7.90039 16C7.90039 16.6075 8.39249 17.0996 9 17.0996H11V18.9004H9C7.39837 18.9004 6.09961 17.6016 6.09961 16V15H7.90039V16Z"/> | |
| <path d="M16.9004 16C16.9004 17.6016 15.6016 18.9004 14 18.9004H12V17.0996H14C14.6075 17.0996 15.0996 16.6075 15.0996 16V15H16.9004V16Z"/> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M4.52148 4.70215L6.15918 9.11328L7.76465 4.70215L8.50195 2.7002L9.4834 0H15.9541C17.1903 0 18.0879 0.108014 18.6455 0.324219C19.2081 0.534989 19.6576 0.913398 19.9941 1.45898C20.3308 2.00484 20.499 2.62946 20.499 3.33203C20.499 4.22386 20.2446 4.96215 19.7344 5.5459C19.2241 6.12424 18.4606 6.48928 17.4453 6.64062C17.9503 6.94331 18.3662 7.27555 18.6924 7.6377C19.0238 7.99986 19.4688 8.64321 20.0264 9.56738L21.4385 11.8857H18.6455L16.9561 9.2998C16.3565 8.3758 15.9466 7.79459 15.7256 7.55664C15.5047 7.31345 15.2706 7.14802 15.0234 7.06152C14.7762 6.96965 14.3841 6.92384 13.8477 6.92383H13.374V11.8857H11.0381V2.54395L7.39941 11.8857H4.86133L0.102539 0H2.71289L4.52148 4.70215ZM13.374 5.02637H15.1025C16.2228 5.02636 16.9224 4.97814 17.2012 4.88086C17.4799 4.78356 17.6986 4.61574 17.8564 4.37793C18.0141 4.14017 18.0928 3.84288 18.0928 3.48633C18.0928 3.08641 17.9877 2.7647 17.7773 2.52148C17.5722 2.27286 17.2801 2.11565 16.9014 2.05078C16.712 2.02376 16.1439 2.01075 15.1973 2.01074H13.374V5.02637Z"/> | |
| </symbol> | |
| <symbol id="infoIcon" viewBox="-2 -2 24 24"> | |
| <path d="M9.98633 7.58301C10.2598 7.58301 10.4854 7.67643 10.6631 7.86328C10.8408 8.05013 10.9297 8.3099 10.9297 8.64258V14.0361C10.9297 14.4098 10.8408 14.6924 10.6631 14.8838C10.4854 15.0752 10.2598 15.1709 9.98633 15.1709C9.71289 15.1709 9.48958 15.0729 9.31641 14.877C9.14779 14.681 9.06348 14.4007 9.06348 14.0361V8.69727C9.06348 8.32812 9.14779 8.05013 9.31641 7.86328C9.48958 7.67643 9.71289 7.58301 9.98633 7.58301Z"/> | |
| <path d="M10.0068 4.88965C10.2484 4.88965 10.4626 4.96712 10.6494 5.12207C10.8363 5.27702 10.9297 5.5026 10.9297 5.79883C10.9297 6.08594 10.8385 6.31152 10.6562 6.47559C10.474 6.63509 10.2575 6.71484 10.0068 6.71484C9.74707 6.71484 9.52376 6.63509 9.33691 6.47559C9.15462 6.31608 9.06348 6.09049 9.06348 5.79883C9.06348 5.53451 9.1569 5.31803 9.34375 5.14941C9.53516 4.97624 9.75618 4.88965 10.0068 4.88965Z"/> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM10 1.7998C5.47126 1.7998 1.7998 5.47126 1.7998 10C1.7998 14.5287 5.47126 18.2002 10 18.2002C14.5287 18.2002 18.2002 14.5287 18.2002 10C18.2002 5.47126 14.5287 1.7998 10 1.7998Z"/> | |
| </symbol> | |
| <symbol id="settingsIcon" viewBox="0 0 24 24"> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8ZM12 9.7998C10.785 9.7998 9.7998 10.785 9.7998 12C9.7998 13.215 10.785 14.2002 12 14.2002C13.215 14.2002 14.2002 13.215 14.2002 12C14.2002 10.785 13.215 9.7998 12 9.7998Z"/> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7119 2.2002C13.1961 2.20028 13.6296 2.49055 13.8164 2.93066L13.8506 3.02051L14.3652 4.56641C14.7875 4.70091 15.1932 4.87075 15.5801 5.07129L17.042 4.3418L17.1299 4.30176C17.5436 4.13502 18.017 4.21245 18.3564 4.50195L18.4268 4.56641L19.4336 5.57324C19.7985 5.93836 19.8889 6.49621 19.6582 6.95801L18.9268 8.41895C19.1274 8.80592 19.2971 9.21159 19.4316 9.63379L20.9795 10.1504C21.4693 10.3138 21.7997 10.7717 21.7998 11.2881V12.7119C21.7997 13.2284 21.4695 13.6873 20.9795 13.8506L19.4316 14.3652C19.2971 14.7875 19.1274 15.1932 18.9268 15.5801L19.6582 17.042C19.8889 17.5038 19.7985 18.0616 19.4336 18.4268L18.4268 19.4336C18.0616 19.7985 17.5038 19.8889 17.042 19.6582L15.5801 18.9268C15.1932 19.1274 14.7875 19.2971 14.3652 19.4316L13.8506 20.9795C13.6873 21.4695 13.2284 21.7997 12.7119 21.7998H11.2881C10.7717 21.7997 10.3138 21.4693 10.1504 20.9795L9.63379 19.4316C9.21159 19.2971 8.80592 19.1274 8.41895 18.9268L6.95801 19.6582C6.49621 19.8889 5.93836 19.7985 5.57324 19.4336L4.56641 18.4268C4.20146 18.0617 4.1112 17.5038 4.3418 17.042L5.07129 15.5801C4.87075 15.1932 4.70091 14.7875 4.56641 14.3652L3.02051 13.8506C2.53057 13.6873 2.20029 13.2283 2.2002 12.7119V11.2881C2.20024 10.7718 2.53076 10.3139 3.02051 10.1504L4.56641 9.63379C4.70094 9.21149 4.86966 8.80498 5.07031 8.41797L4.3418 6.95801C4.11113 6.49617 4.20145 5.93834 4.56641 5.57324L5.57324 4.56641C5.93834 4.20145 6.49617 4.11113 6.95801 4.3418L8.41797 5.07031C8.80498 4.86966 9.21149 4.70094 9.63379 4.56641L10.1504 3.02051L10.1836 2.92969C10.3706 2.49001 10.8042 2.20023 11.2881 2.2002H12.7119ZM11.0186 5.4707L10.8809 5.88477L10.458 5.99316C9.88479 6.13982 9.34317 6.36768 8.84473 6.66309L8.46875 6.88477L8.0791 6.69043L6.50098 5.90137L5.90137 6.50098L6.69043 8.0791L6.88477 8.46875L6.66309 8.84473C6.36768 9.34317 6.13982 9.88479 5.99316 10.458L5.88477 10.8809L5.4707 11.0186L3.7998 11.5762V12.4229L5.4707 12.9805L5.88477 13.1182L5.99316 13.541C6.13969 14.1141 6.36763 14.6556 6.66309 15.1543L6.88477 15.5303L6.69043 15.9199L5.90137 17.498L6.50098 18.0977L8.0791 17.3086L8.46875 17.1133L8.84473 17.3359C9.34314 17.6314 9.88463 17.8591 10.458 18.0059L10.8809 18.1143L11.0186 18.5283L11.5771 20.2002H12.4229L13.1182 18.1143L13.541 18.0059C14.1143 17.8593 14.6556 17.6314 15.1543 17.3359L15.5303 17.1143L15.9199 17.3086L17.498 18.0977L18.0977 17.498L17.3086 15.9199L17.1143 15.5303L17.3359 15.1543C17.6314 14.6556 17.8593 14.1143 18.0059 13.541L18.1143 13.1182L20.2002 12.4229V11.5762L18.1143 10.8809L18.0059 10.458C17.8591 9.88463 17.6314 9.34314 17.3359 8.84473L17.1133 8.46875L17.3086 8.0791L18.0977 6.50098L17.498 5.90137L15.9199 6.69043L15.5303 6.88477L15.1543 6.66309C14.6556 6.36763 14.1141 6.13969 13.541 5.99316L13.1182 5.88477L12.9805 5.4707L12.4229 3.7998H11.5762L11.0186 5.4707Z"/> | |
| </symbol> | |
| <symbol id="enterFullscreenIcon" viewBox="0 0 24 24"> | |
| <path d="M3 14.7002C3.49693 14.7002 3.90018 15.1027 3.90039 15.5996V20C3.90039 20.0552 3.94477 20.0996 4 20.0996H8.40039C8.89727 20.0998 9.2998 20.5031 9.2998 21C9.2998 21.4969 8.89727 21.9002 8.40039 21.9004H4C2.95066 21.9004 2.09961 21.0493 2.09961 20V15.5996C2.09982 15.1027 2.50307 14.7002 3 14.7002Z"/> | |
| <path d="M21 14.7002C21.4969 14.7002 21.9002 15.1027 21.9004 15.5996V20C21.9004 21.0493 21.0493 21.9004 20 21.9004H15.5996C15.1027 21.9002 14.7002 21.4969 14.7002 21C14.7002 20.5031 15.1027 20.0998 15.5996 20.0996H20C20.0552 20.0996 20.0996 20.0552 20.0996 20V15.5996C20.0998 15.1027 20.5031 14.7002 21 14.7002Z"/> | |
| <path d="M8.40039 2.09961C8.89727 2.09982 9.2998 2.50307 9.2998 3C9.2998 3.49693 8.89727 3.90018 8.40039 3.90039H4C3.94477 3.90039 3.90039 3.94477 3.90039 4V8.40039C3.90018 8.89727 3.49693 9.2998 3 9.2998C2.50307 9.2998 2.09982 8.89727 2.09961 8.40039V4C2.09961 2.95066 2.95066 2.09961 4 2.09961H8.40039Z"/> | |
| <path d="M20 2.09961C21.0493 2.09961 21.9004 2.95066 21.9004 4V8.40039C21.9002 8.89727 21.4969 9.2998 21 9.2998C20.5031 9.2998 20.0998 8.89727 20.0996 8.40039V4C20.0996 3.94477 20.0552 3.90039 20 3.90039H15.5996C15.1027 3.90018 14.7002 3.49693 14.7002 3C14.7002 2.50307 15.1027 2.09982 15.5996 2.09961H20Z"/> | |
| </symbol> | |
| <symbol id="exitFullscreenIcon" viewBox="0 0 24 24"> | |
| <path d="M8 15.0996C8.49706 15.0996 8.90039 15.5029 8.90039 16V21C8.90039 21.4971 8.49706 21.9004 8 21.9004C7.50294 21.9004 7.09961 21.4971 7.09961 21V16.9004H3C2.50294 16.9004 2.09961 16.4971 2.09961 16C2.09961 15.5029 2.50294 15.0996 3 15.0996H8Z" /> | |
| <path d="M21 15.0996C21.4971 15.0996 21.9004 15.5029 21.9004 16C21.9004 16.4971 21.4971 16.9004 21 16.9004H16.9004V21C16.9004 21.4971 16.4971 21.9004 16 21.9004C15.5029 21.9004 15.0996 21.4971 15.0996 21V16C15.0996 15.5029 15.5029 15.0996 16 15.0996H21Z" /> | |
| <path d="M8 2.09961C8.49706 2.09961 8.90039 2.50294 8.90039 3V8C8.90039 8.49706 8.49706 8.90039 8 8.90039H3C2.50294 8.90039 2.09961 8.49706 2.09961 8C2.09961 7.50294 2.50294 7.09961 3 7.09961H7.09961V3C7.09961 2.50294 7.50294 2.09961 8 2.09961Z" /> | |
| <path d="M16 2.09961C16.4971 2.09961 16.9004 2.50294 16.9004 3V7.09961H21C21.4971 7.09961 21.9004 7.50294 21.9004 8C21.9004 8.49706 21.4971 8.90039 21 8.90039H16C15.5029 8.90039 15.0996 8.49706 15.0996 8V3C15.0996 2.50294 15.5029 2.09961 16 2.09961Z" /> | |
| </symbol> | |
| </svg> | |
| <!-- Application Script --> | |
| <script type="module"> | |
| import { main } from './index.js'; | |
| const { config, settings } = window.sse; | |
| const { poster } = config; | |
| // Show the poster image | |
| if (poster) { | |
| const element = document.getElementById('poster'); | |
| element.style.setProperty('--poster-url', `url(${poster.src})`); | |
| element.style.display = 'block'; | |
| element.style.filter = 'blur(40px)'; | |
| // hide the canvas | |
| document.documentElement.style.setProperty('--canvas-opacity', '0'); | |
| } | |
| document.addEventListener('DOMContentLoaded', async () => { | |
| const [appElement, cameraElement, settingsJson] = await Promise.all([ | |
| document.querySelector('pc-app').ready(), | |
| document.querySelector('pc-entity[name="camera"]').ready(), | |
| settings | |
| ]); | |
| const viewer = await main(appElement.app, cameraElement.entity, settingsJson, config); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |