Three.js 快速入门教程 03 - 相机与灯光

相机 和 灯光 是 Three.js 中非常重要的两个概念，可以类比在现实世界中，相机好比眼睛，只有当光线进入我们的眼睛，我们才能看到这个世界中的物体，否则将只能看到一片漆黑。本篇将围绕这两个概念来进行讲解。

相机

透视投影相机

简介

透视投影相机PerspectiveCamera是最常用的相机，它的本质就是模拟人眼所看到的景象，所以可以很直观的去理解它的特性

在第一节教程中的例子已经用到了透视投影相机PerspectiveCamera，下面将详细介绍它的构造器参数

参数名	含义
fov	相机视锥体垂直视野角度
aspect	相机视锥体长宽比
near	相机视锥体近端面
far	相机视锥体远端面

结合图中我们可以看到，相机前方的虚线构成了一个锥体，我们称之为视锥体。只有在视锥体中之内物体，才会显示在画面中，因此这四个参数就是在调整视锥体的形状和大小，让画面显示出不同的内容。

调整相机位置

除了在构造器中调整视锥体外，另外最常用的方法就是调整相机位置了。

这里的相机位置包括两个，观察者位置和观察对象位置，可以类比为人站在某处盯着某样物品在看，其中人所处的位置即观察者位置，物品的位置即观察对象位置，由这两点构成的连线就是观察方向。

在 Three.js 中的相机就是沿着这条观察方向的线，去观察物体输出画面，观察方向的不同就导致输出画面的角度不同。

在代码中观察者位置使用相机的position属性，观察对象位置使用相机的lookAt()方法

// 调整相机观察者位置
camera.position.set(10, 10, 10);

// 只调整某个轴可以这样写
camera.position.z = 20;

// 调整相机观察对象位置
camera.lookAt(0, 10, 0);

正投影相机

正投影相机OrthographicCamera并不常用，这里简要介绍下它的特性

在这种模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。 这对于渲染 2D 场景或者 UI 元素是非常有用的。

灯光

平行光

平行光DirectionalLight 是沿着特定方向发射的光。这种光的表现像是无限远，从它发出的光线都是平行的。常常用平行光来模拟太阳光的效果。 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。

// 构造器参数1为光的颜色，参数2为光的强度。这里设置为白色平行光，强度为 0.5
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);

我们通常会调整平行光的朝向，让它对准物体

// 在场景中添加一个模型
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);
// 让平行光对准模型
directionalLight.target = mesh;

在灯光的作用下便能观察到物体，且根据光线角度的不同物体表面会呈现不同的明暗效果，更具真实立体感。

环境光

环境AmbientLight 没有特定方向，它的特性是会会均匀的照亮场景中的所有物体。

// 构造器参数1为光的颜色，参数2为光的强度。这里设置为白色平行光，强度为 0.5
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

其他灯光

其他灯光灯光的用法类似，这里只简单提下特性，详细用法可参考官方文档

• 半球光HemisphereLight 光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。
• 点光源PointLight 从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。
• 平面光光源RectAreaLight 平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。
• 聚光灯SpotLight 光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。