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

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

ずれないようにするためには，「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の設定アイコン（右端）をクリックします。

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>