Article directory
foreword
A camera is a device used to record images or video. Modern cameras usually consist of components such as lenses, image sensors, viewfinders, shutters, and image processors. Cameras can take various types of photos, including family photos, portrait photos, landscape photos, animal photos, and artistic photos. Many cameras now have additional features such as video recording, autofocus, and wireless connectivity. With the development of technology, cameras have become more portable and high-quality, and have become an important tool for recording and sharing life.
1. Camera
The camera in Three.js is a component used to control the viewing angle and display range of the virtual world in the scene. It is responsible for creating the viewing frustum, which defines everything needed to render the scene, including camera position, orientation, near and far sections, etc.
There are several types of cameras available in Three.js, including:
- `PerspectiveCamera` perspective camera: suitable for simulating the effect of human eyes observing objects;
- `OrthographicCamera` Orthographic camera: suitable for making 2D games or 2D animations, etc.;
- `CubeCamera` cube camera: used to generate environment maps;
- `ArrayCamera` array camera: used to render multiple cameras at the same time.
Among them, the perspective camera is one of the most commonly used camera types. It uses perspective projection to project 3D objects in the scene onto the screen, creating a perspective effect. The orthographic camera projects the 3D objects in the scene in a proportional scale, and the effect is more similar to the 2D perspective.
When creating a camera, you need to set some parameters of the viewing frustum, such as:
- `fov` vertical viewing angle (can be understood as camera viewing angle);
- `aspect` screen aspect ratio;
- `near` near section;
- `far` Far section.
These parameters will affect the field of view and visible area of the camera. For example, a large `near` parameter will cause objects that are too close to the camera to not be rendered, while a `far` parameter that is too small will make objects that are too far away from the camera appear blurry or completely invisible.
When using the renderer in Three.js to render the scene, you need to pass the camera settings to the `Renderer` instance, so that the renderer can render the scene correctly.
1. Orthogonal camera
An orthographic camera is a projection method that projects the object plane in the scene onto the camera's image plane. In Three.js, you can use OrthographicCamera (orthographic camera) to create an orthographic projection.
Orthographic cameras have the following properties and methods:
Attributes:
- left, right, top, bottom: Specifies the left, right, top, and bottom positions of the camera frustum.
- zoom: zoom the size of the camera frustum. The larger the value, the smaller the displayed content.
- near, far: Specifies the distance between the near and far faces of the camera viewing frustum.
method:
- setViewOffset(x, y, width, height, fullWidth, fullHeight): Set the viewing angle offset. x and y are the offset, width and height are the size of the window, and fullWidth and fullHeight are the size of the canvas.
- clearViewOffset(): Clear the viewing angle offset.
- updateProjectionMatrix(): Update the camera's projection matrix.
At the same time, like other cameras, the orthographic camera also has some commonly used methods, such as:
- lookAt(target): Set the camera lens towards the target.
- clone(): Copy the camera and return a new camera object.
In general, the properties and methods of the orthographic camera are similar to other cameras, but it should be noted that the projection method of the orthographic camera is different from that of the perspective camera, and special attention should be paid to the setting of its properties.
2. Perspective camera
Perspective camera is one of the most commonly used camera types in Three.js. It simulates the effect of seeing the world with the human eye, and has the effect of near big and far small. Some important properties and methods are described in detail below:
- FOV（Field Of View）
FOV (Field of View) is one of the most important properties of a perspective camera, which represents the range of angles that the camera can see from the center point to both sides. The smaller the FOV, the narrower the camera sees, and the larger objects are and the further away they are from the camera. Conversely, the larger the FOV, the wider the field of view the camera sees, the smaller the object and the closer it is to the camera. The default value is 50.
- aspect
aspect (aspect ratio) indicates the aspect ratio of the rendering window, usually equal to the width of the rendering area divided by the height. The aspect ratio is greater than 1 if the width is greater than the height, otherwise less than 1. The default value is 1.
- near and far
near and far are the distances that define the near and far sections that the camera can render. Only objects within this distance will be rendered. The default values are 0.1 and 2000. It should be noted that if the near and far settings are too small or too large, the precision of the depth buffer may not be sufficient, resulting in display errors.
- position
The position attribute defines the position of the camera, which is based on the Three.js scene coordinate system.
- lookAt()
The lookAt() method is used to point the camera at the specified target point. It accepts a Three.js vector as an argument. For example, the following code can be used to point the camera at the scene origin.
camera.lookAt(new THREE.Vector3(0, 0, 0));
- updateProjectionMatrix()
The updateProjectionMatrix() method is used to update the camera's projection matrix. You need to call this method if you change the FOV, aspect, near or far properties at runtime. For example:
camera.fov = 75;
camera.aspect = window.innerWidth / window.innerHeight;
camera.near = 0.1;
camera.far = 1000;
camera.updateProjectionMatrix();
The above are some important properties and methods of the perspective camera, which can be set and adjusted according to the specific needs of the project.
3. Case
1. Orthogonal camera case
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js Orthographic Camera Example</title>
<style>
body {
margin: 0; }
canvas {
display: block; }
</style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script>
// 创建场景
var scene = new THREE.Scene();
// 创建正交相机，定义视口的宽度和高度
var width = 800;
var height = 600;
var camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 1, 1000);
// 设置相机位置
camera.position.set(0, 0, 500);
camera.lookAt(scene.position);
// 创建渲染器，并设置大小和背景色
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0x000000);
// 将渲染器添加到页面中
document.body.appendChild(renderer.domElement);
// 创建一个立方体
var geometry = new THREE.BoxGeometry(100, 100, 100);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 旋转立方体
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染场景
renderer.render(scene, camera);
}
// 开始动画循环
animate();
</script>
</body>
</html>
2. Perspective camera case
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js Perspective Camera Example</title>
<style>
body {
margin: 0; }
canvas {
display: block; }
</style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script>
// 创建场景
var scene = new THREE.Scene();
// 创建透视相机，设置视角、宽高比、近裁剪面和远裁剪面
var fov = 75;
var width = window.innerWidth;
var height = window.innerHeight;
var aspect = width / height;
var near = 0.1;
var far = 1000;
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
// 设置相机位置
camera.position.z = 5;
// 创建渲染器，并设置大小和背景色
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0x000000);
// 将渲染器添加到页面中
document.body.appendChild(renderer.domElement);
// 创建一个立方体
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 旋转立方体
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染场景
renderer.render(scene, camera);
}
// 开始动画循环
animate();
</script>
</body>
</html>
