Nearly Post-Money

    @makina-corpus/rando3d

    1.3.3 • Public • Published

    Rando3D

    Demo

    https://makinacorpus.github.io/rando3D/

    Installation

    Install Rando3D with your package manager

    npm install @makina-corpus/rando3d

    Using imports:

    import rando3D from "@makina-corpus/rando3d";
    import "@makina-corpus/rando3d/dist/rando3D.css";

    Or using legacy tags in your <head> section:

    <link href="./dist/Rando3D.css" rel="stylesheet" />
    <script src="./dist/Rando3D.js"></script>

    Create template to display rando3D

    <section class="interface">
      <div class="controls controls--examine">
        <h3>Examine mode</h3>
        <span class="controls-description"></span>
        <span> Zoom: <b>Scroll mouse</b></span>
        <span> Look around : <b>Left click</b></span>
        <span> Move around : <b>Use arrow keys</b></span>
      </div>
    
      <div class="controls controls--bird">
        <h3>Bird mode</h3>
        <span class="controls-description"></span>
        <span> Zoom: <b>Scroll mouse</b></span>
        <span> Look around: <b>Left click</b></span>
        <span> Move around: <b>Use arrow keys</b></span>
      </div>
    
      <div class="controls controls--hiker" >
        <h3>Hiker mode</h3>
        <span class="controls-description"></span>
        <span> Look around: <b>Left click</b></span>
        <span> Play/Pause: <b>Space</b></span>
        <span> Stop: <b>Enter</b></span>
      </div>
    
      <div class="attribution" style="padding:3px;">
        <span>
          Tiles from <strong>&lt;Your tiles provider&gt;</strong></a>
        </span>
      </div>
    
      <ul class = "camera_switcher">
        <li class="camera camera--examine camera--disabled">
          <span class="camera-icon">
            <img src="img/camera--disabled.png" />
          </span>
          <span class="camera-title"> Exam</span>
          <span class="camera-description"></span>
        </li>
        <li class="camera camera--bird camera--disabled">
          <span class="camera-icon">
            <img src="img/camera--disabled.png" />
          </span>
          <span class="camera-title"> Oiseau</span>
          <span class="camera-description"></span>
        </li>
        <li class="camera camera--hiker camera--disabled">
          <span class="camera-icon">
            <img src="img/camera--disabled.png" />
          </span>
          <span class="camera-title"> Rando</span>
          <span class="camera-description"></span>
        </li>
      </ul>
    </section>
    
    <canvas id="canvas_renderer"></canvas>
    
    <div class="poi_side">
      <img class="close_btn" src="img/arrow.png" alt="Close" />
      <h2></h2>
      <span class="description"></span>
    </div>
    
    <div class="poi poi--clicked">
    </div>
    
    <div class="poi poi--hover">
    </div>

    Define settings

    // See all settings: https://github.com/makinacorpus/rando3D/blob/master/src/modules/settings.js
    const settings = {
      IMAGES_FOLDER: "locale-images-folder-url",
      DEM_URL: "DEM-json-url",
      PROFILE_URL: "profile-json-url",
      POI_URL: "poi-url",
      TILE_TEX_URL: "tiles-url",
      SIDE_TEX_URL: "img/side.jpg",
      CAM_SPEED_F: 100,
      PICTO_PREFIX: "",
      TREK_COLOR: {
        R: 0.6,
        V: 0.1,
        B: 0.1,
      },
    };

    Init rando3D module

    window.onload = function onload() {
      const container = document.body;
    
      const containerClasses = container.classList;
      containerClasses.add("isLoading");
    
      var callback = function () {
        containerClasses.remove("isLoading");
      };
    
      const canvas = document.getElementById("canvas_renderer");
      const cameraID = "examine";
      const app3D = new Rando3D();
      const scene = app3D.init(settings, canvas, cameraID);
      scene.init(callback);
    };

    Development

    npm install
    npm run start

    Build

    npm run build

    Keywords

    none

    Install

    npm i @makina-corpus/rando3d

    DownloadsWeekly Downloads

    3

    Version

    1.3.3

    License

    none

    Unpacked Size

    1.07 MB

    Total Files

    47

    Last publish

    Collaborators

    • dtrucs
    • pacproduct
    • mab
    • makinacorpus
    • jrmi