html5 3d场景设计,H5打造3d场景不完全攻略（二）: Amazing CSS3D

原标题：H5打造3d场景不完全攻略(二): Amazing CSS3D

前言

对的，本文就是着重介绍如何使用CSS3中的3D变换打造出H5中的3D效果。灵感来源于造物节团队的3d引擎，因为使用方法比较复杂，也没有开源的API文档，于是想自己另外造个轮子，便开始了相关内容的学习和实践。

众所周知，目前市面上的H5 3D类库(如Three)、引擎(Egret)、构建工具(kpano、720云)都或存在体积太大、不开源、非免费、学习成本高等问题。对于我们较为熟悉的CSS3，为什么就不对它好好利用一把呢？诚然，CSS3存在我们比较清楚的短板，CSS对平面的渲染能力高，但是对3D建模方面便力不从心了。

我们知道3D的表现形式即让我们通过平面可从不同角度看到真实物体的展示效果。

在计算机世界里，3D世界是由点组成，两个点能够组成一条直线，三个不在一条直线上的点就能够组成一个三角形面，无数三角形面就能够组成各种形状的物体，如下图。

我们通常把这种网格模型叫做Mesh模型。给物体贴上皮肤，或者专业点就叫做纹理，那么这个物体就活灵活现了。最后无数的物体就组成了我们的3D世界。

Three中模型解析器的原理是将顶点数组将模型的顶点用数组储存起来，再利用three中的face函数取得定点数组中的三个或四个顶点的索引构成空间平面。如此反复，模型就被完整构造出来了。

于是，越复杂的物体就需要越多的网面拼接。而css中是不存在根据坐标建立空间平面的能力的。

(插个题外话，其实css有一个属性与坐标有关，那就是clip-path。这个属性的特性赋予了css3一定的建模能力。实现方法可参考这篇文章)

CSS3实现3D全景

上篇文章介绍了Web3D的一些表现形式，这里着重谈谈怎么以CSS3实现3D全景。下面会探索Three实现全景的方案，因为WebGL门槛和学习成本还是比较高的，不适于用于快速开发。造物节的CSS3d全景已有文章对其进行了技术探秘，但都未深入谈及具体实现方式。

要清晰理解实现方式，必须对CSS3的transform、perspective有一定的认识。

原理方面的东西我就不深入讲了，大家可以先看看这篇文章，对CSS3D有一个大致的概念。

CSS全景可通过建立柱形或者立方体再通过贴图方式实现。也许会有人问࿰