3D模型

此範例示範如何新增 3D 模型，包含以下功能：
新增 3D 模型：透過 map.three.add3dModel() 指定模型來源與型別，並設定模型位置與旋轉方向。
info
詳細使用說明請參考「add3dModel」。
<!DOCTYPE html>

<html>
  <head>
      <meta charset=utf-8 />
      <title>3D模型</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>
      <div id="map"></div>

      <script type="module">
        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.038],
          pitch: 60,
          zoom: 15.5,
        });

        map.on("style.load", () => {
          /* ════════════════════════════════════════════════════════════════════════
          * 新增 3D 模型：
          - 可調整 obj，更換模型檔案。
          - 可調整 coordinates，更換模型座標。
          - 可調整 adjustment，更換模型位置。
          - 可調整 rotation，更換模型旋轉角度。
          - 可調整 scale，更換模型縮放比例。
          - 可調整 anchor，更換模型錨點位置。
          ════════════════════════════════════════════════════════════════════════ */
          map.three.add3dModel({
            // 模型檔案
            obj: "https://kw3dmap.autoking.com.tw/kwmap/assets/demo/gltf/tw01.glb",

            // 模型檔案類型
            type: "gltf",

            // 三維座標
            coordinates: [121.565067045142, 25.0334249633834, 0],

            // 位置調整
            adjustment: { x: 0, y: 0, z: 0 },

            // 旋轉角度
            rotation: { x: 0, y: 0, z: 180 },

            // 縮放比例
            scale: { x: 1, y: 1, z: 1 },

            // 錨點 (可設定：'auto'、'top'、'bottom'、'left'、'right'、'center'、
            // 'top-left'、'top-right'、'bottom-left'、'bottom-right')
            anchor: "auto",
          });
        });

      </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="module">
  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.038],
    pitch: 60,
    zoom: 15.5,
  });

  map.on("style.load", () => {
    /* ════════════════════════════════════════════════════════════════════════
    * 新增 3D 模型：
    - 可調整 obj，更換模型檔案。
    - 可調整 coordinates，更換模型座標。
    - 可調整 adjustment，更換模型位置。
    - 可調整 rotation，更換模型旋轉角度。
    - 可調整 scale，更換模型縮放比例。
    - 可調整 anchor，更換模型錨點位置。
    ════════════════════════════════════════════════════════════════════════ */
    map.three.add3dModel({
      // 模型檔案
      obj: "https://kw3dmap.autoking.com.tw/kwmap/assets/demo/gltf/tw01.glb",

      // 模型檔案類型
      type: "gltf",

      // 三維座標
      coordinates: [121.565067045142, 25.0334249633834, 0],

      // 位置調整
      adjustment: { x: 0, y: 0, z: 0 },

      // 旋轉角度
      rotation: { x: 0, y: 0, z: 180 },

      // 縮放比例
      scale: { x: 1, y: 1, z: 1 },

      // 錨點 (可設定：'auto'、'top'、'bottom'、'left'、'right'、'center'、
      // 'top-left'、'top-right'、'bottom-left'、'bottom-right')
      anchor: "auto",
    });
  });

</script>

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