WebGL绘制3D文字（非中文）

本教程是我在贴吧为吧友写的，搬到博客以备份。

demo地址：cool.js——3D文字

源码地址：cool.js

此教程介绍一种简单粗暴的绘制3D文字的方案。

本教程以数字为例。核心思想：

1. 制作或下载阿拉伯数字的二维几何面(Geometry)数据
2. 在程序中将二维面“拔”成三维（难点）
3. 渲染

第一步。我自己制作数字的geometry。

以数字2为例：

• 先构建一个二维面。

 

• 抬高。待会儿详细讲怎么抬高

 

• 渲染（这歩就不用详细介绍了吧）

 

接下来是重点。

问题一，如何构建这个二维面的三角面？

 

第一步：

先构建顶点，数字2的12个顶点的二维坐标如下：

0, 10

5, 10

5, 4.5

1, 4.5

1, 1

5, 1

5, 0

0, 0 

0, 5.5

4, 5.5

4, 9 

0, 9

这个不难理解吧。

 

第二步：

把上面构建的封闭多边形拆成三角形。

这个不难吧（准备以后另写教程）。

 

问题二，如何把二维面拔高成三维网格？

第一步：

把每个顶点的二维坐标变成三维坐标，具体做法是，每个坐标加入z分量，值为0。

比如(5,10) –> (5,10,0)

 

第二步：

复制一份二维面（三维坐标表示的），将它每个顶点的z坐标设置为n (n就是这个三维数字2 的“厚度”)。

 

第三步：

连接两个面上对应的顶点。对于数字2，有12个顶点，也就是添加了12条线段。

完成之后，“2”的侧面变成12个矩形。

 

第四步：

对于12个矩形，把它们变成24个三角形。具体做法是，连接矩形的任1个对角线。

这样就完成三维数字“2”的geometry啦！

 

有了geometry，怎么渲染就不用说了。完结撒花。

 

转载请注明出处：微笑君的博客