feat: add cesium-walk

geoblocks · Oct 8, 2024 · 02130bb · 02130bb
1 parent 237a427
commit 02130bb
Show file tree

Hide file tree

Showing 4 changed files with 198 additions and 0 deletions.
diff --git a/demos/cesium-walk.html b/demos/cesium-walk.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <script src="https://cesium.com/downloads/cesiumjs/releases/1.122/Build/Cesium/Cesium.js"></script>
+  <link href="https://cesium.com/downloads/cesiumjs/releases/1.122/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
+  <style>
+    html, body, #cesiumContainer {
+      height: 100%;
+      margin: 0;
+    }
+    #activate {
+      position: absolute;
+      right: 30px;
+      top: 30px;
+      font-family: monospace;
+      font-weight: bold;
+      font-size: 1.6em;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="cesiumContainer"></div>
+  <button id="activate" type="button">Activate !</button>
+  <script type="module">
+    import {createViewer} from './setup.js';
+    import CesiumWalk from '../packages/cesium-walk/cesium-walk.js';
+
+    createViewer('cesiumContainer').then(viewer => {
+      const mode = new CesiumWalk(viewer);
+      document.querySelector('#activate').addEventListener('click', () => mode.active = !mode.active);
+    });
+  </script>
+</body>
+
+</html>
diff --git a/packages/cesium-walk/LICENSE b/packages/cesium-walk/LICENSE
@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2024-present, camptocamp SA
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/packages/cesium-walk/cesium-walk.js b/packages/cesium-walk/cesium-walk.js
@@ -0,0 +1,116 @@
+// FIXME: only run tick when needed (when a key is pressed)
+// FIXME: clamp camera to terrain
+
+export default class CesiumWalk {
+  /**
+   * @param {import('cesium').Viewer} viewer
+   * @param {number} [speed=1.6] Walk speed in meters per second.
+   */
+  constructor(viewer, speed = 1.6) {
+    this.viewer = viewer;
+
+    this.speed = speed;
+
+    /**
+     * @type {boolean}
+     */
+    this.active_ = false;
+
+    this.buttons = {
+      forward: false,
+      left: false,
+      backward: false,
+      right: false,
+    };
+
+    this.handleKeyUpDownFunction = this.handleKeyUpDown.bind(this);
+    this.handleTickFunction = this.handleTick.bind(this);
+  }
+
+  get active() {
+    return this.active_;
+  }
+
+  set active(active) {
+    this.active_ = active;
+    if (this.active_) {
+      document.addEventListener("keydown", this.handleKeyUpDownFunction);
+      document.addEventListener("keyup", this.handleKeyUpDownFunction);
+      this.viewer.clock.onTick.addEventListener(this.handleTickFunction);
+    } else {
+      document.removeEventListener("keydown", this.handleKeyUpDownFunction);
+      document.removeEventListener("keyup", this.handleKeyUpDownFunction);
+      this.viewer.clock.onTick.removeEventListener(this.handleTickFunction);
+    }
+    this.enableNavigation(!this.active_);
+  }
+
+  /**
+   * @param {KeyboardEvent} event
+   */
+  handleKeyUpDown(event) {
+    const pressed = event.type === "keydown";
+    switch (event.key) {
+      case "w":
+        this.buttons.forward = pressed;
+        break;
+      case "a":
+        this.buttons.left = pressed;
+        break;
+      case "s":
+        this.buttons.backward = pressed;
+        break;
+      case "d":
+        this.buttons.right = pressed;
+        break;
+    }
+    if (this.needsTick()) {
+      // FIXME: listen to onTick
+    } else {
+      // FIXME: unlisten to onTick
+    }
+  }
+
+  handleTick() {
+    const timestamp = performance.now();
+    const deltaTime = timestamp - this.lastTick;
+
+    const distance = (this.speed * deltaTime) / 1000;
+
+    if (this.buttons.forward) {
+      this.viewer.camera.moveForward(distance);
+    }
+    if (this.buttons.left) {
+      this.viewer.camera.moveLeft(distance);
+    }
+    if (this.buttons.backward) {
+      this.viewer.camera.moveBackward(distance);
+    }
+    if (this.buttons.right) {
+      this.viewer.camera.moveRight(distance);
+    }
+    this.lastTick = timestamp;
+  }
+
+  needsTick() {
+    return (
+      this.buttons.forward ||
+      this.buttons.left ||
+      this.buttons.backward ||
+      this.buttons.right
+    );
+  }
+
+  /**
+   * Enable or disable cesium navigation interactions.
+   * @param {boolean} enable
+   */
+  enableNavigation(enable) {
+    const controller = this.viewer.scene.screenSpaceCameraController;
+    controller.enableTranslate = enable;
+    controller.enableZoom = enable;
+    controller.enableRotate = enable;
+    controller.enableTilt = enable;
+    controller.enableLook = enable;
+  }
+}
diff --git a/packages/cesium-walk/package.json b/packages/cesium-walk/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@geoblocks/cesium-walk",
+  "version": "0.0.0",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/geoblocks/cesium-helpers/",
+    "directory": "packages/cesium-walk"
+  },
+  "main": "cesium-walk.js",
+  "module": "cesium-walk.js",
+  "publishConfig": {
+    "access": "public"
+  }
+}