forked from peterqliu/threebox
-
Notifications
You must be signed in to change notification settings - Fork 150
/
07-alignmentTest.html
181 lines (153 loc) · 5.19 KB
/
07-alignmentTest.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!doctype html>
<html>
<head>
<title>Threebox alignment Test</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" />
<script src="config.js"></script>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
background: black;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id='map' class='map'>
<div class="mapboxgl-ctrl helpDiv">
<div id="help" class="help">
This demo shows camera alignment between fill-extrusion layer and a 3DObject
</div>
</div>
</div>
<script type="module">
// This example downloads a soldier model from an external OBJ/MTL file, adds it to the map, and drives it around via paths fetched from the Mapbox Directions API
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;
let origin = [-87.616938, 41.866222];
let originRex = [-87.616194, 41.866194];
let origin1 = [-87.61726, 41.865559];
let map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
//center: [-87.61694, 41.86625],
center: origin,
zoom: 18,
pitch: 40,
bearing: 20,
antialias: true
});
let lineGeometry1 = [[-87.61726, 41.865559, 0], [-87.61726, 41.865559, 80]];
let stats;
import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
function animate(timestamp) {
// clamp the rotation between 0 -360 degrees
// Divide timestamp by 100 to slow rotation to ~10 degrees / sec
//rotateCamera(Date.now());
stats.update();
requestAnimationFrame(animate);
}
function rotateCamera(timestamp) {
// clamp the rotation between 0 -360 degrees
// Divide timestamp by 100 to slow rotation to ~10 degrees / sec
map.rotateTo((timestamp / 100) % 360, { duration: 0 });
}
window.tb = new Threebox(
map,
map.getCanvas().getContext('webgl'),
{
realSunlight: true,
sky: true
}
);
map.on('style.load', function () {
// stats
stats = new Stats();
map.getContainer().appendChild(stats.dom);
animate();
map.addSource('floorplan', {
// GeoJSON Data source used in vector tiles, documented at
// https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
'type': 'geojson',
'data': './geojson/indoor-3d-map.geojson'
});
map.addLayer({
'id': 'room-extrusion',
'type': 'fill-extrusion',
'source': 'floorplan',
'paint': {
// See the Mapbox Style Specification for details on data expressions.
// https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions
// Get the fill-extrusion-color from the source 'color' property.
'fill-extrusion-color': ['get', 'color'],
// Get fill-extrusion-height from the source 'height' property.
'fill-extrusion-height': ['get', 'height'],
// Get fill-extrusion-base from the source 'base_height' property.
'fill-extrusion-base': ['get', 'base_height'],
// Make extrusions slightly opaque for see through indoor walls.
'fill-extrusion-opacity': 1
}
});
map.addLayer({
id: 'custom_layer',
type: 'custom',
renderingMode: '3d',
onAdd: function (map, mbxContext) {
let tubeOptions = {
geometry: lineGeometry1,
radius: 0.3,
sides: 12,
units: "meters",
anchor: 'center',
material: 'MeshPhysicalMaterial',
color: '#00ffff',
side: THREE.DoubleSide
}
let tube = tb.tube(tubeOptions);
tube.setCoords(origin1);
tb.add(tube);
// Creative Commons NonCommercial License attribution: Asian Elephant low poly model by https://sketchfab.com/jeremielouvetz
// https://sketchfab.com/3d-models/asian-elephant-2aeeb8958bc64240962b093705abffdf
let elephant = {
type: 'glb',
obj: './models/history/elephant.glb', //model url
units: 'meters', //units in the default values are always in meters
scale: 20,
rotation: { x: 90, y: 180, z: 0 }, //default rotation
anchor: 'center'
}
tb.loadObj(elephant, function (model) {
model.setCoords([origin[0], origin[1], 0]);
tb.add(model);
});
// Creative Commons NonCommercial License attribution: Dino low poly model by https://sketchfab.com/Blender_Fox1234
// https://sketchfab.com/3d-models/triceratops-lowpoly-76beb95d0b5b41a3aae0d07c3eae99fa
let dino = {
type: 'fbx',
obj: './models/history/triceratops.fbx', //model url
units: 'meters', //units in the default values are always in meters
scale: 0.15,
rotation: { x: 90, y: 90, z: 0 }, //default rotation
anchor: 'center'
}
tb.loadObj(dino, function (model) {
model.setCoords(originRex);
tb.add(model);
});
},
render: function (gl, matrix) {
tb.update();
}
}, 'room-extrusion');
})
</script>
</body>
</html>