此博文由一个话题引出，原话题是通过滑条控制页面上显示3D模型的某个部分，于是我就来尝试了一下。
由于Three.js我也已经2年没碰了，而且在项目里只用过一次，所以并不是很清楚它是否能通过本身的功能达到这个效果，甚至一开始我已经在想手搓点坐标来达到目标了。
但手搓点坐标实在太麻烦了一点，我就回到blender想看看通常用于控制形变的形态键是否可以导出来使用，然后发现确实可以，这样就方便了，只要控制形态键的数值就可以对模型的形态进行定量控制，以下是操作过程： 继续阅读[WebGL]使用javascript控制模型形变
花几天用three.js糊了一个用于在网页上加载模型并查看的小东西，名字随便起的，用于以后显示一些物体的扫描建模和3D打印做的模型。
地址：https://github.com/JiaJiaJiang/itisModelViewer
目前代码没高兴整理，反正本来写的也不乱，就是对象的方法排序不太讲究。加载器只写了gltf一家和fbx的，虽然加载器都是现成的，不过因为我把js打包了，现在已经有1M多了（没压缩），所以我不用的加载器我都没写进去。
现在也还没写UI，只支持拖动查看，有生之年应该会加入从场景中的相机视角查看以及控制灯光之类的。
在前面那个win hello摄像头的文章里我已经把模型插进去了，这里再放几个演示，如果本页有模型没有加载出来就刷新一下，我的土豆服务器可能不太愿意把文件吐出来
本文演示的代码均在这里，本文仅说明原理，不会细化到webgl基础。
最近学会了用WebGL2画球，其实学会也有两个多月了，但由于某些误解一直没法生成正确的贴图映射，导致贴图错乱，直到两周前才突然开窍发现了原因，又拖到今天才来发这么一篇文章。忙里偷闲做事就是效率低下，好在并没有什么迫切需求要做，慢慢学也无所谓。
要用WebGL画球主要就是要先建个球模，然后给它上色或者贴图。要贴图就要搞清楚每个顶点和贴图的坐标映射关系，不同的球模类型映射关系也不一样，我这画的是最容易理解的经纬球，即以地球仪那种经纬线为线框的球体。
接下来开始我们的正题。
先摆一个随便找的经纬球
现在假装看不见经线（竖线），只能看见纬线（横线），那么这个球外面每隔一定的角度就绕着一个正圆，我们生成模型也可以用这种逻辑，首先生成一个正圆，然后把它按角度调整好大小并放到正确的位置上。关于生成一个合适边数的圆的方法我在前一篇文章已经写过了，这里就不再赘述了。
在三维坐标系画一些不需要z轴坐标的二维内容的时候，和直接在二维画布上画有些不一样，因为三维坐标系原点在画布中间，并且Y轴朝上，而且xyz轴的值范围都是-1~1，所以按照二维坐标系的坐标来绘制的话，需要在顶点shader里给顶点坐标最后乘一个转换矩阵，把它转换为三维坐标系中对应的点。
过程也很简单，把坐标系先移到左上角，把横纵坐标按照实际的像素数缩小，然后上下翻转一下，顺便把它喂给二向箔。
用我做的这个矩阵库举个例子的话就是（只写了关键步骤，省略了部分内容）
var to2dCoord=Mat.Identity(4).//新建一个单位矩阵 translate3d(-1,1,0).//移到左上角 scale3d(2/canvas.width,-2/canvas.height,0);//上下翻转，缩放坐标，喂给二向箔(去掉z轴) gl.uniformMatrix4fv(u2dUniform,false,to2dCoord);//丢给shader
到顶点shader里这样乘一下
attribute vec3 aVertexPosition;
uniform mat4 u2dCoordinate;//转换矩阵
void main(void) {
gl_Position = u2dCoordinate * vec4(aVertexPosition, 1.0);//最左边乘上转换矩阵
}
这样就可以当canvas2d画布用了。