Q .コード編集：JavaScriptでのカスタム例を教えてください。

A . JavaScriptでのカスタム例をサンプルコードと共に案内します。

• 画面編集の要素にアクセスする
• ARアセットにアクセスする
• プレミアムVPS、Wayspotの認識・ロストを取得
• プレミアム画像認識、マーカーの認識・ロストの取得
• プレミアム手の認識、認識・ロストの取得
• マーカーなしで、オブジェクトのドラッグを無効にする
• 音声アセットの再生
• 動画のタップイベントをなくす

具体的なコードの例は、以下の通りです。

画面編集の要素にアクセスする

DOMの読み込みが完了したら、画面編集のボタン要素とフォトフレーム要素を取得できます。

任意のタイミングで表示・非表示など可能です。

カスタムコード

// DOMの読み込み完了を取得する
document.addEventListener("DOMContentLoaded", (event) => {
console.log("DOMContentLoaded")

// 画面編集のボタン要素に付与した名前を指定してください
const shutterButton = document.querySelector('[data-ar-ui-name="撮影ボタン"]')
// 画面編集のフォトフレーム要素に付与した名前を指定してください
const photoframe = document.querySelector('[data-ar-photoframe-name="フォトフレーム"]')
// 画面編集のボタングループに付与した名前を指定してください。グループを囲むdivが取得できます
const buttonGroup = document.querySelector('[data-ar-ui-group-name="ボタングループ"]')
// 画面編集のフォトフレームグループに付与した名前を指定してください。グループを囲むdivが取得できます
const photoframeGroup = document.querySelector('[data-ar-photoframe-group-name="フォトフレームグループ"]')
})

ARアセットにアクセスする

アセットの読み込みが完了したら、AR編集で配置したアセットにアクセスできます。 任意のタイミングで表示切り替え、位置変更など様々なことが可能です。

カスタムコード

// 全てのアセットの読み込み完了を取得する
window.PALANAR.addEventListener("loadedAllContents", () => {
// AR編集でアセットに付与した名前を指定してください
const asset = window.PALANAR.arAssets.find(asset => asset.name === "3Dモデル")
asset.object3D.position.x = 1
});

プレミアムVPS、Wayspotの認識・ロストを取得

Wayspotが認識・見失った時に任意の処理を行えます。

カスタムコード

// Wayspotを認識した時
window.PALANAR.addEventListener("foundVpsWayspot", (event) => {
console.log(event.wayspotId)
})

// Wayspotを見失った時
window.PALANAR.addEventListener("lostVpsWayspot", (event) => {
console.log(event.wayspotId)
})

プレミアム画像認識、マーカーの認識・ロストの取得

マーカーを認識・見失った時に任意の処理を行えます。

カスタムコード

// はじめてマーカーを認識した時
window.PALANAR.addEventListener('foundArMarkerAtFirstTime', (event) => {
console.log(event.ar_marker_id)
})

// マーカーを認識した時（認識する度に発火）
window.PALANAR.addEventListener('foundArMarker', (event) => {
console.log(event.ar_marker_id)
})

// マーカーを見失った時（見失う度に発火）
window.PALANAR.addEventListener('lostArMarker', (event) => {
console.log(event.ar_marker_id)
})

プレミアム手の認識、認識・ロストの取得

手を認識・見失った時に任意の処理を行えます。

カスタムコード

// 手をはじめて認識した時
window.PALANAR.addEventListener('foundHandAtFirstTime', () => {
console.info('a hand has been found at first time')
})

// 手を認識したとき（認識する度に発火）
window.PALANAR.addEventListener('foundHand', (e) => {
console.info(`${e.whichHand} hand has been FOUND`)
})

// 手を見失った時（見失う度に発火）
window.PALANAR.addEventListener('lostHand', (e) => {
console.info('A hand has been LOST')
})

マーカーなしで、オブジェクトのドラッグを無効にする

「マーカーなし」では、一本指でドラッグするとアセットがドラッグできますが、それを無効にすることが可能です。

カスタムコード

window.PALANAR.addEventListener('loadedAllContents', () => {
window.PALANAR.dragControls.disable()
})

音声アセットの再生

編集画面からアップした音声データを任意のタイミングで再生・停止することが可能です。

カスタムコード

const audio = window.PALANAR.arAudios.find(audio => audio.name === "アセット名")
// ループ再生
audio.play({loop: true})
audio.pause()

動画のタップイベントをなくす

動画をタップした際に、再生・停止をしないようにすることが可能です。

カスタムコード

window.PALANAR.addEventListener("loadedAllContents", () => {
// AR編集のアセットに付与した名前を指定してください
window.PALANAR.arAssets.find(asset => asset.name === "アセット名").eventCallbacks = []
});