Use images in three as the material, and the material flow up

Implementation steps:

1, create a small flat plane, affix the material we use pictures

= const initArrows Export () => { 
  the let texture_left new new THREE.TextureLoader = () Load (process.env.BASE_URL + "Object / arrows.png");. 

  texture_left.wrapS = THREE.RepeatWrapping; // horizontal grain tiled 
  texture_left.wrapT = THREE.RepeatWrapping; // vertically tiled texture 


  texture_left.repeat.x = 3; // repeatedly generating N identical texture 
  texture_left.repeat.y = 1; // N rows is generated 


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

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


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

2, the plane drawn loaded into the scene, render the page, it is noted that: plane_lefts.name = 'arrow' + index + '-' + i; adding names to the name attribute of each plate

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


. 3, most part of the core is to find the most appropriate plane in the animate (this.scene.getObjectByName), flow is then controlled by controlling his textures offset

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

效果图：