Three.js 紋理貼圖1--旋轉的地球

紋理貼圖是Threejs一個很重要的內容，游戲、產品720展示、物聯網3D可視化等項目程序員加載模型的同時同時需要處理紋理貼圖。

紋理UV坐標和頂點位置坐標是一一對應關系，這也就是為什么一張圖片可以映射到一個模型的表面，只要把圖片的每個紋理坐標和模型的頂點位置建立一對一的關系，就可以實現圖像到模型的映射。

什么是UV坐標

簡而言之就是貼圖按照某種特定的算法影射到模型表面的依據。U和V分別是圖片在顯示器水平、垂直方向上的坐標，取值一般都是0~1。

下面的例子會加深大家的理解，當我設置uv坐標為圖片右上角時，幾何體為一個矩形平面，貼圖就將圖片的右上角附在幾何體上，而不是完整的圖片。

 /**紋理坐標*/
 var uvs = new Float32Array([
  0.5,0.5, //圖片左下角
   1,0.5, //圖片右下角
   1,1, //圖片右上角
   0.5,1, //圖片左上角
 ]);

一般Threejs的球體、圓柱等幾何體創建的時候，都會通過特定算法自動生成幾何體的UV坐標。 

完整的效果圖

 

在線演示地址

主要代碼：

            var geometry = new THREE.SphereGeometry(200, 60, 60);
            // TextureLoader創建一個紋理加載器對象，可以加載圖片作為幾何體紋理
            var textureLoader = new THREE.TextureLoader();
            // 執行load方法，加載紋理貼圖成功后，返回一個紋理對象Texture
            textureLoader.load('./img/earth.jpg', function(texture) {
              var material = new THREE.MeshLambertMaterial({
                // 設置顏色紋理貼圖：Texture對象作為材質map屬性的屬性值
                map: texture,//設置顏色貼圖屬性值
              }); //材質對象Material
              var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh
              scene.add(mesh); //網格模型添加到場景中
              //添加幀渲染
              function render() {
                  renderer.render(scene, camera); //執行渲染操作
                  mesh.rotateY(0.01);
                  requestAnimationFrame(render); //請求再次執行渲染函數render
              }
              render();
            })