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

``sh
Node Module
npm install heli-3d-viewer --save
yarn add heli-3d-viewer
bower install heli-3d-viewer --save

CDN

`

Usage

`html

satellite streets

streets

light

dark

outdoors

satellite

`

`sh
Output should be
'0 Downloaded'
'25 Downloaded'
'50 Downloaded'
'80 Downloaded'
'100 Downloaded'
'Scene_object'
'Model_object'
'Camera_object'
'OrbitControl_object'
'WebGLRenderer_object'
`

$3

`typescript
interface SceneConfiguration {
background?: string, // Scene background CSS background property
panoramaURL?: string, // Panorama Url
showAxisHelper?: boolean, // Axis Helper
modelRotation?: { // Model Rotation
x: number,
y: number,
z: number,
},
camera?: { // Camera
fov?: number,
near?: number,
far?: number,
position?: {
x: number,
y: number,
z: number,
}
},
lights: { // 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, // Heliware access token
map_access_token?: string, // Mapbox access token
position?: { // latitude and longitude
lat: number,
lng: number
},
zoom?: number, // map zoom level
maxZoom?: number, // map max zoom level
pitch?: number // map pitch
}
interface ModelAnimationOption {
duration: number; // in milliseconds
followModel: boolean; // camera follows model
}
`

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
`json
"compilerOptions": {
"skipLibCheck": true
}
`

This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

`json
"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
`sh
npm install --save-dev @types/offscreencanvas
npm install --save-dev @types/webgl2
`
Update your tsconfig.app.json
`json
"types": ["node", "webgl2", "offscreencanvas"]
``