What is the difference between Camera and CubeCamera

Hi, Anybody please explain, what is Camera and What is CubeCamera. What are the use of these?

In a one liner,
A Cubecamera is 6 Cameras

@seanwasere Thank you for your kind reply. Can you please share a realtime example for both. Because I can’t understand the usage difference between them. Can we use cubecamera instead of camera

If you did a search, you’d probably find some of my examples

Camera is a base class that is used to create other cameras. You never use Camera directly. Instead, usually you want a PerspectiveCamera. It’s a derived class of Camera, you can see this at the top of the docs page:

Object3D -> Camera -> PerspectiveCamera

Nearly all three.js examples use a PerspectiveCamera, so check any of them to see it in action. It creates a view of the scene using perspective projection, which is similar to how your eyes or a real camera see the world.

The CubeCamera can be used for effects like dynamic reflections. See these two examples:


Another important camera is the OrthographicCamera which uses orthographic projection. This is similar to how blueprints of an object are drawn. This camera is useful for things like creating 2D scenes or the UI for a game.

5 Likes

Thank you for your reply @looeee . can we use, perspective and orthographic camera in a same project?

Yes you can. Just create two cameras (I’m skipping the parameters here, refer to the docs for info on how to create the cameras)

const persCamera = new PerspectiveCamera();
const orthoCamera = new OrthographicCamera();

Then, when you call renderer.render, pass in whichever camera you want to use for that frame:

const renderer = new WebGLRenderer();

// render a frame with PerspectiveCamera
renderer.render(scene, persCamera);

// render a frame with OrthographicCamera
renderer.render(scene, orthoCamera);

A common use case is to render the 3D scene using a perspective camera, then render a 2D UI on top of the scene using an orthographic camera. Many games do this. Then you would maintain two scenes, let’s call them main3DScene and userInterface2DScene, and render them like so:

const renderer = new WebGLRenderer();

// render a frame of the main scene with PerspectiveCamera
renderer.render(main3DScene, persCamera);

// render a frame of the UI with OrthographicCamera
renderer.render(userInterface2DScene, orthoCamera);

You’ll get a result like this: the 3D characters are rendered in perspective, then the menus are rendered in orthographic.

(I don’t know exactly how Fortnite sets up the menu, I’m just using this image as an example).

3 Likes

Thank you so much for your brief explanation @looeee . I understood now.

1 Like

@looeee . Please see this example. It having orthographic camera. So , as per our discussion, it should be like 2D. But this is being as 3D. how? https://threejs.org/examples/?q=orthogra#css3d_orthographic

@jaya_kannan
Take a look at this: https://en.wikipedia.org/wiki/Orthographic_projection

1 Like

Thank you for your suggestion @prisoner849