Three.js Cameras Explained | Tutorial for Beginners! (JavaScript)

Follow me on:
Patreon: / simondevyt
Twitter: / iced_coffee_dev
Instagram: / beer_and_code
Github: github.com/simondevyoutube/
Three JS cameras are quite simple to use, but require an understanding of the underlying 3d mechanics like perspective and orthographic projections in order to fully comprehend. In this project we'll explore both types of cameras that are offered in three js, we'll look at the PerspectiveCamera and OrthographicCamera classes, understand how the projections work by looking at the viewing frustums and how the parameters modify the furstum. We'll also step through the code in JavaScript to instantiate and manipulate the camera's position and orientation.
This is part in a series of tutorials on Three.js, aimed at helping beginners understand everything from the ground up. This is a beginners course, aimed at people with no background in the subject. We've covered simple setup and basic 3d worlds, and this project should give you a solid understanding of three.js camera setups.
The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.
In the video, we cover:
* How to instantiate and use the three js camera classes.
* What are the differences between the camera types.
* Viewing frustums and how to understand camera parameters, how they relate to perspective and orthographic projections.
* How to manipulate cameras from code, changing position and orientation.

[@simondev758]

If you enjyoed this, check out my GLSL course: simondev.teachable.com/p/glsl-shaders-from-scratch Or support me on patreon!: www.patreon.com/simondevyt

[@notevoyadarminombre156]

I've just seen your set of videos for the first time and I want to thank you for putting out this content, great work!

[@mortkebab2849]

Your tutorials are always very clear and easy to digest and contain just enough to convey the essentials.

[@culpritdesign]

Your videos contain information that is dense yet approachable without anything unnecessary.

[@techrurallivining9417]

Excuse me? Best explanation I've ever heard. Straight to the fundamentals and easy to understand. Made some awesome notes.

[@ngocatnguyen5771]

nice, i'm a game developer start from scratch as well, and not many video tutorial explain clearly about both orthographic and perspective camera in only 8 mins like you

[@makl-the-oracle]

What a GOAT, you're clearly very competent on the subject, very refreshing! Subbed instantly

[@abexoxo]

Clear, logical, demonstrative and comprehensive. Thanks Simon!

[@asdakuhi8h]

Your explanation of orthographics cameras blew my mind

[@evanparrish4329]

This video is outstanding!! Thank you so much for making this 😁

[@swoorp]

I know you will soon reach a huge milestone

[@Mohanad_mmn]

You are a legend. Thank you!

[@dorianmac3389]

This explanation is so incredibly well done. Everything from how it is displayed to the way it is explained. This taught me exactly what I needed in a way that met me EXACTLY where I was at. Instant subscribe from me. Thanks for the great content

[@lorenzodossi]

Love this kind of videos!

[@simondev758]

Great to hear! Tomorrow there's a semi follow up building on this to make a robust third person camera, and fixing some often overlooked framerate independence issues.

[@granthawkins88]

Awesome videos, I'm starting a 3D browser game and this is just what I need! Anyone ever say your voice sounds like Archer? I keep expecting to hear ice clinking in a glass..

[@simondev758]

lol, wife says she hears it now too

[@kanpekiken2481]

Thanks!!! You explain these concepts so well. Did you learn all this mostly in academics or in your professional career or just on the side?

[@simondev758]

Welcome! Professional career, used to work on xbox/playstation/pc games as graphics/optimization specialist.

[@kanpekiken2481]

@@simondev758 those are my exact goals ! You lived my dream.

[@simondev758]

Let me know if there's something you want to know about my experience. How to get into game development, etc. I've worked for several studios, and I was the architect for a big studio overseeing technical decisions from all the teams, if you have any questions let me know.

[@kanpekiken2481]

@@simondev758 that’s amazing. I know the gaming industry gets a bad rep but as someone incredibly passionate about it, I would love to code creating games. My question to you is how should ones portfolio look like when applying to the industry? I currently have many mini games that I’ve created from scratch that took me 2-8 days to create nothing over a thousand lines of code though. I fear it’s not enough to impress recruiters.

[@simondev758]

It does get a bad rap, and it's not totally unwarranted. But as someone who's worked both in games and at Google, games was the most fun I've ever had in my career. Both the work and the people. As for what should your portfolio look like? What kind of places are you trying to apply to? Most big places are going to use Unreal or internal tech, almost certainly c++ based. Think about what the hiring person wants to see, what kind of experience they value. What *I* did was to build out a single, semi large project. I wanted to be a graphics specialist, so I wrote a small 3d engine from scratch in C++. Took about 3 weeks but I had offers from major studios like EA and others pretty soon after.

[@surakshamotilal2412]

Thank you for these videos! I tried to make the other tutorials work with the recent versions but there are conflicts, so I used the older versions. Will there be any issue with using the older 2020 versions now?

[@joimeecajandab1438]

I LOVE THREEJS

[@ultratuya2324]

thanks

[@thinginthenorth]

How do you switch between the two cameras? Lets say im making a ingame map with a perspective but also orthographic view from above. Switch cameras in the update function? Thanks for the clear introduction.

[@LucaDeCaprio]

Great video. Could you do a video going into more depth on your thoughts on JS and three.js? I'd like to know your opinion on building a full game in the browser using it. I know JS is single threaded so it worries me for performance.

[@kanpekiken2481]

I don’t think it would be wise to build a “full game” on browser but something small like a mini game is entirely possible. I’m not as experienced as Simon but those are my two cents.

[@simondev758]

Great suggestion, might be good to branch out into some more topics like that.

[@breakdancerQ]

This is really good, because even an idiot like me could understand it

[@diffuusio4852]

I just wanted to do a water drop wave and now I'm knee deep in three.js.

[@Pixel_Entriment24]

it's really similar to unity

[@thesejo.6691]

where is code in git hub

[@simondev758]

Look for the one with camera in the name.

[@CaffeineInjected]

This would be so great if it was in say.. Unreal Engine or perhaps your own custom engine. JavaScript just gives me the willies.

[@simondev758]

Hah, the concepts are easy to port.

[@CaffeineInjected]

@@simondev758 Let us hope so. :)