Three.js 向量的加法和减法


向量在3D内容的制作中是一个有用的概念,下面我们将一同学习一下Three.js中使用加法和减法计算坐标的方法,这是矢量的基础。

向量的加法

假设有三个点,点O (0, 0),点A (2, 0),点B. (1, 1)此时,将点O连接到点A的向量为OA向量,并且将点O连接到点B的向量是OB向量,如下图所示。

Three.js的代码如下:

向量的减法


在做减法时,首先反转OB矢量的方向。然后,可以用与添加相同的思维方式来表达差异。Three.js的代码如下:

向量在Three.js中的运用

首先来看一下将要实现的效果:

我们将需求分解为两块:
– 获取移动球体向前的向量
– 让相机跟随球体
这里我们将处理3维向量,但它几乎与2维向量相同,所以不要担心。

我们先来获取移动球体向前的向量。要获取球体向前的向量,请使用移动前后位置向量之间的差,以下称前向量。

现在我们要让相机跟随球体,计算摄像机的位置,使用前一个球体的前向量,让摄像机与球体保持一定的距离。

你是否已经注意到了向量对坐标计算的作用?刚刚我们只是简单接触了向量的加法和减法,其实通过使用内积和交叉积,还可以实现更复杂的效果。感兴趣的朋友,可以继续阅读下一篇 向量的内积