基于JavaScript Three.js HTML5实现贴图圆柱杯3D旋转效果

核心实现思路 #

借助CSS 3D变换特性，模拟圆柱杯的立体结构，将目标图片映射到杯身侧面，再通过CSS动画实现绕Y轴的360°旋转效果。

完整代码示例 #

<div class="mug-wrap">
  <div class="mug"></div>
</div>

/* 3D透视容器 */
.mug-wrap {
  perspective: 1200px;
  width: 220px;
  height: 320px;
  margin: 60px auto;
}

/* 杯身主体 */
.mug {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: spin 8s linear infinite;
  /* 替换为你的目标图片 */
  background: url('你的图片地址') repeat-x;
  background-size: auto 100%;
}

/* 模拟杯身前后圆形端面 */
.mug::before,
.mug::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #e8e8e8;
  border-radius: 4px;
}

.mug::before {
  transform: rotateY(90deg) translateZ(110px);
}

.mug::after {
  transform: rotateY(-90deg) translateZ(110px);
}

/* 旋转动画 */
@keyframes spin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

关键细节说明 #

• perspective：设置透视距离，值越小3D效果越强，可根据需求调整。
• transform-style: preserve-3d：保证杯身和端面在同一3D空间渲染，避免扁平化。
• 背景图处理：若使用自定义图片，需将图片宽度调整为圆柱周长（公式：2 * π * 杯身半径，示例中杯身宽度220px，半径110px，周长约691px），高度与杯身高度一致，这样贴图会完美贴合圆柱侧面；如果图片是无缝重复图案，直接用repeat-x即可。
• 端面调整：通过translateZ(110px)控制圆柱粗细，数值等于杯身宽度的一半。

优化建议 #

• 若需要更真实的杯型，可给杯身添加border-radius模拟杯口弧度。
• 调整动画时长8s可以改变旋转速度，数值越小旋转越快。
• 可添加杯柄元素，通过3D变换定位到杯身侧面，增强真实感。

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