Mô hình

Mô hình là các thành phần 3D có thể được thêm vào cảnh để thể hiện đối tượng. API JavaScript 3D ảnh thực tế trong Maps hỗ trợ việc đưa các mô hình gLTF. Các mô hình này có thể được điều chỉnh theo tỷ lệ và xoay để cho phép tuỳ chỉnh thêm.

Các mô hình phải hỗ trợ các thuộc tính cốt lõi của glTF PBR. Không hỗ trợ tiện ích hoặc thuộc tính tiện ích nào.

Thêm mô hình

Hàm khởi tạo Model3DElement sẽ lấy một tập hợp Model3DElementOptions chỉ định toạ độ LatLng của mô hình và một tập hợp các tham số để hỗ trợ việc định vị mô hình.

Mô hình hỗ trợ các tuỳ chọn sau:

• position: Vị trí của mô hình được biểu thị bằng toạ độ LatLng.
• orientation: Độ xoay của hệ toạ độ trong mô hình. Các chế độ xoay được áp dụng theo thứ tự sau: cuộn, nghiêng và sau đó chuyển hướng.
• scale: Điều chỉnh theo tỷ lệ mô hình trong không gian toạ độ. Giá trị mặc định là 1.
• altitudeMode: Cách độ cao biểu thị bằng position được diễn giải.
• src: URL của mô hình.

Ví dụ sau minh hoạ việc thêm mô hình vào bản đồ và sửa đổi các mô hình đó bằng các tuỳ chọn tuỳ chỉnh có sẵn:

async function init() {
  const { Map3DElement, MapMode, Model3DElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 37.7438, lng: -121.5088, altitude: 1800},
    heading: -90,
    tilt: 90,
    mode: MapMode.SATELLITE,
  });

  document.body.append(map);
  
  const models = [
    // A model with regular settings.
    {
      position: {lat: 37.76, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
    },
    // Scaled down model.
    {
      position: {lat: 37.75, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
      scale: 0.8,
    },
    // Scaled up model.
    {
      position: {lat: 37.735, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
      scale: 1.2,
    },
    // A model with an additional transformation applied.
    {
      position: {lat: 37.72, lng: -121.63, altitude: 0},
      orientation: {tilt: 270, roll: 90},
    },
    // Non-clamped to the ground model.
    {
      position: {lat: 37.71, lng: -121.63, altitude: 1000},
      altitudeMode: 'RELATIVE_TO_GROUND',
      orientation: {tilt: 270},
    },
  ];

  for (const {position, altitudeMode, orientation, scale} of models) {
    const model = new Model3DElement({
      src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',
      position,
      altitudeMode,
      orientation,
      scale,
    });

    map.append(model);
  }
}

init();

Thêm mô hình tương tác

Mô hình cũng hỗ trợ hoạt động tương tác. Ví dụ sau đây thay đổi tỷ lệ của mô hình khi được nhấp vào.

async function init() {
  const { Map3DElement, MapMode, Model3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 37.7438, lng: -121.5088, altitude: 1800},
    heading: -90,
    tilt: 90,
    mode: MapMode.SATELLITE,
  });

  document.body.append(map);

  const model = new Model3DInteractiveElement({
    src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',
    position: {lat: 37.76, lng: -121.63, altitude: 0},
    scale: 1.0,
  });

  model.addEventListener('gmp-click', (event) => {
    model.scale = (Math.random() * (1 - 2)).toFixed(2);

  });

  map.append(model);
}

init();