Learn Three.js for 3D Computer Graphics/

...

/

Using Different Cameras for Different Scenes

Using Different Cameras for Different Scenes

Learn the properties of orthographic and perspective cameras in Three.js.

We'll cover the following...

Types of cameras

There are two types of cameras in Three.js: the orthographic camera and the perspective camera. Note that Three.js also provides specialized cameras for creating scenes that can be viewed using 3D glasses or VR gear. We won’t go into detail about those cameras in this course because they work exactly the same as the cameras explained in this chapter. If you’re interested in these cameras, Three.js provides a few standard examples: 

VR cameras

If we’re looking for simple VR cameras, we can use THREE.StereoCamera to create 3D scenes that are rendered side to side (standard stereo effect), use a parallel barrier (as 3DS offers), or use an anaglyph effect where the different views are rendered in different colors.

For now, we’ll focus on the standard perspective and orthographic cameras. The best way to explain the differences between these cameras is by looking at a couple of examples. 

Example: Orthographic vs. perspective camera

Let’s execute the cameras.js example in the following:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
const fs = require('fs').promises

// we should search through the directories in examples, and use
// the name from the files to generate the HtmlWebpackPlugin settings.
module.exports = async () => {

  return {
    module: {
      rules: [
        {
          test: /\.glsl$/i,
          use: 'raw-loader'
        }
      ]
    },
    mode: 'development',
    entry: {
      'chapter-1': './samples/chapters/chapter-2/cameras.js',
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath: '/',
    },
    plugins: [
      new HtmlWebpackPlugin(),
    ],
    experiments: {
      asyncWebAssembly: true
    },
    devServer: {
       allowedHosts: 'all',
       host: '0.0.0.0',
       port: '3000',
       static: [
        {
          directory: path.join(__dirname, 'assets'),
          publicPath: '/assets'
        },
        {
          directory: path.join(__dirname, 'dist')
        }
      ] 
    },
  mode: 'development',
  }
}
Perspective and orthographic camera properties

Note: We can change the properties of the camera from the right control panel in the output screen.

In the preceding code:

  • Lines 66–96: We create an object props with properties and methods that allow switching between perspective and orthographic cameras in a Three.js ...