本文详解如何在 p5.js WEBGL 模式下让三维甜甜圈自然跟随鼠标光标朝向，解决原代码中 Y 轴异常旋转、中心抖动等问题，并提供两种专业方案：一是通过动态调整相机朝向实现“视觉跟随”，二是更符合直觉的——直接旋转甜甜圈自身，避免误用 camera 带来的逻辑混淆与数值不稳定性。
本文详解如何在 p5.js webgl 模式下让三维甜甜圈自然跟随鼠标光标朝向，解决原代码中 y 轴异常旋转、中心抖动等问题，并提供两种专业方案：一是通过动态调整相机朝向实现“视觉跟随”，二是更符合直觉的——**直接旋转甜甜圈自身**，避免误用 camera 带来的逻辑混淆与数值不稳定性。
在 p5.js 的 WEBGL 渲染环境中，实现“甜甜圈随鼠标转动”的常见误区是：试图通过频繁重设 camera() 位置并配合全局 rotateY() 来模拟朝向，这不仅导致中心区域旋转失控（如题中“自转如疯”），还违背了“物体主动朝向”的物理直觉。根本问题在于：camera() 控制的是观察视角，而非物体姿态；而原逻辑中 torusRotationY = atan2(targetX, distance) + HALF_PI 对 Y 轴的粗暴映射未考虑坐标系方向与归一化约束，引发非线性抖动。
✅ 推荐方案一：固定相机 + 物体朝向对齐（语义清晰、稳定可靠）
该方案将相机锚定在画布中心前方（如 (width/2, 0, 0)），仅旋转甜甜圈使其法向量始终指向鼠标投影方向。核心是利用向量归一化与欧拉角分解：
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
}
function draw() {
background(0);
orbitControl(); // 保留用户交互能力（可选）
// 将鼠标映射到标准化平面（Z=100 平面，避免除零）
const targetX = mouseX - width / 2;
const targetY = mouseY - height / 2;
const targetZ = 100;
// 构造从原点指向鼠标的向量，并归一化（单位方向向量）
const dir = createVector(-targetX, -targetY, targetZ).normalize();
// 固定相机位置（避免视角漂移）
camera(width / 2, 0, 0, width / 2, 0, -1, 0, 1, 0);
push();
normalMaterial();
// 关键：用方向向量驱动旋转 —— 先绕 Y 轴校正水平偏移，再绕 X 轴校正垂直偏移
rotateY(HALF_PI - dir.x); // 水平朝向（注意：HALF_PI 补偿初始 torus 的默认朝向）
rotateX(dir.y); // 垂直俯仰（小角度近似，实际为弧度值，天然平滑）
torus(80, 45);
pop();
}? 为什么 rotateX(dir.y) 是安全的？
因 dir 已归一化，其分量范围为 [-1, 1]，故 dir.y 直接作为弧度输入 rotateX() 是数学合法的（sin(θ) ≈ θ 在小角度成立，且 p5.js 内部自动处理）。此设计消除了 atan2 引入的奇点与跳变，全程无条件分支，运行稳定。
⚠️ 注意事项：
- 避免在
draw()中反复调用createVector()创建新对象（性能敏感场景建议复用向量）； - 若需限制最大旋转角度（如 ±30°），可对
dir.x和dir.y进行截断：clamp(dir.x, -0.5236, 0.5236)（30°≈0.5236 rad）； -
orbitControl()与自定义旋转共存时，建议在push()/pop()内操作，防止状态污染。
✅ 备选方案二：纯相机方案（轻量但语义弱）
若坚持使用相机移动，应确保目标点具有合理 Z 深度（如 targetZ = 100），并反转 Z 分量以匹配 WEBGL 右手坐标系：
// 更稳健的相机方案（无需旋转物体） const target = createVector(targetX, targetY, -100); // 注意负号！ const cameraPos = p5.Vector.sub(createVector(0, 0, 0), target).normalize().mult(-400); camera(cameraPos.x, cameraPos.y, cameraPos.z, 0, 0, 0, 0, 1, 0); torus(80, 45);
? 总结：真正“甜甜圈跟随鼠标”的本质是物体姿态控制，而非相机欺骗。优先采用方案一——直接旋转 torus 并用归一化方向向量解耦 XY 旋转，既符合直觉、消除抖动，又便于后续扩展（如添加阻尼动画、多物体协同朝向等）。代码简洁、鲁棒性强，是 WEBGL 交互开发的最佳实践。
