import{AmbientLight,DirectionalLight,Matrix4,PerspectiveCamera,Scene,WebGLRenderer,}from"three";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader";letmap:google.maps.Map;constmapOptions={tilt:0,heading:0,zoom:18,center:{lat:35.6594945,lng:139.6999859},mapId:"15431d2b469f209e",// disable interactions due to animation loop and moveCameradisableDefaultUI:true,gestureHandling:"none",keyboardShortcuts:false,};functioninitMap():void{constmapDiv=document.getElementById("map")asHTMLElement;map=newgoogle.maps.Map(mapDiv,mapOptions);initWebglOverlayView(map);}functioninitWebglOverlayView(map:google.maps.Map):void{letscene,renderer,camera,loader;constwebglOverlayView=newgoogle.maps.WebGLOverlayView();webglOverlayView.onAdd=()=>{// Set up the scene.scene=newScene();camera=newPerspectiveCamera();constambientLight=newAmbientLight(0xffffff,0.75);// Soft white light.scene.add(ambientLight);constdirectionalLight=newDirectionalLight(0xffffff,0.25);directionalLight.position.set(0.5,-1,0.5);scene.add(directionalLight);// Load the model.loader=newGLTFLoader();constsource="https://raw.githubusercontent.com/googlemaps/js-samples/main/assets/pin.gltf";loader.load(source,(gltf)=>{gltf.scene.scale.set(10,10,10);gltf.scene.rotation.x=Math.PI;// Rotations are in radians.scene.add(gltf.scene);});};webglOverlayView.onContextRestored=({gl})=>{// Create the js renderer, using the// maps's WebGL rendering context.renderer=newWebGLRenderer({canvas:gl.canvas,context:gl,...gl.getContextAttributes(),});renderer.autoClear=false;// Wait to move the camera until the 3D model loads.loader.manager.onLoad=()=>{renderer.setAnimationLoop(()=>{webglOverlayView.requestRedraw();const{tilt,heading,zoom}=mapOptions;map.moveCamera({tilt,heading,zoom});// Rotate the map 360 degrees.if(mapOptions.tilt <67.5){mapOptions.tilt+=0.5;}elseif(mapOptions.heading<=360){mapOptions.heading+=0.2;mapOptions.zoom-=0.0005;}else{renderer.setAnimationLoop(null);}});};};webglOverlayView.onDraw=({gl,transformer}):void=>{constlatLngAltitudeLiteral:google.maps.LatLngAltitudeLiteral={lat:mapOptions.center.lat,lng:mapOptions.center.lng,altitude:100,};// Update camera matrix to ensure the model is georeferenced correctly on the map.constmatrix=transformer.fromLatLngAltitude(latLngAltitudeLiteral);camera.projectionMatrix=newMatrix4().fromArray(matrix);webglOverlayView.requestRedraw();renderer.render(scene,camera);// Sometimes it is necessary to reset the GL state.renderer.resetState();};webglOverlayView.setMap(map);}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
index.ts

import{AmbientLight,DirectionalLight,Matrix4,PerspectiveCamera,Scene,WebGLRenderer,}from"three";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader";letmap;constmapOptions={tilt:0,heading:0,zoom:18,center:{lat:35.6594945,lng:139.6999859},mapId:"15431d2b469f209e",// disable interactions due to animation loop and moveCameradisableDefaultUI:true,gestureHandling:"none",keyboardShortcuts:false,};functioninitMap(){constmapDiv=document.getElementById("map");map=newgoogle.maps.Map(mapDiv,mapOptions);initWebglOverlayView(map);}functioninitWebglOverlayView(map){letscene,renderer,camera,loader;constwebglOverlayView=newgoogle.maps.WebGLOverlayView();webglOverlayView.onAdd=()=>{// Set up the scene.scene=newScene();camera=newPerspectiveCamera();constambientLight=newAmbientLight(0xffffff,0.75);// Soft white light.scene.add(ambientLight);constdirectionalLight=newDirectionalLight(0xffffff,0.25);directionalLight.position.set(0.5,-1,0.5);scene.add(directionalLight);// Load the model.loader=newGLTFLoader();constsource="https://raw.githubusercontent.com/googlemaps/js-samples/main/assets/pin.gltf";loader.load(source,(gltf)=>{gltf.scene.scale.set(10,10,10);gltf.scene.rotation.x=Math.PI;// Rotations are in radians.scene.add(gltf.scene);});};webglOverlayView.onContextRestored=({gl})=>{// Create the js renderer, using the// maps's WebGL rendering context.renderer=newWebGLRenderer({canvas:gl.canvas,context:gl,...gl.getContextAttributes(),});renderer.autoClear=false;// Wait to move the camera until the 3D model loads.loader.manager.onLoad=()=>{renderer.setAnimationLoop(()=>{webglOverlayView.requestRedraw();const{tilt,heading,zoom}=mapOptions;map.moveCamera({tilt,heading,zoom});// Rotate the map 360 degrees.if(mapOptions.tilt <67.5){mapOptions.tilt+=0.5;}elseif(mapOptions.heading<=360){mapOptions.heading+=0.2;mapOptions.zoom-=0.0005;}else{renderer.setAnimationLoop(null);}});};};webglOverlayView.onDraw=({gl,transformer})=>{constlatLngAltitudeLiteral={lat:mapOptions.center.lat,lng:mapOptions.center.lng,altitude:100,};// Update camera matrix to ensure the model is georeferenced correctly on the map.constmatrix=transformer.fromLatLngAltitude(latLngAltitudeLiteral);camera.projectionMatrix=newMatrix4().fromArray(matrix);webglOverlayView.requestRedraw();renderer.render(scene,camera);// Sometimes it is necessary to reset the GL state.renderer.resetState();};webglOverlayView.setMap(map);}window.initMap=initMap;
index.js

<html>  <head>    <title>Simple WebGL Overlay</title>    <script src="https://unpkg.com/three@0.129.0/build/three.min.js"></script>    <link rel="stylesheet" type="text/css" href="./style.css" />    <script type="module" src="./index.js"></script>  </head>  <body>    <div></div>    <!--       The `defer` attribute causes the script to execute after the full HTML      document has been parsed. For non-blocking uses, avoiding race conditions,      and consistent behavior across browsers, consider loading using Promises. See      https://developers.google.com/maps/documentation/javascript/load-maps-js-api      for more information.      -->    <script      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"      defer    ></script>  </body></html>
index.html