2D Scene is not responsive according to screen sizes

Questions
, , ,
1

I was building a 2D Scene in threejs using orthographic camera and placed the Sprites for the HUD part inside the Scene only so that i cant be changed from html.
I have added everything of the HUD in the cameragroup along with the camera and the cameragroup in the scene. Am moving the cameraGroup for the HUD to stay in its place only. But the problem is that it is not responsive according to different screen sizes. Is there any way like it was in some of the Game engines like cocos and unity to add a widget as a component and it handles multi resolution automattically?

2

Try the following

// Camera settings
const factor = 1;
const aspect = window.innerWidth/ window.innerHeight;
const camera = new THREE.OrthographicCamera(
	(factor * aspect) / -2,
	(factor * aspect) / 2,
	factor / -2,
	factor / 2,
	0.1,
	1000
);
camera.position.z = 1;

// On window resize listener 
window.addEventListener("resize", onResize);

function onResize() {
 	const [width, height] = [window.innerWidth, window.innerHeight]
  	const aspect = width / height;

	camera.left = (factor * aspect) / -2;
	camera.right = (factor * aspect) / 2;

	camera.updateProjectionMatrix();

	renderer.setSize(width, height);
}

factor is a sort of FOV for OthographicCamera, you can think of it as zoom factor.