太陽系（画像認識型AR）

このサンプルでは、画像認識型ARの3Dモデル拡張を実装して太陽系の惑星を独自の方法で可視化します。太陽系の惑星をデバイスに表示し、各惑星の基本的な情報が得られます。

拡張オブジェクトは、太陽系の惑星と惑星を強調するために薄暗い色で描かれた背景で構成されています。各惑星は別々の3Dモデルとしてロードされ、互いに独立してアニメーション表示できます。

サンプルのコードを見ると、いくつかの注目すべき部分があります。各惑星の詳細情報はplanetsInfo配列に格納されており、これを使用して各惑星のAR.Modelオブジェクトが作成されます。その大きさと太陽までの距離に応じて、translateプロパティとscaleプロパティを使用して各惑星がターゲット上に配置されます。

背景は単純なAR.ImageDrawableで、惑星とともにAR.ImageTrackableに追加されています。

var backdropImg = new AR.ImageResource("assets/backdrop.png");
    var backdrop = [new AR.ImageDrawable(backdropImg, 2)];

惑星の運動をアニメーション表示して太陽を中心とした円軌道を周回させるため、複数のAR.PropertyAnimationを作成してAR.AnimationGroupに集約しています。createOrbitAnimation(planet, info)関数で、このアクションに必要なアニメーションを作成します。円は4つの四分円に分割されており、それぞれの四分円にx軸用のアニメーションとy軸用のアニメーションが必要となります。x軸用とy軸用のアニメーションを集約して並行アニメーションとし、それらを連続的に再生することで、目的の円運動を達成しています。

初期状態では、惑星は静的で動きません。ユーザーがアニメーションボタンをクリックすると、toggleAnimatePlanets()関数が呼び出されます。この関数は現在のアニメーションの状態をチェックし、状態に応じてアニメーションを開始、一時停止、または再開します。

このサンプルには、惑星を選択するとその惑星の情報を表示する機能も実装されています。各惑星のAR.Modelには、planetClicked()関数を呼び出すonClickトリガーが設定されています。この関数は、選択された惑星の情報をHUDに表示します。ヘルパー関数のselectPlanet()とscreenClicked()によって、選択されたアニメーションを開始または停止し、それまで選択されていた惑星のscaleプロパティをリセットします。

サンプルの確認には、このページにある画像を使用できます。