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

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


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.


Thank you very much!