How to size the renderer bigger than the actual screen without stretching the content?

Questions
, , , ,
1

Hi everyone,

I have a little issue, which I can’t solve.
I don’t know how to size the renderer in a size of 6144 x 768 px.
I know this is a big size and a really unusual size, but I need it for a special screen.
So far I tried to change the values within the functions, but if I change the aspect ratio and the size, it will stretch the whole scene.
Not only the background, also the elements (in this case autonomous agents / boids with models).

Also I don’t know why, even when I make renderer that long, I can’t scroll vertically to see the whole scene. Maybe I am used to other canvases, I am quite new to three.js.

Does anyone know how to fix it?

My code:

// creating the scene and the camera
const scene = new THREE.Scene();
const aspectRatio = 6144 / 768;
const camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);

// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(6144, 768);

document.body.appendChild(renderer.domElement);

Resizing_Boids_Scene
Resizing_Boids_Scene1920×1087 44.9 KB

2

Make sure there’s no CSS applied to the canvas itself, so that it can resize properly to the resolution you’re giving it, instead of just filling the container element.

2 Likes
3

Thank you very much!