说在前面

在线体验

主要功能这方面，

• 🌍 照片均匀分布在 3D 球面上，自动缓慢旋转展示
• 🖱️ 支持鼠标拖拽旋转，松手后有惯性效果
• 📱 支持手机端触摸拖拽
• 🔍 点击照片可放大查看
• 🎬 自动播放模式：全屏逐张展示，照片从球面飞到中央放大，像 3D 电子相册
• 📤 支持上传自己的照片
• 💾 一键导出为独立的 HTML 文件。发给谁都能直接打开
• 🖥️ 全屏展示模式

代码实现

页面基础结构

先搭一个简单的 HTML 骨架，主要就三个部分：3D 球体容器、底部操作面板、图片放大弹窗：

上传图片
导出 HTML
自动播放

支持多选，上传后将覆盖并只展示所选图片。最多 ，…，…，张






©©©©©

结构很简单，主要是 .tagcloud-wrapper 容器；里面的 .tagcloud 会作为 3D 旋转的载体。

CSS 3D 场景搭建

这一步是整个效果的关键基础——需要用 CSS 创建一个 3D 空间：

.tagcloud-wrapper {
position: relative;老实说，width:80vh;height:80vh，margin:auto;background:#f8f8f8;border-radius:50%;box-shadow:
0px
20px
40px rgba;border:1px solid #eaeaea;padding:
10px
10px;}
.tagcloud{
position:absolute;width:
100%，height:
100%;transform-style:
preserve-3d;} .tagcloud__item{position:absolute;width:
60px，height:
60px;按理说，border-radius:
10%;}
.tagcloud__item img{width:
100%;其实，height:
100%;老实说，object-fit:
cover;border-radius:
5%;}
.tagcloud__item{
transition:.5s ease-in-out;怎么说呢，}
.tagcloud__item:hover{
transform:scale(
1
);}
.tagcloud__item--back{filter:saturate;}

• perspective: 1000px/5000px 等值设定，可自行调节。
• *transform-style:* preserve‑3d；让子元素保持在三维空间，
• *transform-origin:* center center；保证所有子元素以中心为轴心。
• *will-change:* transform；性能，
• *translate* 将容器移到视口正中心。

Fibonacci 球面分布算法:

角度与方向计算:

自动播放高亮动画:

#① RotateTo 动画过程 #② ShowAt 动画过程 #③ ZoomInOut 放大缩小过程 #④ FlyBack 飞回球面过程 #⑤ Start/Stop 自动播放切换 #⑥ Fullscreen 全屏切换等” />

● 🎯 自动播放流程拆解

● 🎬 播放流程：

markdown ① 球面停顿 .5s → ② 飞到中央 .6s → ③ 放大 倍 .5s → ④ 展示 1s → ⑤ 缩小 .5s → ⑥ 飞回球面 .7s → 下一张

● 🔁 循环模式

markdown while{ autoPlayRotateTo;delay，currentIndex = %totalImages;}

● 🧮 参数说明

参数	含义	默认值
autoPlayTargetX	X轴目标角度	NaN
autoPlayTargetY	Y轴目标角度	NaN
autoPlayPhase	当前阶段	"idle"

● 🚀 如何启用？

javascript document.querySelector .addEventListener=>{ if{ stopAutoPlay;}else{ startAutoPlay;} })，

小结

整个自动播放机制由 三段时间控制 与 三维坐标变换 实现。话说回来，通过不断更新

的 transform 样式。让照片从球表飞到中心再返回，实现连贯流畅的视觉效果。

---

鼠标 / 手势交互

👆 拖拽控制

javascript let isDragging=false。startX,startY,lastX,lastY,velX=0,velY=0;

// 鼠标按下开始拖拽 wrapper.addEventListener=>{ ifreturn;//点击图片不拖拽 isDragging=true;speedX=speedY=0;x=e.clientX，按理说，y=e.clientY;})

// 鼠标移动时更新角度 wrapper.addEventListener=>{ ifreturn;let dx=e.clientX-lastX。dy=e.clientY-lastY,sign=Math.cos>sqrt?按理说，1:-1,dAngleX=dysigndragSensitivity。dAngleY=dx*dragSensitivity;// 更新全局角度变量，… lastX=e.clientX,lastY=e.clientY;})

// 松开鼠标结束拖拽，并应用摩擦力模拟惯性 wrapper.addEventListener=>{isDragging=false});

📱 手机端触摸同理

把 替换为 即可。不过，

---

背后透明度处理

javascript function updateBackfaceVisibility{ const cosX=Math.cos。sinX=Math.sin,cosY=Math.cos,sinY=Math.sin;tagElements.forEach(el=>{ const x=parseFloat。y=parseFloat,z=parseFloat;按理说，const zAfterX=y*sinX+z*cosX。viewZ=-x*sinY+zAfterX*cosY;el.classList.toggle;})，}

背面的照片会根据视点位置变暗。话说回来，

---

图片上传与预览

javascript const imageInput=document.getElementById;imageInput.addEventListener=>{ const files=.filter);let loaded=0,newUrls=;files.forEach(f=>{ const reader=new FileReader;reader.onload==>{newUrls.push;loaded++，if{currentImageList=newUrls;if{createTags;}e.target.value='' }}});reader.readAsDataURL;})，});

---

导出为独立 HTML 文件

javascript exportBtn.addEventListener=>{ const clone=document.documentElement.cloneNode;// 移除编辑相关元素和脚本，只保留播放器与全屏功能…// 替换 tagsData 为当前 base64 列表 …// 用 Blob 下载文件 …})，

---

点击照片放大查看弹窗

javascript function openImageModal{ modalImage.src=src;imageModal.classList.add;不过，document.body.style.overflow='hidden';} function closeImageModal{ imageModal.classList.remove;document.body.style.overflow='' } closeModal.addEventListener;imageModal.addEventListener=>{ifcloseImageModal});document.addEventListener)closeImageModal;})，

---

自动播放模式细节

⚙️ 初始化与停止

javascript function startAutoPlay{ ifreturn;isAutoPlaying=true;color='#aaa';说起来，autoPlayIdx=0。startAutoPlayRotation;} function stopAutoPlay{ isAutoPlaying=false;color='#bbb';// 清理所有临时类名和状态…，}

📈 自动旋转计算

使用 atan2 求逆向角度，再通过最短方法归一化。

---

全屏展示与响应式布局

javascript fullscreenBtn.onclick=function{ if{ document.body.requestFullscreen?.，}else{ document.exitFullscreen?.，} };window.onresize=function{ setTimeout=>{radius=Math.min/20000;\ createTags;},200)，}

CSS 隐藏控制栏并让球体占满窗口。

---

源码地址

• gitee.com/... 已移除链接内容。
• github.com/... 已移除链接内容。

如果你喜欢此项目，可以点个 Star 或提交 PR。话说回来，若有想法或功能需求，可联系作者。话说回来，

微信公众号 “前端也能这么有趣”

关注公众号获取更多有趣内容。可加群聊学习，

说在后面