窗口调整后如何调整Three.js中Texture Render Target的尺寸？

首先，你直接修改Xtexture.width和Xtexture.height的方式是错误的——Three.js的WebGLRenderTarget内部维护着WebGL的帧缓冲对象和纹理资源，直接修改这些属性不会触发资源的重建，所以旧尺寸的纹理依然在被使用，就会出现拉伸失真的情况；而重新创建整个RenderTarget变量如果处理不当，会导致旧的WebGL资源没有被正确释放，进而引发内存泄漏甚至WebGL上下文冻结。

正确的做法是使用WebGLRenderTarget提供的setSize()方法，它会帮你安全地销毁旧的帧缓冲和纹理，然后创建匹配新尺寸的资源：

var Xtexture = new THREE.WebGLRenderTarget( w, h, { 
  minFilter: THREE.LinearFilter, 
  magFilter: THREE.LinearFilter, 
  format: THREE.RGBFormat 
} ); 

window.addEventListener('resize', onResize, false); 

function onResize() { 
  w = window.innerWidth; 
  h = window.innerHeight; 
  // 使用setSize方法更新尺寸，而不是直接修改属性
  Xtexture.setSize(w, h); 
}; 

补充说明： #

• setSize()方法会自动处理WebGL资源的释放与重建，避免了手动创建新RenderTarget可能带来的资源泄漏问题。
• 如果你的场景中还有其他依赖这个RenderTarget的材质或对象，不需要额外操作——Three.js会自动使用更新后的尺寸纹理进行渲染，无需重新赋值变量。

内容的提问来源于stack exchange，提问作者user5515