My intention was to improve the texture quality, but instead of achieving my goal, I encountered an issue where the same texture is being stretched over a larger area, resulting in unwanted staircase artifacts. I tried updating various elements like cameras, planes, quads, and renderers but didn't see any improvement.
I came across a solution for WebGL on a website, but unfortunately, I'm not sure how to implement it using three.js. One attempt I made was re-defining the same texture variable with a new texture, but this action caused WebGL to freeze. The solution I found was related to updating the width and height of the render target dynamically. You can view the solution here.
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;
Xtexture.width = w;
Xtexture.height = h;
};