ThreeJS入门（062）：THREE.Vector3 知识详解，示例代码

还是大剑师兰特

于 2024-09-30 06:00:00 发布

阅读量855

点赞数 37

分类专栏： # ThreeJS综合教程200+ 文章标签：大剑师 threejs教程 threejs示例

本文链接：https://blog.csdn.net/cuclife/article/details/142105161

版权

ThreeJS综合教程200+ 专栏收录该内容

72 篇文章 9 订阅

订阅专栏

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

在这里插入图片描述

查看本专栏目录 - 本文是第 062篇入门文章

文章目录

THREE.Vector3 是 Three.js 中用于表示三维向量的一个类。向量是一个具有方向和大小的量，在计算机图形学中常用于表示位置、方向、速度、加速度等。在 Three.js 中，THREE.Vector3 主要用于处理三维空间中的点或向量。

构造函数

构造函数 new THREE.Vector3(x, y, z) 接受三个参数来定义向量的 x、y 和 z 分量。

参数说明

x：向量在 x 轴上的分量，默认为 0。
y：向量在 y 轴上的分量，默认为 0。
z：向量在 z 轴上的分量，默认为 0。

示例

创建一个基本的三维向量：

const vector = new THREE.Vector3(1, 2, 3);

这将创建一个 x 分量为 1，y 分量为 2，z 分量为 3 的三维向量。

方法

THREE.Vector3 提供了许多方法来操作向量，以下是一些常用的方法：

set(x, y, z)：设置向量的 x、y 和 z 分量。
clone()：返回一个新的 Vector3 实例，其值与当前向量相同。
copy(v)：将向量 v 的值复制到当前向量。
add(v)：将向量 v 加到当前向量。
addScalar(s)：将标量 s 加到向量的每个分量。
sub(v)：从当前向量减去向量 v。
multiplyScalar(s)：将标量 s 乘以向量的每个分量。
divideScalar(s)：将向量的每个分量除以标量 s。
negate()：取向量的相反数。
dot(v)：计算当前向量与向量 v 的点积。
cross(v)：计算当前向量与向量 v 的叉积。
length()：计算向量的长度（模）。
lengthSq()：计算向量长度的平方（避免开方运算，用于比较长度）。
normalize()：将向量归一化（使其长度为 1）。
lerp(v, alpha)：线性插值当前向量到向量 v，alpha 表示插值的比例。
equals(v)：检查当前向量是否等于向量 v。
distanceTo(v)：计算当前向量与向量 v 之间的欧几里得距离。
distanceToSquared(v)：计算当前向量与向量 v 之间的距离的平方。
angleTo(v)：计算当前向量与向量 v 之间的角度。
applyMatrix4(m)：将矩阵 m 应用于当前向量。
applyQuaternion(q)：将四元数 q 应用于当前向量。
project(camera)：将向量投影到相机的视口上。
unproject(camera)：将向量从相机的视口反投影回世界坐标系。
transformDirection(matrix)：变换向量的方向（不考虑平移部分）。
setFromMatrixPosition(m)：从矩阵 m 中提取位置部分。
setFromMatrixScale(m)：从矩阵 m 中提取缩放部分。
setFromMatrixColumn(m, index)：从矩阵 m 中提取指定列作为向量。
setFromSpherical(s)：从球面坐标 s 设置向量。
setFromCylindrical©：从柱面坐标 c 设置向量。
setFromMatrix3Column(m, index)：从 3x3 矩阵 m 中提取指定列作为向量。

示例

创建并向量添加另一个向量：

const vector1 = new THREE.Vector3(1, 2, 3);
const vector2 = new THREE.Vector3(4, 5, 6);
vector1.add(vector2); // 结果向量为 (5, 7, 9)

计算向量的长度：

const vector = new THREE.Vector3(3, 4, 0);
console.log(vector.length()); // 输出 5

向量的归一化：

const vector = new THREE.Vector3(3, 4, 0);
vector.normalize(); // 归一化后的向量为 (0.6, 0.8, 0)

线性插值两个向量：

const vector1 = new THREE.Vector3(1, 2, 3);
const vector2 = new THREE.Vector3(4, 5, 6);
const interpolatedVector = vector1.clone().lerp(vector2, 0.5); // 结果向量为 (2.5, 3.5, 4.5)

使用 `THREE.Vector3` 在 Three.js 中

THREE.Vector3 在 Three.js 中有许多用途，例如：

用于表示三维空间中的点。
用于表示三维空间中的向量。
用于计算光照方向。
用于计算摄像机的位置或目标。
用于表示物体的速度或加速度。
用于计算物理模拟中的力。

总结

THREE.Vector3 是一个用于表示三维向量的类，提供了丰富的操作向量的方法。通过这些方法，你可以执行向量加法、减法、缩放、归一化、点积计算、叉积计算等操作。在 Three.js 的许多功能中，THREE.Vector3 都扮演着重要的角色，尤其是在处理三维空间的问题时。理解并熟练使用 THREE.Vector3 对于开发复杂的 Three.js 应用程序是非常有帮助的。