html5作3d(HTML5官网)

　　上面这个有点萌的3D小怪物就是用H5工具（https://www.ih5.cn）做滴，而且整个H5只有100K不到。

　　在介绍详细的制作教程之前，先给大家看几个简单的案例和应用：

　　.

　　案例一：3D画廊

　　https://cee2a4eeac65.ih5.cn/idea/HaPfHJB

　　【适用场景】

　　3D的图片排列不仅给读者一种耳目一新的立体感，同时也使得同一个页面能够展示更多的内容，适用于各种新闻内容和视频的展示。

　　.

　　案例二：3D微官网

　　https://cee2a4eeac65.ih5.cn/idea/0P2gVTZ

　　【适用场景】

　　用立方体构成3D模型，可以组成3D文字或者企业logo等，非常适合用于企业品牌展示，同时组合成各种3D文字，用于表白或者节日祝福也是不错的方式~

　　.

　　案例三：创意3D交互动画

　　https://cee2a4eeac65.ih5.cn/idea/9bD2Uku

　　【适用场景】

　　如果H5动画增加了一个维度会是什么感觉？试着把你以前做过的H5动画，用3D的方式表达，你会得到一个全新的作品。

　　.

　　颠覆性的H5技术，是未来所有创意工作者的机遇。

　　虽然用H5做3D动画不是很新鲜的事，但重点是用可视化工具就能构建3D图形，这是一件具备革新意义的事情。

　　首先，对于技术实现的革新：

　　在这之前，浏览器中实现3D构图和交互，是一件非常复杂的事情，要编代码、适配环境，而且编程人员还要跟3D动画建模师渲图师等等沟通实现，效率很低，而且水平一般的前端程序员都不一定能做好。但是现在有了可视化的工具操作，大大提升了制作效率，并且不懂代码的小白也可以掌握。

　　类似这样简单拖拽的操作，简直是编程小白的福音有木有，所见即所得：

　　第二，对于设计创作的革新：

　　很多具备动画基础和平面基础的设计师，原来苦于不懂前端编程只能画画平面图，但他又不可能轻易就找个技术团队帮他实现设计创意，但可视化H5工具的出现，使得设计师能不依赖技术自己创作基于浏览器的交互式3D动画，大大拓展了设计师的发挥空间。

　　像下面这颗水灵灵的眼球，设计师用H5工具两三下就搞定了，有兴趣可以研究一下：

　　第三，对于H5商业应用的革新：

　　丰富的创作+社交分享，这是可视化工具对H5在商业领域应用的强力驱动。工具化不仅提高了效率，而且让普通人也能成为H5的“开发者”，特别是大量的设计师，因为本身具备设计技能，借助不需要编程基础的工具可以做出超出想象的H5应用。

　　现在H5工具能够实现3D动画，除了大大增强了创作的多样性以外，对于企业而言，H5可以有更多的应用可能性，比如说3D商品的展示，3D室内地图等等，由于目前手机端3D动画的H5还比较少见，对于品牌推广而言，也会是一个爆发点。

　　另外，今年如果微信推出应用号，大幅提高生产效率的H5工具必将给工具的早期用户带来巨大的红利，大批的创业者可能会从工具用户里诞生。所以大家要抓住风口，成为那只最早飞起来的...

　　这种三维动画到底是怎么做出来的？

　　首先，你得在电脑上用谷歌浏览器，登录PC端网站www.ih5.cn，制作过程如下：

　　如果你对怎么制作更感兴趣的话，可以进入教程页面进行学习（内附试用高级账号与密码）：https://mp.weixin.qq.com/s?__biz=MzI0NjA2NDI2MA==&mid=402274134&idx=1&sn=288bbe91f292c6bfe435af458ee86d2f#rd

　　【教程目录】

　　1.1 3D动画原理——屏幕里的世界

　　1.2 基于Web的 3D技术简介

　　1.3 制作一个可控制移动的立方体

　　1.4 制作一个3D微官网

　　1.5 制作一个创意3D动画