Three.Camera

Camera is an abstract base class for all cameras. When constructing a new camera, you should always inherit this class There are two common types of cameras: (perspective camera) or (orthogonal camera).

Camera subtypes include arraycamera, CubeCamera, orthographic camera, perspective camera and stereocamera. Among these cameras, I think the more interesting one is CubeCamera, which contains six cubic cameras (perspective camera). The photos taken can be used as maps. Let's see its effect first!

1. CubeCamera

The whole environment becomes the surface of the ball. Is this function easy to expand It's cool to put the environment on any object

step

1. Create cubeCamera

1     //cubeCamera
2     cubeCamera = new THREE.CubeCamera(1, 10000, 128);
3     scene.add(cubeCamera);

Description: cubecamera (near: Number, far: Number, cubeResolution: Number)

near -- distance from far shear plane
far -- distance near the shear plane
cubeResolution -- sets the length of the cube edge

2. Create the object surface material and take the environment illuminated by cubeCamera as the map of the material

1     material = new THREE.MeshBasicMaterial( {
2       envMap: cubeCamera.renderTarget.texture
3     } );

3. Create an object and assign the material in step 2 to the object

1     let sphere = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 20, 3 ), material );
2     scene.add( sphere );

4. Update material map content

1     cubeCamera.update( renderer, scene );

Then, the object with environment is ready. Do you want to have a try!  

2. perspectiveCamera

This projection mode is used to simulate the scene seen by human eyes. It is the most common projection mode used in 3D scene rendering.

It should be noted when using: after most attributes of perspective amera are changed, you need to call to make these changes take effect.

The use steps of the camera are very similar. The first step is to write the constructor, the second step is to change the position, the third step is to add to the scene, and the fourth step is to change the camera position

For the perspective camera, it is characterized by being like the human eye. The farther the distance, the smaller the object. This is the biggest difference between the perspective camera and the orthographic camera. No matter how far away the object is, the object looks the same size

Use process

1     //1.Create camera
2     camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000);
3     //2.Add camera to scene
4     scene.add(camera);
5     //3.Change camera position
6     camera.position.set( 100, 50, 150);
7     //4.Change camera orientation
8     camera.lookAt(scene.position);

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fov - vertical field of view angle of camera cone
Aspect - aspect ratio of the visual cone of the camera
Near - near end face of camera cone
Far - far end face of camera cone

Note: renderer render(scene, camera);

When rendering, the camera selected by the parameter is equivalent to the eye, and the one selected is the eye  

The effect is shown in the first picture, which is taken by the perspective camera

3. OrthographicCamera

Just pay attention to its constructor, which is similar to perspective camera

OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )

Left - left side of the viewing cone of the camera.
Right - the right side of the viewing cone of the camera.
top - the upper side of the viewing cone of the camera.
bottom - the lower side of the viewing cone of the camera.
Near - the near end face of the visual cone of the camera.
Far - far end face of the viewing cone of the camera.

4. ArrayCamera and StereoCamera

I haven't used these two types yet. Let's briefly describe them here and supplement them later

ArrayCamera is used to render a scene more efficiently using a set of pre-defined cameras. This will better improve the rendering performance of VR scenes.
An instance of ArrayCamera always contains a group of sub cameras. The property of viewport (boundary) should be defined for each sub camera, which determines the size of the viewport area rendered by the sub camera.

Dual perspective cameras (stereoscopic cameras) are often used to create 3D Anaglyph or Parallax Barrier.

5. Summary

It's not difficult to use the camera. It's more difficult to use the camera flexibly to achieve the desired effect

6. Code

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <title>Title</title>
  6   <style>
  7     body {
  8       margin: 0;
  9       overflow: hidden;
 10     }
 11   </style>
 12 
 13 </head>
 14 <body>
 15 <script src="/js/three.js"></script>
 16 <script src="/js/OrbitControls.js"></script>
 17 <script src="/js/libs/stats.min.js"></script>
 18 <script src="/js/libs/inflate.min.js"></script>
 19 <script src="/js/loaders/FBXLoader.js"></script>
 20 <script src="/js/exporters/GLTFExporter.js"></script>
 21 <script>
 22   let renderer, scene, camera, light, cubeCamera;
 23 
 24   let container, stats;
 25 
 26   init();
 27   animation();
 28 
 29   function init() {
 30     //container
 31     container = document.createElement("div");
 32     document.body.appendChild(container);
 33 
 34     //status
 35     stats = new Stats();
 36     container.appendChild(stats.domElement);
 37 
 38     //renderer
 39     renderer = new THREE.WebGLRenderer({
 40       antialias: true
 41     });
 42     renderer.setSize(window.innerWidth, window.innerHeight);
 43     renderer.setClearColor(0xffffff);
 44     container.appendChild(renderer.domElement);
 45 
 46     //scene
 47     scene = new THREE.Scene();
 48     scene.background = new THREE.Color( 0xcce0ff );
 49     scene.fog = new THREE.Fog( 0xcce0ff, 500, 10000 );
 50 
 51     //3_camera
 52     camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight);
 53     scene.add(camera);
 54     camera.position.set( 100, 50, 150);
 55     camera.lookAt(scene.position);
 56 
 57     //cubeCamera
 58     cubeCamera = new THREE.CubeCamera(1, 10000, 128);
 59     scene.add(cubeCamera);
 60 
 61     material = new THREE.MeshBasicMaterial( {
 62       envMap: cubeCamera.renderTarget.texture
 63     } );
 64 
 65     //
 66     let sphere = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 20, 3 ), material );
 67     scene.add( sphere );
 68     let geometry = new THREE.BoxGeometry( 1, 1, 1 );
 69     let meterial2 = new THREE.MeshBasicMaterial( {
 70       vertexColors: THREE.VertexColors,
 71       // wireframe: true
 72     });
 73     let cube = new THREE.Mesh(
 74         geometry,
 75         meterial2
 76     );
 77     geometry.faces.forEach(face => {
 78       // Set triangle face Color of three vertices
 79       face.vertexColors = [
 80         new THREE.Color(0xffff00),
 81         new THREE.Color(0x0000ff),
 82         new THREE.Color(0x00ff00),
 83       ]
 84     });
 85     scene.add(cube);
 86 
 87     // light
 88     scene.add( new THREE.AmbientLight( 0x666666 ) );
 89 
 90     light = new THREE.DirectionalLight( 0xdfebff, 1 );
 91     light.position.set( 50, 200, 100 );
 92     light.position.multiplyScalar( 1.3 );
 93 
 94     light.castShadow = true;
 95 
 96     light.shadow.mapSize.width = 1024;
 97     light.shadow.mapSize.height = 1024;
 98 
 99     let d = 300;
100     light.shadow.camera.left = - d;
101     light.shadow.camera.right = d;
102     light.shadow.camera.top = d;
103     light.shadow.camera.bottom = - d;
104 
105     light.shadow.camera.far = 1000;
106 
107     scene.add( light );
108 
109     // ground
110     var loader = new THREE.TextureLoader();
111     var groundTexture = loader.load( '/textures/terrain/grasslight-big.jpg' );
112     groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
113     groundTexture.repeat.set( 25, 25 );
114     groundTexture.anisotropy = 16;
115 
116     var groundMaterial = new THREE.MeshLambertMaterial( { map: groundTexture } );
117 
118     var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
119     mesh.position.y = - 250;
120     mesh.rotation.x = - Math.PI / 2;
121     mesh.receiveShadow = true;
122     scene.add( mesh );
123 
124     //Auxiliary tools
125     // scene.add(new THREE.AxesHelper(20));
126 
127     // controls
128     var controls = new THREE.OrbitControls( camera, renderer.domElement );
129     // controls.maxPolarAngle = Math.PI * 0.5;
130     // controls.minDistance = 1000;
131     // controls.maxDistance = 5000;
132 
133 
134   }
135 
136   function animation(){
137     stats.update();
138     cubeCamera.update( renderer, scene );
139     render();
140     requestAnimationFrame(animation);
141   }
142 
143   function render() {
144 
145     renderer.render(scene, camera);
146 
147   }
148 </script>
149 </body>
150 </html>