-
Notifications
You must be signed in to change notification settings - Fork 821
/
index.ts
91 lines (72 loc) · 2.37 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/*
* Copyright 2021 Google LLC. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
// [START maps_webgl_overlay_simple]
import { AmbientLight, DirectionalLight, Scene } from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { ThreeJSOverlayView } from "@googlemaps/three";
let map: google.maps.Map;
const mapOptions = {
tilt: 0,
heading: 0,
zoom: 18,
center: { lat: 35.6594945, lng: 139.6999859 },
mapId: "15431d2b469f209e",
// disable interactions due to animation loop and moveCamera
disableDefaultUI: true,
gestureHandling: "none",
keyboardShortcuts: false,
};
function initMap(): void {
const mapDiv = document.getElementById("map") as HTMLElement;
map = new google.maps.Map(mapDiv, mapOptions);
const scene = new Scene();
const ambientLight = new AmbientLight(0xffffff, 0.75);
scene.add(ambientLight);
const directionalLight = new DirectionalLight(0xffffff, 0.25);
directionalLight.position.set(0, 10, 50);
scene.add(directionalLight);
// Load the model.
const loader = new GLTFLoader();
const url =
"https://raw.githubusercontent.com/googlemaps/js-samples/main/assets/pin.gltf";
loader.load(url, (gltf) => {
gltf.scene.scale.set(10, 10, 10);
gltf.scene.rotation.x = Math.PI / 2;
scene.add(gltf.scene);
let { tilt, heading, zoom } = mapOptions;
const animate = () => {
if (tilt < 67.5) {
tilt += 0.5;
} else if (heading <= 360) {
heading += 0.2;
zoom -= 0.0005;
} else {
// exit animation loop
return;
}
map.moveCamera({ tilt, heading, zoom });
requestAnimationFrame(animate);
};
requestAnimationFrame(animate);
});
new ThreeJSOverlayView({
map,
scene,
anchor: { ...mapOptions.center, altitude: 100 },
});
}
// [END maps_webgl_overlay_simple]
export { initMap };