30:T1508,{ let container = html`

`; let center = [-77.0709, 38.9083]; // Georgetown center = [-77.0382, 38.8467]; // DCA center = [-77.030, 38.889]; // the mall let sources = { 'raster-tiles': { type: 'raster', 'tiles': ['https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg'], tileSize: 256, 'attribution': 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA' } }; let layers = [{ 'id': 'simple-tiles', 'type': 'raster', 'source': 'raster-tiles', 'minzoom': 0, 'maxzoom': 22 }]; // Give the container dimensions. yield container; let style = { version: 8, sources: sources, layers: layers, // center: center, // zoom: 4, // pitch: 30 }; let map = new mapboxgl.Map({ container, // style: 'mapbox://styles/mapbox/streets-v10', style: style, center, zoom: 17, bearing: 80, pitch: 70, interactive: true, antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased }) // 3D buildings map.on('load', () => { map.addLayer({ id: '3d-buildings', source: 'composite', 'source-layer': 'building', filter: ['==', 'extrude', 'true'], type: 'fill-extrusion', minzoom: 15, paint: { 'fill-extrusion-color': '#aaa', 'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'height']], 'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'min_height']], 'fill-extrusion-opacity': 0.6 } }) }); // parameters to ensure the model is georeferenced correctly on the map var modelOrigin = [-77.030, 38.8895]; var modelAltitude = 0; var modelRotate = [Math.PI / 2, 0, 0]; var modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat( modelOrigin, modelAltitude ); // transformation parameters to position, rotate and scale the 3D model onto the map var modelTransform = { translateX: modelAsMercatorCoordinate.x, translateY: modelAsMercatorCoordinate.y, translateZ: modelAsMercatorCoordinate.z, rotateX: modelRotate[0], rotateY: modelRotate[1], rotateZ: modelRotate[2], /* Since our 3D model is in real world meters, a scale transform needs to be * applied since the CustomLayerInterface expects units in MercatorCoordinates. */ scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits() }; // configuration of the custom layer for a 3D model per the CustomLayerInterface var customLayer = { id: '3d-model', type: 'custom', renderingMode: '3d', onAdd: function(map, gl) { this.camera = new THREE.Camera(); this.scene = new THREE.Scene(); // create two three.js lights to illuminate the model var directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(0, -70, 100).normalize(); this.scene.add(directionalLight); var directionalLight2 = new THREE.DirectionalLight(0xffffff); directionalLight2.position.set(0, 70, 100).normalize(); this.scene.add(directionalLight2); // use the three.js GLTF loader to add the 3D model to the three.js scene var loader = new THREE.GLTFLoader(); loader.load( 'https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf', function(gltf) { this.scene.add(gltf.scene); }.bind(this) ); this.map = map; // use the Mapbox GL JS map canvas for three.js this.renderer = new THREE.WebGLRenderer({ canvas: map.getCanvas(), context: gl, antialias: true }); this.renderer.autoClear = false; }, render: function(gl, matrix) { var rotationX = new THREE.Matrix4().makeRotationAxis( new THREE.Vector3(1, 0, 0), modelTransform.rotateX ); var rotationY = new THREE.Matrix4().makeRotationAxis( new THREE.Vector3(0, 1, 0), modelTransform.rotateY ); var rotationZ = new THREE.Matrix4().makeRotationAxis( new THREE.Vector3(0, 0, 1), modelTransform.rotateZ ); var m = new THREE.Matrix4().fromArray(matrix); var l = new THREE.Matrix4() .makeTranslation( modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ ) .scale( new THREE.Vector3( modelTransform.scale, -modelTransform.scale, modelTransform.scale ) ) .multiply(rotationX) .multiply(rotationY) .multiply(rotationZ); this.camera.projectionMatrix = m.multiply(l); this.renderer.state.reset(); this.renderer.render(this.scene, this.camera); this.map.triggerRepaint(); } }; map.on('style.load', function() { map.addLayer(customLayer); }); invalidation.then(() => map.remove()); }31:[] 2e:{"title":"Mapbox + Three","cells":[{"id":0,"value":"md`# Mapbox + Three\n\nCheck out the satellite communications antenna on the Mall. \n\nNavigate with your arrow keys or your mouse.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"md`### References\n\n* [Using Mapbox GL JS](https://observablehq.com/@tmcw/using-mapbox-gl-js) -- tmcw notebook\n* [Three with orbit controls](https://observablehq.com/@mbostock/hello-three-js-orbit-controls) -- mbostock notebook\n* [Add a 3d model](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/) -- mapbox API docs\n* [Game controls](https://docs.mapbox.com/mapbox-gl-js/example/game-controls/) -- mapbox API docs\n* [3d apps overview](https://observablehq.com/@fil/3d-apps-overview) -- fil notebook\n* [St. Pauls Cathedral](https://observablehq.com/@hubgit/a-map) -- hubgit notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`### Mapbox GL\n\nMapbox GL JS can also be loaded from Mapbox's CDN, but it works perfectly well loaded from unpkg.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.6.1\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg\";\n const href = await require.resolve(\"mapbox-gl@1.6.1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"md`### THREE`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.106.2/build/three.min.js\");\n await require(\"three@0.106.2/examples/js/loaders/GLTFLoader.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}