【A-Frame】リロードさせずにカメラを正面に向かせる（recenter）

概要

WebVRで、カメラを初めのrotationに戻したい場合の対処法の備忘録。

WebVRはHMDやスマホでユーザーが自由にいろんな角度を見回せるのが魅力ですが、リロードさせずに正面を向いて欲しい時に使えます。

実装

cameraに親要素<a-entity>をつけて、親要素の角度をカメラに合わせて回すことでユーザーに正面を向かせることができます。

index.html

<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
　<!-- 以下camera -->
  <a-entity id="camera-wrapper">
    <a-entity camera id="camera" position="0 1.5 0" look-controls></a-entity>
  </a-entity>
</a-scene>

script.js

 let btn = document.getElementById("btn");
 let cameraWrapper = document.getElementById("camera-wrapper");
 let camera = document.getElementById("camera");
 btn.addEventListener("click", () => {
   let y = camera.getAttribute("rotation").y;
   cameraWrapper.setAttribute("rotation", {y: -1 * y});
 });

こちら参考にさせていただきました。
https://stackoverflow.com/questions/43576222/is-there-a-way-to-recenter-reset-orientation

recenterボタンをつけて動かすとこんな感じ

おじさんボタンを押すと無事、オブジェクトが正面に戻ってきました。

試してダメだったこと

camera自体のrotationにsetAttributeで0 0 0入れるのはうまく行きませんでした。