MoyuTurntable · 环绕浏览构件

AI 深度旋转：每张图配一张 Depth Anything 深度图，WebGL2 把图片贴到深度网格上做真 3D 旋转。单张图在其 22.5° 扇区内可旋转 ±11.25°，超出阈值切换下一张，下一张从反向阈值起手，旋转连续不断。拖拽旋转 / 自动播放 / 发光滚动条吸附 / 步进 / 缩略图 / 键盘方向键与空格。

接入方式（零构建、零依赖）

<script src="moyu-turntable.js"></script>
<moyu-turntable
  images='["aura_000.webp","aura_022.webp","aura_045.webp","aura_067.webp","aura_090.webp","aura_112.webp","aura_135.webp","aura_157.webp","aura_180.webp","aura_202.webp","aura_225.webp","aura_247.webp","aura_270.webp","aura_292.webp","aura_315.webp","aura_337.webp"]'
  depths='["depth/aura_000_depth.png","depth/aura_022_depth.png","depth/aura_045_depth.png","depth/aura_067_depth.png","depth/aura_090_depth.png","depth/aura_112_depth.png","depth/aura_135_depth.png","depth/aura_157_depth.png","depth/aura_180_depth.png","depth/aura_202_depth.png","depth/aura_225_depth.png","depth/aura_247_depth.png","depth/aura_270_depth.png","depth/aura_292_depth.png","depth/aura_315_depth.png","depth/aura_337_depth.png"]'
  autoplay speed="28">
</moyu-turntable>

<script>
  const el = document.querySelector('moyu-turntable');
  el.images = [...];  // 也可用 JS 属性传入图片数组
  el.depths = [...];  // 与 images 一一对应的深度图
  el.angle = 90;      // 跳转角度
  el.play(); el.pause();
  el.addEventListener('turntable-change', e => console.log(e.detail));
</script>