yomotsu/googlemap-3d.html

## googlemap-3d.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>=^.^=</title>
<style>
body {margin: 0;}
.map {height: 100vh;}
</style>
</head>
<body>

<div id="map" class="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwjFK3_14FuxpFRqDFtBGL_QAoQb9lgA8&libraries=&v=beta" async></script>
<script type="module">
import * as THREE from 'https://cdn.skypack.dev/three';
import { GLTFLoader } from 'https://cdn.skypack.dev/pin/[email protected]/mode=imports/unoptimized/examples/jsm/loaders/GLTFLoader.js';

( ( init ) => {

	// `google.maps` object is async.
	// if not loaded, wait for it.
	google?.maps?.Map ? init() : google.maps.event.addDomListener( window, 'load', init );

} )( () => {

	const mapOptions = {
		center: { lat: 35.658581, lng: 139.745433 },
		mapId: "15431d2b469f209e", // required for beta 3D feature.
	};

	const $map = document.getElementById( 'map' );
	const map = new google.maps.Map( $map, mapOptions );
	const { tilt, heading, zoom } = mapOptions;
	map.moveCamera( {
		tilt: 60, // in degrees
		heading: 0,
		zoom: 17,
	} );

	let renderer;

	const scene = new THREE.Scene();
	const camera = new THREE.PerspectiveCamera();

	const webglOverlayView = new google.maps.WebglOverlayView();

	webglOverlayView.onAdd = () => {};

	webglOverlayView.onContextRestored = ( gl ) => {

		// Create the three.js renderer, using the
		// maps's WebGL rendering context.
		renderer = new THREE.WebGLRenderer( {
			canvas: gl.canvas,
			context: gl,
			...gl.getContextAttributes(),
		} );
		renderer.autoClear = false;

	};

	webglOverlayView.onDraw = ( gl, transformer ) => {

		// Update camera matrix to ensure the model is georeferenced correctly on the map.
		const matrix = transformer.fromLatLngAltitude( mapOptions.center, 120 );
		camera.projectionMatrix.fromArray( matrix );
		renderer.render( scene, camera );
		webglOverlayView.requestRedraw();
		renderer.state.reset();

	};

	webglOverlayView.setMap( map );


	// Set up the scene.
	const ambientLight = new THREE.AmbientLight( 0xffffff, 0.75 );
	scene.add( ambientLight );
	const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.25 );
	directionalLight.position.set( .333, .333, .333 );
	scene.add( directionalLight );

	const axesHelper = new THREE.AxesHelper( 100 );
	scene.add( axesHelper );

	const geometry = new THREE.CylinderGeometry( 60, 60, 333, 8 );
	const material = new THREE.MeshBasicMaterial( {color: 0xff3333, wireframe: true } );
	const cylinder = new THREE.Mesh( geometry, material );
	cylinder.rotation.x = Math.PI / 2;
	cylinder.position.z = 33;
	scene.add( cylinder );

	// Load the model.
	const loader = new GLTFLoader();
	loader.load( './burger.glb', ( gltf ) => {

		gltf.scene.scale.set( 100, 100, 100 );
		scene.add( gltf.scene );

	} );

} );
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>=^.^=</title>
	<style>
	body {margin: 0;}
	.map {height: 100vh;}
	</style>
	</head>
	<body>

	<div id="map" class="map"></div>

	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwjFK3_14FuxpFRqDFtBGL_QAoQb9lgA8&libraries=&v=beta" async></script>
	<script type="module">
	import * as THREE from 'https://cdn.skypack.dev/three';
	import { GLTFLoader } from 'https://cdn.skypack.dev/pin/[email protected]/mode=imports/unoptimized/examples/jsm/loaders/GLTFLoader.js';

	( ( init ) => {

	// `google.maps` object is async.
	// if not loaded, wait for it.
	google?.maps?.Map ? init() : google.maps.event.addDomListener( window, 'load', init );

	} )( () => {

	const mapOptions = {
	center: { lat: 35.658581, lng: 139.745433 },
	mapId: "15431d2b469f209e", // required for beta 3D feature.
	};

	const $map = document.getElementById( 'map' );
	const map = new google.maps.Map( $map, mapOptions );
	const { tilt, heading, zoom } = mapOptions;
	map.moveCamera( {
	tilt: 60, // in degrees
	heading: 0,
	zoom: 17,
	} );

	let renderer;

	const scene = new THREE.Scene();
	const camera = new THREE.PerspectiveCamera();

	const webglOverlayView = new google.maps.WebglOverlayView();

	webglOverlayView.onAdd = () => {};

	webglOverlayView.onContextRestored = ( gl ) => {

	// Create the three.js renderer, using the
	// maps's WebGL rendering context.
	renderer = new THREE.WebGLRenderer( {
	canvas: gl.canvas,
	context: gl,
	...gl.getContextAttributes(),
	} );
	renderer.autoClear = false;

	};

	webglOverlayView.onDraw = ( gl, transformer ) => {

	// Update camera matrix to ensure the model is georeferenced correctly on the map.
	const matrix = transformer.fromLatLngAltitude( mapOptions.center, 120 );
	camera.projectionMatrix.fromArray( matrix );
	renderer.render( scene, camera );
	webglOverlayView.requestRedraw();
	renderer.state.reset();

	};

	webglOverlayView.setMap( map );


	// Set up the scene.
	const ambientLight = new THREE.AmbientLight( 0xffffff, 0.75 );
	scene.add( ambientLight );
	const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.25 );
	directionalLight.position.set( .333, .333, .333 );
	scene.add( directionalLight );

	const axesHelper = new THREE.AxesHelper( 100 );
	scene.add( axesHelper );

	const geometry = new THREE.CylinderGeometry( 60, 60, 333, 8 );
	const material = new THREE.MeshBasicMaterial( {color: 0xff3333, wireframe: true } );
	const cylinder = new THREE.Mesh( geometry, material );
	cylinder.rotation.x = Math.PI / 2;
	cylinder.position.z = 33;
	scene.add( cylinder );

	// Load the model.
	const loader = new GLTFLoader();
	loader.load( './burger.glb', ( gltf ) => {

	gltf.scene.scale.set( 100, 100, 100 );
	scene.add( gltf.scene );

	} );

	} );
	</script>

	</body>
	</html>