8th Wall World Effects入門──地面タップでオブジェクトを配置するARデモの作り方

project/
├── external/
│   ├── scripts/8frame-1.5.0.min.js   # A-Frame
│   ├── xr/xr.js                       # 8th Wall エンジン
│   ├── xrextras/xrextras.js           # ユーティリティ
│   └── landing-page/landing-page.js    # デバイス判定UI
├── src/
│   ├── index.html                      # エントリーポイント
│   ├── app.js                          # コンポーネント登録
│   ├── tap-place.js                    # タップ配置ロジック
│   ├── index.css                       # オーバーレイスタイル
│   └── assets/
│       ├── cactus.glb                  # 3Dモデル
│       └── sand.jpg                    # 地面テクスチャ
└── config/webpack.config.js            # ビルド設定

<script src="./external/scripts/8frame-1.5.0.min.js"></script>
<script src="./external/xrextras/xrextras.js"></script>
<script src="./external/landing-page/landing-page.js"></script>
<script async src="./external/xr/xr.js" data-preload-chunks="slam"></script>

<a-scene
  tap-place
  landing-page
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement:true"
  xrweb="
    allowedDevices: any;
    defaultEnvironmentFogIntensity: 0.5;
    defaultEnvironmentFloorTexture: #groundTex;
    defaultEnvironmentFloorColor: #FFF;
    defaultEnvironmentSkyBottomColor: #B4C4CC;
    defaultEnvironmentSkyTopColor: #5ac8fa;
    defaultEnvironmentSkyGradientStrength: 0.5;">

<a-assets>
  <img id="groundTex" src="assets/sand.jpg">
  <a-asset-item id="cactusModel" src="assets/cactus.glb"></a-asset-item>
</a-assets>

<a-camera
  id="camera"
  position="0 8 8"
  raycaster="objects: .cantap"
  cursor="fuse: false; rayOrigin: mouse;">
</a-camera>

<a-box
  id="ground"
  class="cantap"
  scale="1000 2 1000"
  position="0 -0.99 0"
  material="shader: shadow; transparent: true; opacity: 0.4"
  shadow>
</a-box>

const tapPlaceComponent = {
  schema: {
    min: { default: 6 },
    max: { default: 10 },
  },
  init() {
    const ground = document.getElementById("ground");
    this.prompt = document.getElementById("promptText");

    ground.addEventListener("click", (event) => {
      // プロンプトを非表示
      this.prompt.style.display = "none";

      // タッチ位置に新しいエンティティを作成
      const newElement = document.createElement("a-entity");
      const touchPoint = event.detail.intersection.point;
      newElement.setAttribute("position", touchPoint);

      // ランダムな回転とスケール
      const randomYRotation = Math.random() * 360;
      newElement.setAttribute("rotation", `0 ${randomYRotation} 0`);
      const randomScale = Math.floor(
        Math.random() * (this.data.max - this.data.min) + this.data.min
      );

      // 初期状態：非表示・極小
      newElement.setAttribute("visible", "false");
      newElement.setAttribute("scale", "0.0001 0.0001 0.0001");
      newElement.setAttribute("shadow", { receive: false });
      newElement.setAttribute("gltf-model", "#cactusModel");
      this.el.sceneEl.appendChild(newElement);

      // モデル読み込み完了後にアニメーション
      newElement.addEventListener("model-loaded", () => {
        newElement.setAttribute("visible", "true");
        newElement.setAttribute("animation", {
          property: "scale",
          to: `${randomScale} ${randomScale} ${randomScale}`,
          easing: "easeOutElastic",
          dur: 800,
        });
      });
    });
  },
};

AFRAME.registerComponent("tap-place", tapPlaceComponent);

// vercel.json
{
  "outputDirectory": "dist"
}