mirror of
https://github.com/w3reality/three-geo.git
synced 2026-01-25 14:57:51 +00:00
128 lines
4.3 KiB
HTML
128 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
|
<title>editor demo</title>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" width="640" height="480"></canvas>
|
|
<div id="mapWrapper" style="
|
|
position: absolute;
|
|
z-index: 100;
|
|
width: 520px; height: 320px;
|
|
top: 360px;
|
|
color: white;
|
|
background: #00000080;">
|
|
<div id="msg"></div>
|
|
<p>[WIP ?] <a style="color: white;" href="https://github.com/w3reality/three-geo/tree/master/examples/editor">Source Code</a></p>
|
|
</div>
|
|
|
|
<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="../../dist/three-geo.min.js"></script>
|
|
|
|
<script type="module">
|
|
(async () => {
|
|
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.001, 1000);
|
|
camera.position.set(0, 0, 1.5);
|
|
|
|
const renderer = new THREE.WebGLRenderer({
|
|
// alpha: true,
|
|
canvas: canvas,
|
|
});
|
|
|
|
const controls = new THREE.OrbitControls(camera, renderer.domElement);
|
|
|
|
// object stuff
|
|
|
|
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));
|
|
|
|
// render stuff
|
|
|
|
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 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 {proj, projInv, bbox, unitsPerMeter} =
|
|
tgeo.getProjection(origin, radius);
|
|
|
|
const msg = document.getElementById('msg');
|
|
const appendText = (el, text) => {
|
|
const div = document.createElement('div');
|
|
div.appendChild(document.createTextNode(text));
|
|
el.appendChild(div);
|
|
};
|
|
|
|
appendText(msg, `---- ROI ----`);
|
|
appendText(msg, `lat lng: (${origin[0]}, ${origin[1]})`);
|
|
appendText(msg, `radius: ${radius} [km]`);
|
|
appendText(msg, `units per km: ${unitsPerMeter * 1000}`);
|
|
appendText(msg, `bbox (w, s, e, n): (${bbox.map(q => q.toFixed(4)).join(', ')})`);
|
|
appendText(msg, `---- Log ----`);
|
|
|
|
const terrain = await tgeo.getTerrainRgb(origin, radius, 12);
|
|
scene.add(terrain);
|
|
|
|
terrain.children.forEach((mesh, idx) => {
|
|
mesh.material.wireframe = true;
|
|
// mesh.material.side = THREE.DoubleSide;
|
|
|
|
// How to access the post-processed heightmap
|
|
console.log('rgb DEM mesh:', mesh);
|
|
const position = mesh.geometry.attributes.position;
|
|
const arr = position.array;
|
|
console.log('arr.length:', arr.length); // 3x128x128 (+ deltaSeams)
|
|
|
|
if (idx % 2 > 0) return;
|
|
|
|
for (let i = 0; i < arr.length; i += 3) { arr[i+2] = 0; }
|
|
position.needsUpdate = true;
|
|
});
|
|
|
|
// FIXME: odd laser reflection...
|
|
const laser = new ThreeGeo.Laser({color: 0xff00ff});
|
|
laser.setSource(new THREE.Vector3(0, 0, 0), camera);
|
|
laser.pointWithRaytrace(new THREE.Vector3(0, -0.5, 0), terrain.children);
|
|
scene.add(laser);
|
|
|
|
render();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|