如何使用Spritesheet制作类Team Fortress 2 Wiki的3D查看器？

这种伪3D查看器的核心逻辑很直白：预先渲染物品不同旋转角度的静态图片，拼接成一张Spritesheet大图，通过交互切换显示大图的不同区域，模拟出3D旋转的视觉效果。以下是具体实现步骤：

1. 准备Spritesheet资源 #

• 先生成物品的多角度静态帧：围绕物品垂直轴（Y轴）按固定间隔旋转（比如每11.25度一帧，32帧刚好完成一圈），渲染出每个角度的图片。
• 将这些帧按规整的行列顺序拼接成Spritesheet（比如TF2 Wiki里的手枪Spritesheet是4行8列，共32帧），同时记录单帧尺寸、每行帧数、总帧数这三个关键参数。

2. 搭建基础HTML结构 #

用一个容器元素承载Spritesheet，推荐用div（方便通过background-position控制显示区域）：

<div class="sprite-3d-viewer"></div>

3. 设置CSS样式 #

给容器设置与单帧一致的宽高，把Spritesheet设为背景图，初始化显示第一帧：

.sprite-3d-viewer {
  width: 256px; /* 替换为你的单帧宽度 */
  height: 256px; /* 替换为你的单帧高度 */
  background-image: url('你的Spritesheet图片路径');
  background-repeat: no-repeat;
  cursor: grab;
  user-select: none; /* 防止拖动时选中文字 */
}

4. 实现鼠标拖动交互 #

通过监听鼠标事件，根据水平拖动的偏移量切换对应帧，核心JavaScript代码如下：

const viewer = document.querySelector('.sprite-3d-viewer');
// 替换为你的实际参数
const frameWidth = 256;
const frameHeight = 256;
const framesPerRow = 8;
const totalFrames = 32;

let currentFrame = 0;
let isDragging = false;
let startX = 0;

// 开始拖动
viewer.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  viewer.style.cursor = 'grabbing';
});

// 拖动过程中切换帧
document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  
  const deltaX = e.clientX - startX;
  // 每拖动10像素切换一帧，可根据交互手感调整
  const frameShift = Math.floor(deltaX / 10);
  if (frameShift === 0) return;

  // 更新当前帧索引，取模保证循环
  currentFrame = (currentFrame + frameShift + totalFrames) % totalFrames;
  
  // 计算当前帧在Spritesheet中的位置
  const rowIndex = Math.floor(currentFrame / framesPerRow);
  const colIndex = currentFrame % framesPerRow;
  viewer.style.backgroundPosition = `-${colIndex * frameWidth}px -${rowIndex * frameHeight}px`;

  startX = e.clientX; // 更新起始位置，避免连续跳帧
});

// 结束拖动
document.addEventListener('mouseup', () => {
  isDragging = false;
  viewer.style.cursor = 'grab';
});

5. 优化与扩展 #

• 移动端适配：添加触摸事件（touchstart、touchmove、touchend），用e.touches[0].clientX替代clientX，实现滑动交互。
• 平滑过渡：不用直接跳帧，用requestAnimationFrame实现帧位置的缓动动画，让旋转更流畅。
• 自动旋转：添加定时器，每隔固定时间自动递增帧索引，实现自动展示效果。
• 边界限制：如果不需要循环旋转，可以限制currentFrame在0到totalFrames-1之间，避免超出范围。

内容的提问来源于stack exchange，提问作者Techtronix