JS仿照3D手办模型展台实现示例详解

lxf2023-06-03 02:10:02
摘要

这篇文章主要为大家介绍了JS实现伪3D手办模型展台示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

目录
  • 前言
  • 效果预览
  • 核心科技
    • 获取旋转角度
      • 监听 touch 事件,通过开始、结束坐标计算移动方向
        • 根据坐标计算移动方向
        • PC端支持 touch 事件

          前言

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

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

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

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

          效果预览

          JS仿照3D手办模型展台实现示例详解

          代码片段

          为了省流,这里没有预渲染图片资源,