033局部纹理刷新texSubImage2D

参考:
在线体验
代码出处
更新原理: texSubImage2D
参考教程

UpdatableTexture.js

import * as THREE from &＃39;./lib/three.module.js&＃39;export default class UpdatableTexture extends THREE.Texture {isUpdatableTexture &＃61; trueconstructor(format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy, encoding) {super(null, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding)var canvas &＃61; document.createElement(&＃39;canvas&＃39;);canvas.width &＃61; 1;canvas.height &＃61; 1;var ctx &＃61; canvas.getContext(&＃39;2d&＃39;);var imageData &＃61; ctx.createImageData(1, 1);this.image &＃61; imageData;this.magFilter &＃61; magFilter !&＃61;&＃61; undefined ? magFilter : THREE.LinearFilter;this.minFilter &＃61; minFilter !&＃61;&＃61; undefined ? minFilter : THREE.LinearMipMapLinearFilter;this.generateMipmaps &＃61; true;this.flipY &＃61; true;this.unpackAlignment &＃61; 1;this.needsUpdate &＃61; true;}setRenderer(renderer) {this.renderer &＃61; renderer;this.gl &＃61; this.renderer.getContext()this.utils &＃61; THREE.WebGLUtils(this.gl, this.renderer.extensions, { isWebGL2: false })}setSize(width, height) {if (width &＃61;&＃61;&＃61; this.width && height &＃61;&＃61;&＃61; this.height) return;var textureProperties &＃61; this.renderer.properties.get(this);if (!textureProperties.__webglTexture) return;this.width &＃61; width;this.height &＃61; height;var activeTexture &＃61; this.gl.getParameter(this.gl.TEXTURE_BINDING_2D);this.gl.bindTexture(this.gl.TEXTURE_2D, textureProperties.__webglTexture);if (!textureProperties.__webglTexture) this.width &＃61; null;this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.utils.convert(this.format),width,height,0,this.utils.convert(this.format),this.utils.convert(this.type),null);this.gl.bindTexture(this.gl.TEXTURE_2D, activeTexture);}update(src, x, y) {var textureProperties &＃61; this.renderer.properties.get(this);if (!textureProperties.__webglTexture) return;var activeTexture &＃61; this.gl.getParameter(this.gl.TEXTURE_BINDING_2D);this.gl.bindTexture(this.gl.TEXTURE_2D, textureProperties.__webglTexture);this.gl.texSubImage2D(this.gl.TEXTURE_2D,0,x,this.height - y - src.height,this.utils.convert(this.format),this.utils.convert(this.type),src);this.gl.generateMipmap(this.gl.TEXTURE_2D);this.gl.bindTexture(this.gl.TEXTURE_2D, activeTexture);}
}