ThreeJS入门（007）：PerspectiveCamera 知识详解，示例代码

还是大剑师兰特

于 2024-09-18 10:00:00 发布

阅读量1.2k

点赞数 45

分类专栏： # ThreeJS综合教程200+ 文章标签：大剑师 threejs教程 threejs示例 threejs基础

本文链接：https://blog.csdn.net/cuclife/article/details/142057018

版权

ThreeJS综合教程200+ 专栏收录该内容

130 篇文章 22 订阅

订阅专栏

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

在这里插入图片描述

查看本专栏目录 - 本文是第 007篇入门文章

文章目录

THREE.PerspectiveCamera 类是 Three.js 中用于创建透视摄像机的一个类。透视摄像机模拟了人眼和普通照相机的视角效果，即远的物体看起来比近的小。这对于模拟真实的3D环境非常有用。

构造函数

构造函数 new THREE.PerspectiveCamera( fov, aspect, near, far ) 接受四个参数：

fov - 视场角（Field of View），单位为度（degrees）。这是指摄像机镜头的视角范围，通常指的是垂直方向上的角度。常见的值是 50 到 75 度之间。
aspect - 宽高比（Aspect Ratio），通常是渲染区域的宽度除以其高度。例如，如果渲染到一个宽为 800px、高为 600px 的画布上，那么 aspect 就应该是 800 / 600 或者简化后的 4 / 3。
near - 靠近摄像机的裁剪平面的距离。任何离摄像机更近的物体都不会被渲染。通常这个值为 0.1 或者更小，以避免近距离的几何体出现失真。
far - 远处的裁剪平面的距离。任何离摄像机更远的物体也不会被渲染。这个值应该足够大，以包含场景中的所有物体。

示例

创建一个透视摄像机并将其添加到场景中：

// 创建一个透视摄像机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 添加到场景
var scene = new THREE.Scene();
scene.add(camera);

属性

透视摄像机还有一些有用的属性，如：

position - 摄像机在世界坐标系中的位置。可以使用 .x, .y, .z 来访问和设置。
up - 指定“向上”的方向，默认为 (0, 1, 0)。
aspect - 可以修改此属性来改变宽高比。
far 和 near - 可以修改这两个属性来改变裁剪平面的距离。

方法

透视摄像机继承自 THREE.Camera，因此具有相同的方法集，包括但不限于：

updateProjectionMatrix() - 更新摄像机的投影矩阵。通常在修改了摄像机的任何参数之后调用。
lookAt() - 使摄像机对准一个给定点。
clone() - 克隆一个摄像机对象。

更新宽高比

当窗口尺寸发生变化时，例如用户调整浏览器窗口大小，你应当更新摄像机的 aspect 属性，并调用 updateProjectionMatrix() 方法来确保渲染正确。

window.addEventListener('resize', function() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}, false);