demos/cesium/headControls/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>CESIUM JS Head Controls demo</title>
  <script src="../../../libs/cesium/Cesium.js"></script>

  <!-- JEEFACEFILTER API (required by HeadControls.js) -->
  <script src="../../../dist/jeelizFaceFilter.js"></script>

  <!-- Import head controls script -->
  <script src="../../../helpers/HeadControls.js"></script>
 

  <style>
    @import url(../../../libs/cesium/Widgets/widgets.css);
    html, body, #cesiumContainer {
        width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    }

    #startHeadControlsButton {
      position: fixed;
      width: 256px;
      top: 1em;
      left: 50%;
      margin-left: -128px;
      cursor: pointer;
    }

    #headControlsCanvas {
      position: fixed;
      right: 0px;
      bottom: 30px;
      z-index: 1000;
      transform-origin: bottom right;
      max-height: 25%;
      max-width: 25%;
    }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>

  <button id='startHeadControlsButton'>START HEAD CONTROLLED NAVIGATION !</button>

  <!-- This canvas will be used to display the head tracking : //-->
  <canvas id='headControlsCanvas' width='512' height='512'></canvas>

  <script>
    // some settings:
    const SETTINGS = {
      zoomSensibility: 5.5,
      panSensibility: 0.00000015
    };

    // initialize Cesium:
    const CESIUMVIEWER = new Cesium.Viewer('cesiumContainer');
    let ISHEADCONTROLSON = false,  ISHEADCONTROLSINITIALIZED = false;
    
    function toggleHeadControls(isOn){
      DOMbutton.innerHTML = (isOn) ? 'Toggle OFF head controls' : 'toggle ON head controls';
      HeadControls.toggle(isOn);
      ISHEADCONTROLSON = isOn;
    }

    function callbackMove(mv){
      var cameraHeight = CESIUMVIEWER.scene.globe.ellipsoid.cartesianToCartographic(CESIUMVIEWER.camera.position).height/1000.0 || Number.MAX_VALUE;
        
      if (mv.dZ!==0) { // move head forward/backward
        const zoomAmount = mv.dZ * SETTINGS.zoomSensibility * cameraHeight;
        CESIUMVIEWER.camera.moveForward(zoomAmount);
      }
      if (mv.dRx!==0) { // turn head up-down
        const panAmountX = SETTINGS.panSensibility * mv.dRx * cameraHeight;
        CESIUMVIEWER.scene.camera.rotateUp(panAmountX);
      }
      if (mv.dRy!==0) { // turn head left-right
        const panAmountY = SETTINGS.panSensibility * mv.dRy * cameraHeight;
        CESIUMVIEWER.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, panAmountY);
      }
    }

    const DOMbutton = document.getElementById('startHeadControlsButton');

    // the user stats head navigation:
    DOMbutton.onclick = function(){
      if (ISHEADCONTROLSINITIALIZED){
        toggleHeadControls(!ISHEADCONTROLSON);
        return;
      }
      ISHEADCONTROLSINITIALIZED = true;

      HeadControls.init({
        canvasId: 'headControlsCanvas',
        callbackMove: callbackMove,
        callbackReady: function(err){
          if (err){
            console.log('ERROR in index.html: HEAD CONTROLS NOT READY. err =', err);
          } else {
            console.log('INFO in index.html: HEAD CONTROLS ARE READY :)');
            toggleHeadControls(true);
          }
        },
        NNCPath: '../../../neuralNets/', // where to find NN_DEFAULT.json from this path
        animateDelay: 2 // avoid DOM lags
      }); //end HeadControls.init params
    }; //end DOMbutton.onclick
  </script>
</body>
</html>
 