@makina-corpus/rando3d

v1.3.3

Published

2 years ago

Geotrek rando 3D visualisation

Downloads

122

0High
0Medium
0Low

mab

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Rando3D

Demo

Installation

Using imports:

Or using legacy tags in your <head> section:

Create template to display rando3D

Define settings

Init rando3D module

Development

Build

Or using legacy tags in your `<head>` section: