You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Three.js射击游戏子弹无法随视角上下旋转问题求助

问题解决:Three.js子弹随上下视角同步发射

你的问题出在手动计算子弹速度向量的方式没有正确结合相机的上下旋转(俯仰角度),只单独处理了左右旋转和sword的z轴旋转,导致上下调视角时子弹方向不对。直接用Three.js内置的相机方向获取方法就能解决,同时修正数组操作的小问题:

修改步骤

1. 替换子弹速度的计算逻辑

不要手动用三角函数拼速度,直接获取相机的世界空间朝向,这样不管左右还是上下旋转,方向都是准确的:

if (keys.z && gunn){
    let bullit= new THREE.Mesh(
      new THREE.SphereGeometry(0.05,8,8),
      new THREE.MeshBasicMaterial({color:0xffffff})
    );
    bullit.position.copy(swordPosi);
    bullit.alive = true;

    // 获取相机当前的朝向向量
    const shootDirection = new THREE.Vector3();
    camera.getWorldDirection(shootDirection);
    // 调整方向(默认相机看向-z轴,根据你的坐标系需求取反,乘以速度大小)
    const bulletSpeed = 5; // 替换成你原来的face变量或者自定义速度
    bullit.velocity = shootDirection.multiplyScalar(-bulletSpeed);

    setTimeout(function(){
      bullit.alive = false;
      scene.remove(bullit);
    }, 1000);
    bulits.push(bullit);
    scene.add(bullit);
  }

2. 修正子弹数组的遍历逻辑

原来的splice操作会导致数组长度变化,跳过下一个元素,需要在splice后递减索引:

for (let index=0;index<bulits.length; index+=1){
    if (bulits[index] === undefined) continue;
    if (bulits[index].alive == false){
      bulits.splice(index,1);
      index--; // 新增这行,避免跳过下一个子弹
      continue;
    }
    bulits[index].position.add(bulits[index].velocity);
  }

为什么原来的代码不行?

你之前用Math.sin(camera.rotation.y)处理左右方向,用Math.sin(swordRotation.z)处理上下方向,但这种拆分计算没有考虑相机旋转的复合效果——相机的上下旋转(x轴)会同时影响前后方向的x、y、z分量,单独取sword的z轴旋转无法正确映射到世界空间的子弹方向。而camera.getWorldDirection()会自动计算所有旋转后的最终朝向,直接拿到正确的三维方向向量。

内容的提问来源于stack exchange,提问作者Blaze Branham

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.19 07:22:47