在计算机世界里，3D世界是由点组成，两个点能够组成一条直线，三个不在一条直线上的点就能够组成一个三角形面，无数三角形面就能够组成各种形状的物体，如下图。
Three中模型解析器的原理是将顶点数组将模型的顶点用数组储存起来，再利用three中的face函数取得定点数组中的三个或四个顶点的索引构成空间平面。如此反复，模型就被完整构造出来了。
于是，越复杂的物体就需要越多的网面拼接。而css中是不存在根据坐标建立空间平面的能力的。
（插个题外话，其实css有一个属性与坐标有关，那就是clip-path。这个属性的特性赋予了css3一定的建模能力。实现方法可参考这篇文章 纯clip-path打造的3D模型渲染器）
CSS3实现3D全景
。上篇文章介绍了Web3D的一些表现形式，这里着重谈谈怎么以CSS3实现3D全景。下面会探索Three实现全景的方案，因为WebGL门槛和学习成本还是比较高的，不适于用于快速开发。造物节的CSS3d全景已有文章对其进行了技术探秘，但都未深入谈及具体实现方式。
要清晰理解实现方式，必须对CSS3的transform、perspective有一定的认识。 原理方面的东西我就不深入讲了，大家可以先看看这篇文章，对CSS3D有一个大致的概念。 玩轉 CSS 3D - 原理篇
CSS全景可通过建立柱形或者立方体再通过贴图方式实现。也许会有人问，球体行不行？实际上是不行的，球体模型由无数个极小的平面拼接构成连贯曲面，而CSS缺乏使平面扭曲的属性。球体模型我们可以使用上文提过的Clip-3d建造出，但是，贴图问题就解决不了了。
天空盒子
相信很多打造过或有了解过3d全景的同行们都知道这个概念。实际上Skybox就是一个立方体，通过给六个面贴上不同的，边缘可以无缝贴合的图片，再将视角伸入盒子内部。可以想象成我们自己站入了一个巨型立方体盒子内部，移动视角便能看到不同的场景。
1、贴图 来看一张天空盒子的贴图，剪头指向的边缘代表需要无缝贴合的边。
从上图可以看出只要相互贴合的两个面上的图像能够无缝拼接，那么再通过对各个面进行一定的旋转变换，天空盒子就能被打造出来了。
那么问题来了，怎么去拍摄制作这样的图片呢？这就需要通过一些专业软件了，比如pano2vr，max等。其实，需要用到这些专业工具打造的全景对画质和拼合度的要求都非常高了，而单纯依靠CSS3中的变化给不了它们很好的体验。
但我们今天讨论的是某些运营活动H5打造的全景，此全景不一定真实存在，或者是和真实场景有一定的比例差距。例如星空、海底。对于这类贴合度可人为改变的全景图的打造，我们可以采用现有的高清图片，再经由PS转换成六面全景图。 贴一篇文章 Create a Skybox From Photos 其实主要思想是 在一张大图上勾画出六个面的选取 > 选择大图中某个面的相邻面将其旋转到需要拼合的盒子的某个面上，使他们完美贴合 > 得到最合理的六面贴图后，观察有无创造出新的边缘，通过蒙版等工具使他们自然融合。
2、构造贴图完成就可以创建立方体了。首先将创建好的六个面切割出来，以front、back、left、right…命名标记位置。
.sence { -webkit-perspective: 1000px; }
.cube { width: 500px; height: 500px; margin: 100px auto; transform-style: preserve-3d; }
.cube img { width: 130px; height: 130px; position: absolute; }
.cube img:nth-child(1) { }
.cube img:nth-child(2) { transform: rotateY(180deg); }
.cube img:nth-child(3) { transform: rotateY(90deg); }
.cube img:nth-child(4) { transform: rotateY(-90deg); }
.cube img:nth-child(5) { transform: rotateX(90deg); }
.cube img:nth-child(6) { transform: rotateX(-90deg); }
查看更多关于H5打造3d场景AmazingCSS3D的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did101382