Three.js 如何计算发射弹角度与弹道，以及控制发射模型朝向？

1. 核心逻辑说明 #

你之前使用的angleTo方法只会返回两个向量的夹角弧度值，无法直接拆分为3D空间的轴向移动参数，3D场景下不需要手动计算sin/cos，直接使用标准化方向向量即可实现需求。

2. 发射方向计算 #

分两种场景处理方向获取：

• 若十字准星是3D空间内的实体模型，直接用目标位置减发射位置后归一化得到方向向量
• 若十字准星是2D屏幕UI，用Raycaster从相机中心发射射线获取发射方向

3. 圆柱体朝向修正 #

Three.js默认圆柱体的长轴沿Y轴对齐，而lookAt方法会让物体的Z轴正方向指向目标，所以需要先修正圆柱体的初始朝向，后续直接调用lookAt即可让圆柱体对准飞行方向。

完整代码示例 #

// ===== 初始化阶段 =====
// 场景1：十字准星是3D实体对象
const launchPos = spacecraft.position.clone(); // 替换为你的飞船/发射源位置
const targetPos = crosshair.position.clone();
const direction = targetPos.sub(launchPos).normalize();

/*
// 场景2：十字准星是2D屏幕UI，用射线获取方向
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(new THREE.Vector2(0, 0), camera); // (0,0)对应屏幕中心十字准星位置
const direction = raycaster.ray.direction.clone();
*/

// 创建圆柱体炮弹，提前修正朝向让长轴沿Z轴对齐
const projectileGeo = new THREE.CylinderGeometry(0.05, 0.05, 0.3, 8);
projectileGeo.rotateX(Math.PI / 2); // 初始旋转90度，对齐Z轴
const projectile = new THREE.Mesh(
  projectileGeo,
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
projectile.position.copy(launchPos);
projectile.speed = 0.2; // 自行调整飞行速度
projectile.direction = direction;
// 初始对准目标
projectile.lookAt(launchPos.clone().add(direction));
scene.add(projectile);

// ===== 动画阶段 =====
function animate(){
    // 按方向向量移动炮弹
    projectile.position.addScaledVector(projectile.direction, projectile.speed);
    // 如果需要飞行过程中始终朝向飞行方向（跟踪弹场景必加，直线飞行可省略）
    projectile.lookAt(projectile.position.clone().add(projectile.direction));

    requestAnimationFrame(animate);
}
animate();

内容的提问来源于stack exchange，提问作者Vardan Betikyan