系列文章目录
系列文章目录
Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
Three.js 快速入门教程【二】透视投影相机
Three.js 快速入门教程【三】渲染器
Three.js 快速入门教程【四】三维坐标系
Three.js 快速入门教程【五】动画渲染循环
Three.js 快速入门教程【六】相机控件 OrbitControls
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 度，类似人眼的视角范围，能让场景看起来自然。数值越大，视角越广，场景中的物体看起来越小；数值越小，视角越窄，物体看起来越大 | 50 |
| aspect | 宽高比，即渲染区域的宽度与高度之比。一般设置为Canvas画布宽高比width / height，确保场景在不同尺寸屏幕上正确显示 | 1 |
| near | 近裁剪面，相机能看到的最近距离。小于此距离的物体不会被渲染。设置过小可能导致近处物体出现闪烁或错误，需根据场景大小合理调整 | 0.1 |
| far | 远裁剪面，相机能看到的最远距离。大于此距离的物体不会被渲染。设置过大可能影响性能，因为 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入门知识点请关注该系列教程后续的更新。
