谷歌地球api(googlemap)引入threejs模型方法

通过前两个文章的代码我们已经完成了基础谷歌地图引入和地图自定义标点的方法
下面我们将地球引入模型展示
注意！想要引入模型自己编辑的底图必须是矢量底图，在谷歌创建地图时注意选择！

// 引入依赖
npm install @googlemaps/js-api-loader
npm i @googlemaps/three

import { Loader } from '@googlemaps/js-api-loader';
import * as THREE from "three";
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';

initMap()
var map
const loader = new Loader({
  apiKey: "你的秘钥",
  version: "beta",
});
const mapOptions = {
  "tilt": 0,
  "heading": 0,
  "zoom": 18,
  "center": { lat: , lng:  },
  "mapId": "你的地图ID",
  mapTypeId: "satellite",
  'zoomControl': false,
  'mapTypeControl': false,
  'scaleControl': false,
  'streetViewControl': false,
  'rotateControl': false,
  'fullscreenControl': false
};


loader.load().then(() => {
		//初始化地球方法
        const mapDiv = document.getElementById("map");
        const apiLoader = new Loader(loader);
        apiLoader.load();
        map  =  new google.maps.Map(mapDiv, mapOptions);
        //调用地图模型加载方法
        initWebGLOverlayView(map)
        //click事件获得定位
        map.addListener("click", (e) => {
          console.log(e.latLng.lat(),e.latLng.lng());
        });
        map.moveCamera({
          center: new google.maps.LatLng(经，纬度),
          zoom: 16,
          heading: 0,
          tilt: 60
        });
  }
async function initWebGLOverlayView (map) {

  let scene, renderer, camera, loader;
  let lat,lng
  //如果需要加载多个模型请在此处多定义几个方法
  //let scene1, renderer1, camera1, loader1;
  //let lat1,lng1
  //初始化模型方法
  const webGLOverlayView = new google.maps.WebGLOverlayView();
  webGLOverlayView.onAdd = () => {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera();
	//如果需要加载多个模型
    //scene1 = new THREE.Scene();
    //camera1 = new THREE.PerspectiveCamera();
    
    //第一个模型--------------------
    //亮度0xffffff,'#1772B4'
    //调整模型亮度
    var ambientLight = new THREE.AmbientLight(0xffffff, 3 ); // soft white light
    //光照
    var directionalLight = new THREE.DirectionalLight(0xffffff, 0);
    directionalLight.position.set(0.1, -1, 0.5);
    scene.add( ambientLight );
    scene.add(directionalLight);
    loader = new GLTFLoader();
    //你的模型地址，可以是相对路径或者http地址
    var source = 'dexintouming8.gltf';
    loader.load(
      source,
      gltf => {
        gltf.scene.scale.set(75,75,75);//长、高、宽
        gltf.scene.rotation.x = 90 * Math.PI/180;
        scene.add(gltf.scene);
      }
    );
    //定义你的经纬度
    lat = ''
    lng = ''

	//如果要加载多个模型
	 //亮度
   	//var ambientLight = new THREE.AmbientLight( 0xffffff, 0.1 ); // soft white light
    //光照
    //var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    //directionalLight.position.set(0.1, -1, 0.5);
    //scene1.add( ambientLight );
    //scene1.add(directionalLight);
    //loader1 = new GLTFLoader();
    //var source1 = '4.gltf';
    //loader1.load(
     // source1,
     // gltf => {
     //   gltf.scene.scale.set(900,750,700);//长、高、宽
     //   gltf.scene.rotation.x = 90 * Math.PI/180;
     //   scene1.add(gltf.scene);
     // }
   // );
   // lat1 = 
    //lng1 = 
 
  }
  webGLOverlayView.onContextRestored = ({gl}) => {
    //第一个模型-----------------------------------------
    renderer = new THREE.WebGLRenderer({
      canvas: gl.canvas,
      context: gl,
      ...gl.getContextAttributes(),
    });
    renderer.autoClear = false;
//如果要加载多个模型
   // renderer1 = new THREE.WebGLRenderer({
    //  canvas: gl.canvas,
    //  context: gl,
     // ...gl.getContextAttributes(),
   // });
   // renderer1.autoClear = false;
  
  }

  webGLOverlayView.onDraw = ({gl, transformer}) => {
    //第一个模型
    const latLngAltitudeLiteral = {
      lat: lat,
      lng: lng,
      altitude: 1
    }
    const matrix = transformer.fromLatLngAltitude(latLngAltitudeLiteral);
    camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);
    webGLOverlayView.requestRedraw();
    renderer.render(scene, camera);
    renderer.resetState();
    //初始化方法
    renderer.resetState();
	//如果要加载多个模型
   // var latLngAltitudeLiteral1 = {
     // lat: lat1,
     // lng: lng1,
    //  altitude: 1
   // }
   // var matrix1 = transformer.fromLatLngAltitude(latLngAltitudeLiteral1);
   // camera1.projectionMatrix = new THREE.Matrix4().fromArray(matrix1);
   // webGLOverlayView.requestRedraw();
   // renderer.render(scene1, camera1);

  }
  webGLOverlayView.setMap(map);
}