How do I make the three.js animation responsive?

Questions
1

I made this animation using three.js but it doesn’t make responsive.

On mobile only notes are appearing

I even add this line in html code.

< meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">

How did I achieve it???

I even try this but it doesn’t work

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

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );
    PIErender();

}

Please help me.

Screenshot –
Screenshot%20(8)

index.html (735 Bytes)
experiment.js (67.0 KB)

These were files where code is written.

3

The problem here is your scene is made to be wide, and when you view it on a mobile and set the camera to use the mobile’s width/height it will crop off the edges. This is the same as if you were using and div with a background image, and css background-size: cover;. What you want to implement is more like css background-size: contain;

To do this, you would have to decide on the screen width/height ratio you want your camera to be, and resize it based off that. The code can be fairly complex for this, something along the lines of the following (untested unless you are willing to provide a codepen).

var desiredWidth = 1080;

var actualHeight = window.innerHeight;
var actualWidth = window.innerWidth;

// I'm guessing with the below block without testing
// based on https://stackoverflow.com/questions/9071830/contain-an-image-within-a-div#answer-27663377
if(actualHeight < actualWidth){
  var setHeight = desiredHeight;
  var setWidth = actualWidth/actualHeight * desiredHeight;
}
else{
  var setHeight = actualHeight/actualWidth * desiredWidth;
  var setWidth = desiredWidth;
}

camera.aspect = setWidth / setHeight;
camera.updateProjectionMatrix();

renderer.setSize( setWidth, setHeight );

A simpler alternative is not dynamically resizing you content, and letting it stretch to fit (css style background-size: 100% 100%; )

var desiredHeight = 1920;
var desiredWidth = 1080;

camera.aspect = desiredWidth / desiredHeight;
camera.updateProjectionMatrix();

renderer.setSize( desiredWidth, desiredHeight );