我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

前几年实现的一个 demo 效果，今天翻出来整理下，给大家提供类似场景参考思路。

当时的需求场景是需要 3D 展示手办模型，但是因为甲方预算有限，问有没有其他青春版（~~性价比~~）方案。

刚好那段时间在处理 lottie 动画跳帧的问题，就提出了给模型拍个全身照，旋转的时候逐帧播放达到模拟手办模型旋转的动画效果。

众所周知，帧率越高，单位时间内图像帧的个数就会越多，对应动画效果就会越流畅，当然了，对应需要准备的模型素材也就越多。

效果预览

模型展示.gif

代码片段

为了省流，这里没有预渲染图片资源，🤔可能出现转动太快，图片未加载的情况，请🍵等待片刻

核心科技

粮草先行

搭建舞台
把抓拍的各个视角模型照片，渲染到舞台上，然后堆叠到一起备用
同时段只展示一个视角的模型照片
旋转时同步视角

相信大家已经知道如何去实现这个需求了，那么就再简单贴一下相关的核心问题处理

获取旋转角度

监听 touch 事件，通过开始、结束坐标计算移动方向

 
this.$el.addEventListener('touchstart', (e) => {
  this.data.x = e.touches[0].pageX
  this.data.y = e.touches[0].pageY
}, false)

this.$el.addEventListener('touchmove', (e) => {
  const endx = e.changedTouches[0].pageX
  const endy = e.changedTouches[0].pageY
  const direction = this.calcDirection(this.data.x, this.data.y, endx, endy)

  switch (direction) {
    case 'left':
      e.preventDefault()
      this.change(false)
      break
    case 'right':
      e.preventDefault()
      this.change(true)
      break
  }
}, false)

根据坐标计算移动方向

  calcDirection (startX, startY, endX, endY) {
    const angX = endX - startX
    const angY = endY - startY
    let result = ''

    // 消除噪音
    if (Math.abs(angX) < 2 && Math.abs(angY) < 2) {
      return result
    }
    const baseAngle = 45
    const angle = this.calcAngle(angX, angY)
    if (angle >= -(baseAngle * 3) && angle <= -baseAngle) {
      result = 'left'
    } else if (angle > baseAngle && angle < (baseAngle * 3)) {
      result = 'right'
    } else if ((angle >= (baseAngle * 3) && angle <= (baseAngle * 4)) || (angle >= -(baseAngle * 4) && angle < -(baseAngle * 3))) {
      result = 'up'
    } else if (angle >= -baseAngle && angle <= baseAngle) {
      result = 'down'
    }

    return result
  }

  calcAngle (x, y) {
    return Math.atan2(x, y) * 180 / Math.PI
  }

PC端支持 touch 事件

到这里你会发现PC端是不支持 touch 事件的，还好这件事不是你第一个发现的，在 VantUI 的官方示例中，有成熟的方案，相信细心的你一定注意到了。

Bye

🎉 感谢阅读

感慨一下，输出技术文章还挺难的，组织措辞的时间比编码时间还长，这还是在原有的基础上整理，从头构建一个技术点的难度又是 up++++ ，由衷佩服各位笔耕不辍的大佬。

后面要继续🤿潜水摸鱼了，写文章这也太难了。。。

JS 实现伪3D*手办模型展台

前言