在three中使用图片作为材质，并将材质流动起来

实现步骤：

1、创建一个平面小平板，贴上我们使用的图片材质

export const initArrows = () => {
  let texture_left = new THREE.TextureLoader().load(process.env.BASE_URL + "object/arrows.png");

  texture_left.wrapS = THREE.RepeatWrapping;   //纹理水平方向的平铺方式
  texture_left.wrapT=THREE.RepeatWrapping;   //纹理垂直方向的平铺方式


  texture_left.repeat.x = 3;  //重复产生N个相同贴图
  texture_left.repeat.y =1;  //产生N行


  let planeGeometry = new THREE.PlaneGeometry(50, 15);

  let plane_left = new THREE.MeshBasicMaterial();
  plane_left.map = texture_left;
  plane_left.side = THREE.DoubleSide;


  let plane_lefts = new THREE.Mesh(planeGeometry, plane_left);
  return plane_lefts
}

2、将画出来的平面加载到场景中，在页面中渲染出来，需要注意的是：plane_lefts.name = ‘arrow‘+ index + ‘-‘ +i;给每个平板的name属性添加名字

let plane_lefts = initArrows()
  plane_lefts.position.y = value.y - value.data.size*200*0.75;
  plane_lefts.position.x = value.x - value.data.size*200*0.38;
  plane_lefts.rotation.y += 0.5*Math.PI
plane_lefts.name = ‘arrow‘+ index + ‘-‘ +i;
plane_lefts.position.z = -value.data.size*200*0.37;
plane_lefts.scale.set(value.data.size,value.data.size,value.data.size);
this.scene.add(plane_lefts);


3、最最最最核心的部分就是在animate中找到相应的平面（this.scene.getObjectByName），然后通过控制他的偏移量来控制贴图材质的流动情况

this.scene.getObjectByName(‘arrow‘+ index + ‘-‘ +i).material.map.offset.x -= 0.1

效果图：

在three中使用图片作为材质，并将材质流动起来

原文：https://www.cnblogs.com/kdiekdio/p/11512145.html