这是一篇介绍如何在浏览器中展示洗面奶3D物件的文章。

前言

这篇文章仅仅是向你介绍应对下面这种的场景的方法：如果有人突然跟你说，你的皮肤挺不错的耶，你用的什么洗面奶，我也想买一个，你会怎么回答呢？手头又没法拿出你的洗面奶给他看，光凭言语无法准确地形容出你的洗面奶到底长什么样。作为前端的程序猿，我会想，这种时候如果可以有一个链接让对方自己去看一下把玩一下，对方势必会对你的洗面奶高Bigger有更深刻的认识。本文的目的，就是向屏幕对面的程序猿介绍这种高效搞笑的方式。

走进3D的世界

在页面里面放几个图片是完全无法满足让观看者自己看自己把玩的要求的。所以这里我们将会使用3D的形式来展现我们的洗面奶。老话说得好，同样是山，却有横看成岭侧成峰的不同。比起2D渲染，3D渲染多了一个维度，由于透视效果，物体遮挡、光照角度、光的反射折射等的存在，观看者在不同的角度观看会得到不同的结果。

在浏览器里面，CSS3提供了3D变换的相关属性，但对于光照相关的需求却是无能为力。而使用Canvas进行绘制的话，如果不依赖封装好的图形库，进行图形变换又是相当麻烦的事情。就算是在CSS中一个简单的2D旋转或者是放大，在Canvas的像素操作中，我们还需要通过矩阵计算才能知道变换后每个像素的位置。正因如此，图形库出现了。

说到图形库，我们不得不提到OpenGL。OpenGL是一个跨平台的图形编程规范，定义了2D与3D绘制中所需要各种接口，进行图形绘制中所需要的变换，纹理映射，光照等。OpenGL定义的接口很多是为硬件加速设计的。有了各大硬件厂商的支持，OpenGL的渲染效率比起软件渲染高了不止一点点。同时，OpenGL不局限于某平台或者是语言，它只是一个关于图形渲染的规范，对外提供关于图形渲染的各种接口，所以有许多的语言绑定，而在浏览器中用到的是Javascript的绑定WebGL。

ThreeJS

ThreeJS是一款在浏览器中进行3D绘制的Javascript库，为使用canvas绘制，WebGL渲染等图形操作提供了简便的API。到底有多简便？在PixiJS等2D绘制库中，我们需要场景+物件+贴图来搞定一张图，而在ThreeJS中我们只需要在这基础上额外添加适当光照与一台照相机而已，下面是一个最简单的Demo，绘制了一个旋转的绿色立方体。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18