跟隨路徑移動

此範例示範如何讓模型沿路徑移動，包含以下功能：
建立自訂 3D 模型：透過 THREE.js 建立自訂 3D 模型
模型依路徑往返移動：使用 followPath() 在正向/反向路徑循環
點擊模型啟用鏡頭跟隨：透過 detect3dObject() + fixedCameraToModel() 操作視角
info
詳細使用說明請參考「路徑移動」。
<!DOCTYPE html>

<html>
  <head>
      <meta charset=utf-8 />
      <title>跟隨路徑移動</title>
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
      <script src="https://kw3dmap.localking.com.tw/openapi/loader/mapThree-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>
      <style>
        body { margin: 0; padding: 0; }
        #map { width: 100vw; height: 100vh; }
      </style>
  </head>

  <body>
      <script type="importmap">
        {
          "imports": {
            "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.172.0/three.module.min.js"
          }
        }
      </script>

      <div id="map"></div>

      <script type="module">
        import * as THREE from "three";

        const map = await new mapThree(document.getElementById("map"), {
          accessKey: 'get_your_key',
          accessToken: 'get_your_token',
          style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
          center: [121.5644, 25.0345],
          pitch: 60,
          zoom: 15,
        });

        map.on("style.load", async () => {
          // 建立自訂 3D 模型
          const geometry = new THREE.BoxGeometry(100, 100, 100);
          const material = new THREE.MeshBasicMaterial({ color: "#DD0000" });
          const mesh = new THREE.Mesh(geometry, material);
          
          const model = await map.three.add3dModel({
            obj: mesh,
            coordinates: [121.565, 25.0334, 0],
            anchor: "center",
          });


          /* ════════════════════════════════════════════════════════════════════════
          * 模型依路徑往返移動：
          - 可調整 path，設定路徑座標位置。
          - 可調整 duration，設定持續時間。
          - 可調整 trackHeading，設定模型是否面向路徑方向。
          ════════════════════════════════════════════════════════════════════════ */
          // 設定路徑
          const path = [
            [121.561, 25.0334, 0],
            [121.569, 25.0334, 0],
          ];

          const reversePath = [...path].reverse();
          // 是否反向
          let isReverse = false; 
          
          // 3D模型隨路徑移動
          const modelFollowPath = () => {
            model.followPath({
              // 路徑
              path: isReverse ? reversePath : path,

              // 持續時間
              duration: 3000,

              // 模型是否面向路徑方向
              trackHeading: false,

              // 結束時執行的回調函式
              onEnd: () => {
                isReverse = !isReverse;
                modelFollowPath();
              },
            });
          };

          modelFollowPath();


          /* ════════════════════════════════════════════════════════════════════════
          * 點擊模型啟用鏡頭跟隨：
          - 可調整 releaseCameraOnClick，設定是否在點選地圖後釋放鏡頭。
          ════════════════════════════════════════════════════════════════════════ */
          map.on("click", ({ point }) => {
            // 偵測點選位置的3D物件
            const object = map.three.detect3dObject(point);
            if (object === model) {
              // 將鏡頭鎖定在模型上
              map.three.fixedCameraToModel({
                model,
                // 點選地圖後釋放鏡頭
                releaseCameraOnClick: false,
              });
            }
          });
        });

      </script>
  </body>
</html>

<script src="https://kw3dmap.localking.com.tw/openapi/loader/mapThree-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>

<script type="importmap">
  {
    "imports": {
      "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.172.0/three.module.min.js"
    }
  }
</script>

<script type="module">
  import * as THREE from "three";

  const map = await new mapThree(document.getElementById("map"), {
    accessKey: 'get_your_key',
    accessToken: 'get_your_token',
    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
    center: [121.5644, 25.0345],
    pitch: 60,
    zoom: 15,
  });

  map.on("style.load", async () => {
    // 建立自訂 3D 模型
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    const material = new THREE.MeshBasicMaterial({ color: "#DD0000" });
    const mesh = new THREE.Mesh(geometry, material);

    const model = await map.three.add3dModel({
      obj: mesh,
      coordinates: [121.565, 25.0334, 0],
      anchor: "center",
    });


    /* ════════════════════════════════════════════════════════════════════════
    * 模型依路徑往返移動：
    - 可調整 path，設定路徑座標位置。
    - 可調整 duration，設定持續時間。
    - 可調整 trackHeading，設定模型是否面向路徑方向。
    ════════════════════════════════════════════════════════════════════════ */
    // 設定路徑
    const path = [
      [121.561, 25.0334, 0],
      [121.569, 25.0334, 0],
    ];

    const reversePath = [...path].reverse();
    // 是否反向
    let isReverse = false; 

    // 3D模型隨路徑移動
    const modelFollowPath = () => {
      model.followPath({
        // 路徑
        path: isReverse ? reversePath : path,

        // 持續時間
        duration: 3000,

        // 模型是否面向路徑方向
        trackHeading: false,

        // 結束時執行的回調函式
        onEnd: () => {
          isReverse = !isReverse;
          modelFollowPath();
        },
      });
    };

    modelFollowPath();


    /* ════════════════════════════════════════════════════════════════════════
    * 點擊模型啟用鏡頭跟隨：
    - 可調整 releaseCameraOnClick，設定是否在點選地圖後釋放鏡頭。
    ════════════════════════════════════════════════════════════════════════ */
    map.on("click", ({ point }) => {
      // 偵測點選位置的3D物件
      const object = map.three.detect3dObject(point);
      if (object === model) {
        // 將鏡頭鎖定在模型上
        map.three.fixedCameraToModel({
          model,
          // 點選地圖後釋放鏡頭
          releaseCameraOnClick: false,
        });
      }
    });
  });

</script>

<style>
  body { margin: 0; padding: 0; }
  #map { width: 100vw; height: 100vh; }
</style>