Skip to content

Commit 02130bb

Browse files
fredjfredj
committed
feat: add cesium-walk
1 parent 237a427 commit 02130bb

4 files changed

Lines changed: 198 additions & 0 deletions

File tree

‎demos/cesium-walk.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<script src="https://cesium.com/downloads/cesiumjs/releases/1.122/Build/Cesium/Cesium.js"></script>
7+
<link href="https://cesium.com/downloads/cesiumjs/releases/1.122/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
8+
<style>
9+
html, body, #cesiumContainer {
10+
height: 100%;
11+
margin: 0;
12+
}
13+
#activate {
14+
position: absolute;
15+
right: 30px;
16+
top: 30px;
17+
font-family: monospace;
18+
font-weight: bold;
19+
font-size: 1.6em;
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
<div id="cesiumContainer"></div>
26+
<button id="activate" type="button">Activate !</button>
27+
<script type="module">
28+
import {createViewer} from './setup.js';
29+
import CesiumWalk from '../packages/cesium-walk/cesium-walk.js';
30+
31+
createViewer('cesiumContainer').then(viewer => {
32+
const mode = new CesiumWalk(viewer);
33+
document.querySelector('#activate').addEventListener('click', () => mode.active = !mode.active);
34+
});
35+
</script>
36+
</body>
37+
38+
</html>

‎packages/cesium-walk/LICENSE‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
BSD 3-Clause License
2+
3+
Copyright (c) 2024-present, camptocamp SA
4+
All rights reserved.
5+
6+
Redistribution and use in source and binary forms, with or without
7+
modification, are permitted provided that the following conditions are met:
8+
9+
1. Redistributions of source code must retain the above copyright notice, this
10+
list of conditions and the following disclaimer.
11+
12+
2. Redistributions in binary form must reproduce the above copyright notice,
13+
this list of conditions and the following disclaimer in the documentation
14+
and/or other materials provided with the distribution.
15+
16+
3. Neither the name of the copyright holder nor the names of its
17+
contributors may be used to endorse or promote products derived from
18+
this software without specific prior written permission.
19+
20+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
21+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
22+
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
23+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
24+
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
25+
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
26+
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
27+
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
28+
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

‎packages/cesium-walk/cesium-walk.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
// FIXME: only run tick when needed (when a key is pressed)
2+
// FIXME: clamp camera to terrain
3+
4+
export default class CesiumWalk {
5+
/**
6+
* @param {import('cesium').Viewer} viewer
7+
* @param {number} [speed=1.6] Walk speed in meters per second.
8+
*/
9+
constructor(viewer, speed = 1.6) {
10+
this.viewer = viewer;
11+
12+
this.speed = speed;
13+
14+
/**
15+
* @type {boolean}
16+
*/
17+
this.active_ = false;
18+
19+
this.buttons = {
20+
forward: false,
21+
left: false,
22+
backward: false,
23+
right: false,
24+
};
25+
26+
this.handleKeyUpDownFunction = this.handleKeyUpDown.bind(this);
27+
this.handleTickFunction = this.handleTick.bind(this);
28+
}
29+
30+
get active() {
31+
return this.active_;
32+
}
33+
34+
set active(active) {
35+
this.active_ = active;
36+
if (this.active_) {
37+
document.addEventListener("keydown", this.handleKeyUpDownFunction);
38+
document.addEventListener("keyup", this.handleKeyUpDownFunction);
39+
this.viewer.clock.onTick.addEventListener(this.handleTickFunction);
40+
} else {
41+
document.removeEventListener("keydown", this.handleKeyUpDownFunction);
42+
document.removeEventListener("keyup", this.handleKeyUpDownFunction);
43+
this.viewer.clock.onTick.removeEventListener(this.handleTickFunction);
44+
}
45+
this.enableNavigation(!this.active_);
46+
}
47+
48+
/**
49+
* @param {KeyboardEvent} event
50+
*/
51+
handleKeyUpDown(event) {
52+
const pressed = event.type === "keydown";
53+
switch (event.key) {
54+
case "w":
55+
this.buttons.forward = pressed;
56+
break;
57+
case "a":
58+
this.buttons.left = pressed;
59+
break;
60+
case "s":
61+
this.buttons.backward = pressed;
62+
break;
63+
case "d":
64+
this.buttons.right = pressed;
65+
break;
66+
}
67+
if (this.needsTick()) {
68+
// FIXME: listen to onTick
69+
} else {
70+
// FIXME: unlisten to onTick
71+
}
72+
}
73+
74+
handleTick() {
75+
const timestamp = performance.now();
76+
const deltaTime = timestamp - this.lastTick;
77+
78+
const distance = (this.speed * deltaTime) / 1000;
79+
80+
if (this.buttons.forward) {
81+
this.viewer.camera.moveForward(distance);
82+
}
83+
if (this.buttons.left) {
84+
this.viewer.camera.moveLeft(distance);
85+
}
86+
if (this.buttons.backward) {
87+
this.viewer.camera.moveBackward(distance);
88+
}
89+
if (this.buttons.right) {
90+
this.viewer.camera.moveRight(distance);
91+
}
92+
this.lastTick = timestamp;
93+
}
94+
95+
needsTick() {
96+
return (
97+
this.buttons.forward ||
98+
this.buttons.left ||
99+
this.buttons.backward ||
100+
this.buttons.right
101+
);
102+
}
103+
104+
/**
105+
* Enable or disable cesium navigation interactions.
106+
* @param {boolean} enable
107+
*/
108+
enableNavigation(enable) {
109+
const controller = this.viewer.scene.screenSpaceCameraController;
110+
controller.enableTranslate = enable;
111+
controller.enableZoom = enable;
112+
controller.enableRotate = enable;
113+
controller.enableTilt = enable;
114+
controller.enableLook = enable;
115+
}
116+
}

‎packages/cesium-walk/package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "@geoblocks/cesium-walk",
3+
"version": "0.0.0",
4+
"license": "BSD-3-Clause",
5+
"repository": {
6+
"type": "git",
7+
"url": "https://github.com/geoblocks/cesium-helpers/",
8+
"directory": "packages/cesium-walk"
9+
},
10+
"main": "cesium-walk.js",
11+
"module": "cesium-walk.js",
12+
"publishConfig": {
13+
"access": "public"
14+
}
15+
}

0 commit comments

Comments
 (0)