Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
PerspectiveCamera
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Welcome Back! In this lesson, we’re going to dive into one of the most important parts of any 3D scene: the . Specifically, we’ll explore the PerspectiveCamera , which is the most commonly used camera in Three.js and which mimics how we see the real world. By the end of this lesson, you’ll understand how to set up and control the camera to create immersive 3D experiences. Let’s get started!
The Role of the Camera --- In Three.js, the is like your eyes in the . It determines what you see and how you see it. The PerspectiveCamera is the most popular type of camera because it mimics how we see the real world—objects farther away appear smaller, and closer objects appear larger.
Why Use a PerspectiveCamera ? --- The PerspectiveCamera creates a sense of depth, making your feel more realistic. It’s perfect for , , and any project where you want to create an immersive experience.
Creating the Camera --- Let’s create a PerspectiveCamera and break down its properties. Here’s the basic setup:
const camera = new THREE.PerspectiveCamera(
75, // Field of view (FOV)
window.innerWidth / window.innerHeight, // Aspect ratio
0.1, // Near clipping plane
1000 // Far clipping plane
);The Field of View (FOV) is the angle that determines how much of the scene the camera can see. It’s measured in degrees. A higher FOV gives you a wider view, while a lower FOV zooms in.
Try adjusting the FOV value to see the difference!
The is the width of the view divided by its height. We usually set it to match the browser window’s dimensions to avoid stretching or distorting the scene.
window.innerWidth / window.innerHeight
The and clipping planes define the range of visibility for the camera. Objects closer than the near plane or farther than the far plane won’t be rendered.
By default, the camera is placed at the origin (0, 0, 0). If you don’t move it, you’ll be inside any objects you create, and you won’t see anything!
Let’s move the camera back along the so we can see the cube. We’ll also move it slightly to the right and down to demonstrate how positioning works.
camera.position.z = 3; // Move forward to your eyes
camera.position.x = 2; // Move right
camera.position.y = -2; // Move downYou can make the camera focus on a specific point in the scene using the method.
const target = new THREE.Vector3(0, 0, 0); // Target point (origin)
camera.lookAt(target); // Make the camera look at the targetPutting It All Together --- Here’s the complete code for setting up the PerspectiveCamera and rendering a rotating cube:
const camera = new THREE.PerspectiveCamera(
75, // FOV
window.innerWidth / window.innerHeight, // Aspect ratio
0.1, // Near clipping plane
1000 // Far clipping plane
);
camera.position.z = 3;
camera.position.x = 2;
camera.position.y = -2;
camera.lookAt(new THREE.Vector3(0, 0, 0)); // Look at the center
const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();In the later lesson, we’ll explore another camera, the . Get ready to expand your 3D toolkit.
Great job! You’ve just learned how to set up and control the in Three.js. Play around with the camera’s properties—try changing the FOV, moving the camera around, and using to focus on different points. The more you experiment, the more you’ll understand!
Now, we’re going to explore another type of camera: the OrthoGraphicCamera . Unlike the , which mimics how we see the real world, the OrthoGraphicCamera is perfect for creating where objects don’t change size based on their distance from the camera. Think of , , or . Let’s dive in!
The OrthoGraphicCamera is a type of camera that uses . This means objects maintain their size regardless of how far they are from the camera. It’s like looking at a or a —everything appears flat and to scale.
This camera is ideal for , , or any project where you want to avoid the perspective distortion that comes with the . It’s also commonly used in like SimCity or Diablo.
Let’s create an OrthoGraphicCamera and break down its properties. Here’s the basic setup:
const aspectRatio = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(
-1 * aspectRatio, // left
1 * aspectRatio, // right
1, // top
-1, // bottom
0.1, // near
100 // far
);The is the visible area captured by the camera. For the OrthoGraphicCamera, the frustum is a that defines the boundaries of what the camera will render. Objects outside this box won’t be visible.
The OrthoGraphicCamera takes six arguments to define its frustum:
The ensures that the camera’s frustum adapts to the viewport’s proportions. This prevents objects from appearing stretched or squished when the browser window is resized.
const aspectRatio = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(
-1 * aspectRatio, // left
1 * aspectRatio, // right
1, // top
-1, // bottom
0.1, // near
100 // far
);By default, the camera is placed at the origin (0, 0, 0). If you don’t move it, you’ll be inside any objects you create, and you won’t see anything! It's the same as PerspectiveCamera.
Let’s move the camera back along the so we can see the cube.
camera.position.z = 5;Now, let’s add a cube to the scene to see how the OrthographicCameraworks.
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);We’ll use the to draw the scene on the canvas.
const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);Let’s make the cube rotate to see the OrthographicCamera in action.
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();Wonderful! You’ve just learned how to set up and control the OrthographicCamera in . Play around with the camera’s properties—try changing the frustum boundaries, moving the camera around, and adding more objects to the scene. The more you experiment, the more you’ll understand!
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
00:00:00 Everything we see on the screen in the 3D world comes from the camera's perspective.
00:00:04 It determines the view of the 3D scene.
00:00:07 Without a camera, you wouldn't be able to see any objects in the scene because there would be no viewpoint from which to observe them.
00:00:14 It's pointless, like having a stage without an audience.
00:00:17 There are two main types of cameras in 3DS.
00:00:21 A perspective camera mimics how human eyes see the world.
00:00:26 Objects closer to the camera appear larger, and objects further away appear smaller.
00:00:31 This is called a perspective projection, and it is the most commonly used camera for 3D games, simulations, and realistic visualizations.
00:00:41 An orthographic camera removes the perspective effect, which means that objects appear the same size no matter how far from the camera they are.
00:00:51 This is called an orthographic projection and it's useful for certain visualization styles such as 2D games or architectural blueprints.
00:01:00 There's also a stereo camera which creates two views of the scene, one for the left eye and one for the right eye, to simulate 3D depth.
00:01:09 This is often used in 3D movies, 3D games, and VR applications.
00:01:14 There are also other types of cameras, such as cube, array cameras, and others.
00:01:20 You can explore all of these on the 3JS docs, but in most cases, you'll use the main ones.
00:01:25 But to truly understand how a camera works in 3JS, you must know its main properties.
00:01:32 The first one is the field of view.
00:01:35 often shortened to FOV.
00:01:37 It refers to the extent of the observable world visible through the camera at any moment.
00:01:43 The angle of the camera's vision, measured in degrees, determines how wide or narrow the view is.
00:01:50 Imagine holding a camera in your hands.
00:01:53 If you zoom in, your field of view becomes narrower, showing a smaller part of the screen.
00:01:58 But if you zoom out, the FOV becomes wider, showing more of the scene.
00:02:04 Field of view is about how much of the scene the camera can see at once, how wide your view is.
00:02:10 A point of view, POV, refers to the specific position and angle from which the camera looks at the scene.
00:02:18 It's like where the eyes of the camera are located and what direction they're facing.
00:02:24 Imagine a first-person shooter, an FPS game.
00:02:27 There, the point of view equals the character's vision and depends on the direction they're facing.
00:02:33 In a third-person shooter, the camera is behind the character's back.
00:02:38 In simple words, point of view is about the camera's position and direction.
00:02:43 Where are you looking from?
00:02:45 The aspect ratio is the ratio between the width and the height of the camera's view.
00:02:51 It ensures that the objects in the scene aren't stretched or squashed when displayed on the screen.
00:02:57 When you watch a movie on a widescreen TV versus a square TV, the aspect ratio changes, affecting how the content is displayed.
00:03:06 In 3D, this property ensures that objects look natural regardless of screen size.
00:03:12 And there's also the near and far clipping planes, which define the boundaries of the camera's view, determining how close or far objects can be for the
00:03:22 camera to see and render them.
00:03:25 It improves the performance and controls what part of the scene is shown.
00:03:29 It's a camera's viewing range.
00:03:32 The near clipping plane is the closest distance from the camera at which objects are visible.
00:03:38 Any object closer to the camera than this distance will not be rendered.
00:03:42 The far clipping plane on the other side is the farthest distance from the camera at which objects are visible.
00:03:48 Any object beyond this distance will not be rendered.
00:03:51 Think of it like a tree on a hill in a game that's far away.
00:03:56 As you get further away, it becomes invisible.
00:03:58 These were the most important camera properties.
00:04:01 But while learning the foundations of 3DS, we learned that the camera and other 3D elements also extend the Object 3D class,
00:04:10 which lets us position, rotate, and scale it.
00:04:14 But sometimes that's not enough.
00:04:16 and that's where camera controls come in.
00:04:19 Instead of manually setting the camera's position and rotation, controls allow us to rotate, zoom, and pan the camera dynamically,
00:04:27 often using mouse or touch inputs.
00:04:30 These controls are commonly used in interactive 3D scenes, such as games, simulations, and VR experiences.
00:04:38 3JS offers a few built-in controls, each designed for different types of interactions.
00:04:43 Let's dive into the main ones.
00:04:45 Orbit controls are the most commonly used camera control.
00:04:49 They allow us to rotate around a target point, zoom in and out, and pan the view, which means move side to side.
00:04:57 Orbit control is great for exploring a 3D scene from different angles while keeping the camera's focus on a central point.
00:05:06 An example of that is the Apple's website.
00:05:08 where when you look at the 3D model of an iPhone or a MacBook, you can spin it around to see it from every angle, zoom it in to check out the details,
00:05:17 and move it slightly to examine it more closely.
00:05:20 This control lets you interact with the product as if you were holding it in your hands.
00:05:25 It's fixed and you're orbiting around it.
00:05:27 Like the Earth orbits around the Sun, there are also trackball controls.
00:05:32 which allow for more flexible and free-form movement than orbit controls.
00:05:37 We can rotate around the camera freely, zoom in and pan.
00:05:42 For example, in BioRender, a platform used by scientists, when working with 3D models of cells or molecules, you can rotate around them freely,
00:05:51 zoom in or out, and shift around them without being fixed to one point.
00:05:56 It's like floating around a model in space, to look at it from all sides.
00:06:00 Fly controls simulate movement like that in first-person exploration games, where the camera moves forward, backward, and side to side,
00:06:08 and rotates as if the user is flying through the 3D world.
00:06:11 We mainly use fly controls in exploration games, VR environments, or simulations where users can fly through the scene.
00:06:19 For example, in Google Earth VR, we can soar over cities, mountains, and oceans.
00:06:25 This control lets us move as if we're flying like a bird, smoothly gliding through different locations and zooming in to explore areas up close.
00:06:35 There's also pointer lock control, which locks the cursor on the screen and allows the user to look around as if they were in the scene themselves.
00:06:44 it's often paired with keyboard controls to move the camera forward, backward, or side to side.
00:06:50 In games like Call of Duty, the mouse controls where we're looking.
00:06:54 As we move the mouse, our characters view shifts left, right, up, or down, just like turning our heads in real life.
00:07:01 We use this to aim, explore, or react quickly in the game.
00:07:06 And there's also the first-person controls, which offer a more traditional first-person view, where the camera moves in the direction the user faces.
00:07:16 It mimics the controls in first-person video games, where we use the keyboard to move and the mouse to look around.
00:07:22 The pointer lock controls, which we explored before, are focused primarily on the rotation of the camera using the mouse,
00:07:30 but additional code is required to make it work with the keyboard as well.
00:07:34 But that's not the case with first-person controls, which combine camera rotation and movement in one package.
00:07:42 It doesn't require locking the mouse pointer, offering more flexibility, and controlling the camera.
00:07:48 In many real estate websites, you can now virtually walk through a house or a building.
00:07:52 It's as if we're moving through the rooms ourselves, turning our heads, stepping forward, and exploring the space from the first-person perspective.
00:08:00 You can also check out the 3JS Docks for more camera controls, but I think this is more than enough.