@makina-corpus/rando3d
v1.3.3
Published
Geotrek rando 3D visualisation
Downloads
41
Keywords
Readme
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><Your tiles provider></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