Renderer size and Orthographic Camera: View gets distorted

Questions
1

I’m currently working on a 2d Plot using three.js and using Orthographic Camera to achieve a mapping from plot coordinates to the three.js scene:

renderer = new THREE.WebGLRenderer();
renderer.setSize( myWidth, myHeight );
camera = new THREE.OrthographicCamera( 0, myWidth, 0, myHeight, -1000, 1000 );

...

renderer.render( ..., camera)

I on purpose use the same width (myWidth) and height (myHeight) for the renderer dimension and the camera distance between the frustrums. Doing so, I get the same coordinate system with browser-viewport pixels as in the scene itself (according X and Y). This seems to work.

The problem is, that the rendered content gets distorted. Using Points with PointMaterial results in rectangles that are wider than they are high (the width of my renderer is bigger than the height). And I don’t get why to be honest. As soon as I change the width and height of the renderer to be the same, the distortion is gone. I however, want to keep my requirement, that the coordinate systems stay identical.

I’m assuming, that I still misunderstand some parameters to initiate the renderer or the camera. What is wrong?

2

Seems it should be like this:

renderer = new THREE.WebGLRenderer();
renderer.setSize( myWidth, myHeight );

See the docs on WebGLRenderer. It takes just one object of parameter in its constructor.

1 Like
3

Ohh sry, my bad, it is like that in code. Edited the original post.

4

Any chance to provide an short example (jsfiddle, codepen etc.), that shows the problem?

5

6

Why is it like this:
var width = 10000;
?

Maybe this option is better:

var width = innerWidth;
var height = innerHeight;
7

I need it to be that wide :slight_smile:

Shouldn’t that be possible, without distorting the PointMaterial in combination with a OrthographicCamera?

8

I’ve got no distortion with your codepen:
изображение
The point is a perfect square :slight_smile:

9

Oh wow, I do:

distorted
distorted774×401 13.8 KB

10

That’s how it looks on the forum page for me:

изображение

11

I’m on Chrome Linux Version 80.0.3987.149 (Official Build) (64-bit)

12

Win 10, Chrome 80.0.3987.162 or Firefox 74.0 - the same perfect square.