トラッキングとカメラの問題

6DoFのカメラモーションが動作しない

問題点

スマホを動かしても、カメラの位置が更新されない。

解決方法

シーンの中でカメラの位置を確認する。 カメラの高さ (Y) は0にするべきではありません。 0ではない値に設定します。 開始時のカメラのY位置は、サーフェス上のコンテンツの大きさに影響を与えます。(例: Yが小さいとコンテンツが大きくなります)

オブジェクトが正しく表面に追従しない

問題点

私のシーンのコンテンツは、サーフェスに「くっついている」ようには見えません。

解決方法

オブジェクトを表面に置くには、オブジェクトの ベースの高さが Y=0である必要があります。

注: Y=0の高さで位置を設定するだけでは不十分です。

例えば、モデルのトランスフォームがオブジェクトの中心にある場合、Y=0に配置するとオブジェクトの一部が表面より下に存在することになります。 この場合、オブジェクトの底がY=0に収まるように垂直方向の位置を調整する必要があります。

半透明の平面をY=0で配置することで、表面に対するオブジェクトの位置関係を視覚化することができます。

A-Frameの例

<a-plane
  position="0 0 0"
  rotation="-90 0 0"
  width="4"
  height="4"
  material="side: double; color: #FFFF00; transparent: true; opacity: 0.5"
  shadow>
</a-plane>

three.jsの例

  // 透明な黄色いマテリアルを持つ1x1の平面を作成する
var geometry = new THREE.PlaneGeometry(1, 1, 1, 1); // THREE.PlaneGeometry (幅, 高さ, 幅分割数, 高さ分割数)
var material = new THREE.MeshBasicMaterial({color: 0xffff00, transparent:true, opacity:0.5, side: THREE.DoubleSide});
var plane = new THREE.Mesh(geometry, material);
// X軸に対して90度 (ラジアン) 回転して平面を地面に平行にする
plane.rotateX(1.5708)
plane.position.set(0, 0, 0)
scene.add( plane );