The way of thinking with 3D space

Question

I've got a webdevelopers background and now i'm into making a simple 2D side scroller with Three.js. Even though I make a 2D game I will draw it in 3D space to make an simple conversion to 3D when time feels right form me. Why i chose Three.js? Well, it is JavaScript and since I like creating for the web and exploring new technologies it would be fun to make it in a language I already know.

But now to my problem. It is not really a technical problem but since I'm new to 3D space it is more a way of thinking. I'm used to think in pixel or percentage (relative) sizes when working with the web and it is always 2 axis (X/Y) or rather width/height. But the 3D space, camera and perspectives gives me headache since I'm not used to it.

How should I think i matter of sizes in 3D space? The camera has a field of view of 45 degrees on a 800x600 canvas. The frustrum is 1 (near) and 1000 (far). Does this mean that if an object is near (1) and has a size of 800x600 it will actually fill the canvas?

Well, as you can see i'm new to this and the way of thinking in 3D space and this is a new turf for me.

Answer 1

Pick a scale that fits your project, then adjust camera parameters to have a good view on whatever you want to show. So you can think of sizes and positions like in the real world. .

1 unit = 1m is a very common convention, but really it can be anything you like as long as it's consistent. If you mostly deal with microscopic things, maybe thinking 1mm as base unit is more appropriate. Three.js doesn't need to know, or care what your unit system is. But for example trying to model a whole planet with 1mm units would result in such huge values that you are likely to run into issues related to how floating point numbers work.

Screen resolution and such don't have much relevancy here unlike in bitmap graphics. If you really need pixel perfect positioning related to the display (for example adjusting an object size or setting the camera so that an object fills the screen or appears in specific pixel size), it possible but often involves quite a lot of math.

Hard to give a definite answer to the math part, there are lot of different use cases, questions and answers to those kind of specific situations.

You could also think of using OrtographicCamera to have a strictly 2D (no perspective) view to the 3D scene. That would also make pixel positioning / screen position and size calculations easier.

Answer 2

You have to think in terms of trigonometry.

Objects closer to the near plane have to be smaller than objects closer to the far plane in order to fill your canvas.

In your case, what is the size of an object in the near plane that fills the canvas?

Just note that with a field of view of 45 degrees, the angle with vertex in the camera and end points in the center and in the top of the near plane is 22.5 degrees, right?.

Then, if the distance of the object to the camera is 1 (near plane), the height of this object to fill the distance from the center to the top of the canvas is: tan( 22.5 ). So the height of the object to fill the canvas should be: 2 * tan( 22.5 ). In general:

     height = 2 * distance_object_camera * tan( field_of_view / 2 )

Also note that this result is independent of the size of the canvas that you are using.

Answer 3

You need much geometry and trigonometry. For example in euklidian space there is the triangle inequality.