026-局部纹理刷新

文本代码 中的第26篇。

026-局部纹理刷新

在版本 Three.js 113中, 纹理是.jpg格式的图片可以， .png格式不可以。

App.js

class App {
  ...
  // 增加一个立方体
  addBox() {
    var loader = new THREE.TextureLoader();
    const texture = loader.load('00.jpg');
    this.srcTexturen = texture
    // 控制透明
    // texture.minFilter = THREE.LinearFilter;
    // texture.generateMipmaps = false;
    const material = new THREE.MeshBasicMaterial({ map: texture });
    let geometry = new THREE.BoxGeometry(10, 10, 10)
    let cube = new THREE.Mesh(geometry, material);
    cube.name = "cube"
    this.stage.scene.add(cube)
    this.stage.onUpdate(() => {
      this.updataTextture()
    })
  }

  // 为立方体替换局部纹理，并闪烁起来
  updataTextture() {
    // 生成纹理
    var width = 200;
    var height = 350;
    var data = new Uint8Array(width * height * 3);
    dataTexture = new THREE.DataTexture(data, width, height, THREE.RGBFormat);
    let texture = dataTexture
    var size = texture.image.width * texture.image.height;
    var data = texture.image.data;
    if (flag == 0 && count > 20) {
      color.setHex(0xff0000)
      flag = 1
      count = 0
    } else if (count > 20) {
      flag = 0
      count = 0
      color.setHex(0xffffff)
    }
    count++
    var r = Math.floor(color.r * 255);
    var g = Math.floor(color.g * 255);
    var b = Math.floor(color.b * 255);

    for (var i = 0; i < size; i++) {
      var stride = i * 3;
      data[stride + 0] = r;
      data[stride + 1] = g;
      data[stride + 2] = b;
    }

    // 更新局部纹理
    var position = new THREE.Vector2(150, 150);
    const renderer = that.stage.renderer
    renderer.copyTextureToTexture(position, dataTexture, that.srcTexturen);
  }
  ...
}

<全文结束>