user/uvanimation.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>three.js webgl - materials - TGA texture</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <link type="text/css" rel="stylesheet" href="../main.css">
</head>

<body>
  <div id="info">
    <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - UV Animation
  </div>

  <script type="module">

    import * as THREE from '../build/three.module.js';

    import Stats from '../jsm/libs/stats.module.js';

    import { OrbitControls } from '../jsm/controls/OrbitControls.js';

    let camera, scene, renderer, stats;
    // 创建一个时钟对象
    let clock;
    let material;

    init();
    animate();

    function init() {
      clock = new THREE.Clock();

      const container = document.createElement('div');
      document.body.appendChild(container);

      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(0, 50, 250);

      scene = new THREE.Scene();
      const texture = new THREE.TextureLoader().load('../textures/fire/fire8x4.png');

      //顶点着色器
      const VertexShader = `
          varying vec2 texcoord;
			    void main()
          {            
              gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
              texcoord = uv;
          }
      `;

      //片元着色器
      const FragmentShader = `
          varying vec2 texcoord;
          uniform sampler2D _MainTex;
          uniform float _Time;
          uniform float _HorizontalAmount;
          uniform float _VerticalAmount;
          uniform float _Speed;
          void main()
          {
            float time = floor(_Time * _Speed);
            float row = floor(time / _HorizontalAmount);    // /运算获取当前行
            float column = time - row * _HorizontalAmount;  // %运算获取当前列
            
            //首先把原纹理坐标i.uv按行数和列数进行等分，然后使用当前的行列进行偏移
            vec2 uv = texcoord + vec2(column, -row);
            uv.x /= _HorizontalAmount;
            uv.y /= _VerticalAmount;

            uv.x = fract(uv.x);//取小数部分[0-1]
            uv.y = fract(uv.y);
            
            //纹理采样
            vec4 c = texture2D(_MainTex, uv);
            
            gl_FragColor = c;
          }
        `;

      // shader传值
      const uniforms = {
        _Time: { value: 0.0 },
        _MainTex: { value: texture },
        _Speed: { value: 20 },
        _HorizontalAmount: { value: 8 },
        _VerticalAmount: { value: 4 }
      }

      //创建材质球
      material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: VertexShader,
        fragmentShader: FragmentShader,
        transparent: true//透明渲染
      });

      // material = new THREE.MeshBasicMaterial({
      //   map : texture
      // });

      // const geom = new THREE.BoxGeometry( 10, 10, 1 );
      const geom = new THREE.PlaneGeometry( 20, 20);
      const mesh = new THREE.Mesh(geom, material);
      mesh.rotation.x = -90;

      scene.add(mesh);

      camera.position.z = 5;

      //

      // const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
      // scene.add(ambientLight);

      // const light = new THREE.DirectionalLight(0xffffff, 1);
      // light.position.set(1, 1, 1);
      // scene.add(light);

      //

      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      container.appendChild(renderer.domElement);

      //

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.enableZoom = false;

      //

      stats = new Stats();
      container.appendChild(stats.dom);

      //

      window.addEventListener('resize', onWindowResize);

    }

    function onWindowResize() {

      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      renderer.setSize(window.innerWidth, window.innerHeight);

    }


    function animate() {

      var deltaTime = clock.getDelta();
      // 更新uniforms中时间，这样就可以更新着色器中time变量的值
      material.uniforms._Time.value += deltaTime;

      requestAnimationFrame(animate);

      render();
      stats.update();

    }

    function render() {

      renderer.render(scene, camera);

    }

  </script>
</body>

</html>