纹理对象Texture阵列、偏移、旋转
本文是Three.js电子书的8.4节
8.1节给大家提到过纹理对象Texture，简单的说纹理对象Texture就是包含一张图片的对象,纹理对象Texture搜包含的图片就是.image属性，除此外，纹理对象Texture还提供了一些实际开发中经常会用到的属性和方法。
阵列
纹理贴图阵列映射。
var texture = textureLoader.load('太阳能板.png');// 设置阵列模式 默认ClampToEdgeWrapping RepeatWrapping：阵列 镜像阵列：MirroredRepeatWrappingtexture.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~1texture.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); //网格模型对象Meshscene.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');// 设置阵列模式为 RepeatWrappingtexture.wrapS = THREE.RepeatWrappingtexture.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,});
