모델

플랫폼 선택: Android iOS JavaScript

모델은 객체를 나타내기 위해 장면에 추가할 수 있는 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();