日々是好日~every day is a good day~

日常の中の非日常の備忘録

【JavaScript】カメラの向いた方向に弾を移動させる

前回 『WebARでシューティングゲーム』で行った球と球の当たり判定をアップしましたが
他にも数学の力を借りて計算している部分がありまして
それは 弾をカメラの向いていた方向に移動させるところです
Unityなら transformCamera.forwardで表される方向に時間をかければ良いのですが
そんな便利なものは見つかられなかったので自力で計算
弾を発射した時のカメラの角度は取得することができるので 水平方向の角度をx 垂直方向の角度をyとすると

const camera = document.querySelector("#camera");
let cameraRotation = camera.getAttribute("rotation");
let x=cameraRotation.x;
let y=cameraRotation.y;

カメラの向いてる方向は(sin(y) *cos(x) ,sin(x),cos(y)*cos(x) )となります
理屈はわかりません もう高校の数Ⅱレベル(?)ですね
でもこう表すことができるということを知っている事が大事なんです!
方向が分かればこれに時間をかければOK
ゲームの弾は発射後2秒で消える設定なので これを踏まえて

var bulletMove = function () {
      let bullet = document.getElementById("bullet");
      if (bullet.getAttribute("visible")) {
      let nowTime = new Date().getTime();
      let time = nowTime - startTime;   //startTimeは発射時に取得
      if (time >= 2000) {
        bullet.setAttribute("visible", "false");
      } else {
        let bulletPos = bullet.getAttribute("position");
        bullet.setAttribute("position", {
          x: bulletPos.x +(Math.sin((y * Math.PI) / 180) * Math.cos((x * Math.PI) / 180) * -time) /500,
          y: bulletPos.y + (Math.sin((x * Math.PI) / 180) * time) / 500,
          z:bulletPos.z + (Math.cos((y* Math.PI) / 180) *Math.cos((x * Math.PI) / 180) *-time) /500,
        });
      }
    }
};
setInterval(bulletMove, 100);

JavaScriptではこんな感じです
Math.PI / 180は角度をラジアンに変換しています /500はただの速度調整です
学生の頃はsin cosなんて今後の人生で使うことは無いだろうと思っていたのですが
今 sin cosが人生を少しだけ面白いものにしてくれてます