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

最新推荐文章于 2024-09-30 04:30:00 发布

还是大剑师兰特

最新推荐文章于 2024-09-30 04:30:00 发布

阅读量767

点赞数 15

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

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

版权

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

72 篇文章 9 订阅

订阅专栏

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

在这里插入图片描述

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

文章目录

THREE.Vector2 是 Three.js 中用于表示二维向量的一个类。向量是具有方向和大小的量，通常用于表示位置、速度、加速度等概念。在 Three.js 中，THREE.Vector2 主要用于处理二维空间中的点或向量。

构造函数

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

参数说明

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

示例

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

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

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

方法

THREE.Vector2 提供了许多方法来操作向量，包括但不限于：

set(x, y)：设置向量的 x 和 y 分量。
clone()：返回一个新的 Vector2 实例，其值与当前向量相同。
copy(v)：将向量 v 的值复制到当前向量。
add(v)：将向量 v 加到当前向量。
addScalar(s)：将标量 s 加到向量的每个分量。
sub(v)：从当前向量减去向量 v。
multiplyScalar(s)：将标量 s 乘以向量的每个分量。
divideScalar(s)：将向量的每个分量除以标量 s。
negate()：取向量的相反数。
dot(v)：计算当前向量与向量 v 的点积。
length()：计算向量的长度（模）。
lengthSq()：计算向量长度的平方（避免开方运算，用于比较长度）。
normalize()：将向量归一化（使其长度为 1）。
lerp(v, alpha)：线性插值当前向量到向量 v，alpha 表示插值的比例。
equals(v)：检查当前向量是否等于向量 v。
distanceTo(v)：计算当前向量与向量 v 之间的欧几里得距离。
distanceToSquared(v)：计算当前向量与向量 v 之间的距离的平方。
angleTo(v)：计算当前向量与向量 v 之间的角度。
rotateAround(center, angle)：围绕点 center 旋转当前向量 angle 角度。
applyMatrix3(m)：将矩阵 m 应用于当前向量。

示例

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

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

计算向量的长度：

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

向量的归一化：

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

线性插值两个向量：

const vector1 = new THREE.Vector2(1, 2);
const vector2 = new THREE.Vector2(3, 4);
const interpolatedVector = vector1.clone().lerp(vector2, 0.5); // 结果向量为 (2, 3)

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

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

用于表示二维空间中的点。
用于表示二维空间中的向量。
用于处理 UV 坐标。
用于处理纹理坐标。
用于计算光照和其他物理属性。

总结

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