three.js 纹理贴图

three.js 纹理贴图

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

材质的颜色贴图属性.map设置后，模型会从纹理贴图上采集像素值，这时候一般来说不需要再设置材质颜色.color。.map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色贴图的颜色值RGB。

// 纹理贴图映射到一个矩形平面上
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();
})

2.多张图片

/**
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();

      /**
       * 创建网格模型
       */
      var geometry = new THREE.BoxGeometry(100, 100, 100); //创建立方体几何对象
      // TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理
      var loader = new THREE.TextureLoader();
      loader.setCrossOrigin("anonymous");
      
 var material = [
        //定义多个导入贴图的材质，放到一个数组里
        new THREE.MeshBasicMaterial({
          map: loader.load(
            "img1.jpg"
          ),
        }),
        new THREE.MeshBasicMaterial({
          map: loader.load(
            "img2.jpg"
          ),
        }),
        new THREE.MeshBasicMaterial({
          map: loader.load(
            "img3.jpg"
          ),
        }),
        new THREE.MeshBasicMaterial({
          map: loader.load(
            "img4.jpg"
          ),
        }),
        new THREE.MeshBasicMaterial({
          map: loader.load(
            "img3.jpg"
          ),
        }),
        new THREE.MeshBasicMaterial({
          map: loader.load(
            "img4.jpg"
          ),
        }),
      ];
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
 scene.add(mesh);
 
 // 以下为光源与相机设置
 ......

效果图