首页 / three.js / API 文档
Vector2
先看结论
二维向量，主要出现在屏幕坐标、归一化设备坐标与纹理 UV 中。
new THREE.Vector2(x, y) → Vector2
构造参数
| 参数 | 默认 | 说明 |
|---|---|---|
x | 0 | 横向分量，在 UV 中对应右方向 |
y | 0 | 纵向分量，在 UV 中对应上方向 |
属性
| 属性 | 说明 |
|---|---|
x / y | 两个分量，可直接读写 |
isVector2 | 只读标记 |
常用方法
| 方法 | 说明 |
|---|---|
set(x, y) / setScalar(s) | 赋值，两个分量相同可用后者 |
copy(v) / clone() | 就地复制与新建副本 |
add(v) / sub(v) / multiply(v) | 逐分量加减乘，均就地改写 |
addScaledVector(v, s) | 加上 v * s，插值迭代时很实用 |
multiplyScalar(s) / divideScalar(s) | 标量乘除 |
dot(v) / cross(v) | 点积返回数值，二维叉积返回标量（有符号面积） |
length() / lengthSq() / normalize() | 模长、模长平方、单位化 |
distanceTo(v) / distanceToSquared(v) | 两点距离 |
angle() | 相对 +X 轴的极角，范围 −π 到 π |
rotateAround(center, angle) | 绕指定点旋转，就地改写 |
lerp(v, t) / lerpVectors(a, b, t) | 线性插值 |
clamp(min, max) / clampLength(min, max) | 限制分量范围或模长范围 |
applyMatrix3(m) | 乘 3×3 矩阵，UV 变换时使用 |
fromArray(arr, offset) / toArray(arr, offset) | 与普通数组或类型化数组互转 |
equals(v) | 逐分量严格比较 |
指针位置转设备坐标
Raycaster.setFromCamera 需要的是归一化设备坐标：左下角为 (-1, -1)，
右上角为 (1, 1)，与浏览器的屏幕坐标原点在左上角相反，因此 Y 要翻转。
const pointer = new THREE.Vector2();
function onPointerMove(event) {
const rect = renderer.domElement.getBoundingClientRect();
pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
}
renderer.domElement.addEventListener('pointermove', onPointerMove);
用 getBoundingClientRect() 而不是 clientWidth，
是因为画布可能被 CSS 缩放过，或页面上有滚动偏移。设备像素比不需要参与换算。
UV 与贴图坐标
几何体的 uv 属性是二维数组，原点在纹理左下角，
(0, 0) 对应左下，(1, 1) 对应右上。
做贴图平铺时，通过 texture.repeat 与 texture.offset
调整，而不是改 UV：
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(8, 8); // 覆盖 8 × 8 次
texture.offset.set(0.5, 0);
如果要让一个面上的贴图独立旋转，可以用 texture.center 配合
texture.rotation，两者的单位都是弧度与 UV 空间。
Y 轴方向是常见错误来源。屏幕坐标向下为正，UV 与设备坐标向上为正。 指针换算漏掉负号时，拾取结果会上下镜像，而画面本身完全正常，排查时容易误判为几何问题。
换算由使用方负责。Vector2 只是两个数字，
three.js 不提供经纬度、投影坐标与屏幕坐标之间的转换。
经纬志（2026）。《Vector2》。https://www.jingweizhi.com/three/api/vector2.html（访问日期 2026-11-03）。