🌳 Introduction to ThreeJS - Part 3 - Cameras
date
Mar 15, 2023
slug
camera
status
Published
tags
ThreeJs
summary
It's me again 😎. Today Camera. I talked with a Unity engineer, I learned a lot about cameras. I was really tempted to teach you about what he told. So let's get to it 🚀🚀🚀!
type
Post
Intro
It's me again 😎. Today Camera. I talked with a Unity engineer, I learned a lot about cameras. I was really tempted to teach you about what he told. So let's get to it 🚀🚀🚀!
Perspective Camera
This is the camera we all use by default. A truncated, inverted triangle pyramid that starts from a point “of view” and ends at a defined point. We call this shape a Frustum.
Everything in this frustum will then rendered. Anything that comes out will be cut off or invisible. To demonstrate this principle, I've put together a little demonstration on my vercel. link ( I love playing with several cameras, it always makes a ✨woaw✨ effect. )
Here's what you can see: On the left is the rendering of the perspective camera seen on the right. I'd like to point out that in the perspective camera view (left), you can't see the dark blue ball because it comes out of the frustum. In fact, we never render to infinity. That's why, in video games, you sometimes see elements appear all at once in the distance. That's because they fit into the frustum. Likewise for the purple square, only the part in the frustum is rendered, otherwise it's cut out.
Finally, I'd like to add. During rendering, we stretch the “near” face. To obtain a square. Why? Well, if you stretch it, it's going to scale the nearest elements, so it's why the near objects are big and the far ones small. Admit it, it's so cool!? (When I learned about this, I thought wow, humans are so smart).
code to add camera :
Orthographic Camera
With this camera, objects don't change size with distance. This is because the camera is a square, not a frustum. We don't do the scaling part. This gives a 2D effect to our rendering of the scene (that's the goal). Once again, your super friend Alex has given you a little demo. link
code to add camera :
Cube Camera
The Cube Camera is actually six cameras on each side of a cube looking outwards. It can be used to apply textures to objects or to create a mirror-like effect.
Here we're showing the cube, but it's will be invisible because it's a camera. Each side will look straight on and record. Then we can compile the whole thing into a texture. ThreeJs has a great example that shows you how it works. link
As you can see. There's a great reflection but in practice it's just the work of the camera cube. I love this effect again it makes a great “Wow” effect. (Yeah, my goal is to make people face “Wow!” 😎).
Conclusion
The conclusion? Cameras are cool and next time we'll talk about Texture 🤗!