mirror of
https://github.com/w3reality/three-geo.git
synced 2026-01-25 14:57:51 +00:00
64 lines
2.3 KiB
HTML
64 lines
2.3 KiB
HTML
<!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/build/three.min.js"></script>
|
|
<script src="../deps/three/examples/js/controls/OrbitControls.js"></script>
|
|
<script src="../deps/three/examples/js/libs/stats.min.js"></script>
|
|
<script src="../deps/threelet.min.js"></script>
|
|
|
|
<script src="../../dist/three-geo.min.js"></script>
|
|
|
|
<script type="module">
|
|
(async () => {
|
|
const threelet = new Threelet({
|
|
canvas: document.getElementById("canvas"),
|
|
// optAxes: false,
|
|
});
|
|
threelet.setup('mod-controls', THREE.OrbitControls);
|
|
// threelet.setup('mod-stats', Stats);
|
|
|
|
const { scene, render } = threelet;
|
|
render(); // first time
|
|
|
|
const ioToken = 'pk.eyJ1IjoiamRldmVsIiwiYSI6ImNqemFwaGJoZjAyc3MzbXA1OGNuODBxa2EifQ.7M__SgfWZGJuEiSqbBXdoQ';
|
|
const tgeo = new ThreeGeo({
|
|
tokenMapbox: ioToken, // <---- set your Mapbox API token here
|
|
});
|
|
|
|
if (!window.location.origin.startsWith('https://w3reality.github.io') && tgeo.tokenMapbox === ioToken) {
|
|
const warning = 'Please set your Mapbox API token in ThreeGeo constructor.';
|
|
alert(warning);
|
|
throw warning;
|
|
}
|
|
|
|
const origin = [46.5763, 7.9904];
|
|
const radius = 5.0;
|
|
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>
|