mirror of
https://github.com/w3reality/three-geo.git
synced 2026-01-25 14:57:51 +00:00
70 lines
2.1 KiB
HTML
70 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="./leaflet.css" />
|
|
<!-- <style type="text/css">
|
|
.leaflet-container {
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
</style> -->
|
|
|
|
<!-- copied node_modules/leaflet-geosearch/assets/css/leaflet.css -->
|
|
<link rel="stylesheet" href="./assets/css/leaflet.css" />
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" style="width: 100%; height: 100%;"></canvas>
|
|
<div id="mapWrapper" style="
|
|
position: absolute;
|
|
z-index: 100;
|
|
width: 520px; height: 340px;
|
|
top: 60px;">
|
|
<div id="map" style="height: 100%;"></div>
|
|
</div>
|
|
<div style="
|
|
position: absolute;
|
|
z-index: 50;
|
|
top: 75%;
|
|
color: white;
|
|
background: #00000080;">
|
|
<div>---- Map ----</div>
|
|
<div>[left-click]: build a new terrain</div>
|
|
<div>---- Camera ----</div>
|
|
<div id="msg"></div>
|
|
<div>---- Measurement [km] ----</div>
|
|
<div id="msgMeasure"></div>
|
|
</div>
|
|
<div style="
|
|
position: absolute;
|
|
z-index: 50;
|
|
top: 75%;
|
|
color: white;
|
|
background: #00000080;
|
|
left: 65%; width: 30%;">
|
|
<div>---- Terrain ----</div>
|
|
<div id="msgTerrain"></div>
|
|
<div>[left-click]: pick a point for measurement</div>
|
|
<div>[right-click]: set an orbital axis</div>
|
|
</div>
|
|
|
|
<script src="../../deps/dat-gui-defaults.min.js"></script>
|
|
|
|
<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 App = (await import('./app.esm.dev.js')).default;
|
|
const app = new App({
|
|
canvas: document.getElementById("canvas"),
|
|
});
|
|
app.stats = app.setup('mod-stats', Stats, {panelType: 1});
|
|
app.setup('mod-controls', OrbitControls);
|
|
|
|
app.render(); // first time
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|