1. モデルを座標の中心にする

A-Frame.jsでは,マウス操作によって自分自身が移動するため,以下のように3Dモデルが画面の中心からずれてしまいます。

Untitled

ずれないようにするためには,「aframe-orbit-controls」を使います。

まずは,ここまでのプログラムのファイルですので,これをlab.js Builderで読み込んでください。

a-frame-demo2-2021-09-23--09 28.study.json

2. aframe-orbit-controlsのセットアップ

2. 1. lab.js Builderに環境をセットアップする

セットアップの方法は他のライブラリを使用するときと同じです。lab.js Builderの設定アイコン(右端)をクリックします。

Untitled

HTMLタブを選び,使用するライブラリのリンクを貼り付けます。a-frame.js を読み込んだ後に読み込んでください。

具体的には以下のような感じです。

<script src="<https://unpkg.com/[email protected]/dist/aframe-orbit-controls.min.js>"></script>

2. 2. <a-entity>を用いてカメラを指定

aframe-orbit-controlsを指定して,自分自身の視点を制御します。wasd-controlsを指定していた<a-camera>要素を削除し,代わりに look-controls orbit-controlsを指定します。

<a-entity camera look-controls orbit-controls="maxPolarAngle:180; minDistance: 0.5; maxDistance: 200; initialPosition: 0 0 10; autoRotate: true enableKeys: false"></a-entity>