认识相机

最新推荐文章于 2025-09-22 18:08:13 发布

原创最新推荐文章于 2025-09-22 18:08:13 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

旧技术专栏收录该内容

28 篇文章

订阅专栏

认识相机

在Threejs中相机的表示是THREE.Camera，它是相机的抽象基类，其子类有两种相机，分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。类图如下所示：

透视投影相机（PerspectiveCamera）

你可以认为该相机就是我们的眼睛。其特点就是观察物体时会有近大远小的效果。
透视相机的构造函数：
PerspectiveCamera( fov, aspect, near, far )
/*
fov : 视角的大小，如果改值越大，物体会越小。（因为视角越大，看到的场景就会越大，从而显得物体小。就好比我们从很高的山上往下看建筑，此时我们能看到的视野会很大，所以你会觉得建筑都不怎么大。相反的如果你就在建筑的不远处，就会觉得建筑大道理一样)
推荐默认值：45

aspect : 实际窗口的纵横比，即宽度除以高度
推荐默认值：window.innerWidth/window.innerHeight

near：相机渲染的最近距离。改值必须 > 0
推荐默认值：0.1

far：相机渲染的最远距离。如果改值越大，相机能渲染更远处的物体。但是如果设置得太高，会影响渲染的效率。
推荐默认值：1000
*/
下图很好的展示了这些属性是如何结合在一起，从而决定你能看到什么：

(近面和远面中间的区域就是能被相机渲染的区域。超过这个区域的物体将不被渲染。)

正投影相机（OrthographicCamera）

该相机不管物体的远近，所有物体渲染出来的尺寸都一样。这种相机通常用在二维游戏中。

正投影相机的构造函数：
OrthographicCamera(left, right, top, bottom, near, far)
其中，left、right、top、bottom这四个值会组成一个矩形。这个四个值依次代表：渲染空间的最左边、最右边、最上边和最下边。而near和far的意思和透视相机的意思一样。

下图很好的展示了这些属性是如何结合在一起，从而决定你能看到什么：

(近面和远面中间的区域就是能被相机渲染的区域。超过这个区域的物体将不被渲染。)

设置相机的Z轴

有时候我们创建了一个物体，但是运行程序后发下场景里面什么都没有，只有漆黑的一片。但是程序也没报错。这是为什么呢？先来看看代码：

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);  
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor('#000'); 
document.body.appendChild(renderer.domElement);
var cube = new THREE.Mesh(new THREE.CubeGeometry(3,3,3,10,10,10), new THREE.MeshBasicMaterial({
	color : 'green',
}));
scene.add(cube);
renderer.render(scene, camera);

运行后发下屏幕上是漆黑一片哈~~~~~~

我们来修改下MeshBasicMaterial的一个属性，如下：
var cube = new THREE.Mesh(new THREE.CubeGeometry(3,3,3,10,10,10), new THREE.MeshBasicMaterial({
color : 'green',
wireframe : true //显示网格
}));

再次运行后如下：

其实我们的代码并没有错，只是我们没有设置相机的z轴。相机默认的z轴是0，而物体我们上面的代码也没有设置z轴的位置，就默认也是0了。所以此时相机是在物体的里面了。
我们可以来验证下，把相机的z轴设置大点或者把物体的z轴设置成负数，如下：

//设置相机z轴

camera.position.set(0,0,10);

//设置物体z轴
cube.position.set(0,0,-10);

运行效果图：

lookAt函数

当我们修改相机的位置后会发现物体跑到我们可视区域的外面了。这是因为相机没有设置观察点。

所以我们可以通过lookAt函数，让相机一直对着某个方向（好比你不管站在哪个位置，你的眼睛都会停留在你女神的位置一样~~ 。这里一般的做法是让相机对准场景的中心点）代码如下：
camera.lookAt(new THREE.Vector3(0,0,0)); 或者 camera.lookAt(scene.position);
设置后不管我们怎么改变相机的位置，我们都能在屏幕正中间看到物体

相机的up属性

通过修改相机的up属性，你可以修改相机以哪个轴为上方向。(通俗的讲就是哪个轴是在场景的正上方)。默认相机是以y轴的正上方为上方向。设置如下：
camera.up.x = 0
camera.up.y = 1;
camera.up.z = 0;
up的3个属性取值为0~1
下图是依次设置x、y、z轴为上方向的效果图。（绿=y、红=x、蓝=z）

X轴为上方向

Y轴为上方向

Z轴为上方向