[游戏开发]threejs道路贴图动画

效果

学习来源：郭隆邦

思路

1、计算道路的uv坐标

  let geometry = road.geometry;
  // 把UV坐标范围控制在[0,1]范围
  var pos = geometry.attributes.position; //顶点位置坐标
  var uv = geometry.attributes.uv; //顶点UV坐标
  var count = pos.count; //顶点数量
  var xArr = []; //多边形polygon的所有x坐标
  var yArr = []; //多边形polygon的所有y坐标
  for (var i = 0; i < count; i++) {
    xArr.push(pos.getX(i));
    yArr.push(pos.getY(i));
  }
  var [xMin, xMax] = minMax(xArr);
  var [yMin, yMax] = minMax(yArr);
  var xL = xMax - xMin;
  var yL = yMax - yMin;
  // 根据多边形顶点坐标与最小值差值占最大值百分比，设置UV坐标大小 把UV坐标范围控制在[0,1]范围
  for (var i = 0; i < count; i++) {
    var uvx = (pos.getX(i) - xMin) / xL;
    var uvy = (pos.getY(i) - yMin) / yL;
    uv.setXY(i, uvx, uvy)
  }
  console.log('控制台查看修改后的UV坐标', geometry.attributes.uv.array)
  function minMax(arr) {
    // 数组元素排序
    arr.sort(compareNum);
    // 返回极小值和极大值
    return [arr[0], arr[arr.length - 1]]
  }
  // 数组排序规则
  function compareNum(num1, num2) {
    if (num1 < num2) {
      return -1;
    } else if (num1 > num2) {
      return 1;
    } else {
      return 0;
    }
  }
  road.material = material;

2、贴图

var texture = new THREE.TextureLoader().load('./scene/road2.png');
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping
texture.repeat.set(1, 1); 
var material = new THREE.MeshPhongMaterial({
  // color: 0x0099ff,
  map: texture,
  // normalMap: normalTexture,
  normalScale: new THREE.Vector2(5, 5)
}); 

3、动画

var t = 0;

function flowAnimation() {
  requestAnimationFrame(flowAnimation);
  t += 0.005;
  texture.offset.x = t;
  texture.offset.y = t;
}
flowAnimation();