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

请添加图片描述

系列文章目录

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;}
});