这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战
前言
前面我们简单介绍了Three.js中的材质，但是没有介绍如何将纹理应用到网格上，纹理贴图是Three.js一个很重要的内容，游戏、产品720展示、物联网3D可视化等项目程序员加载模型的同时需要处理纹理贴图。
刚开始学习的学习的时候，也没必要去掌握Threejs所有种类纹理贴图的细节，关键是建立一个整体概念，用到的时候，知道需要查找那一节课,跟着文字介绍，调试一下参数，体验感受一下。在以后的开发中遇到没有学过的纹理贴图，知道如何查找文档或找到学习方向。
创建纹理
通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。
材质的颜色贴图属性.map设置后，模型会从纹理贴图上采集像素值，这时候一般来说不需要再设置材质颜色.color。.map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色贴图的颜色值RGB。
// 纹理贴图映射到一个矩形平面上 ,不同的几何体有不同的UV坐标来设置贴图和模型的映射规律，可以把颜色纹理贴图映射到不同的几何体上查看渲染效果。
let geometry = new THREE.PlaneGeometry(204, 102); //矩形平面
//let geometry = new THREE.BoxGeometry(100, 100, 100); //立方体
//let geometry = new THREE.SphereGeometry(60, 25, 25); //球体
// TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理
var textureLoader = new THREE.TextureLoader();
// 执行load方法，加载纹理贴图成功后，返回一个纹理对象Texture
textureLoader.load('Earth.png', function(texture) {
var material = new THREE.MeshLambertMaterial({
// color: 0x0000ff, // 设置颜色纹理贴图：
Texture对象作为材质map属性的属性值
map: texture,//设置颜色贴图属性值
}); //材质对象Material
let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
//纹理贴图加载成功后，调用渲染函数执行渲染操作
// render();
})
代码里面提到过纹理对象Texture，简单的说纹理对象Texture就是包含一张图片的对象,纹理对象Texture所包含的图片就是.image属性，除此外，纹理对象Texture还提供了一些实际开发中经常会用到的重复、偏移、旋转等属性和方法。
canvas画布，视频作为纹理贴图
通过Three.js两个类CanvasTexture和VideoTexture可以分别实现把Canvas画布、视频作为纹理贴图使用。Canvas画布可以通过2D API绘制各种各样的几何形状，可以通过Canvas绘制一个轮廓后然后作为Three.js网格模型、精灵模型等模型对象的纹理贴图。把绘制了几何图案的canvas元素作为构造函数CanvasTexture的参数创建一个canvas纹理贴图。
如果作为纹理贴图使用的Canvas画布加载了图片，注意在图片加载完成的时候更新Threejs相关模型的纹理贴图。如果不更新纹理，你会发现canvas画布上的图片无法现在是Threejs模型的纹理上。即texture.needsUpdate = true;
视频作为three.js纹理贴图，是通过VideoTexture方法实现。视频本质上就是一帧帧图片流构成，把视频作为Threejs模型的纹理贴图使用，就是从视频中提取一帧一帧的图片作为模型的纹理贴图，然后不停的更新的纹理贴图就可以产生视频播放的效果。VideoTexture.js封装了一个update函数，Threejs每次执行渲染方法进行渲染场景中的时候，都会执行VideoTexture封装的update函数，执行update函数中代码this.needsUpdate = true;读取视频流最新一帧图片来更新Threejs模型纹理贴图。
小结
在Three.js中有各种各样的纹理，每种都有它的用途，我们可以使用多种格式的图片作为纹理，需要注意的是图片的加载是异步的所以在加载图片时要么使用渲染，要么在加载纹理时提供一个回调方法。使用HTML5的画布或者视频元素创建动态纹理，只需要将这些元素作为纹理的输入，并在纹理更新时将needsUpdate属性设置为true。
经过这几天的学习，针对three.js中常用的一些概念和用法都有所了解，接下来我会通过实现粒子波浪(iView官网首页的波浪)以及前端实现的网页端全景视频播放效果。届时会放到github上，同步学习和理解。希望大家能有所收获。
