mirror of
https://github.com/w3reality/three-geo.git
synced 2026-01-25 14:57:51 +00:00
72 lines
2.5 KiB
HTML
72 lines
2.5 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 type="module">
|
|
import Stats from '../deps/three/examples/jsm/libs/stats.module.js';
|
|
import { OrbitControls } from '../deps/three/examples/jsm/controls/OrbitControls.js';
|
|
|
|
(async () => {
|
|
window.THREE = await import('../deps/three/build/three.module.js');
|
|
const Threelet = (await import('../deps/threelet.esm.js')).default;
|
|
|
|
const ThreeGeo = (await import('../../dist/three-geo.esm.js')).default;
|
|
// const ThreeGeo = (await import('../../target/three-geo.esm.dev.js')).default;
|
|
|
|
//
|
|
|
|
const threelet = new Threelet({
|
|
canvas: document.getElementById("canvas"),
|
|
// optAxes: false,
|
|
});
|
|
threelet.setup('mod-controls', OrbitControls);
|
|
// threelet.setup('mod-stats', 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;
|
|
|
|
//
|
|
|
|
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>
|