结合aframe在展示全景相机的照片

效果可以直接在首页体验，每次打开会有一个随机的全景图片。

准备图片

个人使用的是insta x5相机导出的全景照片，当然手机基本都可以拍，手够稳定的话效果也还可以。

导出以后记得压缩质量，不然大小离谱，8k的大概20-30M，oss流量遭不住。

https://yasuo.xunjiepdf.com/img/ 使用这个一压

https://tinify.cn/ 再使用这个二压

引入aframe

aframe是three js的一个上层工具，提供了很多现成的方法，比如360视频播放，图片展示。

我的博客是纯原生js写的，代码稍显原始, Ktor和vite的丝滑搭配

// 原本走打包，资源太大了，就算了... 
<script src="/lib/aframe/aframe-master.min.js"></script>

 <a-scene class="" id="aframe-container" xr-mode-ui="enabled: false"
            device-orientation-permission-ui="enabled: false">
            <a-sky id="idx-sky" rotation="0 0 0"></a-sky>
 </a-scene>

需要配置 xr-mode-ui="enabled: false" 关闭vr按钮 device-orientation-permission-ui="enabled: false" 关闭设备权限申请。

默认不展示图片，使用localStorage缓存一下每次打开的图片，顺序切换图片。

加载完成以后，先轻微的转动一下，体验更好。

let imageIndex = localStorage.getItem('imageIndex') ? Number(localStorage.getItem('imageIndex')) : 1;

if (imageIndex > 4) {
    imageIndex = 1;
} else {
    imageIndex += 1;
}

localStorage.setItem('imageIndex', imageIndex.toString());

const screenHeight = window.innerHeight;
const skyEl = document.querySelector('#idx-sky') as HTMLImageElement;

document.querySelector("#main")?.addEventListener('scroll', (e) => {
    const mainElement = e.target as HTMLElement;
    const scrollTop = mainElement.scrollTop;

    const rotationY = 90 + (scrollTop / screenHeight) * 360;
    skyEl.setAttribute('rotation', `0 ${rotationY} 0`);
});


document.addEventListener('DOMContentLoaded', () => {
    const overlay = document.getElementById('overlay') as HTMLDivElement;
    const content = document.getElementById('idx-body') as HTMLDivElement;
    skyEl.addEventListener('loaded', () => {
        overlay.classList.add('animate-tv-off');
        setTimeout(() => {
            overlay.classList.add('hidden');
            content.classList.remove('hidden');
            skyEl.classList.remove('hidden');
            skyEl.setAttribute('animation', 'property: rotation; to: 0 90 0; dur: 2000; easing: easeInOutQuad');
        }, 1000);
    });
    skyEl.setAttribute('src', `https://file.lookroot.cn/blog/bg/${imageIndex}.JPG`);
});

加个遮罩动画，图片加载有点慢。

<div id="overlay" class="absolute inset-0 flex items-center justify-center bg-gray-900">
        <div class="loader animate-spin rounded-full border-t-2 border-white w-12 h-12"></div>
    </div>

本来准备360转动的...实测有点晕乎乎的就算了。

后面准备写个nas部署的看相册全景图片的工具。