Walk through the core building blocks of every Three.js scene. Every 3D scene out there is composed of the same main elements:
- Objects (cube, lights)
- A camera
- A renderer
- The canvas
Lesson 1 of 14
Modern Three.js Course
Go from zero to a modular Three.js app with Vite and TypeScript.
Transcript
[00:00] So before we install 3ds and create our 3d scene let's see what elements actually make up a 3d experience So first we need to render something it could be A cube A really good looking cube like this one. It could be the donut that we saw at the beginning Maybe we create something like a floor with a plane like this and we add some lighting to the scene so one light here the illuminates our cube and a little bit of that. So this is what we call objects. So we're going to take those objects and frame them in what we call a view. Okay, so something like this.
[01:06] And to be able to see them we're gonna need a camera. I'm gonna take the camera here and then the camera is gonna allow us to take pictures each frame of our 3dsim. Then we need to render these images that the camera is taking into a DOM element to be able to see them in our web application. So this is where the DOM element of the canvas comes into play. So 3GS is going to take all of our objects, camera, lights, etc.
[01:51] And it's going to use the WebGL render, which is the API That the browser will use for this and it's gonna run everything in a DOM element of the canvas with.