🚗

10分で完成！palanARではじめるラジコンAR！

2023/04/30に公開

JavaScript

tech

こんにちは、株式会社palan の xR事業部でエンジニアをやっている笹井です。

概要

今回は自社サービスの palanAR と自作パッケージの joystick を
組み合わせたラジコンARの作り方を紹介したいと思います！

今回作るサンプルはこちらから体験できます！
ぜひ遊んでみてください！

対象読者

こんな方にオススメです！

手軽にARを作ってみたい！
ARやWebARに興味がある！
インタラクティブな表現に興味がある！

手順

1. palanARに登録

https://palanar.com/

2. お試しプレミアムオプションに申込

https://palanar.com/premium_trials/new

2-1. ARを新規作成

2-2. ARの種類「プレミアム平面認識AR」を選択

2-3. プロジェクト名とURLを設定

2-4. テンプレート「自由作成」を選択

3. ARを編集

3-1. 車の3Dモデルを配置して保存

Car by businessyuen

※車の3Dモデルの向きは、必ず上記画面のような向きになるよう作成してください。
　ラジコンARという特性上、右メニューの回転X・回転Y・回転Zは設定しても無効となります。

※車の3Dモデルの位置は、必ず車体やタイヤが床より上になるように設定してください。
　床より下になると埋まったような表示となります。

※3Dモデルをお持ちでない方は、
　下記の手順で Sketchfab の3Dモデルを使用できます。

3-1-1. 左メニューの「素材ライブラリから追加」をクリック

3-1-2. 上メニューの「3Dモデル（外部サイト）」をクリックし、使用したい3Dモデルを選択

4. コードを編集

4-1. 左メニューの「コード編集」をクリック

4-2. カスタムHTMLを編集して保存

sample.html

<script src="https://cdn.jsdelivr.net/npm/@sasapanchama/joystick@1.0.2/dist/cdn.bundle.js"></script>
<div id="joystick-container"></div>

4-3. カスタムCSSを編集して保存

sample.css

#ar-ui-container {
  display: none !important;
}

#joystick-container {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

4-4. カスタムJavaScriptを編集して保存

sample.js

window.addEventListener("load", () => {

  // NOTE: ジョイスティックの親要素を取得
  const container = document.getElementById("joystick-container"); 
  
  // NOTE: ジョイスティックを生成+親要素に追加
  const joystick = new Joystick(container);  

  // NOTE: ジョイスティックのサイズを変更
  joystick.setSize(120);
  
  // NOTE: ジョイスティックを動かしている時...
  joystick.$outerCircle.addEventListener("touchmove", (event) => {  
    
    // NOTE: ジョイスティックの情報を取得
    const { sin, cos, radians, degrees, angle, velocity } = joystick.handleTouchMoveEvent(event);  
    
    // NOTE: 配置している3Dオブジェクトを取得
    let object = window.PALANAR.arAssets[0].object3D;
    
    // NOTE: オブジェクトの向きをジョイスティックの情報によって更新する
    object.lookAt(new THREE.Vector3(sin * 500, 0, -cos * 500));
    
    // NOTE: オブジェクトの位置をジョイスティックの情報によって更新する
    object.position.x += sin * velocity * 0.001;
    object.position.z += -cos * velocity * 0.001;
    
  });
  
  // NOTE: ジョイスティックを止めた時...
  joystick.$outerCircle.addEventListener("touchend", () => {
    
    // NOTE: ジョイスティックの情報を取得
    const { sin, cos, radians, degrees, angle, velocity } = joystick.handleTouchEndEvent();  
    
  });
  
});

5. ARを体験

5-1. 左メニューの「AR編集」をクリック

5-2. 右上メニューの「体験」をクリック

5-3. QRまたはURLをコピーして体験開始！

今回作ったサンプルはこちらから体験できます！
ぜひ遊んでみてください！

最後に

今回はコードを書く作業が発生してしまいましたが、
palanAR は「すごいARを誰でもかんたんに」をモットーに運営中です！

ご不明点があればよくある質問やSlackコミュニティをご活用ください！

概要