Threejs紋理對象Texture陣列、偏移、旋轉(紋理動畫)

紋理對象Texture陣列、偏移、旋轉

本文是Three.js電子書的8.4節

8.1節給大家提到過紋理對象Texture，簡單的說紋理對象Texture就是包含一張圖片的對象,紋理對象Texture搜包含的圖片就是.image屬性，除此外，紋理對象Texture還提供了一些實際開發中經常會用到的屬性和方法。

陣列

紋理貼圖陣列映射。

var texture = textureLoader.load('太陽能板.png');
// 設置陣列模式   默認ClampToEdgeWrapping  RepeatWrapping：陣列  鏡像陣列：MirroredRepeatWrapping
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv兩個方向紋理重複數量
texture.repeat.set(4, 2);

偏移

不設置陣列紋理貼圖，只設置偏移

var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('太陽能板2.png');// 加載紋理貼圖
// 不設置重複  偏移範圍-1~1
texture.offset = new THREE.Vector2(0.3, 0.1)

陣列紋理貼圖的同時，進行偏移設置

// 設置陣列模式
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv兩個方向紋理重複數量
texture.repeat.set(4, 2);
// 偏移效果
texture.offset = new THREE.Vector2(0.5, 0.5)

紋理旋轉

var texture = textureLoader.load('太陽能板.png'); // 加載紋理貼圖
// 設置紋理旋轉角度
texture.rotation = Math.PI/4;
// 設置紋理的旋轉中心，默認(0,0)
texture.center.set(0.5,0.5);
console.log(texture.matrix);

案例：草地效果

提供一張寬高尺寸比較小的草地貼圖，然後通過該貼圖設置一片範圍比較廣的草地效果，這時候陣列貼圖是比較好的選擇。

/**
 * 創建一個地面
 */
var geometry = new THREE.PlaneGeometry(1000, 1000); //矩形平面
// 加載樹紋理貼圖
var texture = new THREE.TextureLoader().load("grass.jpg");
// 設置陣列
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv兩個方向紋理重複數量
texture.repeat.set(10, 10);
var material = new THREE.MeshLambertMaterial({
  map: texture,
});
var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh
scene.add(mesh); //網格模型添加到場景中
mesh.rotateX(-Math.PI / 2);

紋理動畫

紋理動畫比較簡單，必須要在渲染函數中render()一直執行texture.offset.x -= 0.06動態改變紋理對象Texture的偏移屬性.offset就可以。

// 渲染函數
function render() {
  renderer.render(scene, camera); //執行渲染操作
  requestAnimationFrame(render);
  // 使用加減法可以設置不同的運動方向
  // 設置紋理偏移
  texture.offset.x -= 0.06
}
render();

/**
 * 創建一個設置重複紋理的管道
 */
var curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-80, -40, 0),
  new THREE.Vector3(-70, 40, 0),
  new THREE.Vector3(70, 40, 0),
  new THREE.Vector3(80, -40, 0)
]);
var tubeGeometry = new THREE.TubeGeometry(curve, 100, 0.6, 50, false);
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('run.jpg');
// 設置陣列模式爲 RepeatWrapping
texture.wrapS = THREE.RepeatWrapping
texture.wrapT=THREE.RepeatWrapping
// 設置x方向的偏移(沿着管道路徑方向)，y方向默認1
//等價texture.repeat= new THREE.Vector2(20,1)
texture.repeat.x = 20;
var tubeMaterial = new THREE.MeshPhongMaterial({
  map: texture,
  transparent: true,
});

總結