npm package: @makina-corpus/rando3d
Description: Geotrek rando 3D visualisation
Author: Makina Corpus
Latest version: 1.3.3

# Rando3D

## Demo

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

## Installation

Install _Rando3D_ with your package manager

```shell
npm install @makina-corpus/rando3d
```

### Using imports:

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

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

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

### Create template to display rando3D

```html
<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

```js
// 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

```js
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

```shell
npm install
npm run start
```

### Build

```shell
npm run build
```