前言：纹理篇。
一、纹理概述
纹理是什么？简单来说纹理可以看作是图片，或者贴图。3d世界的纹理由图片组成。将纹理映射到几何体上，一般是三角形上，这个几何体就有纹理皮肤了。
二、纹理的构造函数
纹理的实现：在three.js中，首先要有一个纹理类，其次是有一个加载图片的方法，将这张图片和这个纹理类捆绑起来。
- 纹理类由
THREE.Texture表示，其构造函数如下：
THREE.Texture (image,mapping,wrapS,wrapT,magFilter,minFilter,format,type,anisotropy)
各个参数的意义：
image：这是一个图片的类型，基本上由ImageUtils来加载var image = THREE.ImageUtils.loadTexture(url);- url不能加载本地图片
- 加载的图片的大小必须是2的次方
mapping：是一个THREE.UVMapping()类型，表示的是纹理坐标。wrapS：表示x轴的纹理的回环方式，就是当纹理的宽度小于需要贴图的平面的宽度时，平面剩下的部分应该p以何种方式贴图的问题。wrapT：表示y轴的纹理回环方式。mapFilter和minFilter表示过滤的方式，这是OpenGL的基本概念。不设置时会取默认值。format：表示加载图片的格式，这个参数可以取值THREE.RGBAFormat,RGBFormat等。THREE.RGBAFormat表示每个像素点要使用四个分量表示，分别是红、绿、蓝、透明表示。RGBFormat表示不适用透明，也就是说纹理不会又透明的效果。
type：表示存储纹理额的内存的每一个字节的格式，是有符号还是没有符号；是整形还是浮点型。默认是无符号型。anisotropy：各向异性过滤。使用各向异性过滤能够使纹理的效果更好，但是会消耗更多的内存、CPU、GPU时间。
纹理的回环：就是重复纹理的方式。是一个像素拉伸，还是图片重复，还是镜像的重复等。
三、纹理的坐标
- 正常情况下，在0.0到1.0的范围内指定纹理坐标。
- 要逆时针指定坐标。
- 当我们用一幅图来做纹理的时候，那么这幅图就隐示的被赋予了如图一样的纹理坐标，这个纹理坐标将被对应到一个形状上。
四、纹理的回环
就是重复纹理的方式。是一个像素拉伸，还是图片重复，还是镜像的重复等。
主要有三种效果：
- 简单重复：
THREE.RepeatWrapping;纹理将重复无限远。 - 边缘拉伸：
THREE.ClampToEdgeWrappinng，这个是默认设置。即纹理事务最后一个像素延伸到网格的边缘。 - 镜像重复：
THREE.MirroredRepeatWrapping，将纹理重复到无穷大，并在每次重复时都进行镜像。
五、小栗子
（1）在平面上贴上一张图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纹理</title>
</head>
<body>
<script src="three.js"></script>
<script>
var camera,scene,renderer;
var mesh;
init();
animate();
function init(){
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70,window.innerHeight/window.innerHeight,1,1000);
camera.position.z = 400;
scene = new THREE.Scene
var geometry = new THREE.PlaneGeometry(500,300,1,1);
geometry.vertices[0].uv = new THREE.Vector2(0,0);
geometry.vertices[1].uv = new THREE.Vector2(2,0);
geometry.vertices[2].uv = new THREE.Vector2(2,2);
geometry.vertices[3].uv = new THREE.Vector2(0,2);
var texture = THREE.ImageUtils.loadTexture("index2.jpg",null,function(t){
});
var material = new THREE.MeshBasicMaterial({
map:texture});
var mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);
window.addEventListener('resize',onwindowResize,false);
}
function animate(){
requestAnimationFrame(animate);
renderer.render(scene,camera);
}
</script>
</body>
</html>
（2）用canvas绘制纹理
这个后面学了canvas再补上啦。