【愚公系列】2023年08月 Three.js专题-相机

愚公搬代码

发布于 2025-05-28 17:12:33

16900

代码可运行

文章被收录于专栏：历史专栏历史专栏

运行总次数：0

代码可运行

前言

相机是一种用来记录图像或视频的设备。现代相机通常由镜头、图像传感器、取景器、快门和图像处理器等部件组成。相机可以拍摄各种类型的照片，包括家庭照片、肖像照片、风景照片、动物照片和艺术照片等。现在，许多相机还具有额外的功能，例如视频录制、自动对焦和无线连接等。随着技术的发展，相机变得更加便携和高质量，已成为记录和分享生活的重要工具。

一、相机

Three.js中的相机是用于控制场景中虚拟世界的视角和显示范围的组件。它负责创建视锥体，定义了渲染场景所需的一切信息，包括摄像机位置、方向、近截面和远截面等。

Three.js中提供了多种类型的相机，包括：

`PerspectiveCamera` 透视相机：适合用于模拟人眼观察物体的效果；
`OrthographicCamera` 正交相机：适合用于制作2D游戏或者2D动画等；
`CubeCamera` 立方体相机：用于生成环境贴图；
`ArrayCamera` 数组相机：用于同时渲染多个相机。

其中，透视相机是最常用的相机类型之一。它使用透视投影将场景中的3D物体投影到屏幕上，从而产生透视效果。而正交相机则将场景中的3D物体以等比例缩放进行投影，产生的效果更加类似于2D视角。

在创建相机时需要设置视锥体的一些参数，如：

`fov` 纵向视角（可以理解为摄像机视角）；
`aspect` 屏幕宽高比；
`near` 近截面；
`far` 远截面。

这些参数将影响相机的视野范围和可见区域。例如， `near` 参数过大会导致距离摄像机太近的物体无法被渲染出来，而 `far` 参数过小则会使距离摄像机过远的物体看起来非常模糊或者完全不可见。

在使用Three.js中的渲染器渲染场景时，需要将相机的设置传入 `Renderer` 实例，这样渲染器才能正确地渲染出场景。

1.正交相机

正交相机是一种投影方式，将场景中的物体平面投射到相机的图像平面上。在Three.js中，可以使用OrthographicCamera（正交相机）来创建正交投影。

正交相机具有以下属性和方法：

属性：

left, right, top, bottom：指定相机视锥体的左、右、上、下面的位置。
zoom：缩放相机视锥体的大小。值越大，显示的内容越小。
near, far：指定相机视锥体的近、远面的距离。

方法：

setViewOffset(x, y, width, height, fullWidth, fullHeight)：设置视角偏移。x、y为偏移量，width、height为视窗大小，fullWidth、fullHeight为画布大小。
clearViewOffset()：清除视角偏移。
updateProjectionMatrix()：更新相机的投影矩阵。

同时，与其他相机一样，正交相机也具有一些常用的方法，比如：

lookAt(target)：设置相机镜头的朝向目标。
clone()：复制相机，返回一个新的相机对象。

总的来说，正交相机的属性和方法与其他相机类似，但需要注意的是，正交相机的投影方式与透视相机不同，需要特别注意其属性的设置。

2.透视相机

透视相机是Three.js中最常用的相机类型之一，它模拟了人眼看世界的效果，有近大远小的效果。下面对一些重要的属性和方法进行详细介绍：

FOV（Field Of View）

FOV（视场角）是透视相机最重要的属性之一，表示相机从中心点向两侧可见的角度范围。FOV越小，则相机看到的视野越窄，物体就越大，距离相机越远。反之，FOV越大，则相机看到的视野越广，物体就越小，距离相机越近。默认值为50。

aspect

aspect（长宽比）表示渲染窗口的宽高比，通常等于渲染区域的宽度除以高度。如果宽度大于高度，则宽高比大于1，否则小于1。默认值为1。

near和far

near和far是定义相机可渲染的近截面和远截面的距离。只有在这个距离范围内的物体才会被渲染。默认值为0.1和2000。需要注意的是，如果near和far设置过小或过大，可能会导致深度缓存的精度不够，造成显示错误。

position

position属性定义相机的位置，以Three.js场景坐标系为准。

lookAt()

lookAt()方法用于将相机指向指定的目标点。它接受一个Three.js的向量作为参数。例如，可以使用以下代码将相机指向场景原点。

camera.lookAt(new THREE.Vector3(0, 0, 0));

updateProjectionMatrix()

updateProjectionMatrix()方法用于更新相机的投影矩阵。如果您在运行时更改了FOV、aspect、near或far属性，则需要调用此方法。例如：

camera.fov = 75;
camera.aspect = window.innerWidth / window.innerHeight;
camera.near = 0.1;
camera.far = 1000;
camera.updateProjectionMatrix();

以上是透视相机的一些重要属性和方法，可以根据项目具体需求进行设置和调整。

3.案例

1、正交相机案例

<!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、透视相机案例

<!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>