Heli 3D Viewer
Heli 3D viewer is a library for 3D Geo-Spatial data visualization & analytics built by Heliware (https://heliware.co.in) using three js & webgl.
From example please check
https://demo.heliware.co.in
For advance library requirements please contact rajan@heliware.co.in
Installation
Node Module
npm install heli-3d-viewer --save
yarn add heli-3d-viewer
bower install heli-3d-viewer --save
CDN
<script src="https://unpkg.com/heli-3d-viewer@1.1.11/dist/bundle.js"></script>
Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' />
<style>
html,
body {
margin: 0px;
}
#container {
width: 100%;
height: 100vh;
}
#info {
position: absolute;
bottom: 5px;
left: 5px;
z-index: 100;
background-color: white;
width: 200px;
height: 200px;
}
#menu {
position: absolute;
top: 0px;
left: 0px;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info"></div>
<div id="menu">
<input id="satellite-streets-v11" type="radio" name="rtoggle" value="satellite-streets-v11" checked="checked" />
<label for="satellite-streets-v11">satellite streets</label>
<input id="streets-v11" type="radio" name="rtoggle" value="streets" />
<label for="streets-v11">streets</label>
<input id="light-v10" type="radio" name="rtoggle" value="light" />
<label for="light-v10">light</label>
<input id="dark-v10" type="radio" name="rtoggle" value="dark" />
<label for="dark-v10">dark</label>
<input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors" />
<label for="outdoors-v11">outdoors</label>
<input id="satellite-v9" type="radio" name="rtoggle" value="outdoors" />
<label for="satellite-v9">satellite</label>
</div>
<script src="https://unpkg.com/heli-3d-viewer@1.1.11/dist/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"
integrity="sha512-LF8ZB1iTwi4Qvkm4pekHG4a437Y9Af5ZuwbnW4GTbAWQeR2E4KW8WF+xH8b9psevV7wIlDMx1MH9YfPqgKhA/Q=="
crossorigin="anonymous"></script>
<script>
console.log(HELIWARE);
let route_model;
var container = document.getElementById('container');
var gui = new dat.GUI();
var assetPath = {
modelPath: '/public/assets/model/MuradabadZ_SGRLABS_simplified_3d_mesh.obj',
texturePath: '/public/assets/model/MuradabadZ_SGRLABS_simplified_3d_mesh.mtl',
}
var type = 'MAP_OBJ';
var config = {
infoElements: {
polygon: document.getElementById('info'),
line: document.getElementById('info')
},
lights: {
'ambient': {
intensity: 1,
},
},
map_access_token: 'map_access_token',
position: {
lat: 28.818348,
lng: 78.641882
},
zoom: 16,
maxZoom: 19,
pitch: 60
}
function onProgress(loadedPercentage) {
console.log(loadedPercentage);
}
var heli3DViewer = new HELIWARE.Heli3DViewer(container, assetPath, type, onProgress, config);
console.log(heli3DViewer);
heli3DViewer.init().then((data) => {
console.log('Scene', data.scene);
console.log('Model', data.model);
console.log('Camera', data.camera);
console.log('Control', data.orbitControl);
console.log('Renderer', data.renderer);
console.log('Panorama', data.panorama);
var DayLightControls = function () {
this.hour = 1;
};
var accessoryModelRotControls = function (){
this.x = 0;
this.y = 0;
this.z = 0;
this.tx = 0;
this.ty = 0;
this.tz = 0;
this.scale = 1;
this.markerScale = 1;
}
var fc = new DayLightControls();
var f1 = gui.addFolder('Day Light');
var hour = f1.add(fc, 'hour', 0, 24).step(0.5);
hour.onChange(function (value) {
heli3DViewer.setDayTime(new Date(), value);
})
var amr = new accessoryModelRotControls();
var a2 = gui.addFolder('Model Translation');
var a1 = gui.addFolder('Model Rotation');
var a3 = gui.addFolder('Model Scale');
var a4 = gui.addFolder('Marker Scale');
const geometry = swTolngLatArray(droneFlyPath.geometry);
console.log(geometry);
var i = 0
var inteval = setInterval(() => {
i++;
console.log('Starts in: ', 10 - i)
}, 1000);
setTimeout(() => {
const geometry = swTolngLatArray(droneFlyPath.geometry);
console.log(geometry);
clearInterval(inteval);
heli3DViewer.animateCustomRoute('flight_path_geometry', '', [Math.PI/2, 0, 0], 10, {duration: 100000}).then(d => {
console.log(d)
const rm = heli3DViewer._map.getLayer('route_model');
console.log('route_model New: ', rm);
route_model = rm;
var rotx = a1.add(amr, 'x', 0, Math.PI*2).step(0.01);
var roty = a1.add(amr, 'y', 0, Math.PI*2).step(0.01);
var rotz = a1.add(amr, 'z', 0, Math.PI*2).step(0.01);
var transx = a2.add(amr, 'tx', 0, 1).step(0.001);
var transy = a2.add(amr, 'ty', 0, 1).step(0.001);
var transz = a2.add(amr, 'tz', 0, 1).step(0.001);
var scale = a3.add(amr, 'scale', 1, 50).step(1);
var markerScale = a4.add(amr, 'markerScale', 1, 20).step(1);
rotx.onChange(function(value){
console.log(value);
rm.implementation.modelTransform.rotateX = value
})
roty.onChange(function(value){
console.log(value);
rm.implementation.modelTransform.rotateY = value
})
rotz.onChange(function(value){
console.log(value);
rm.implementation.modelTransform.rotateZ = value
})
transx.onChange(function(value){
console.log(value);
rm.implementation.modelTransform.translateX = value
})
transy.onChange(function(value){
console.log(value);
rm.implementation.modelTransform.translateY = value
})
transz.onChange(function(value){
console.log(value);
rm.implementation.modelTransform.translateZ = value
})
scale.onChange(function(value){
console.log(value);
rm.implementation.scale = value
})
markerScale.onChange(function(value){
console.log(value);
rm.implementation.markerScale = value;
})
setTimeout(() => {
d.animate = true;
}, 2000);
}).catch(e => console.log(e))
}, 10000);
}).catch(err => console.log(err));
let layerId = "satellite-streets-v11";
function swTolngLatArray(geometry) {
const coordinates = geometry.coordinates.map(coord => {
return [coord[1], coord[0], coord[2]]
})
return {
...geometry,
coordinates
}
}
function switchLayer(layer) {
if (layerId != layer.target.id) {
layerId = layer.target.id;
heli3DViewer.changeStyle('mapbox://styles/mapbox/' + layerId);
}
}
let styleList = document.getElementById('menu');
let inputs = styleList.getElementsByTagName('input');
for (let i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
</script>
</body>
</html>
Output should be
'0 Downloaded'
'25 Downloaded'
'50 Downloaded'
'80 Downloaded'
'100 Downloaded'
'Scene_object'
'Model_object'
'Camera_object'
'OrbitControl_object'
'WebGLRenderer_object'
Scene Configurations
interface SceneConfiguration {
background?: string,
panoramaURL?: string,
showAxisHelper?: boolean,
modelRotation?: {
x: number,
y: number,
z: number,
},
camera?: {
fov?: number,
near?: number,
far?: number,
position?: {
x: number,
y: number,
z: number,
}
},
lights: {
'ambient'?: {
color?: string | number,
intensity?: number,
},
'directionalLights'?: {
lights: {
directedAt?: {
x: number,
y: number,
z: number,
},
position: {
x: number,
y: number,
z: number,
},
color?: string | number,
intensity?: number
}[],
},
'point'?: {
color?: string | number,
intensity?: number,
position?: {
x: number,
y: number,
z: number,
},
},
'spotLight'?: {
color?: string | number,
intensity?: number,
radius?: number
}
},
orbitControl?: {
autoRotate: boolean
},
infoElements?: {
polygon?: HTMLElement,
line?: HTMLElement
},
access_token?: string,
map_access_token?: string,
position?: {
lat: number,
lng: number
},
zoom?: number,
maxZoom?: number,
pitch?: number
}
interface ModelAnimationOption {
duration: number;
followModel: boolean;
}
Debug Errors
If your project uses typescript of version less than 3.7 then you may face the following error
An accessor cannot be declared in ambient context
To resolve this in your tsc.config.json file
Set "skipLibCheck": true
"compilerOptions": {
"skipLibCheck": true
}
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
"compilerOptions": {
"allowSyntheticDefaultImports": true
}
If you are using Angular 7 you may face the following error
ERROR in node_modules/heli-3d-viewer/node_modules/three/src/core/BufferAttribute.d.ts(21,6): error
TS1086: An accessor cannot be declared in an ambient context.
node_modules/heli-3d-viewer/node_modules/three/src/core/InterleavedBufferAttribute.d.ts(19,6): error
TS1086: An accessor cannot be declared in an ambient context.
node_modules/heli-3d-viewer/node_modules/three/src/core/InterleavedBufferAttribute.d.ts(20,6): error
TS1086: An accessor cannot be declared in an ambient context.
To resolve install these dev dependencies
npm install --save-dev @types/offscreencanvas
npm install --save-dev @types/webgl2
Update your tsconfig.app.json
"types": ["node", "webgl2", "offscreencanvas"]