73 lines
3.2 KiB
HTML
73 lines
3.2 KiB
HTML
<head>
|
|
<!-- for optimal display on high DPI devices -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />
|
|
</head>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/equirectangular-video-adapter@5/index.js">
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/video-plugin@5/index.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/settings-plugin@5/index.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/resolution-plugin@5/index.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5/index.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/video-plugin@5/index.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/settings-plugin@5/index.css">
|
|
|
|
<script src="../javascript/panoramaviewer-ext.js"></script>
|
|
|
|
<div id="panoramaviewer" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"></div>
|
|
|
|
<script>
|
|
|
|
const baseUrl = '../docs/assets/img/'
|
|
let startImage = window.frameElement.getAttribute("panoimage") ? window.frameElement.getAttribute("panoimage") : (baseUrl + 'depthmap-0002_swing.mp4')
|
|
|
|
THREE.ColorManagement.enabled = true;
|
|
|
|
const panoviewer = new PhotoSphereViewer.Viewer({
|
|
container: 'panoramaviewer',
|
|
adapter: [PhotoSphereViewer.EquirectangularVideoAdapter, {
|
|
muted: true,
|
|
}],
|
|
caption: '',
|
|
//loadingImg: baseUrl + 'loader.gif',
|
|
touchmoveTwoFingers: true,
|
|
mousewheelCtrlKey: false,
|
|
navbar: 'video caption settings fullscreen',
|
|
|
|
plugins: [
|
|
PhotoSphereViewer.VideoPlugin,
|
|
PhotoSphereViewer.SettingsPlugin,
|
|
[PhotoSphereViewer.ResolutionPlugin, {
|
|
defaultResolution: 'HD',
|
|
resolutions: [
|
|
{
|
|
id: 'HD',
|
|
label: 'Standard',
|
|
panorama: { source: startImage },
|
|
}
|
|
],
|
|
}],
|
|
],
|
|
});
|
|
|
|
panoviewer.renderer.renderer.outputColorSpace='srgb-linear'
|
|
panoviewer.renderer.physicallyCorrectLights = true
|
|
panoviewer.renderer.toneMapping = 5 // THREE.ACESFilmicToneMapping, i need custom
|
|
panoviewer.renderer.toneMappingExposure = 1
|
|
|
|
window.addEventListener("message", ({ data, origin, source }) => {
|
|
console.log(data.type)
|
|
switch (data.type) {
|
|
case "panoramaviewer/set-video":
|
|
console.info(`[panorama viewer] Sending video '${data.image.dataURL}'`);
|
|
panoviewer.setPanorama({source: data.image.dataURL})
|
|
//.then(() => /* update complete */);
|
|
document.querySelector('#panoramaviewer').focus()
|
|
break
|
|
}
|
|
})
|
|
|
|
</script> |