모델

모델은 장면에 추가하여 객체를 나타낼 수 있는 3D 애셋입니다. Maps JavaScript API의 실사 3D 지도는 gLTF 모델을 포함할 수 있도록 지원합니다. 이러한 모델은 확장 및 회전하여 추가 맞춤설정을 위해 사용할 수 있습니다.

모델은 glTF PBR의 핵심 속성을 지원해야 합니다. 확장 프로그램 또는 확장 프로그램 속성은 지원되지 않습니다.

모델 추가

Model3DElement 생성자는 모델의 LatLng 좌표를 지정하는 Model3DElementOptions 집합과 모델 배치를 지원하는 매개변수 집합을 사용합니다.

모델은 다음 옵션을 지원합니다.

• position: LatLng 좌표로 표현된 모델의 위치입니다.
• orientation: 모델 좌표계의 회전입니다. 회전은 롤, 틸트, 방향 순서로 적용됩니다.
• scale: 좌표 공간에서 모델의 크기를 조정합니다. 기본값은 1입니다.
• altitudeMode: position에 표현된 고도가 해석되는 방식입니다.
• src: 모델의 URL입니다.

다음 예에서는 지도에 모델을 추가하고 사용 가능한 맞춤설정 옵션을 사용하여 모델을 수정하는 방법을 보여줍니다.

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();

대화형 모델 추가

모델은 상호작용도 지원합니다. 다음 예에서는 클릭하면 모델의 배율이 변경됩니다.

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();