Camera type:
1 Perspective Camera (PerspectiveCamera): The perspective camera simulates the effect of human eyes observing objects, and has the effect of depth of field that is far and small. To create a perspective camera, you need to set parameters such as FOV, canvas aspect ratio, near plane and far plane distance.
2 Orthographic Camera (OrthographicCamera): The orthogonal camera eliminates the perspective effect and makes the object appear the same size on the screen. Creating an orthographic camera requires setting the positions of the left and right, top and bottom, and front and back clipping planes.
3 Cube Camera (CubeCamera): A cube camera is a special camera that captures the surrounding environment, generates a cube map, and applies it to the material. It is commonly used for reflection and refraction effects such as specular reflections and refraction on glass surfaces.
Perspective Camera (PerspectiveCamera)
constructor
●PerspectiveCamera (camera viewing frustum vertical viewing angle, camera viewing frustum aspect ratio, camera viewing frustum proximal face, camera viewing frustum far end face)
Attributes
.aspect : Float
● The aspect ratio of the camera viewing frustum is usually the width of the canvas/height of the canvas. The default is 1 (square canvas).
.far : Float
● The far face of the camera, the default value is 2000. This value must be greater than the value for near plane (the near face of the camera frustum).
.filmGauge : Float
●Film size, the default value is 35 (mm). This parameter does not affect the camera’s projection matrix unless .filmOffset is set to a non-zero value.
.filmOffset : Float
●The horizontal offset from the center, the same unit as .filmGauge. The default value is 0.
.focus : Float
● Distance of objects for stereopsis and depth of field effects. This parameter does not affect the camera’s projection matrix unless a StereoCamera is used. The default value is 10.
.fov : Float
● The vertical view angle of the camera frustum, expressed in degrees from the bottom to the top of the view. The default value is 50.
.isPerspectiveCamera : Boolean
● Read-only flag to check if a given object is of type Perspective Camera.
.near : Float
● The near face of the camera, the default value is 0.1.
●The effective value range is between 0 and the value of the current camera far plane (far plane). Note that, unlike OrthographicCamera, 0 is not a valid value for the near face of PerspectiveCamera.
.view : Object
● Frustum window specification. This value is set using the .setViewOffset method and cleared using the .clearViewOffset method.
.zoom : number
●Get or set the zoom factor of the camera, the default value is 1.
method
.clearViewOffset () : undefined
● Clears any offset set by .setViewOffset.
.getEffectiveFOV () : Float
●Combined with .zoom (zoom factor), returns the current vertical field of view angle by angle.
.getFilmHeight () : Float
●Returns the height of the image on the current film, if .aspect is less than or equal to 1 (portrait format, portrait composition), the result is equal to .filmGauge.
.getFilmWidth () : Float
●Returns the width of the image on the current film, if .aspect is greater than or equal to 1 (landscape format, landscape composition), the result is equal to .filmGauge.
.getFocalLength () : Float
● Returns the focal length of the current .fov (field of view) relative to .filmGauge (film size).
.setFocalLength ( focalLength : Float ) : undefined
● Set FOV by focal length relative to current .filmGauge.
●By default, the focal length is specified for a 35mm (full-frame) camera.
Orthographic Camera (OrthographicCamera)
constructor
●OrthographicCamera (left side of the camera frustum, right side of the camera frustum, upper side of the camera frustum, lower side of the camera frustum, near end of the camera frustum, far end of the camera frustum)
Attributes
.bottom : Float
●The lower side of the camera viewing frustum.
.far : Float
●Camera view frustum far face, the default value is 2000. This value must be greater than the value for near plane (the near face of the camera frustum).
.isOrthographicCamera : Boolean
● Read-only flag to check if a given object is of orthographic camera type.
.left : Float
●The left side of the camera viewing frustum.
.near : Float
● Proximal face of camera cone. Its default value is 0.1.
●The valid range of its value is between 0 and far (the camera frustum far face).
●Please note that unlike PerspectiveCamera, 0 is a valid value for the near face of OrthographicCamera.
.right : Float
●The right side of the camera viewing frustum.
.top : Float
●The upper side of the camera viewing frustum.
.view : Object
● This value is set by setViewOffset, and its default value is null.
.zoom : number
●Get or set the zoom factor of the camera, the default value is 1.
method
.setViewOffset ( fullWidth : Float, fullHeight : Float, x : Float, y : Float, width : Float, height : Float ) : undefined
fullWidth – set the full width of the multiview
fullHeight – set the full height of the multiview
x – the horizontal offset of the secondary camera
y – the vertical offset of the secondary camera
width – the width of the secondary camera
height – the height of the secondary camera
.clearViewOffset () : undefined
● Clears any offset set by .setViewOffset.
.updateProjectionMatrix() : undefined
● Update the camera projection matrix. Must be called after any parameters have been changed.
.toJSON (meta : Object) : Object
meta — an object that contains metadata, such as textures or images in the object’s descendants
● Convert the camera to three.js JSON Object/Scene format (three.js JSON object/scene format).
Cube Camera (CubeCamera)
constructor
●CubeCamera(near clipping plane distance, far clipping plane distance, target cube rendering target. )
Attributes
.renderTarget : WebGLCubeRenderTarget
The target cube renders the target. (target you want to display)
method
.update ( renderer : WebGLRenderer, scene : Scene ) : undefined
renderer — the current WebGL renderer
scene — the current scene
camera position and orientation
The position of the camera can be set by camera.position.set(x, y, z), where x, y, and z respectively represent the position of the camera on the three coordinate axes. The orientation of the camera can be set by the camera.lookAt(target) method, where target is a Vector3 object representing the target point to which the camera is aimed.
Sample code:
const camera = new THREE. PerspectiveCamera(75, window. innerWidth / window. innerHeight, 0.1, 1000); // set camera position camera.position.set(0, 0, 10); // set camera orientation const target = new THREE. Vector3(0, 0, 0); camera. lookAt(target);
The above code will create a perspective camera, set its position to (0, 0, 10), and then set its orientation to the origin (0, 0, 0).
lens controller
1OrbitControls: used to rotate the camera, zoom and pan the scene.
2FlyControls: For flight simulation, you can control the position and direction of the camera.
3PointerLockControls: Used to lock the mouse pointer and control the camera in the scene.
4FirstPersonControls: Used for first-person perspective, moving and rotating the camera in the scene.
Here’s the code for using the OrbitControls lens controller:
sample code
// instantiate OrbitControlsconst
controls = new THREE. OrbitControls(camera, renderer. domElement);
// Set controller parameters
controls.enableDamping = true; // enable damping effect
controls.dampingFactor = 0.05; // damping factor
controls.rotateSpeed = 0.1; // rotation speed
controls.zoomSpeed = 0.5; // zoom speed
controls.panSpeed = 0.2; // panning speed
// update controller state in render loop
function animate() {
requestAnimationFrame(animate);
controls.update(); // Update controller state
renderer. render(scene, camera);
}
animate();
This allows you to use the OrbitControls camera controller to control the camera in the scene