Three.js---纹理贴图

贴图分类API

纹理贴图

通过加载器TextureLoader的load方法加载一张图片返回一个纹理对象Texture，纹理对象Texture作为模型材质颜色贴图.map属性的值。

// 纹理贴图映射到一个矩形平面上
var geometry = new THREE.PlaneGeometry(204, 102); //矩形平面
// 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
  var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  scene.add(mesh); //网格模型添加到场景中

  //纹理贴图加载成功后，调用渲染函数执行渲染操作
  // render();
})

几何体顶点纹理坐标UV

UV是纹理贴图的图像的坐标，用于将贴图和模型的顶点坐标一一对应，从而确定映射关系。贴图图片在0~1之间，在贴图上以坐标取点，再将点映射到几何体上。

faceVertexUvs[0].set(x,y)可设置对应贴图（x,y)位置的像素值。

 //矩形平面，细分数默认1，即2个三角形拼接成一个矩形
var geometry = new THREE.PlaneGeometry(204, 102);
...
/**
 * 遍历uv坐标
 */
geometry.faceVertexUvs[0].forEach(elem => {
   
  elem.forEach(Vector2 => {
   
    // 所有的UV坐标全部设置为一个值
    Vector2.set(0.4,0.4);