Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign up| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> | |
| <title>Flatten terrain demo</title> | |
| </head> | |
| <body> | |
| <div> | |
| Flatten terrain demo <a href="https://github.com/w3reality/three-geo/tree/master/examples/flat/index.html">Source Code</a> | |
| </div> | |
| <canvas id="canvas" style="width: 100%; height: 100%;"></canvas> | |
| <script src="../deps/three.min.js"></script> | |
| <script src="../deps/OrbitControls.js"></script> | |
| <!-- <script src="../deps/stats.min.js"></script> --> | |
| <script src="../deps/threelet.min.js"></script> | |
| <script src="../../dist/three-geo.min.js"></script> | |
| <!-- <script src="../../target/three-geo.js"></script> --> | |
| <script> | |
| const threelet = new Threelet({ | |
| canvas: document.getElementById("canvas"), | |
| // optAxes: false, | |
| }); | |
| threelet.setup('mod-controls', THREE.OrbitControls); | |
| // threelet.setup('mod-stats', window.Stats); | |
| const { scene, render } = threelet; | |
| render(); // first time | |
| const ioToken = 'pk.eyJ1IjoiamRldmVsIiwiYSI6ImNqemFwaGJoZjAyc3MzbXA1OGNuODBxa2EifQ.7M__SgfWZGJuEiSqbBXdoQ'; | |
| const tgeo = new ThreeGeo({ | |
| // tokenMapbox: '********', // <---- set your Mapbox API token here | |
| tokenMapbox: ioToken, | |
| }); | |
| if (tgeo.tokenMapbox === ioToken && window.location.origin !== 'https://w3reality.github.io') { | |
| const warning = 'Please set your own Mapbox API token in the ThreeGeo constructor.'; | |
| alert(warning); | |
| throw warning; | |
| } | |
| const origin = [46.5763, 7.9904]; | |
| const radius = 5.0; | |
| (async () => { | |
| const terrain = await tgeo.getTerrainRgb(origin, radius, 12); | |
| scene.add(terrain); | |
| terrain.children.forEach(mesh => { | |
| // To get more 'lightweight' flat terrain, you might want to try [this](https://github.com/w3reality/three-geo/issues/19#issuecomment-640161898) | |
| const position = mesh.geometry.attributes.position; | |
| const arr = position.array; | |
| for (let i = 0; i < arr.length; i += 3) { | |
| arr[i+2] = 0; // set z value (height) to zero | |
| } | |
| position.needsUpdate = true; | |
| mesh.rotation.x = - Math.PI/2; | |
| mesh.material.side = THREE.DoubleSide; | |
| }); | |
| render(); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |