1 使用立方体去探索它的uv是一个很复杂的过程，及其变态，所以为了解决这个问题，我们需要去简化它，最简单的方法就是通过三角面去探索这个问题。
1.1 以下是一个封装好的用于三角面的函数
var geometryCache = new Array();
function geometryCachePush(vector3) {
geometryCache.push(vector3);
}
function createMeshWithoutMaterial() {
var geometry = new THREE.Geometry();
var material = null;
for (var i in geometryCache)
{
console.info(geometryCache[i]);
geometry.vertices.push(new THREE.Vector3(geometryCache[i].x,geometryCache[i].y,geometryCache[i].z));
}
var normal = new THREE.Vector3( 0, 0, 1 ); //三角面法向量,x,y,z定义z轴为法向量
for (var i = 0;i<geometryCache.length - 2;i++)
{
geometry.faces.push( new THREE.Face3( 0, 1+i, 2+i, normal) ); //三角面添加到几何体
}
var msh = new THREE.Mesh(geometry,material );
addObject(msh);
geometryCache.length = 0;
return msh;
}1.2 使用
其实怎么使用这并不重要，实现的过程仁者见仁智者见智，我们主要去探索这里面shader的变化。
创建的Shader:
<script id="fragment_shader" type="x-shader/x-fragment">
uniform float time;
uniform float width;
uniform float height;
varying vec3 suv;
float dynamic;
void main( void ) {
gl_FragColor = vec4(0.0,1.0,0.0, 1.0 );
}
</script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec3 suv;
void main()
{
suv = position;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>先来看一下效果：
1.3 现在我们来思考我们在这一章中要讨论的问题：UV的传递：
那么，什么是UV
这是一段来自百度百科的解释：
UV"这里是指u,v纹理贴图坐标的简称(它和空间模型的X, Y, Z轴是类似的). 它定义了图片上每个点的位置的信息.
ok，所以，我们完全可以认为UV就是顶点坐标！！，而且这个顶点坐标是各个片元的顶点坐标，我是什么意思呢，意思就是，uv只有在三角面这个mesh的单元里面才有意义。
如果你说三个顶点head,leg,arm,那你觉得这三个顶点是uv吗？显然不是的，学过离散数学，我们会知道，在计算机里面点是离散的，线，其实本质上是由离散的点构成的，这就意味着面，也是由离散的面构成，只是让人感觉更不可思议的是：
就算是最小的单元，三角面本身，里面的点也是足够密集的，密集到，你可以当他成为一个面，而不会将它当做是一个镂空的纱窗。
这一段话实在是太抽象了，接下来我会做一个实验，让你们理解下这段话想要表达的思想。
我绘制的这个四边形，其实由两个三角面组成。
也就是说，它由两个基本元素Triangle组成，那么uv在这里面已经有足够的意义，如果我要用三个点去描述一个人的纹理的位置信息...你就会看到一个三角形，你看不见它穿的衣服，看不到它的脸，就是一个妥妥的丑逼，我们称之为三角星人。
当然，其实这不重要。
对于这个四边形，我们让它分配的UV是什么呢？
如下：
这个就是它的uv了，我们通常见到的...嗯uv坐标是-1~1之间，那么只需要进行归一化就行，这本质上其实非常简单。
接下来，我将要做一个更加具有实际意义，也更加让人深入理解什么叫uv的骚操作。
我们知道FragmentShader下面的函数：gl_FragColor是一个逐顶点上色的过程。
那么，我现在，在我这个四边形的基础上，对它进行上色
上色的代码如下：
上色结果：
这个典型的逐顶点的操作。
我们所看到的一张图像里面，其实有很多像素，比如一张512*512*3的图像，那么对于这张图像每一个像素上色的过程就是gl_FragColor要干的事情。
这是一种uv分配的方式，但是，事实上呢，glsl在设计的时候，它其实是提供了你一个自定义uv的接口，因为，通常情况下我们会有非常奇葩的需求，比如，我们要让贴图倒着来，如果直接在FragmentShader里面操作，这样会...嗯，反正我觉得可以，但是，这其实不重要，主要是uv还有另外一种方式，那就是直接定义顶点的uv
比如这种做法：
geometry.vertices[0].uv = new THREE.Vector2(0,0);这样，其实就可以直接使用Varying将uv传递个FragmentVertex：
如果，我要直接分配四个顶点的uv，用这种方式确实要比那种要爽很多：
就这样....哎
下一章我们讲什么呢？我们懂了uv，那么是不是应该尝试将一张彩色图像匹配到这个显示块里面呢？
