onSteer sample for ClusterScript

steer-sample.js

// original code from https://note.com/cluster_official/n/nae701f17753a

$.onStart(() => {
  $.state.driver = null;
  $.state.steerInput = new Vector2(0, 0);
  $.state.steerAdditionalAxisInput = 0;
});

$.onRide((isGetOn, player) =>{
  $.state.driver = (isGetOn) ? player : null;
});

$.onSteer((input, player) =>{
  $.state.steerInput = input;
});

$.onSteerAdditionalAxis((input, player) => {
  $.state.steerAdditionalAxisInput = input;
});

$.onUpdate((deltaTime) => {
  if (!$.state.driver) {
    return;
  }
  if (!$.state.driver.exists()) {
    $.state.driver = null;
    return;
  }

  // プレイヤーが向いている方向に対しての移動量を求める
  /*
  const direction = $.state.driver.getRotation().createEulerAngles();
  const forwardRadian = direction.y * Math.PI / 180;
  const sideRadian = ((direction.y + 90) % 360) * Math.PI / 180;

  const vectorForwardInput = new Vector3(
    Math.sin(forwardRadian) * $.state.steerInput.y * deltaTime,
    0,
    Math.cos(forwardRadian) * $.state.steerInput.y * deltaTime
  );
  const vectorSideInput = new Vector3(
    Math.sin(sideRadian) * $.state.steerInput.x * deltaTime,
    0,
    Math.cos(sideRadian) * $.state.steerInput.x * deltaTime
  );
  const vectorVerticalInput = new Vector3(
    0,
    $.state.steerAdditionalAxisInput * deltaTime,
    0
  );

  const newPosition = $.getPosition()
    .add(vectorForwardInput)
    .add(vectorSideInput)
    .add(vectorVerticalInput);
  */

  // ↓改変箇所ここから↓

  // top-level に定義してもよい (けど改変箇所をまとめるためにここに書いた)
  const right = new Vector3(1, 0, 0);
  const up = new Vector3(0, 1, 0);
  const forward = new Vector3(0, 0, 1);

  // local 座標系
  const vectorForwardInput = forward.clone().multiplyScalar($.state.steerInput.y * deltaTime);
  const vectorSideInput = right.clone().multiplyScalar($.state.steerInput.x * deltaTime);
  const vectorVerticalInput = up.clone().multiplyScalar($.state.steerAdditionalAxisInput * deltaTime);

  const deltaLocalPosition = vectorForwardInput.clone()
    .add(vectorSideInput)
    .add(vectorVerticalInput);
  
  // global 座標系
  const rotation = $.state.driver.getRotation();
  const deltaPosition = deltaLocalPosition.applyQuaternion(rotation);
  const newPosition = $.getPosition().add(deltaPosition);

  // ↑改変箇所ここまで↑

  $.setPosition(newPosition);
});

個人的には､なるべくローカル座標系で計算してから最後にグローバル座標系に変換するのがわかりやすくて好きなので､その考え方で書き直してみました｡