深入理解 Three.js 中的 PerspectiveCamera

在 Three.js 这个强大的 JavaScript 3D 库中,相机(Camera)是决定我们如何观察 3D 场景的关键要素。其中,PerspectiveCamera(透视相机)模拟了人眼观察世界的方式,为我们创建逼真的 3D 场景效果提供了重要支持。

1. PerspectiveCamera 基础概念

PerspectiveCamera遵循透视投影原理,即离相机越远的物体看起来越小,符合我们日常生活中的视觉经验。这与OrthographicCamera(正交相机)不同,正交相机观察到的物体无论远近大小一致,常用于 2D 场景或需要精确尺寸的工程图等场景。

2. 创建 PerspectiveCamera 实例

在 Three.js 中创建一个PerspectiveCamera实例非常简单,其构造函数接受四个参数:

js 复制代码
const camera = new THREE.PerspectiveCamera(
    fov, // 视野角度 (Field of View),通常为45 - 75度
    aspect, // 宽高比,通常为画布的宽度除以高度
    near, // 近裁剪平面,定义相机能看到的最近距离
    far // 远裁剪平面,定义相机能看到的最远距离
);

例如:

js 复制代码
const fov = 75;
const aspect = window.innerWidth / window.innerHeight;
const near = 0.1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 5); // 设置相机位置

在上述代码中,我们创建了一个视野角度为 75 度,宽高比根据窗口大小自适应,近裁剪平面为 0.1,远裁剪平面为 1000 的透视相机,并将其位置设置在 z 轴正方向 5 个单位处。

3. 常用属性及调整

视野角度(FOV)

视野角度决定了相机能够看到的场景范围。增大 FOV 会使场景看起来更广阔,如同使用广角镜头;减小 FOV 则会使场景看起来更聚焦,类似长焦镜头。你可以通过修改camera.fov属性来调整视野角度,并调用camera.updateProjectionMatrix()方法更新投影矩阵以应用更改:

js 复制代码
// 动态改变视野角度
function changeFOV() {
    camera.fov += 5;
    if (camera.fov > 120) {
        camera.fov = 45;
    }
    camera.updateProjectionMatrix();
}

相机位置与方向

通过camera.position属性可以设置相机在场景中的位置,它是一个THREE.Vector3对象,分别对应 x、y、z 轴坐标。同时,使用camera.lookAt(target)方法可以让相机看向某个目标点,target同样是一个THREE.Vector3对象。例如,让相机看向场景中心 (0, 0, 0):

js 复制代码
const target = new THREE.Vector3(0, 0, 0);
camera.lookAt(target);

4. 实际应用示例

下面我们通过一个简单的示例,展示PerspectiveCamera在一个包含立方体的 3D 场景中的应用。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js PerspectiveCamera Example</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        // 创建相机
        const fov = 75;
        const aspect = window.innerWidth / window.innerHeight;
        const near = 0.1;
        const far = 1000;
        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
        camera.position.set(0, 0, 5);
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        // 创建立方体
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
        const 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>

在这个示例中,我们创建了一个简单的 3D 场景,包含一个绿色的立方体。通过PerspectiveCamera,我们能够以透视的方式观察这个立方体,当立方体旋转时,透视效果让其看起来更加真实。

通过以上对PerspectiveCamera的介绍,你可以看到它在 Three.js 构建 3D 场景中的重要性和灵活性。掌握好透视相机的使用,将为你创建丰富多彩、逼真的 3D 世界打下坚实的基础。

相关推荐
快起来别睡了几秒前
看完你就知道JavaScript 中的对象创建与继承方式原来这么简单?!
javascript
乌兰麦朵10 分钟前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai10 分钟前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
Code季风10 分钟前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
蓝倾11 分钟前
如何使用API接口实现淘宝商品上下架监控?
前端·后端·api
舂春儿12 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸12 分钟前
⚡ 从浏览器到编辑器只需1秒,这个React定位工具改变了我的开发方式
前端
Pedantic13 分钟前
我们什么时候应该使用协议继承?——Swift 协议继承的应用与思
前端·后端
Software攻城狮14 分钟前
vite打包的简单配置
前端
Codebee14 分钟前
如何利用OneCode注解驱动,快速训练一个私有的AI代码助手
前端·后端·面试