はじめてのプロジェクト
マーカー型の AR シーンを作ります。スマートフォンを絵に向けると 3D オブジェクトが現れ、 タップすると音が鳴る、というものです。ここでのやり方は大きなプロジェクトでもそのまま通用します。
1. プロジェクトを作る
arclip.design にサインインしてプロジェクトを作成します。空の space と シーンが 1 つある状態で Studio が開きます。
2. シーンが現れるきっかけを決める
左のレールで Scenes を開き、シーンを選んでトリガーを設定します。
| トリガー | シーンが現れるタイミング |
|---|---|
| 3D | すぐに — AR なし。テストに向く |
| Image | アップロードした絵をカメラが認識したとき |
| QR | QR コードを読み取ったとき |
| Surface | 来場者が床やテーブルに置いたとき |
| Face | 顔を検出したとき |
| 360 | パノラマ環境を開いたとき |
Image を選び、印刷するか別の画面に表示する絵をアップロードします。実際の物理的な幅も入力して ください。エンジンはこの値からコンテンツの縮尺を決めます。
写真はよく追従します。白地に平らなロゴは追従しません。カメラがつかまえる手がかりがないからです。 効くのは解像度ではなく、コントラストと不規則なディテールです。
3. 見えるものを置く
Layers and assets を開き、モデルをキャンバスにドラッグします。上部バーの + から プリミティブを追加してもかまいません。
選択の横に出るツールで移動・回転・スケールできます。グリッドはプロジェクトの単位なので、 1 メートルのキューブはマーカーに対して本当に 1 メートルです。
4. マテリアルを与える
オブジェクトを選択したまま、右パネルの Material を開いて Edit を押します。
既定は Standard が適切です。色を決めてから roughness を調整してください。いちばん効くのが
roughness で、布や石は高く、磨いた金属は低くします。
5. 反応させる
選択したまま Events コンポーネントを追加し、イベントを 1 つ作ります。
- トリガー: on click
- ステップ: 音を鳴らす — オーディオファイルを選ぶ
- ステップ: transformation アニメーション — 400 ms で 0.2 m 上へ
これでコードなしのインタラクションが完成です。
エディターはシーンを描画しますが、ロジックは意図的に実行しません。そうでないとアニメーションが 作業の邪魔をします。動きを見るには Preview を押してください。
6. Preview
Preview は来場者が見るとおりに体験を開きます。タップ・音・アニメーションを確かめてください。
マーカーのシーンはスマートフォンで、印刷した絵に向けて確認します。デスクトップのプレビューでは 斜めからトラッキングが保つかどうかが分からず、たいてい調整が必要になるのはそこです。
7. 公開する
上部バーの Publish で、プロジェクトは誰でも開けるリンクになります。アドレスは最初から 用意され、独自ドメインはプロジェクト設定で接続できます。
変更したら必ず再公開してください。来場者に見えるのは最後に公開した版で、作業中のものではありません。
次に読むもの
| やりたいこと | 読むページ |
|---|---|
| 各パネルの役割を知る | インターフェース案内 |
| 大きめのプロジェクトを整理する | シーンと space |
| 動きを構成する | Animation Controller |
| 値と条件でロジックを組む | Patch Editor |
| ボタンやスコア表示を足す | UI Editor |
| エンジンの挙動を理解する | Creators Engine |
次へ: インターフェース案内