forked from peterqliu/threebox
-
Notifications
You must be signed in to change notification settings - Fork 150
/
01-basic.html
101 lines (86 loc) · 2.21 KB
/
01-basic.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
<!doctype html>
<head>
<title>Sphere Example</title>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<script src="../dist/threebox.js" type="text/javascript"></script>
<link href="../dist/threebox.css" rel="stylesheet" type="text/css" />
<script src="config.js"></script>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
#hour {
background: rgba(0, 0, 0, 0.5);
color: #fff;
position: absolute;
left: 0px;
right: 0px;
bottom: 40px;
margin-left: auto;
margin-right: auto;
max-width: 30%;
padding: 5px 10px;
font-size: 18px;
line-height: 18px;
border-radius: 3px;
text-align: center;
}
</style>
</head>
<body>
<div id='map' class='map'></div>
<script type="module">
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'.");
mapboxgl.accessToken = config.accessToken;
//starting location for both map and eventual sphere
var origin = [-122.4340, 37.7353, 1];
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: origin,
zoom: 17,
pitch: 60,
antialias:true
});
let stats;
import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
function animate() {
requestAnimationFrame(animate);
stats.update();
}
map.on('style.load', function() {
// stats
stats = new Stats();
map.getContainer().appendChild(stats.dom);
animate();
map.addLayer({
id: 'custom_layer',
type: 'custom',
renderingMode: '3d',
onAdd: function(map, mbxContext){
// instantiate threebox
window.tb = new Threebox(
map,
mbxContext,
{ defaultLights: true }
);
//instantiate a red sphere and position it at the origin lnglat
var sphere = tb.sphere({color: 'red', material: 'MeshToonMaterial'})
.setCoords(origin);
// add sphere to the scene
tb.add(sphere);
},
render: function (gl, matrix) {
tb.update();
}
})
});
</script>
</body>