three.js 紋理動畫實現

需求：

1、使用一張長圖、分別播放這張長圖的不同位置 來達到動態內容的目的

解決方案：

1、紋理創建並指定重復方向：this.texture.wrapS = this.texture.wrapT = THREE.RepeatWrapping;

2、設定紋理顯示范圍（就是你的圖片要顯示的一格動畫范圍）：texture.repeat.set( 1 / this.tilesHorizontal寬, 1 / this.tilesVertical高 );

3、然后就是更改 texture.offset.x  、texture.offset.y 的事情了

一般的動畫的話 可以直接在動畫函數體內直接更改這兩個參數值、

當然這個自帶的動畫更新函數是很快的、要不想播放的這么快怎么解決呢、

4、這個就要涉及函數類了、先創建一個類、然后創建紋理的時候 new 繼承一份類型、 然后在這個類里面加一個方法、去更新繼承的這個類的參數、最后在場景動畫里面調取的時候去處理就可以了。

不用參考我下面的寫法、我這個就是直接copy過來的、這些都可以根據實際的場景去自定義一套自己的規則。

Addtexture(){  
      this.texture = new THREE.TextureLoader().load(this.path+"btn/c.png")// this.texture.repeat.set(1/4,  1/6);
      this.test = new this.TextureAnimator(this.texture, 4, 6, 16, 55)
      
      // this.updatetexture()
    },
    update(){
      var delta = this.clock.getDelta(); 
      this.test.update(1000*delta)
    },
  TextureAnimator(texture, tilesHoriz, tilesVert, numTiles, tileDispDuration) 
  {    
    // note: texture passed by reference, will be updated by the update function.
      
    this.tilesHorizontal = tilesHoriz;
    this.tilesVertical = tilesVert;
    // how many images does this spritesheet contain?
    //  usually equals tilesHoriz * tilesVert, but not necessarily,
    //  if there at blank tiles at the bottom of the spritesheet. 
    this.numberOfTiles = numTiles;
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
    texture.repeat.set( 1 / this.tilesHorizontal, 1 / this.tilesVertical );

    // how long should each image be displayed?
    this.tileDisplayDuration = tileDispDuration;

    // how long has the current image been displayed?
    this.currentDisplayTime = 0;

    // which image is currently being displayed?
    this.currentTile = 0;
      
    this.update = function( milliSec )
    {
      this.currentDisplayTime += milliSec;
      while (this.currentDisplayTime > this.tileDisplayDuration)
      {
        this.currentDisplayTime -= this.tileDisplayDuration;
        this.currentTile--;
        if (this.currentTile == this.numberOfTiles)
          this.currentTile = 0;
        var currentColumn = this.currentTile % this.tilesHorizontal;
        texture.offset.x = currentColumn / this.tilesHorizontal;
        var currentRow = Math.floor( this.currentTile / this.tilesHorizontal );
        texture.offset.y = currentRow / this.tilesVertical;
      }
    };
  },
    AddPlaneBuffer(spot) {// 方向按鍵模型
    
      var geometry = new THREE.PlaneBufferGeometry(2, 5, 32);
      var material = new THREE.MeshBasicMaterial({
        map: this.texture,
        side: THREE.DoubleSide,
        transparent: true, // 調整黑色背景問題。
      });
      var plane = new THREE.Mesh(geometry, material);
      plane.name = spot.name;
      plane.ivt = spot.ivt;
      plane.modeltype = spot.type;
      plane.XYZ = spot.cpoint
      plane.size = spot.size
      plane.position.set(spot.spot.x,spot.spot.y,spot.spot.z);
      plane.lookAt(0, 999, 0);
      this.scene.add(plane);
    },
    animate() { // 實時更新動畫函數
      this.renderer.render(this.scene, this.camera);
      window.requestAnimationFrame(() => this.animate());
      this.orbitControls.update();
      this.update()
      TWEEN.update();
    },