Three.js快速入门教程【二】透视投影相机

系列文章目录

Three.js 快速入门教程【一】开启你的 3D Web 开发之旅 Three.js 快速入门教程【二】透视投影相机 Three.js 快速入门教程【三】渲染器

---

文章目录 系列文章目录一、前言二、创建透视投影相机三、位置设置四、方向控制五、旋转相机六、牛刀小试总结

---

一、前言

    在 Three.js 创建的 3D 虚拟世界中，相机是我们观察场景的窗口。而透视投影相机（PerspectiveCamera）是 Three.js 里常用的相机类型之一，它模拟了人眼观察物体的方式，即近大远小，能为场景带来逼真的深度感。本篇文章将介绍透视投影相机在 Three.js 中的使用。

---

二、创建透视投影相机 // 创建一个透视相机 const camera = new THREE.PerspectiveCamera( 75, // 视场角（FOV） window.innerWidth / window.innerHeight, // 宽高比 0.1, // 近裁剪面 2000 // 远裁剪面 );

PerspectiveCamera( fov, aspect, near, far )参数介绍：

参数说明默认值fov视野角度（Field of View），指垂直方向上的视角，单位是度。通常设置为 45 - 75 度，类似人眼的视角范围，能让场景看起来自然。数值越大，视角越广，场景中的物体看起来越小；数值越小，视角越窄，物体看起来越大50aspect宽高比，即渲染区域的宽度与高度之比。一般设置为Canvas画布宽高比width / height，确保场景在不同尺寸屏幕上正确显示1near近裁剪面，相机能看到的最近距离。小于此距离的物体不会被渲染。设置过小可能导致近处物体出现闪烁或错误，需根据场景大小合理调整0.1far远裁剪面，相机能看到的最远距离。大于此距离的物体不会被渲染。设置过大可能影响性能，因为 GPU 需要处理更多远处的物体。2000

ps:表格中提到的Canvas画布指的是3d场景在网页上渲染的dom节点，它是个canvas，可通过渲染器的domElement属性获取。

//创建渲染器 const renderer = new THREE.WebGLRenderer(); //获取dom const canvas=renderer.domElement

---

三、位置设置

改变相机在3D场景中位置

1、通过camera.position.set(x,y,z)，其中x,y,z分别代表3维坐标系中x轴、y轴、z轴坐标向量

camera.position.set(5, 10, 30);

2、通过camera.position.属性设置，camera.position是一个THREE.Vector3对象（三维向量），有x、y、z三个属性

camera.position.x = 5; camera.position.y = 10; camera.position.z = 30;

ps:相机默认位置在原点（0,0,0）

---

四、方向控制

设置相机方向，使得它的正前方指向某个方向。

通过camera.lookAt(x,y,z)，让相机看向某个点

camera.lookAt(0,10,30);

或传入一个三维向量对象

const target = new THREE.Vector3( 0, 10, 30 ); camera.lookAt( target );

看向场景中一个物体：

const mesh= new THREE.Mesh( new THREE.BoxGeometry(1, 1, 1), new THREE.MeshStandardMaterial({ color: 0x00ff00 }) ); scene.add(mesh); camera.lookAt(mesh.position);

始终保持看向该物体：

function animate() { requestAnimationFrame(animate); camera.lookAt(mesh.position); renderer.render(scene, camera); } animate();

ps:相机方向默认看向z轴负方向

知识点提前了解：z轴方向跟css z-index方向是一致的，人眼睛跟电脑屏幕垂直方向即为z轴， 向屏幕内为负，向屏幕外为正，屏幕宽方向为x轴，高方向为y轴

---

五、旋转相机

1、通过camera.rotation.set(x,y,z)；

入参x,y,z以弧度为单位

// 设置相机绕z轴旋转45度（转换为弧度），x轴和y轴不旋转 camera.rotation.set(0,0,Math.PI / 4,);

2、通过rotation属性旋转相机

rotation属性包含三个值，分别是绕 X、Y、Z 轴的旋转角度（以弧度为单位）

//绕着x轴旋转45度 camera.rotation.x=Math.PI/4; //绕着y轴旋转90度 camera.rotation.y=Math.PI/2; //绕着z轴旋转60度 camera.rotation.z=Math.PI/3;

旋转顺序：默认XYZ(可通过camera.rotation.order修改)

camera.rotation.order='YZX';

---

六、牛刀小试

下面实现一个小案例：通过鼠标滚轮实现相机缩放功能

代码示例：

import * as THREE from "three"; //创建场景 const scene = new THREE.Scene(); //设置黑色背景色 scene.background = new THREE.Color(0x000000); //创建一个球体 const geometry = new THREE.SphereGeometry(5); //创建一个基础材质 const material = new THREE.MeshBasicMaterial({ color: "#ff00ff", }); //创建一个网格对象 const mesh = new THREE.Mesh(geometry, material); //设置网格对象位置 mesh.position.set(0, 0, 0); //添加到场景中 scene.add(mesh); //创建相机 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); //设置相机位置 camera.position.set(0, 10, 30); //相机默认看向网格对象 camera.lookAt(mesh.position); //创建渲染器 const renderer = new THREE.WebGLRenderer(); //设置渲染器尺寸为页面宽高 renderer.setSize( document.documentElement.clientWidth, document.documentElement.clientHeight ); //将渲染器的 DOM 元素添加到页面中 document.body.appendChild(renderer.domElement); // 循环动画 function animate() { // 定时刷新 requestAnimationFrame(animate); renderer.render(scene, camera); } // 执行动画 animate(); //监听滚轮事件 window.addEventListener("wheel", (event) => { const speed = 1; if (event.deltaY > 0) { //缩小 camera.position.z += speed; } else { //放大 camera.position.z -= speed; } });

运行效果：

说明：监听wheel事件，根据滚轮滚动方向调整相机的position.z值，position.z值越大相机离我们眼睛越近，离物体越远呈现视觉效果就是物体在缩小，反之在放大。

总结

      透视投影相机是 Three.js 创建逼真 3D 场景的重要工具。通过掌握其创建、位置与方向控制以及与场景的交互，我们能为用户带来更丰富、沉浸式的 3D 体验。在实际应用中，需根据场景需求和用户体验，不断调整相机参数和交互逻辑，创造出令人满意的 3D 作品。

更多three.js入门知识点请关注该系列教程后续的更新。