用HTML旋转瓶子图像

Question

我正在寻找一种在HTML中旋转瓶子图像的方法，以实现a similar effect。这个想法是展示整个标签，而不仅仅是它的一小部分。

只是掩盖瓶子顶部的标签可能不是一个好选择，因为它需要“3d”才能看起来很自然。

Answer 1

两个选项：

首先是获取此gif（如果您已经有gif或png序列）  制作动画序列（如果你有3d项目，你也可以从3d软件生成图像）。然后使用一些canvas2d框架并预览此序列。

• 你也可以使用经典的html标签和计时器。

Secund使用three.js或类似的webgl引擎来渲染这个obj。  比它是在3d空间中的简单旋转。 Blender是免费软件使用它。导入对象（obj）介绍混合器。转到编辑模式并为botle纹理选择面孔 - 按空格类型＆＃34;展开＆＃34; ，插入你的形象。从搅拌机导出到obj。了解如何使用纹理加载带有three.js的obj。

这两个项目都很简单，可以在所有设备（桌面/移动设备）上运行。

如果您想使用我的库（canvas2d）进行动画，请参阅：

Visual js game engine

看一下动画类：

Animation class

参考：

Gif文件逐帧拆分

http://ezgif.com/split