CODEWITHSUNDEEP
javascriptandroidthree.js
Dig_Dig_Dig
Dig_Dig_Dig

Reputation: 125

Three.js problems with mobile device orientation

I'm bug testing a web app that was written in three.js and I've had reports of users on tablets (specifically Android) getting some strange behavior from the scene.

Image with error

Here is the same view as it should be rendered:

enter image description here

It happens when they change device orientation but has also been reported, on a 2 in 1 tablet running windows, in Microsoft Edge. The user gets a similar error when swiping their finger across the screen (the browser wants to scroll vertically and horizontally but then jumps back to the fixed view). I haven't seen this happen on a desktop yet.

Here is my onWindowResize function:

 function onWindowResize(event) {

    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;

    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

    camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    camera.updateProjectionMatrix();

    composer.reset();

}

Any thoughts?

Upvotes: 2

Views: 780

Answers (1)

Dig_Dig_Dig
Dig_Dig_Dig

Reputation: 125

I realized that I was resizing the fxaa composer and setting it to screen width and height:

effectFXAA.uniforms['resolution'].value.set(1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT);

when I should have been using canvas width and height: 

effectFXAA.uniforms['resolution'].value.set(1 / canvas.width, 1 / canvas.height);

Changing this fixed my issue and I can now resize without any problems.

Upvotes: 1

Related Questions