Mapping OrthographicCamera World Units to Pixels

Questions
1

I’d like to map 1 world unit to be 1 pixel in three.js using the OrthographicCamera. Everything I’ve read online seems to suggest I can just use window.innerWidth and window.innerHeight should work just fine this but that doesn’t seem to work for me.

Ideally, this would show a 100x100 pixel square on the screen from the BoxBufferGeometry, no matter the screen dimensions.
https://jsfiddle.net/c7s49nd2/8/

Any idea what I’m doing wrong?

2

You create a 100x100x100 box and you place the camera at 500 on z while your frustum far plane is set to 100. Instead a box you should use a plane. (assuming it’s a 2D layer)

https://jsfiddle.net/Fyrestar/y5cew19f/

1 Like
3

Thanks! I can’t believe just missed a 0 :man_facepalming:t3:

1 Like