모델

플랫폼 선택: 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() {
    // Import the needed libraries.
    const { Map3DElement, Model3DElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
    });

    const model = new Model3DElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    document.body.append(map);
    map.append(model);
}

void init();

대화형 모델 추가

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

async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
    });

    const model = new Model3DInteractiveElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    model.addEventListener('gmp-click', function () {
        this.scale = Math.random() * (0.5 - 0.1) + 0.1;
    });

    document.body.append(map);
    map.append(model);
}

void init();