CODEWITHSUNDEEP
javascriptthree.jsrendertargetonresize
user5515
user5515

Reputation: 321

How can a texture render target be resized (after a window resize)?

I did this for the texture, but it doesn't work, the same texture is stretched on a larger area causing staircase artifacts (I have updated cameras, plane, quad, renderer)

I've seen this webgl solution but I don't have a clue how to do this in three.js -I tried re-defining the same texture var with a new texture but it caused webgl to freeze. webl-updating width and height of render target on the fly

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;
};

Upvotes: 1

Views: 1408

Answers (1)

Rabbid76
Rabbid76

Reputation: 210878

The size of a THREE.WebGLRenderTarget can be set and changed by setSize:

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

function onResize() {

    w = window.innerWidth;
    h = window.innerHeight;

    Xtexture.setSize(w, h); 
};

Upvotes: 2

Related Questions