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 view frustum vertical field of view angle, camera view frustum aspect ratio, camera view frustum proximal face, camera view frustum far end face)
property.aspect
: Float
camera view The aspect ratio of the cone, usually using canvas width/canvas height. 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 viewing angle of the camera frustum, expressed in angles from the bottom to the top of the view. The default value is 50.
.isPerspectiveCamera : Boolean
● Read-only flag to check if the given object is of perspective camera type.
.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
●View 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 (view angle) relative to .filmGauge (film size).
.setFocalLength ( focalLength : Float ) : undefined
●Sets the FOV by the focal length relative to the current .filmGauge.
●By default, the focal length is specified for 35mm (full-frame) cameras.
Orthographic Camera (OrthographicCamera)
constructor
OrthographicCamera (left side of camera frustum, right side of camera frustum, upper side of camera frustum, lower side of camera frustum, near end of camera frustum, camera View frustum far end)
property.bottom
: Float
●The lower side of the camera viewing frustum.
.far : Float
●Far face of camera frustum, 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 used to check if a given object is an orthographic camera type.
.left : Float
●The left side of the camera viewing frustum.
.near : Float
●The near end face of the camera viewing frustum. Its default value is 0.1.
●The valid range of its value is between 0 and far (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 frustum.
.top : Float
●The top 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 —
Full width setting of multi-view
fullHeight — Full height setting of multi-view
x — Secondary camera Horizontal offset
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
●Updates the camera projection matrix. Must be called after any parameters have been changed.
.toJSON (meta : Object) : Object
meta -- an object containing metadata, such as textures or images in object descendants
Convert the camera to three.js JSON Object/Scene format (three.js JSON object/scene format ).
CubeCamera (CubeCamera)
Constructor
CubeCamera (near clipping plane distance, far clipping plane distance, target cube rendering target.)
property.renderTarget
: WebGLCubeRenderTarget
target cube rendering target. (The target you want to display)
method.update
( renderer : WebGLRenderer, scene : Scene ) : undefined
renderer -- the current WebGL renderer
scene -- the current scene The position of the camera and the position
towards the camera can be set by camera.position.set
(x, y, z) to set, where x, y, z represent the position of the camera on the three coordinate axes respectively. 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);
// 设置相机位置
camera.position.set(0, 0, 10);
// 设置相机朝向
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 lens, 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
// 实例化 OrbitControlsconst
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 设置控制器参数
controls.enableDamping = true; // 启用阻尼效果
controls.dampingFactor = 0.05; // 阻尼系数
controls.rotateSpeed = 0.1; // 旋转速度
controls.zoomSpeed = 0.5; // 缩放速度
controls.panSpeed = 0.2; // 平移速度
// 渲染循环中更新控制器状态
function animate() {
requestAnimationFrame(animate);
controls.update(); // 更新控制器状态
renderer.render(scene, camera);
}
animate();This allows you to use the OrbitControls camera controller to control the camera in the scene