mirror of
https://github.com/w3reality/three-geo.git
synced 2026-01-25 14:57:51 +00:00
71 lines
2.2 KiB
HTML
71 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
|
<title>simple-viewer</title>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" width="480" height="320"></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 ThreeGeo = (await import('../../dist/three-geo.esm.js')).default;
|
|
|
|
//
|
|
|
|
THREE.Object3D.DefaultUp = new THREE.Vector3(0, 0, 1);
|
|
|
|
const canvas = document.getElementById("canvas");
|
|
const camera = new THREE.PerspectiveCamera(75, canvas.width/canvas.height, 0.1, 1000);
|
|
camera.position.set(0, 0, 1.5);
|
|
|
|
const renderer = new THREE.WebGLRenderer({ canvas });
|
|
const controls = new OrbitControls(camera, renderer.domElement);
|
|
|
|
const scene = new THREE.Scene();
|
|
const walls = new THREE.LineSegments(
|
|
new THREE.EdgesGeometry(new THREE.BoxBufferGeometry(1, 1, 1)),
|
|
new THREE.LineBasicMaterial({color: 0xcccccc}));
|
|
walls.position.set(0, 0, 0);
|
|
scene.add(walls);
|
|
scene.add(new THREE.AxesHelper(1));
|
|
|
|
const stats = new Stats();
|
|
stats.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom
|
|
document.body.appendChild(stats.dom);
|
|
const render = () => {
|
|
stats.update();
|
|
renderer.render(scene, camera);
|
|
};
|
|
|
|
controls.addEventListener('change', render);
|
|
render(); // first time
|
|
|
|
const tgeo = new ThreeGeo({
|
|
tokenMapbox: '********', // <---- set your Mapbox API token here
|
|
});
|
|
|
|
if (tgeo.tokenMapbox === '********') {
|
|
const warning = 'Please set your Mapbox API token in ThreeGeo constructor.';
|
|
alert(warning);
|
|
throw warning;
|
|
}
|
|
|
|
const terrain = await tgeo.getTerrainRgb(
|
|
[46.5763, 7.9904], // [lat, lng]
|
|
5.0, // radius of bounding circle (km)
|
|
12); // zoom resolution
|
|
|
|
scene.add(terrain);
|
|
|
|
render();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|