8th WallではJavaScript系の実装が可能なので、「クリックするとGoogleが開く」ようなボタン挙動も簡単なスクリプトを用いて実現します。
公式がサンプルとなるプロジェクトも公開してくれており、そちらを見てもわかりやすいと思います。
本記事でも公式のサンプルプロジェクトからスクリプトを拝借＋流用して作業を進めます。
▼今回作る挙動。
動画での作業例
動画（約4分）で作業の全体像をお見せするとこんな感じになります。
こちらの動画では最後、指定した「www.google.com」を開けていませんが、
本番環境（Publish済み）のサイトでは無事Googleのトップページへ遷移できています。
（エラー状態になっているのは、8th Wall公式によるセキュリティ対策だと思います。
※録画タイミングをミスっており、当該プロジェクトをすでに開き始めたところからスタートしています
作業手順説明
上の動画の流れで、重要な箇所を書き出します。
1. ボタンを追加する
「クリックするとGoogleへ飛ぶ」ためのボタンを設置。
ヒエラルキーの右上の[＋]ボタン > [UIエレメント] > ボタン
2. 任意）ボタンの表示内容・デザインの変更
動画内ではデフォルトで設定されていた「アイコン」を削除し、テキストも変更しています。
メモ：動画内で示している通り、アイコンはパスで指定されています
▼「テキスト」を選択 →「Button」から「Go to Google」（任意のテキスト）に変更
3. コンポーネント用のスクリプトを用意する
動画内では、公式が公開してくれているサンプルプロジェクトからそのまま利用可能なスクリプトを拝借＋流用しています。
利用したサンプルプロジェクト
Studio: Button
プロジェクトを開くと利用されているコンポーネント一覧や、READMEが表示されます（Githubみたい）
この一覧にある「call-to-action.ts」が利用するコードになります。
クリックするとソースコードが表示されます。
色付き下線を引いている箇所が、今回重要となる部分です。
後ほどここを変更します。
（20行目のオレンジの箇所は任意対応になります、最後に説明あり）
コードの内容についてここでは詳しく取り上げません。
詳細について知りたい場合はLLM（ChatGPTやClaude、Geminiなど）に質問するとよいと思います。
（私もTypeScriptの知識がないのでClaudeに投げて改変方法など尋ねました）
このコードをコピペして利用します。
4. コンポーネント・ファイルを作成
コピーした上述のコードを用いて8th Wallのプロジェクト内に「call-to-action.ts」ファイルを作成します（D&Dでインポートも可能です）
[＋]ボタン > 「新しいファイル」 > 「新しいコンポーネント・ファイル」
ファイル名を指定、
すると画面右にスクリプトタブが展開されます。
展開された「call-to-action.tsに、確保していたスクリプトをペースト。
5.スクリプトの変更箇所
4行目の「name」
これがコンポーネントの名前となります。
ファイル名と同じにすることを推奨。
ファイル名が「call-to-action」なので「Call To Action」など。9行目の「link」
ここを希望するURLに書き換えます。
今回はgoogle.comに書き換えています。
[build]ボタンを押す
（押さなくても自動で保存＋Buildが走っている可能性が高いです
6. ボタンにコンポーネントを加える
上述「5」で変更を加えた「Call To Action」コンポーネントを、ボタンに付与します。
押すとGoogleを開きたいボタンを選択し、インスペクター下部の[＋新コンポーネント]をクリック
検索ボックスで「Call To Action」を検索し、指定（クリックで決定）。
（途中まで記入すると候補サジェストされます）
これで「ボタンを押すとGoogleが開く（同タブにて）」が機能するようになりました。
おまけ：ボタンクリックしたら別タブで開きたい場合
別タブでジャンプ先URLを開きたいときは、こちらのスクリプトを利用します。
最後の「window.open(`${link}`, '_blank')」が変更されています。
import * as ecs from '@8thwall/ecs'
ecs.registerComponent({
name: 'Call To Action',
schema: {
link: ecs.string,
},
schemaDefaults: {
link: 'https://www.google.com/',
},
data: {
},
stateMachine: ({world, eid, schemaAttribute}) => {
ecs.defineState('default')
.initial()
.listen(eid, ecs.input.UI_CLICK, () => {
const {link} = schemaAttribute.get(eid)
world.events.addListener(eid, ecs.input.UI_CLICK, () => {
window.open(`${link}`, '_blank')
})
})
},
}) 今回はアセットは使っていないのでGLBファイルはありません。