forked from peterqliu/threebox
-
Notifications
You must be signed in to change notification settings - Fork 150
/
17-azuremaps.html
131 lines (113 loc) · 4.09 KB
/
17-azuremaps.html
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<title>Azure Maps Sample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.js"></script>
<script src="../dist/threebox.js" type="text/javascript"></script>
<link href="../dist/threebox.css" rel="stylesheet" />
<script src="config.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#myMap {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="myMap"></div>
<script type="module">
import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
function animate() {
requestAnimationFrame(animate);
stats.update();
}
let stats = new Stats();
if (!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");
/// Seattle Space Needle from here https://3dwarehouse.sketchup.com/model/d4c52391dfaa912d9a1f861ea5945001/Space-Needle?hl=en&login=true
/// Soldier model from here Skeletal Animation Blending= https://www.mixamo.com/
//Instantiate a map object
let map;
const subscriptionKey = config.subscriptionKey;
document.body.onload = function () { GetMap(); };
function GetMap() {
//Instantiate a map object
map = new atlas.Map("myMap", {
center: [-122.3491, 47.6207, 0],
subscriptionKey,
zoom: 19,
pitch: 60,
bearing: 0,
zoom: 16,
style: "satellite",
antialias: true,
showBuildingModels: false
});
map.controls.add([
new atlas.control.ZoomControl(),
new atlas.control.CompassControl(),
new atlas.control.PitchControl(),
new atlas.control.StyleControl()
], {
position: "top-right"
});
let intMap = map.map;
window.tb = new Threebox(
intMap,
intMap.getCanvas().getContext('webgl'),
{
realSunlight: true,
//defaultLights: true,
enableSelectingObjects: true, //change this to false to disable 3D objects selection
enableDraggingObjects: true, //change this to false to disable 3D objects drag & move once selected
enableRotatingObjects: true, //change this to false to disable 3D objects rotation once selected
enableTooltips: true // change this to false to disable default tooltips on fill-extrusion and 3D models
}
);
tb.setSunlight(new Date(2020, 6, 18, 18))
map.events.add("load", function (e) {
intMap.getContainer().appendChild(stats.dom);
animate();
intMap.addLayer({
id: 'custom_layer',
type: 'custom',
renderingMode: '3d',
onAdd: function (map, mbxContext) {
// Creative Commons License attribution: Space Needle model by https://sketchfab.com/microsoft
// https://sketchfab.com/3d-models/space-needle-1d1325bc1ad745dd9eb34fc76e8f6e87
let options = { obj: './models/landmarks/spaceneedle.glb', type: 'gltf', scale: 3134.71, units: 'meters', rotation: { x: 90, y: 0, z: 0 }, anchor: 'center' }
tb.loadObj(options, function (model) {
model.setCoords([-122.349291, 47.620522]);
model.castShadow = true;
model.addTooltip("This is the Space Needle!!");
tb.add(model);
})
options = { obj: './models/soldier.glb', type: 'gltf', scale: 100, units: 'meters', rotation: { x: 90, y: 0, z: 0 }, anchor: 'center' }
tb.loadObj(options, function (model) {
let soldier = model.setCoords([-122.347732, 47.6207, 0]);
soldier.castShadow = true;
soldier.addTooltip("Freaking soldier running!!");
tb.add(soldier);
soldier.playAnimation(options = { animation: 1, duration: 10000 });
})
},
render: function (gl, matrix) {
tb.update();
}
});
});
}
</script>
</body>
</html>