初始化sdk核心

.eslintrc

@@ -0,0 +1,53 @@
+{
+	"extends": "happiness",
+	"globals": {
+		"THREE": false,
+		"TWEEN": false,
+		"$": false,
+		"XMLHttpRequest": false,
+		"requestAnimationFrame": false,
+		"Blob": false,
+		"i18n": false,
+		"URL": false,
+		"Stats": false,
+		"ProgressBar": false,
+		"d3": false,
+		"btoa": false,
+		"alert": false,
+		"ol": false,
+		"proj4": false,
+		"shapefile": false,
+		"Worker": false,
+		"Image": false,
+		"LASFile": false,
+		"LASDecoder": false,
+		"BinaryHeap": false,
+		"performance": false,
+		"Potree": true,
+		"initSidebar": true,
+		"HoverMenu": true,
+		"HoverMenuItem": true,
+		"LRU": true,
+		"viewer": true
+	},
+	"rules": {
+		"no-lone-blocks": "off",
+		"space-before-function-paren": "off",
+		"space-before-blocks": "off",
+		"indent": "off",
+		"no-trailing-spaces": "off",
+		"keyword-spacing": "off",
+		"no-multiple-empty-lines" : "off",
+		"key-spacing": "off",
+		"spaced-comment": "off",
+		"quotes": "off",
+		"space-in-parens": "off",
+		"padded-blocks": "off",
+		"comma-dangle": "off",
+		"object-property-newline": "off",
+		"eol-last": "off"
+	},
+	"parserOptions": { 
+		"ecmaVersion": 6 
+	}
+}

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: [potree]

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,2 @@
+
+If you're reporting an error, please try to provide detailed error messages and, if possible, instructions on how to replicate the issue. 

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,14 @@
+
+Please follow these instructions when creating a new pull request:
+
+* Validating PRs can take a lot of time. The simpler the PR, the higher the chance that it will get accepted. 
+* Set the potree develop branch as the PR target.
+* Builds should not be part of the PR. Don't commit them. 
+* Do not use a formatter. They make a mess out of diffs. 
+* It takes a lot of time to download and test, as well as analyze the diffs,
+so please excuse if it takes time to respond or if you don't get a response. 
+
+
+
+
+

.gitignore

@@ -0,0 +1,35 @@
+/build
+/test
+/test1
+/360
+node_modules
+docs/.marking_your_own_pointcloud_loader.md.html
+docs/.file_format.md.html
+docs/.doc.md.html
+docs/.how_does_loading_nodes_work.md.html
+docs/.materials_and_rendermodes.md.html
+docs/.how_to_create_your_own_pointcloud_loader.md.html
+examples/index.html
+.project
+libs/CesiumUnminified
+/examples/page.html
+/resources/icons/index.html
+/examples/page.html
+
+/pointclouds/retz
+/pointclouds/NVIDIA_Ph01-20160403_tiles_converted
+/pointclouds/D
+/pointclouds/C
+/pointclouds/wrneustadt
+/pointclouds/alszeile
+/pointclouds/heidentor
+/pointclouds/gane
+/pointclouds/test
+/pointclouds/test1
+/pointclouds/mobile
+/pointclouds/sjl2
+/pointclouds/morro_bay_converted
+/pointclouds/helimap_epalinges
+pointclouds/F
+
+.laser-lib-path

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+sudo: false
+node_js:
+  - "7"

.vscode/keybindings.json

@@ -0,0 +1,20 @@
+// Place your key bindings in this file to overwrite the defaults
+[
+	{
+		"key": "ctrl+l",
+		"command": "editor.action.deleteLines",
+		"when": "editorTextFocus && !editorReadonly"
+	},{
+		"key": "ctrl+shift+i",
+		"command": "editor.action.toggleRenderWhitespace"
+	},{
+		"key": "ctrl+d",
+		"command": "editor.action.copyLinesDownAction"
+	},{
+		"key": "alt+2",
+		"command": "type",
+		"args": {
+			"text": "`"
+		}
+	}
+]

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+	"workbench.editor.enablePreview": false,
+	"files.associations": {
+		"*.vs": "cpp",
+		"*.fs": "cpp"
+	},
+	"files.trimTrailingWhitespace": false,
+	"editor.fontSize": 28,
+	"editor.autoIndent": false,
+	"editor.detectIndentation": false,
+	"editor.insertSpaces": false,
+	"editor.minimap.enabled": false,
+	"editor.autoClosingBrackets": false,
+	"editor.formatOnType": false,
+	"editor.acceptSuggestionOnEnter": "off",
+	"editor.acceptSuggestionOnCommitCharacter": false,
+	"editor.mouseWheelZoom": true,
+	"editor.renderWhitespace": "all",
+	"workbench.tree.indent": 30,
+}

LICENSE

@@ -0,0 +1,33 @@
+ 
+============
+== POTREE ==
+============
+
+http://potree.org
+
+Copyright (c) 2011-2020, Markus Schütz
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright notice,
+this list of conditions and the following disclaimer in the documentation
+and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+The views and conclusions contained in the software and documentation are those
+of the authors and should not be interpreted as representing official policies,
+either expressed or implied, of the FreeBSD Project.

data/t-SNZRfWt/filter.json

@@ -0,0 +1,472 @@
+[
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            1.59676,
+            -1.858297,
+            -1.424995
+        ],
+        "dataset_floor_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            1.59676,
+            -1.858297,
+            0.075004
+        ],
+        "dataset_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "file_id": "00000",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59501418166995,
+            22.367311492079243,
+            -1.424995
+        ],
+        "hidden": false,
+        "id": 0,
+        "location": [
+            113.59501418166995,
+            22.367311492079243,
+            0.075004
+        ],
+        "orientation": [
+            0.7660444430548815,
+            0.0,
+            0.0,
+            0.6427876097629267
+        ],
+        "site_model_entity_id": 11
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            1.524764,
+            0.321297,
+            -1.448787
+        ],
+        "dataset_floor_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            1.524764,
+            0.321297,
+            0.051212
+        ],
+        "dataset_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "file_id": "00001",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.5950171680593,
+            22.367330988876998,
+            -1.448787
+        ],
+        "hidden": false,
+        "id": 1,
+        "location": [
+            113.5950171680593,
+            22.367330988876998,
+            0.051212
+        ],
+        "orientation": [
+            0.7660444430548815,
+            0.0,
+            0.0,
+            0.6427876097629267
+        ],
+        "site_model_entity_id": 11
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            1.452417,
+            2.323778,
+            -1.469296
+        ],
+        "dataset_floor_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            1.452417,
+            2.323778,
+            0.030703
+        ],
+        "dataset_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "file_id": "00002",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.5950198524803,
+            22.367348911096724,
+            -1.469296
+        ],
+        "hidden": false,
+        "id": 2,
+        "location": [
+            113.5950198524803,
+            22.367348911096724,
+            0.030703
+        ],
+        "orientation": [
+            0.7660444430548815,
+            0.0,
+            0.0,
+            0.6427876097629267
+        ],
+        "site_model_entity_id": 11
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -0.465674,
+            2.651643,
+            -1.443204
+        ],
+        "dataset_floor_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -0.465674,
+            2.651643,
+            0.056795
+        ],
+        "dataset_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "file_id": "00003",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59500206487914,
+            22.367354834748246,
+            -1.443204
+        ],
+        "hidden": false,
+        "id": 3,
+        "location": [
+            113.59500206487914,
+            22.367354834748246,
+            0.056795
+        ],
+        "orientation": [
+            0.7660444430548815,
+            0.0,
+            0.0,
+            0.6427876097629267
+        ],
+        "site_model_entity_id": 11
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -0.304909,
+            0.378079,
+            -1.423422
+        ],
+        "dataset_floor_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -0.304909,
+            0.378079,
+            0.076577
+        ],
+        "dataset_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "file_id": "00004",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59499976884827,
+            22.367334363039878,
+            -1.423422
+        ],
+        "hidden": false,
+        "id": 4,
+        "location": [
+            113.59499976884827,
+            22.367334363039878,
+            0.076577
+        ],
+        "orientation": [
+            0.7660444430548815,
+            0.0,
+            0.0,
+            0.6427876097629267
+        ],
+        "site_model_entity_id": 11
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -0.180324,
+            -1.626438,
+            -1.400534
+        ],
+        "dataset_floor_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -0.180324,
+            -1.626438,
+            0.099465
+        ],
+        "dataset_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "file_id": "00005",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59499758048605,
+            22.367316340796547,
+            -1.400534
+        ],
+        "hidden": false,
+        "id": 5,
+        "location": [
+            113.59499758048605,
+            22.367316340796547,
+            0.099465
+        ],
+        "orientation": [
+            0.7660444430548815,
+            0.0,
+            0.0,
+            0.6427876097629267
+        ],
+        "site_model_entity_id": 11
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -2.183048,
+            -1.826385,
+            -1.363442
+        ],
+        "dataset_floor_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -2.183048,
+            -1.826385,
+            0.136557
+        ],
+        "dataset_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "file_id": "00006",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59497809375449,
+            22.367317703143319,
+            -1.363442
+        ],
+        "hidden": false,
+        "id": 6,
+        "location": [
+            113.59497809375449,
+            22.367317703143319,
+            0.136557
+        ],
+        "orientation": [
+            0.7660444430548815,
+            0.0,
+            0.0,
+            0.6427876097629267
+        ],
+        "site_model_entity_id": 11
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -2.317107,
+            0.144839,
+            -1.385291
+        ],
+        "dataset_floor_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -2.317107,
+            0.144839,
+            0.114708
+        ],
+        "dataset_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "file_id": "00007",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59498013539384,
+            22.36733544415704,
+            -1.385291
+        ],
+        "hidden": false,
+        "id": 7,
+        "location": [
+            113.59498013539384,
+            22.36733544415704,
+            0.114708
+        ],
+        "orientation": [
+            0.7660444430548815,
+            0.0,
+            0.0,
+            0.6427876097629267
+        ],
+        "site_model_entity_id": 11
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -2.359503,
+            2.410406,
+            -1.412787
+        ],
+        "dataset_floor_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -2.359503,
+            2.410406,
+            0.087212
+        ],
+        "dataset_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "file_id": "00008",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59498354975846,
+            22.367355659126745,
+            -1.412787
+        ],
+        "hidden": false,
+        "id": 8,
+        "location": [
+            113.59498354975846,
+            22.367355659126745,
+            0.087212
+        ],
+        "orientation": [
+            0.7660444430548815,
+            0.0,
+            0.0,
+            0.6427876097629267
+        ],
+        "site_model_entity_id": 11
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            3.119361,
+            -2.78974,
+            -1.43909
+        ],
+        "dataset_floor_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            3.119361,
+            -2.78974,
+            0.060909
+        ],
+        "dataset_orientation": [
+            0.7071067811865475,
+            0.0,
+            0.0,
+            0.7071067811865476
+        ],
+        "file_id": "00009",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.5950271700403,
+            22.36730082077799,
+            -1.43909
+        ],
+        "hidden": false,
+        "id": 9,
+        "location": [
+            113.5950271700403,
+            22.36730082077799,
+            0.060909
+        ],
+        "orientation": [
+            0.7660444430548815,
+            0.0,
+            0.0,
+            0.6427876097629267
+        ],
+        "site_model_entity_id": 11
+    }
+]

data/t-iksBApb/datasets.json

@@ -0,0 +1,41 @@
+[
+    {
+        "bounding_box_max": [
+            10.309,
+            4.804,
+            2.687
+        ],
+        "bounding_box_min": [
+            -8.202,
+            -11.714,
+            -1.53
+        ],
+        "bundle_id": null,
+        "color": "#c51162",
+        "has_depth_images": true,
+        "has_images": null,
+        "has_webmesh": false,
+        "id": 1,
+        "location": [
+            113.59577794856219,
+            22.36659069637355,
+            -0.3
+        ],
+        "name": "chunk1",
+        "orientation": -2.2689280250000007,
+        "point_cloud_type": "POTREE",
+        "security": {
+            "can_write": false,
+            "group_read": 0,
+            "group_write": 1
+        },
+        "site_model_entity_ids": [
+            10,
+            11,
+            12
+        ],
+        "title": "chunk1",
+        "type": "4dage",
+        "visible": null
+    }
+]

data/t-iksBApb/filter - 副本.json

@@ -0,0 +1,613 @@
+[
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -1.284484,
+            0.186807,
+            -1.433107
+        ],
+        "dataset_floor_orientation": [
+            0.9982455,
+            -0.0070710033,
+            -0.0028280015,
+            -0.058719028
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -1.284484,
+            0.186807,
+            0.066892
+        ],
+        "dataset_orientation": [
+            0.9982455,
+            -0.0070710033,
+            -0.0028280015,
+            -0.058719028
+        ],
+        "file_id": "00003",
+        "file_path": "data/t-vZkqRV8",
+        "floor_location": [
+            113.59572660218173,
+            22.366601126399745,
+            -1.433107
+        ],
+        "hidden": false,
+        "id": 3,
+        "location": [
+            113.59572660218173,
+            22.366601126399745,
+            0.066892
+        ],
+        "orientation": [
+            0.9982455,
+            -0.0070710033,
+            -0.0028280015,
+            -0.058719028
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            1.527454,
+            1.098485,
+            -1.431433
+        ],
+        "dataset_floor_orientation": [
+            0.010460002,
+            0.0009780002,
+            0.0011080002,
+            0.9999442
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            1.527454,
+            1.098485,
+            0.068566
+        ],
+        "dataset_orientation": [
+            0.010460002,
+            0.0009780002,
+            0.0011080002,
+            0.9999442
+        ],
+        "file_id": "00001",
+        "file_path": "data/t-vZkqRV8",
+        "floor_location": [
+            113.59575387967989,
+            22.366609426882,
+            -1.431433
+        ],
+        "hidden": false,
+        "id": 1,
+        "location": [
+            113.59575387967989,
+            22.366609426882,
+            0.068566
+        ],
+        "orientation": [
+            0.010460002,
+            0.0009780002,
+            0.0011080002,
+            0.9999442
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            1.55657,
+            -1.286162,
+            -1.412995
+        ],
+        "dataset_floor_orientation": [
+            0.0,
+            0.0,
+            0.0,
+            1.0
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            1.55657,
+            -1.286162,
+            0.087004
+        ],
+        "dataset_orientation": [
+            0.0,
+            0.0,
+            0.0,
+            1.0
+        ],
+        "file_id": "00000",
+        "file_path": "data/t-vZkqRV8",
+        "floor_location": [
+            113.59575422412529,
+            22.36658789345206,
+            -1.412995
+        ],
+        "hidden": false,
+        "id": 0,
+        "location": [
+            113.59575422412529,
+            22.36658789345206,
+            0.087004
+        ],
+        "orientation": [
+            0.0,
+            0.0,
+            0.0,
+            1.0
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            1.937006,
+            -0.952866,
+            -1.324683
+        ],
+        "dataset_floor_orientation": [
+            0.9385529,
+            -0.011282011,
+            0.0006120006,
+            0.34495035
+        ],
+        "dataset_id": 2,
+        "dataset_location": [
+            1.937006,
+            -0.952866,
+            0.175316
+        ],
+        "dataset_orientation": [
+            0.9385529,
+            -0.011282011,
+            0.0006120006,
+            0.34495035
+        ],
+        "file_id": "00004",
+        "file_path": "data/t-DxTiYo6",
+        "floor_location": [
+            113.59575790914679,
+            22.366590912386255,
+            -1.324683
+        ],
+        "hidden": false,
+        "id": 9,
+        "location": [
+            113.59575790914679,
+            22.366590912386255,
+            0.175316
+        ],
+        "orientation": [
+            0.9385529,
+            -0.011282011,
+            0.0006120006,
+            0.34495035
+        ],
+        "site_model_entity_id": 13
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -2.21308,
+            -0.290076,
+            -1.348181
+        ],
+        "dataset_floor_orientation": [
+            0.9852171,
+            -0.009604011,
+            -0.002794003,
+            -0.1710182
+        ],
+        "dataset_id": 2,
+        "dataset_location": [
+            -2.21308,
+            -0.290076,
+            0.151818
+        ],
+        "dataset_orientation": [
+            0.9852171,
+            -0.009604011,
+            -0.002794003,
+            -0.1710182
+        ],
+        "file_id": "00003",
+        "file_path": "data/t-DxTiYo6",
+        "floor_location": [
+            113.59571759879374,
+            22.36659679762282,
+            -1.348181
+        ],
+        "hidden": false,
+        "id": 8,
+        "location": [
+            113.59571759879374,
+            22.36659679762282,
+            0.151818
+        ],
+        "orientation": [
+            0.9852171,
+            -0.009604011,
+            -0.002794003,
+            -0.1710182
+        ],
+        "site_model_entity_id": 13
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -0.392763,
+            2.304785,
+            -1.448249
+        ],
+        "dataset_floor_orientation": [
+            -0.7007945,
+            0.005179004,
+            0.0028850022,
+            0.71333855
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -0.392763,
+            2.304785,
+            0.05175
+        ],
+        "dataset_orientation": [
+            -0.7007945,
+            0.005179004,
+            0.0028850022,
+            0.71333855
+        ],
+        "file_id": "00002",
+        "file_path": "data/t-vZkqRV8",
+        "floor_location": [
+            113.59573520504739,
+            22.36662027390481,
+            -1.448249
+        ],
+        "hidden": false,
+        "id": 2,
+        "location": [
+            113.59573520504739,
+            22.36662027390481,
+            0.05175
+        ],
+        "orientation": [
+            -0.7007945,
+            0.005179004,
+            0.0028850022,
+            0.71333855
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -1.366048,
+            -2.241861,
+            -1.412849
+        ],
+        "dataset_floor_orientation": [
+            0.72623765,
+            -0.009041009,
+            -0.005575005,
+            -0.68736166
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -1.366048,
+            -2.241861,
+            0.08715
+        ],
+        "dataset_orientation": [
+            0.72623765,
+            -0.009041009,
+            -0.005575005,
+            -0.68736166
+        ],
+        "file_id": "00004",
+        "file_path": "data/t-vZkqRV8",
+        "floor_location": [
+            113.59572587317935,
+            22.36657919277985,
+            -1.412849
+        ],
+        "hidden": false,
+        "id": 4,
+        "location": [
+            113.59572587317935,
+            22.36657919277985,
+            0.08715
+        ],
+        "orientation": [
+            0.72623765,
+            -0.009041009,
+            -0.005575005,
+            -0.68736166
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -1.781149,
+            2.918267,
+            -1.548546
+        ],
+        "dataset_floor_orientation": [
+            0.9568614,
+            -0.009778004,
+            -0.0047690016,
+            -0.2903411
+        ],
+        "dataset_id": 2,
+        "dataset_location": [
+            -1.781149,
+            2.918267,
+            -0.048546
+        ],
+        "dataset_orientation": [
+            0.9568614,
+            -0.009778004,
+            -0.0047690016,
+            -0.2903411
+        ],
+        "file_id": "00002",
+        "file_path": "data/t-DxTiYo6",
+        "floor_location": [
+            113.59572170931502,
+            22.366625780399596,
+            -1.548546
+        ],
+        "hidden": false,
+        "id": 7,
+        "location": [
+            113.59572170931502,
+            22.366625780399596,
+            -0.048546
+        ],
+        "orientation": [
+            0.9568614,
+            -0.009778004,
+            -0.0047690016,
+            -0.2903411
+        ],
+        "site_model_entity_id": 13
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -1.164905,
+            -3.702089,
+            -1.273781
+        ],
+        "dataset_floor_orientation": [
+            -0.59479016,
+            0.010062003,
+            0.0051960014,
+            0.80380124
+        ],
+        "dataset_id": 2,
+        "dataset_location": [
+            -1.164905,
+            -3.702089,
+            0.226218
+        ],
+        "dataset_orientation": [
+            -0.59479016,
+            0.010062003,
+            0.0051960014,
+            0.80380124
+        ],
+        "file_id": "00007",
+        "file_path": "data/t-DxTiYo6",
+        "floor_location": [
+            113.59572786389636,
+            22.366566011295626,
+            -1.273781
+        ],
+        "hidden": false,
+        "id": 12,
+        "location": [
+            113.59572786389636,
+            22.366566011295626,
+            0.226218
+        ],
+        "orientation": [
+            -0.59479016,
+            0.010062003,
+            0.0051960014,
+            0.80380124
+        ],
+        "site_model_entity_id": 13
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            2.888978,
+            -3.817622,
+            -1.26312
+        ],
+        "dataset_floor_orientation": [
+            0.6726246,
+            -0.008923007,
+            0.004631004,
+            0.7399156
+        ],
+        "dataset_id": 2,
+        "dataset_location": [
+            2.888978,
+            -3.817622,
+            0.236879
+        ],
+        "dataset_orientation": [
+            0.6726246,
+            -0.008923007,
+            0.004631004,
+            0.7399156
+        ],
+        "file_id": "00005",
+        "file_path": "data/t-DxTiYo6",
+        "floor_location": [
+            113.59576722603289,
+            22.366565065646296,
+            -1.26312
+        ],
+        "hidden": false,
+        "id": 10,
+        "location": [
+            113.59576722603289,
+            22.366565065646296,
+            0.236879
+        ],
+        "orientation": [
+            0.6726246,
+            -0.008923007,
+            0.004631004,
+            0.7399156
+        ],
+        "site_model_entity_id": 13
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -0.694302,
+            5.670915,
+            -1.585799
+        ],
+        "dataset_floor_orientation": [
+            0.07594304,
+            -0.00026000012,
+            0.0036470017,
+            0.9971055
+        ],
+        "dataset_id": 2,
+        "dataset_location": [
+            -0.694302,
+            5.670915,
+            -0.085799
+        ],
+        "dataset_orientation": [
+            0.07594304,
+            -0.00026000012,
+            0.0036470017,
+            0.9971055
+        ],
+        "file_id": "00001",
+        "file_path": "data/t-DxTiYo6",
+        "floor_location": [
+            113.59573219022284,
+            22.366650663880017,
+            -1.585799
+        ],
+        "hidden": false,
+        "id": 6,
+        "location": [
+            113.59573219022284,
+            22.366650663880017,
+            -0.085799
+        ],
+        "orientation": [
+            0.07594304,
+            -0.00026000012,
+            0.0036470017,
+            0.9971055
+        ],
+        "site_model_entity_id": 13
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            2.891525,
+            -6.820863,
+            -1.352726
+        ],
+        "dataset_floor_orientation": [
+            0.99671096,
+            -0.012863012,
+            -0.0011530011,
+            0.080003075
+        ],
+        "dataset_id": 2,
+        "dataset_location": [
+            2.891525,
+            -6.820863,
+            0.147273
+        ],
+        "dataset_orientation": [
+            0.99671096,
+            -0.012863012,
+            -0.0011530011,
+            0.080003075
+        ],
+        "file_id": "00006",
+        "file_path": "data/t-DxTiYo6",
+        "floor_location": [
+            113.59576732853758,
+            22.36653794547289,
+            -1.352726
+        ],
+        "hidden": false,
+        "id": 11,
+        "location": [
+            113.59576732853758,
+            22.36653794547289,
+            0.147273
+        ],
+        "orientation": [
+            0.99671096,
+            -0.012863012,
+            -0.0011530011,
+            0.080003075
+        ],
+        "site_model_entity_id": 13
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -2.104879,
+            7.428907,
+            -1.608292
+        ],
+        "dataset_floor_orientation": [
+            0.0,
+            0.0,
+            0.0,
+            1.0
+        ],
+        "dataset_id": 2,
+        "dataset_location": [
+            -2.104879,
+            7.428907,
+            -0.108292
+        ],
+        "dataset_orientation": [
+            0.0,
+            0.0,
+            0.0,
+            1.0
+        ],
+        "file_id": "00000",
+        "file_path": "data/t-DxTiYo6",
+        "floor_location": [
+            113.59571844939139,
+            22.366666505134086,
+            -1.608292
+        ],
+        "hidden": false,
+        "id": 5,
+        "location": [
+            113.59571844939139,
+            22.366666505134086,
+            -0.108292
+        ],
+        "orientation": [
+            0.0,
+            0.0,
+            0.0,
+            1.0
+        ],
+        "site_model_entity_id": 13
+    }
+]

data/t-iksBApb/filter.json

@@ -0,0 +1,192 @@
+[
+    {
+        "id": "0",
+        "dataset_location": [
+            -5.307045936584473,
+            0.008580000139772892,
+            1.2997100353240967
+        ],
+        "dataset_orientation": [
+            0,
+            0.7071067811865476,
+            0,
+            -0.7071067811865475
+        ],
+        "dataset_floor_location": [
+            -5.307045936584473,
+            -1.4914189577102662,
+            1.2997100353240967
+        ]
+    },
+    {
+        "id": "1",
+        "dataset_location": [
+            -5.355366230010986,
+            0.024910999462008477,
+            -0.7463200092315674
+        ],
+        "dataset_orientation": [
+            -0.0014127994463727738,
+            0.6804602317373005,
+            -0.002597910462992094,
+            -0.7327790640856168
+        ],
+        "dataset_floor_location": [
+            -5.355366230010986,
+            -1.4750880002975464,
+            -0.7463200092315674
+        ]
+    },
+    {
+        "id": "2",
+        "dataset_location": [
+            -3.4088330268859865,
+            0.019850999116897584,
+            -1.0629359483718873
+        ],
+        "dataset_orientation": [
+            -0.004965304747272489,
+            0.9987779350131556,
+            -0.00022768847091248498,
+            0.04917293889190266
+        ],
+        "dataset_floor_location": [
+            -3.4088330268859865,
+            -1.4801479578018189,
+            -1.0629359483718873
+        ]
+    },
+    {
+        "id": "3",
+        "dataset_location": [
+            -3.4127719402313234,
+            0.009693999774754048,
+            1.330907940864563
+        ],
+        "dataset_orientation": [
+            -0.001453811746173509,
+            0.6865858441631616,
+            -0.004658419713830001,
+            0.7270323518278686
+        ],
+        "dataset_floor_location": [
+            -3.4127719402313234,
+            -1.490304946899414,
+            1.330907940864563
+        ]
+    },
+    {
+        "id": "4",
+        "dataset_location": [
+            -0.8715130090713501,
+            0.006692999973893166,
+            1.9747610092163087
+        ],
+        "dataset_orientation": [
+            0.00048224736874806224,
+            0.999734921355444,
+            -0.0018653498740104507,
+            0.02294352207072403
+        ],
+        "dataset_floor_location": [
+            -0.8715130090713501,
+            -1.493306040763855,
+            1.9747610092163087
+        ]
+    },
+    {
+        "id": "5",
+        "dataset_location": [
+            1.859151005744934,
+            0.16297100484371186,
+            1.959488034248352
+        ],
+        "dataset_orientation": [
+            0.001005506214116225,
+            0.8122559400367085,
+            0.002214659208996851,
+            -0.5832960936338238
+        ],
+        "dataset_floor_location": [
+            1.859151005744934,
+            -1.3370280265808106,
+            1.959488034248352
+        ]
+    },
+    {
+        "id": "6",
+        "dataset_location": [
+            3.094014883041382,
+            0.1760769933462143,
+            0.0783189982175827
+        ],
+        "dataset_orientation": [
+            -0.0030462169725763825,
+            0.7409774558870658,
+            -0.0031791530924430669,
+            -0.6715155035424205
+        ],
+        "dataset_floor_location": [
+            3.094014883041382,
+            -1.323922038078308,
+            0.0783189982175827
+        ]
+    },
+    {
+        "id": "7",
+        "dataset_location": [
+            3.2593019008636476,
+            0.19146600365638734,
+            -2.420233964920044
+        ],
+        "dataset_orientation": [
+            -0.003656450665743247,
+            0.7042786380894135,
+            -0.002831963807733264,
+            -0.7099086246502108
+        ],
+        "dataset_floor_location": [
+            3.2593019008636476,
+            -1.308532953262329,
+            -2.420233964920044
+        ]
+    },
+    {
+        "id": "8",
+        "dataset_location": [
+            5.281027793884277,
+            0.2006630003452301,
+            -2.4906139373779299
+        ],
+        "dataset_orientation": [
+            0.00010677311380177844,
+            0.9996876325914147,
+            0.002882876048281535,
+            0.02482580032522047
+        ],
+        "dataset_floor_location": [
+            5.281027793884277,
+            -1.2993359565734864,
+            -2.4906139373779299
+        ]
+    },
+    {
+        "id": "9",
+        "dataset_location": [
+            5.347447872161865,
+            0.189519003033638,
+            -0.25694000720977785
+        ],
+        "dataset_orientation": [
+            0.0015733137021339582,
+            0.724921390041708,
+            0.0052983545771977638,
+            0.6888094223285434
+        ],
+        "dataset_floor_location": [
+            5.347447872161865,
+            -1.310479998588562,
+            -0.25694000720977785
+        ]
+    }
+]

data/t-iksBApb/filter1.json

@@ -0,0 +1,472 @@
+[
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -0.871513,
+            -1.974761,
+            -1.493306
+        ],
+        "dataset_floor_orientation": [
+            0.72314286,
+            -0.0009780011999999997,
+            0.0016600019,
+            0.6906958
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -0.871513,
+            -1.974761,
+            0.006693
+        ],
+        "dataset_orientation": [
+            0.72314286,
+            -0.0009780011999999997,
+            0.0016600019,
+            0.6906958
+        ],
+        "file_id": "00004",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59576869995449,
+            22.36660818826991,
+            -1.793306
+        ],
+        "hidden": false,
+        "id": 4,
+        "location": [
+            113.59576869995449,
+            22.36660818826991,
+            -0.293307
+        ],
+        "orientation": [
+            -0.9315963627701758,
+            -0.0010911514772546083,
+            -0.0015879172192152735,
+            0.3634893461722615
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            1.859151,
+            -1.959488,
+            -1.337028
+        ],
+        "dataset_floor_orientation": [
+            0.16189906000000005,
+            0.0022770007999999999,
+            -0.0008550003,
+            0.9868043
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            1.859151,
+            -1.959488,
+            0.162971
+        ],
+        "dataset_orientation": [
+            0.16189906000000005,
+            0.0022770007999999999,
+            -0.0008550003,
+            0.9868043
+        ],
+        "file_id": "00005",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59575177153018,
+            22.366589209422263,
+            -1.6370280000000002
+        ],
+        "hidden": false,
+        "id": 5,
+        "location": [
+            113.59575177153018,
+            22.366589209422263,
+            -0.13702899999999999
+        ],
+        "orientation": [
+            0.9627699520971074,
+            0.00018740871859766512,
+            -0.0024250023080281629,
+            0.2703111236719827
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            3.094015,
+            -0.078319,
+            -1.323922
+        ],
+        "dataset_floor_orientation": [
+            0.04911701800000007,
+            -0.0044020014,
+            0.00009400003000000021,
+            0.9987833500000001
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            3.094015,
+            -0.078319,
+            0.176077
+        ],
+        "dataset_orientation": [
+            0.04911701800000007,
+            -0.0044020014,
+            0.00009400003000000021,
+            0.9987833500000001
+        ],
+        "file_id": "00006",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59575805636246,
+            22.366569747212304,
+            -1.623922
+        ],
+        "hidden": false,
+        "id": 6,
+        "location": [
+            113.59575805636246,
+            22.366569747212304,
+            -0.12392299999999998
+        ],
+        "orientation": [
+            0.9259628446096352,
+            -0.0017751731754019223,
+            0.0040292942594665728,
+            0.3775889616370673
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -3.408833,
+            1.062936,
+            -1.480148
+        ],
+        "dataset_floor_orientation": [
+            0.74101317,
+            -0.0036720007,
+            -0.0033500006,
+            0.6714721300000001
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -3.408833,
+            1.062936,
+            0.019851
+        ],
+        "dataset_orientation": [
+            0.74101317,
+            -0.0036720007,
+            -0.0033500006,
+            0.6714721300000001
+        ],
+        "file_id": "00002",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59580712883882,
+            22.36660810794898,
+            -1.780148
+        ],
+        "hidden": false,
+        "id": 2,
+        "location": [
+            113.59580712883882,
+            22.36660810794898,
+            -0.280149
+        ],
+        "orientation": [
+            -0.9217260966600163,
+            0.004587986285713982,
+            -0.0019121914334726542,
+            0.3878096139107564
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -3.412772,
+            -1.330908,
+            -1.490305
+        ],
+        "dataset_floor_orientation": [
+            0.9995790000000001,
+            -0.0043220003,
+            0.002266000000000001,
+            -0.02859999999999996
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -3.412772,
+            -1.330908,
+            0.009694
+        ],
+        "dataset_orientation": [
+            0.9995790000000001,
+            -0.0043220003,
+            0.002266000000000001,
+            -0.02859999999999996
+        ],
+        "file_id": "00003",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59578934869998,
+            22.366622030804757,
+            -1.790305
+        ],
+        "hidden": false,
+        "id": 3,
+        "location": [
+            113.59578934869998,
+            22.366622030804757,
+            -0.290306
+        ],
+        "orientation": [
+            -0.3965199696549162,
+            -0.00022713713383227044,
+            -0.004874715471256385,
+            0.9180131258440774
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            3.259302,
+            2.420234,
+            -1.308533
+        ],
+        "dataset_floor_orientation": [
+            -0.003981001699999986,
+            -0.004588002,
+            -0.00058300025,
+            0.9999814
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            3.259302,
+            2.420234,
+            0.191466
+        ],
+        "dataset_orientation": [
+            -0.003981001699999986,
+            -0.004588002,
+            -0.00058300025,
+            0.9999814
+        ],
+        "file_id": "00007",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.5957756083234,
+            22.366554100379628,
+            -1.608533
+        ],
+        "hidden": true,
+        "id": 7,
+        "location": [
+            113.5957756083234,
+            22.366554100379628,
+            -0.10853399999999999
+        ],
+        "orientation": [
+            0.904608459607412,
+            -0.0024673510570067615,
+            0.003911755373666604,
+            0.4262184242324293
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            5.347448,
+            0.25694,
+            -1.31048
+        ],
+        "dataset_floor_orientation": [
+            0.99965864,
+            0.0048590032,
+            -0.0026340017,
+            0.025535016999999994
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            5.347448,
+            0.25694,
+            0.189519
+        ],
+        "dataset_orientation": [
+            0.99965864,
+            0.0048590032,
+            -0.0026340017,
+            0.025535016999999994
+        ],
+        "file_id": "00009",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59574648629548,
+            22.366552212323197,
+            -1.6104800000000002
+        ],
+        "hidden": false,
+        "id": 9,
+        "location": [
+            113.59574648629548,
+            22.366552212323197,
+            -0.110481
+        ],
+        "orientation": [
+            -0.4456165950749855,
+            0.0003337127410200382,
+            0.005516929638989736,
+            0.8952068488995667
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -5.355366,
+            0.74632,
+            -1.475088
+        ],
+        "dataset_floor_orientation": [
+            -0.036995,
+            -0.0028360002,
+            0.0008380000399999998,
+            0.9993111
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -5.355366,
+            0.74632,
+            0.024911
+        ],
+        "dataset_orientation": [
+            -0.036995,
+            -0.0028360002,
+            0.0008380000399999998,
+            0.9993111
+        ],
+        "file_id": "00001",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59581692222116,
+            22.366623411543466,
+            -1.775088
+        ],
+        "hidden": false,
+        "id": 1,
+        "location": [
+            113.59581692222116,
+            22.366623411543466,
+            -0.275089
+        ],
+        "orientation": [
+            0.8900486349700012,
+            -0.0004390594872982186,
+            0.002924443159972475,
+            0.45585598849517908
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            -5.307046,
+            -1.29971,
+            -1.491419
+        ],
+        "dataset_floor_orientation": [
+            0.0,
+            0.0,
+            0.0,
+            1.0
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            -5.307046,
+            -1.29971,
+            0.00858
+        ],
+        "dataset_orientation": [
+            0.0,
+            0.0,
+            0.0,
+            1.0
+        ],
+        "file_id": "00000",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59580140287446,
+            22.366634953918266,
+            -1.791419
+        ],
+        "hidden": false,
+        "id": 0,
+        "location": [
+            113.59580140287446,
+            22.366634953918266,
+            -0.29142
+        ],
+        "orientation": [
+            0.9063077864888041,
+            0.0,
+            0.0,
+            0.42261826291555895
+        ],
+        "site_model_entity_id": 12
+    },
+    {
+        "camera_head_id": 12,
+        "dataset_floor_location": [
+            5.281028,
+            2.490614,
+            -1.299336
+        ],
+        "dataset_floor_orientation": [
+            0.7244404,
+            0.0021140011999999997,
+            -0.0019630012,
+            0.6893314
+        ],
+        "dataset_id": 1,
+        "dataset_location": [
+            5.281028,
+            2.490614,
+            0.200663
+        ],
+        "dataset_orientation": [
+            0.7244404,
+            0.0021140011999999997,
+            -0.0019630012,
+            0.6893314
+        ],
+        "file_id": "00008",
+        "file_path": "data/chunk1",
+        "floor_location": [
+            113.59576351424079,
+            22.3665397059442,
+            -1.599336
+        ],
+        "hidden": false,
+        "id": 8,
+        "location": [
+            113.59576351424079,
+            22.3665397059442,
+            -0.09933699999999998
+        ],
+        "orientation": [
+            -0.9309081613098724,
+            0.0008856677551485972,
+            0.002745535898144257,
+            0.3652419373948358
+        ],
+        "site_model_entity_id": 12
+    }
+]

data/t-vZkqRV8/cloud.js

@@ -0,0 +1,30 @@
+{
+    "version": "1.8",
+    "octreeDir": "data",
+    "projection": "",
+    "points": 3029543,
+    "boundingBox": {
+        "lx": -11.039,
+        "ly": -12.589,
+        "lz": -2.11,
+        "ux": 10.306,
+        "uy": 8.756,
+        "uz": 19.235
+    },
+    "tightBoundingBox": {
+        "lx": -11.039,
+        "ly": -12.589,
+        "lz": -2.11,
+        "ux": 7.519,
+        "uy": 8.756,
+        "uz": 2.587
+    },
+    "pointAttributes": [
+        "POSITION_CARTESIAN",
+        "COLOR_PACKED",
+        "NORMAL_OCT16"
+    ],
+    "spacing": 0.18485312,
+    "scale": 0.001,
+    "hierarchyStepSize": 5
+}

docs/RELEASE.MD

@@ -0,0 +1,5 @@
+
+# On Release
+
+* Update version in Potree.js
+

examples/360-test.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../../libs/spectrum/spectrum.js"></script>
+	<script src="../../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../../libs/other/BinaryHeap.js"></script>
+	<script src="../../libs/tween/tween.min.js"></script>
+	<script src="../../libs/d3/d3.js"></script>
+	<script src="../../libs/proj4/proj4.js"></script>
+	<script src="../../libs/openlayers3/ol.js"></script>
+	<script src="../../libs/i18next/i18next.js"></script>
+	<script src="../../libs/jstree/jstree.js"></script>
+	<script src="../../build/potree/potree.js"></script>
+	<script src="../../libs/plasio/js/laslaz.js"></script>
+	
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../../build/potree/resources/images/background.jpg');">
+		
+		</div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(2_000_000);
+		viewer.loadSettingsFromURL();
+		viewer.setDescription(`Mobile LIDAR with 360 degree image overlays. 
+		Click on a sphere to enter 360 view. Click "unfocus" to leave 360 view. <br>
+		Point cloud courtesy of <a href="http://www.helimap.com/">Helimap System SA</a>. Images were downsized for this online demo; Original size is 8000x400.`);
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		// Load and add point cloud to scene
+        var path = "http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/360/MLS_drive1/cloud.js"
+        //var path = 'https://laser.4dkankan.com/data/t-SNZRfWt/data/chunk1/webcloud/cloud.js' 
+		Potree.loadPointCloud(path, "MLS", e => {
+			let scene = viewer.scene;
+			let pointcloud = e.pointcloud;
+			
+			let material = pointcloud.material;
+			material.size = 0.5;
+			material.minSize = 2.0;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			material.shape = Potree.PointShape.SQUARE;
+			material.activeAttributeName = "rgba";
+			
+			scene.addPointCloud(pointcloud);
+
+			viewer.scene.view.setView(
+				[2652381.103, 1249049.447, 411.636],
+				[2652364.407, 1249077.205, 399.696],
+			);
+            //viewer.scene.view.setView(
+            //    pointcloud.position.clone().add(new THREE.Vector3(0,10,3)),
+            //    pointcloud.position.toArray()
+            //)
+			run(pointcloud.boundingBox, pointcloud.position);
+		});
+
+		async function run(boundingBox, position){
+            proj4.defs("EPSG:31468", "+proj=tmerc +lat_0=0 +lon_0=12 +k=1 +x_0=4500000 +y_0=0 +ellps=bessel +towgs84=598.1,73.7,418.2,0.202,0.045,-2.455,6.7 +units=m +no_defs");
+   
+			//proj4.defs("WGS84", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs");
+			proj4.defs("pointcloud", viewer.getProjection());
+			let transform = proj4("WGS84", "pointcloud");
+
+			let params = {
+				transform: transform,
+                boundingBox, 
+                position
+			};
+
+			// this file contains coordinates, orientation and filenames of the images:
+			// http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/360/Drive2_selection/coordinates.txt
+			Potree.Images360Loader.load("http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/360/Drive2_selection", viewer, params).then( images => {
+				viewer.scene.add360Images(images);
+			});
+
+			viewer.mapView.showSources(false);
+		}
+
+
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/360.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../../libs/spectrum/spectrum.js"></script>
+	<script src="../../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../../libs/other/BinaryHeap.js"></script>
+	<script src="../../libs/tween/tween.min.js"></script>
+	<script src="../../libs/d3/d3.js"></script>
+	<script src="../../libs/proj4/proj4.js"></script>
+	<script src="../../libs/openlayers3/ol.js"></script>
+	<script src="../../libs/i18next/i18next.js"></script>
+	<script src="../../libs/jstree/jstree.js"></script>
+	<script src="../../build/potree/potree.js"></script>
+	<script src="../../libs/plasio/js/laslaz.js"></script>
+	
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../../build/potree/resources/images/background.jpg');">
+		
+		</div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(2_000_000);
+		viewer.loadSettingsFromURL();
+		viewer.setDescription(`Mobile LIDAR with 360 degree image overlays. 
+		Click on a sphere to enter 360 view. Click "unfocus" to leave 360 view. <br>
+		Point cloud courtesy of <a href="http://www.helimap.com/">Helimap System SA</a>. Images were downsized for this online demo; Original size is 8000x400.`);
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		// Load and add point cloud to scene
+		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/360/MLS_drive1/cloud.js", "MLS", e => {
+			let scene = viewer.scene;
+			let pointcloud = e.pointcloud;
+			
+			let material = pointcloud.material;
+			material.size = 0.5;
+			material.minSize = 2.0;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			material.shape = Potree.PointShape.SQUARE;
+			material.activeAttributeName = "rgba";
+			
+			scene.addPointCloud(pointcloud);
+
+			viewer.scene.view.setView(
+				[2652381.103, 1249049.447, 411.636],
+				[2652364.407, 1249077.205, 399.696],
+			);
+
+			run();
+		});
+
+		async function run(){
+
+			proj4.defs("WGS84", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs");
+			proj4.defs("pointcloud", viewer.getProjection());
+			let transform = proj4("WGS84", "pointcloud");
+
+			let params = {
+				transform: transform
+			};
+
+			// this file contains coordinates, orientation and filenames of the images:
+			// http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/360/Drive2_selection/coordinates.txt
+			Potree.Images360Loader.load("http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/360/Drive2_selection", viewer, params).then( images => {
+				viewer.scene.add360Images(images);
+			});
+
+			viewer.mapView.showSources(false);
+		}
+
+
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/4dkk.html

@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../../libs/spectrum/spectrum.js"></script>
+	<script src="../../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../../libs/other/BinaryHeap.js"></script>
+	<script src="../../libs/tween/tween.min.js"></script>
+	<script src="../../libs/d3/d3.js"></script>
+	<script src="../../libs/proj4/proj4.js"></script> 
+	
+    
+	<script src="../../libs/openlayers3/ol.js"></script>
+	<script src="../../libs/i18next/i18next.js"></script>
+	<script src="../../libs/jstree/jstree.js"></script>
+	<script src="../../build/potree/potree.js"></script>
+	<script src="../../libs/plasio/js/laslaz.js"></script>
+	
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../../build/potree/resources/images/background.jpg');">
+		
+		</div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+    import {Alignment} from "../src/modules/datasetAlignment/Alignment.js";
+    import {Utils} from "../src/utils.js"
+   
+    
+    
+    
+        var number = window.location.href.substring(window.location.href.indexOf("=") + 1);
+        if (number.indexOf("&") != -1) {
+            number = number.substring(0, number.indexOf("&"));
+        }
+        if (number.indexOf("#") != -1) {
+            number = number.substring(0, number.indexOf("#"));
+        }
+        
+        Potree.settings.number = number || 't-o5YMR13'// 't-iksBApb'
+         
+        
+        
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(2_000_000);
+		viewer.loadSettingsFromURL();
+		 
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+			viewer.toggleSidebar();
+		});
+
+        
+        var datasetPath = `https://testlaser.4dkankan.com/indoor/${number}/api/datasets`
+        Potree.loadDatasets(datasetPath,  (data)=>{
+         
+            var datasetLength = data.length 
+            var loaded = 0
+            var loadDone = function(){
+                 //var url =   "../data/"+number+"/filter.json"
+                var url = `https://testlaser.4dkankan.com/indoor/${number}/api/images/filter?hidden=false&lat=22.3666054305652&lon=113.59566752095002&radius=200000&site_model_entity=`
+                
+                
+                var {boundSize, center} = Utils.computePointcloudsBound(viewer.scene.pointclouds)
+                
+                viewer.bound = {boundSize, center}
+                
+                Potree.Images360Loader.load2(url, viewer, {boundSize, center}).then( images => {
+                    viewer.scene.add360Images(images);
+                });
+                
+                 
+                viewer.scene.view.setView(//position, target
+                    center.clone().add(new THREE.Vector3(10,10,10)), 
+                    center
+                )
+            
+            }
+            
+            
+            data.forEach((dataset,index)=>{
+                var name = dataset.name 
+                var locationLonLat = dataset.location.slice(0,2)
+                
+                
+                if(!viewer.transform){
+                
+                    proj4.defs("NAVVIS:TMERC", "+proj=tmerc +ellps=WGS84 +lon_0=" + locationLonLat[0].toPrecision(15) + " +lat_0=" + locationLonLat[1].toPrecision(15));
+                    proj4.defs("WGS84", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs");
+                    //proj4.defs("pointcloud", viewer.getProjection()); //不用从cloud里拿了
+                
+                    let transform1 = proj4("WGS84", "NAVVIS:TMERC"); //这个ok  TMERC是展开的平面投影
+                    let transform2 = proj4("+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs;");
+                    viewer.transform = {
+                        lonlatToLocal : transform1,
+                        lonlatTo4550 : transform2       // 转大地坐标EPSG:4550  
+                    } 
+                    // proj4(fromProjection, toProjection, coordinates)
+                    //let transform = proj4("WGS84", "pointcloud");
+                 
+                    
+                }
+            
+            
+                
+                
+                
+                
+                var cloudPath = 'https://laser.4dkankan.com/data/'+number+'/data/'+ name +'/webcloud/cloud.js' 
+                Potree.loadPointCloud(cloudPath, name, e => {
+                    let scene = viewer.scene;
+                    let pointcloud = e.pointcloud;
+                    
+                    let material = pointcloud.material;
+                    material.size =  0.7;
+                    material.minSize =  0.1//2.0;
+                    material.pointSizeType = Potree.PointSizeType.ATTENUATED//Potree.PointSizeType.ADAPTIVE;//FIXED
+                    material.shape = Potree.PointShape.SQUARE;
+                    //material.activeAttributeName = "rgba";
+                    
+                    /*
+                    material.activeAttributeName = "color";
+                    material.color.set(dataset.color)
+                    material.opacity = 0.05
+                    material.size = 0.2;
+                    material.useEDL = false
+                    */
+                    scene.addPointCloud(pointcloud);
+                     
+                    pointcloud.dataset_id = dataset.id;//供漫游点找到属于的dataset点云
+                    pointcloud.panos = [] 
+                    
+                    //旋转中心
+                    //var center = new THREE.Vector3().addVectors(pointcloud.position, pointcloud.boundingBox.getCenter())  
+                     
+                    //偏移
+                    //当只有一个dataset时，无论如何transform 点云和漫游点都能对应上。
+                    var location = viewer.transform.lonlatToLocal.forward(locationLonLat)  //transform.inverse()
+                    //初始化位置 
+                    pointcloud.matrixAutoUpdate = false   //最好禁止updateMatrix  直接使用matrixWorld
+                    pointcloud.orientationUser = 0  
+                    pointcloud.translateUser = new THREE.Vector3;
+                    
+                    viewer.sidebar.addAlignmentButton(pointcloud) 
+                    Alignment.rotate(pointcloud, null, dataset.orientation)  
+                    Alignment.translate(pointcloud, new THREE.Vector3(location[0], location[1], dataset.location[2])) 
+                    
+                    pointcloud.updateMatrixWorld()
+                    
+                    
+                    console.log(`%c点云${name}旋转值:${pointcloud.orientationUser}, 位置${pointcloud.translateUser.toArray()}`,"color:#13f;font-size:17px"   )
+                    
+                    
+                    //-------------------
+                     
+                    viewer.mapView.showSources(false);
+ 
+                    loaded ++;
+                    if(loaded == datasetLength)loadDone()
+                });
+                    
+            })
+            
+            
+        })
+
+		 
+        
+                
+
+          
+        window.testTransform = function(locationLonLat, location1, location2){
+            proj4.defs("NAVVIS:test", "+proj=tmerc +ellps=WGS84 +lon_0=" + locationLonLat[0].toPrecision(15) + " +lat_0=" + locationLonLat[1].toPrecision(15));
+            
+            let transform = proj4("WGS84", "NAVVIS:test"); //这个ok  navvis里也是这两种转换 见proj4Factory
+            if(location1){//经纬度
+                return transform.forward(location1) 
+            }else{
+                return transform.inverse(location2) 
+            }            
+            
+        }
+
+		/*
+        数据集校准 平移后
+        单个数据集：
+        
+        点云的本地位置是一样的 。说明：单个数据集时点云最终平移量为0，同理漫游点也是 
+        多个数据集时，参照为第一个dataset，见GeoTransformationService.setOffsetFromGlobal。所以第一个数据集的位置为000，其他的不是。因此本地坐标是不固定的，只有指定了参考数据集才能确定，如果去掉第一个数据集下一次显示的坐标就不同了，但是不影响相对位置所以看起来一样。
+        （注意：navvis平移后要刷新location才生效。）
+        
+        
+        var view = window.IV.getMainView() 
+        view.ImageService.images.forEach(e=>console.log(e.id + ": "+e.location.toArray()))
+        
+        
+        images360.panos.forEach(e=>console.log(e.id + ": "+e.position.toArray()))
+        */        
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/animation_paths.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+		import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.setMinNodeSize(0);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription("");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		let sphere = new THREE.Mesh(
+			new THREE.SphereGeometry(0.5, 32, 32),
+			new THREE.MeshNormalMaterial()
+		);
+		viewer.scene.scene.add(sphere);
+
+		// Sigeom
+		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/archpro/heidentor/cloud.js", "Heidentor", function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+			e.pointcloud.position.z = 0;
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			material.uniforms.uShadowColor.value = [0.0, 0, 0];
+			
+			viewer.scene.view.position.set(-31.007, 18.245, 20.695);
+			viewer.scene.view.lookAt(-5.288, 2.126, 6.048);
+
+			{ // create Animation Path & make light follow it
+
+				let path = [
+					[-8.60, 13.67, 7.08],
+					[-12.21, 4.01, 7.45],
+					[-0.67, 4.55, 5.00],
+					[5.70, -4.38, 11.13],
+					[-7.75, -10.75, 14.78],
+					[-23.75, -4.88, 8.68],
+					[-21.78, 11.73, 11.22],
+				].map(v => new THREE.Vector3(...v));
+
+				let animationPath = new Potree.AnimationPath(path);
+				animationPath.closed = true;
+
+				{ // render the path
+					let geometry = animationPath.getGeometry();
+					let material = new THREE.LineBasicMaterial();
+					let line = new THREE.Line(geometry, material, {closed: animationPath.closed});
+					viewer.scene.scene.add(line);
+				}
+
+				{ // render the control points of the path
+					for(let pos of path){
+						let sg = new THREE.SphereGeometry(0.2, 32, 32);
+						let sm = new THREE.MeshBasicMaterial({color: 0xff0000});
+						let s = new THREE.Mesh(sg, sm); 
+						s.position.copy(pos);
+						viewer.scene.scene.add(s);
+					}
+				}
+
+				{ // Animate from beginning to end with a speed of 10 meters per second
+					let start = 0;
+					let end = Infinity;
+					let speed = 30; 
+					let animation = animationPath.animate(start, end, speed, t => {
+						animation.repeat = true;
+
+						// t is a value between 0 and 1.
+						// use getPoint(t) to map from t to the position on the animation path
+						let point = animation.getPoint(t);
+						sphere.position.copy(point);
+					});
+					window.animation = animation;
+				}
+
+				window.animationPath = animationPath;
+			}
+
+			
+		});
+
+		function pause(){
+			animation.pause();
+			//light.disableShadowUpdates = true;
+		}
+
+		function resume(){
+			animation.resume();
+			//light.disableShadowUpdates = false;
+		}
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/annotation_hierarchy.html

@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+	<link rel="stylesheet" type="text/css" href="../libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	<script src="../libs/Cesium/Cesium.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');">
+			<div id="cesiumContainer" style="position: absolute; width: 100%; height: 100%; background-color:green"></div>
+		</div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+		import * as THREE from "../libs/three.js/build/three.module.js";
+
+		window.cesiumViewer = new Cesium.Viewer('cesiumContainer', {
+			useDefaultRenderLoop: false,
+			animation: false,
+			baseLayerPicker : false,
+			fullscreenButton: false, 
+			geocoder: false,
+			homeButton: false,
+			infoBox: false,
+			sceneModePicker: false,
+			selectionIndicator: false,
+			timeline: false,
+			navigationHelpButton: false,
+			imageryProvider : Cesium.createOpenStreetMapImageryProvider({url : 'https://a.tile.openstreetmap.org/'}),
+			terrainShadows: Cesium.ShadowMode.DISABLED,
+		});
+
+		let cp = new Cesium.Cartesian3(4303414.154026048, 552161.235598733, 4660771.704035539);
+		cesiumViewer.camera.setView({
+			destination : cp,
+			orientation: {
+				heading : 10, 
+				pitch : -Cesium.Math.PI_OVER_TWO * 0.5, 
+				roll : 0.0 
+			}
+		});
+
+		window.potreeViewer = new Potree.Viewer(document.getElementById("potree_render_area"), {
+			useDefaultRenderLoop: false
+		});
+	
+		potreeViewer.setEDLEnabled(true);
+		potreeViewer.setFOV(60);
+		potreeViewer.setPointBudget(3_000_000);
+		potreeViewer.setBackground(null);
+		
+		potreeViewer.setDescription("");
+		
+		potreeViewer.loadGUI(() => {
+			potreeViewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+			$("#menu_tools").next().show();
+			$("#menu_scene").next().show();
+			potreeViewer.toggleSidebar();
+		});
+		
+		// CA13
+		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/opentopography/CA13_1.4/cloud.js", "CA13", function(e){
+			let pointcloud = e.pointcloud;
+			let scene = potreeViewer.scene;
+			let material = pointcloud.material;
+
+			scene.addPointCloud(pointcloud);
+
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+
+			potreeViewer.scene.view.setView(
+				[675036.45, 3850315.78, 65076.70],
+				[692869.03, 3925774.14, 1581.51],
+			);
+
+			let pointcloudProjection = e.pointcloud.projection;
+			let mapProjection = proj4.defs("WGS84");
+
+			window.toMap = proj4(pointcloudProjection, mapProjection);
+			window.toScene = proj4(mapProjection, pointcloudProjection);
+
+			{ // ANNOTATIONS
+				let aRoot = potreeViewer.scene.annotations;
+
+				let aCA13 = new Potree.Annotation({
+					title: "CA13",
+					position: [675036.45, 3850315.78, 65076.70],
+					cameraPosition: [675036.45, 3850315.78, 65076.70],
+					cameraTarget: [692869.03, 3925774.14, 1581.51],
+				});
+				aRoot.add(aCA13);
+
+				let aSanSimeon = new Potree.Annotation({
+					title: "San Simeon",
+					position: [664147.50, 3946008.73, 16.30],
+					cameraPosition: [664941.80, 3943568.06, 1925.30],
+					cameraTarget: [664147.50, 3946008.73, 16.30],
+				});
+				aCA13.add(aSanSimeon);
+
+				let aHearstCastle = new Potree.Annotation({
+					title: "Hearst Castle",
+					position: [665744.56, 3950567.52, 500.48],
+					cameraPosition: [665692.66, 3950521.65, 542.02],
+					cameraTarget: [665744.56, 3950567.52, 500.48],
+				});
+				aCA13.add(aHearstCastle);
+
+				let aMorroBay = new Potree.Annotation({
+					title: "Morro Bay",
+					position: [695483.33, 3916430.09, 25.75],
+					cameraPosition: [694114.65, 3911176.26, 3402.33],
+					cameraTarget: [695483.33, 3916430.09, 25.75],
+				});
+				aCA13.add(aMorroBay);
+
+				let aMorroRock = new Potree.Annotation({
+					title: "Morro Rock",
+					position: [693729.66, 3916085.19, 90.35],
+					cameraPosition: [693512.77, 3915375.61, 342.33],
+					cameraTarget: [693729.66, 3916085.19, 90.35],
+				});
+				aMorroBay.add(aMorroRock);
+
+				let aMorroBayMutualWaterCo = new Potree.Annotation({
+					title: "Morro Bay Mutual Water Co",
+					position: [694699.45, 3916425.75, 39.78],
+					cameraPosition: [694377.64, 3916289.32, 218.40],
+					cameraTarget: [694699.45, 3916425.75, 39.78],
+				});
+				aMorroBay.add(aMorroBayMutualWaterCo);
+
+				let aLilaKeiserPark = new Potree.Annotation({
+					title: "Lila Keiser Park",
+					position: [694674.99, 3917070.49, 10.86],
+					cameraPosition: [694452.59, 3916845.14, 298.64],
+					cameraTarget: [694674.99, 3917070.49, 10.86],
+				});
+				aMorroBay.add(aLilaKeiserPark);
+
+				let aSanLuisObispo = new Potree.Annotation({
+					title: "San Luis Obispo",
+					position: [712573.39, 3907588.33, 146.44],
+					cameraPosition: [711158.29, 3907019.82, 1335.89],
+					cameraTarget: [712573.39, 3907588.33, 146.44],
+				});
+				aCA13.add(aSanLuisObispo);
+
+				let aLopezHill = new Potree.Annotation({
+					title: "Lopez Hill",
+					position: [728635.63, 3895761.56, 456.33],
+					cameraPosition: [728277.24, 3895282.29, 821.51],
+					cameraTarget: [728635.63, 3895761.56, 456.33],
+				});
+				aCA13.add(aLopezHill);
+
+				let aWhaleRockReservoir = new Potree.Annotation({
+					title: "Whale Rock Reservoir",
+					position: [692845.46, 3925528.53, 140.91],
+					cameraPosition: [693073.32, 3922354.02, 2154.17],
+					cameraTarget: [692845.46, 3925528.53, 140.91],
+				});
+				aCA13.add(aWhaleRockReservoir);
+
+			}
+
+			{ // TREE RETURNS POI - ANNOTATION & VOLUME
+				let aRoot = scene.annotations;
+
+				let elTitle = $(`
+				<span>
+					Tree Returns:
+					<img name="action_return_number" src="${Potree.resourcePath}/icons/return_number.svg" class="annotation-action-icon"/>
+					<img name="action_rgb" src="${Potree.resourcePath}/icons/rgb.png" class="annotation-action-icon"/>
+				</span>`);
+
+				elTitle.find("img[name=action_return_number]").click( () => {
+					event.stopPropagation();
+					material.activeAttributeName = "return_number";
+					material.pointSizeType = Potree.PointSizeType.FIXED;
+					material.size = 5;
+					potreeViewer.setClipTask(Potree.ClipTask.SHOW_INSIDE);
+				});
+				
+				elTitle.find("img[name=action_rgb]").click( () => {
+					event.stopPropagation();
+					material.activeAttributeName = "rgba";
+					material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+					material.size = 1;
+					potreeViewer.setClipTask(Potree.ClipTask.HIGHLIGHT);
+				});
+
+				elTitle.toString = () => "Tree Returns";
+				
+
+				let aTreeReturns = new Potree.Annotation({
+					title: elTitle,
+					position: [675756.75, 3937590.94, 80.21],
+					cameraPosition: [675715.78, 3937700.36, 115.95],
+					cameraTarget: [675756.75, 3937590.94, 80.21],
+				});
+				aRoot.add(aTreeReturns);
+				aTreeReturns.domElement.find(".annotation-action-icon:first").css("filter", "invert(1)");
+
+				let volume = new Potree.BoxVolume();
+				volume.position.set(675755.4039368022, 3937586.911614576, 85);
+				volume.scale.set(119.87189835418388, 68.3925257233834, 51.757483718373265);
+				volume.rotation.set(0, 0, 0.8819755090987993, "XYZ");
+				volume.clip = true;
+				volume.visible = false;
+				volume.name = "Trees";
+				scene.addVolume(volume);
+			}
+
+		});
+
+
+
+		function loop(timestamp){
+			requestAnimationFrame(loop);
+
+			potreeViewer.update(potreeViewer.clock.getDelta(), timestamp);
+
+			potreeViewer.render();
+
+			if(window.toMap !== undefined){
+
+				{
+					let camera = potreeViewer.scene.getActiveCamera();
+
+					let pPos = new THREE.Vector3(0, 0, 0).applyMatrix4(camera.matrixWorld);
+					let pRight = new THREE.Vector3(600, 0, 0).applyMatrix4(camera.matrixWorld);
+					let pUp = new THREE.Vector3(0, 600, 0).applyMatrix4(camera.matrixWorld);
+					let pTarget = potreeViewer.scene.view.getPivot();
+
+					let toCes = (pos) => {
+						let xy = [pos.x, pos.y];
+						let height = pos.z;
+						let deg = toMap.forward(xy);
+						let cPos = Cesium.Cartesian3.fromDegrees(...deg, height);
+
+						return cPos;
+					};
+
+					let cPos = toCes(pPos);
+					let cUpTarget = toCes(pUp);
+					let cTarget = toCes(pTarget);
+
+					let cDir = Cesium.Cartesian3.subtract(cTarget, cPos, new Cesium.Cartesian3());
+					let cUp = Cesium.Cartesian3.subtract(cUpTarget, cPos, new Cesium.Cartesian3());
+
+					cDir = Cesium.Cartesian3.normalize(cDir, new Cesium.Cartesian3());
+					cUp = Cesium.Cartesian3.normalize(cUp, new Cesium.Cartesian3());
+
+					cesiumViewer.camera.setView({
+						destination : cPos,
+						orientation : {
+							direction : cDir,
+							up : cUp
+						}
+					});
+					
+				}
+
+				let aspect = potreeViewer.scene.getActiveCamera().aspect;
+				if(aspect < 1){
+					let fovy = Math.PI * (potreeViewer.scene.getActiveCamera().fov / 180);
+					cesiumViewer.camera.frustum.fov = fovy;
+				}else{
+					let fovy = Math.PI * (potreeViewer.scene.getActiveCamera().fov / 180);
+					let fovx = Math.atan(Math.tan(0.5 * fovy) * aspect) * 2
+					cesiumViewer.camera.frustum.fov = fovx;
+				}
+				
+			}
+
+			cesiumViewer.render();
+		}
+
+		requestAnimationFrame(loop);
+
+
+	</script>
+	
+	
+  </body>
+</html>

examples/annotations.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+		import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.loadSettingsFromURL();
+		viewer.setBackground("skybox");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_scene").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		viewer.setDescription(`
+		This example shows various ways to use annotations.
+		They can be used to bookmark and describe locations, 
+		move the camera to a predefined point of view on click,
+		and to provide programmable buttons at specific locations.
+		`);
+		
+		let sceneSG = new Potree.Scene();
+		let sceneLion = new Potree.Scene();
+		
+		viewer.setScene(sceneSG);
+
+		// Sorvilier point cloud in scene 1
+		Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "sigeom.sa", function(e){
+			sceneSG.addPointCloud(e.pointcloud);
+			sceneSG.view.position.set(590030, 231767, 1007);
+			sceneSG.view.lookAt(new THREE.Vector3(589844, 231376, 710));
+			
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+
+			{
+				{
+					let elTitle = $(`
+						<span>
+							About Annotations
+							<img src="${Potree.resourcePath}/icons/goto.svg" 
+								name="action_set_scene"
+								class="annotation-action-icon" 
+								style="filter: invert(1);" />
+						</span>
+					`);
+					elTitle.find("img[name=action_set_scene]").click( (event) => {
+						event.stopPropagation();
+						viewer.setScene(sceneLion); 
+					});
+					elTitle.toString = () => "About Annotations";
+
+					let aAbout1 = new Potree.Annotation({
+						position: [590043.63, 231490.79, 740.78],
+						title: elTitle,
+						cameraPosition: [590105.53, 231541.63, 782.05],
+						cameraTarget: [590043.63, 231488.79, 740.78],
+						description: `<ul><li>Click on the annotation label to move a predefined view.</li> 
+						<li>Click on the icon to execute the specified action.</li>
+						In this case, the action will bring you to another scene and point cloud.</ul>`
+					});
+
+					sceneSG.annotations.add(aAbout1);
+				}
+
+				{
+					let aAbout2 = new Potree.Annotation({
+						position: [589621, 231437, 784],
+						"cameraPosition": [589585.81, 231463.63, 804.00],
+						"cameraTarget": [589625.86, 231439, 775.38],
+						"title": "About Annotations 2",
+						"description": `
+						Suitable annotation positions and views can be obtained by 
+						looking up the current camera position and target in the "Scene" panel, 
+						or by evaluating following lines in your browser's developer console:<br><br>
+						<code>viewer.scene.view.position</code><br>
+						<code>viewer.scene.view.getPivot()</code><br>
+						`
+					});
+					sceneSG.annotations.add(aAbout2);
+				}
+
+				{ // Annotation with action icons
+
+					// Create title element with jquery
+					let elTitle = $(`
+						<span>
+							<img name="action_elevation" src="${Potree.resourcePath}/icons/profile.svg" class="annotation-action-icon"/>
+							<img name="action_rgb" src="${Potree.resourcePath}/icons/rgb.svg" class="annotation-action-icon"/>
+						</span>`);
+					elTitle.find("img[name=action_elevation]").click( () => {
+						viewer.scene.pointclouds.forEach( pc => pc.material.activeAttributeName = "elevation" );
+					});
+					elTitle.find("img[name=action_rgb]").click( () => {
+						viewer.scene.pointclouds.forEach( pc => pc.material.activeAttributeName = "rgba" );
+					});
+
+					// Give the annotation a meaningful string representation for the sidebar
+					elTitle.toString = () => "Elevation / RGB Actions";
+
+					// Same as with other annotations, except title is a jquery object this time.
+					let aActions = new Potree.Annotation({
+						position: [590012.986, 231273.294, 787.162],
+						title: elTitle
+					});
+					sceneSG.annotations.add(aActions);
+				}
+
+				{ // Annotation with action icons
+
+					// Create title element with jquery
+					let schemes = [
+						{name: "SPECTRAL", icon: `${Potree.resourcePath}/icons/gradients_spectral.png`},
+						{name: "YELLOW_GREEN", icon: `${Potree.resourcePath}/icons/gradients_yellow_green.png`},
+						{name: "PLASMA", icon: `${Potree.resourcePath}/icons/gradients_plasma.png`},
+						{name: "GRAYSCALE", icon: `${Potree.resourcePath}/icons/gradients_grayscale.png`},
+						{name: "RAINBOW", icon: `${Potree.resourcePath}/icons/gradients_rainbow.png`},
+					];
+
+					let elTitle = $(`<span>Gradient Schemes:</span>`);
+					for(let scheme of schemes){
+						let button = $(`<img src="${scheme.icon}" class="annotation-action-icon" style="width: 2em; height: auto;"/>`);
+						button.click( () => {
+							for(let pointcloud of viewer.scene.pointclouds){
+								pointcloud.material.activeAttributeName = "elevation";
+								pointcloud.material.gradient = Potree.Gradients[scheme.name];
+							}
+						});
+						elTitle.append(button);
+					}
+
+					// Give the annotation a meaningful string representation for the sidebar
+					elTitle.toString = () => "Gradient Color Selection";
+
+					// Same as with other annotations, except title is a jquery object this time.
+					let aActions = new Potree.Annotation({
+						position: [589577.396, 231267.514, 807.655],
+						title: elTitle,
+					});
+					sceneSG.annotations.add(aActions);
+				}
+				
+				{
+					let aTrees = new Potree.Annotation({
+						position: [589850.15, 231300.10, 770.94],
+						title: "Trees",
+						description: `Point cloud of a small section in Sorvilier, Switzerland. <br>
+							Courtesy of sigeom.sa`,
+					});
+					aTrees.domElement.off("mouseenter");
+					aTrees.domElement.off("mouseleave");
+					aTrees.addEventListener("click", () => {
+						aTrees.setHighlighted(!aTrees.isHighlighted);
+					});
+					sceneSG.annotations.add(aTrees);
+				}
+			}
+		});
+		
+		// Lion point cloud in scene 2
+		Potree.loadPointCloud("../pointclouds/lion_takanawa/cloud.js", "lion", function(e){
+			sceneLion.addPointCloud(e.pointcloud);
+			sceneLion.view.position.set(4.15, -6.12, 8.54);
+			sceneLion.view.lookAt(new THREE.Vector3(0, -0.098, 4.23));
+			e.pointcloud.material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			
+			sceneLion.addAnnotation([0.72, -1, 8], {
+				"title": "Chinese Guardian Lion",
+				"actions": [{
+					"icon": Potree.resourcePath + "/icons/goto.svg",
+					"onclick": function(){
+						viewer.setScene(sceneSG);
+					}
+				}]
+			});
+		});
+
+		
+		
+		
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/arena4d.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+
+	<script type="module">
+
+		import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(2_000_000);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription("");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_tools").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		//Potree.loadPointCloud("http://arena4d.uksouth.cloudapp.azure.com:8080/0227c168-00bc-421c-99d7-5eb0ace3a1ff/Garage.vpc", "Arena4D", function(e){
+		Potree.loadPointCloud("http://arena4d.uksouth.cloudapp.azure.com:8080/4e5059c4-f701-4a8f-8830-59e78a2c0816/BLK360 Sample.vpc", "Arena4D", function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+			
+			e.pointcloud.material.size = 2;
+			e.pointcloud.material.pointSizeType = Potree.PointSizeType.FIXED;
+			e.pointcloud.material.shape = Potree.PointShape.SQUARE;
+			
+			//viewer.fitToScreen();
+			viewer.scene.view.position.set(-93.47, 8.70, 48.54);
+			viewer.scene.view.lookAt(new THREE.Vector3(-10.27, 4.97, 7.20));
+		});
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/ca13.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+
+		// import * as Potree from "../src/Potree.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(5_000_000);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription(`Point cloud courtesy of PG&E and <a href="https://opentopography.org/">Open Topography</a>.`);
+		
+		viewer.loadGUI().then( () => {
+			viewer.setLanguage('en');
+			// $("#menu_filters").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/opentopography/CA13_1.4/cloud.js", "CA13", function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+			e.pointcloud.position.z = 0;
+			let material = e.pointcloud.material;
+			material.size = 0.8;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			material.activeAttributeName = "rgba";
+			
+			viewer.scene.view.setView(
+				[694517.403, 3899262.595, 10642.698],
+				[694878.410, 3916332.067, 14.497],
+			);
+		});
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/camera_animation.html

@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');">
+		</div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(false);
+		viewer.setFOV(60);
+		viewer.setPointBudget(3_000_000);
+		viewer.loadSettingsFromURL();
+		viewer.setDescription(`
+		Create a new animation path via "Tools -> Navigation -> Camera Animation"<br>
+		Modify and play animation via "Scene -> Objects -> Other -> [animation object]".
+		`);
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_scene").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "sigeom.sa", e => {
+			let scene = viewer.scene;
+			let pointcloud = e.pointcloud;
+			
+			let material = pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			material.shape = Potree.PointShape.SQUARE;
+			
+			scene.addPointCloud(pointcloud);
+			
+			// scene.view.setView(
+			// 	[589974.341, 231698.397, 986.146],
+			// 	[589851.587, 231428.213, 715.634],
+			// );
+			 viewer.fitToScreen();
+		});
+		
+	</script>
+
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		const animation = new Potree.CameraAnimation(viewer);
+
+
+		const positions = [
+			[590291.6145250637, 231565.3152460147, 888.181158774433],
+			[590094.2454560432, 231235.32163877538, 870.7535717968211],
+			[589675.8154371583, 231058.22066649256, 905.3068746322883],
+			[589328.6700949036, 231385.37585641106, 813.9565903445384],
+		];
+
+		const targets = [
+			[589859.3465488373, 231456.18943956672, 758.2733646218901],
+			[589846.4463098792, 231431.89813285187, 755.9090168440739],
+			[589824.0843049305, 231444.72309070674, 760.3459659610106],
+			[589799.7263767472, 231473.79043369304, 758.8332698380435],
+		];
+
+		for(let i = 0; i < positions.length; i++){
+			const cp = animation.createControlPoint();
+
+			cp.position.set(...positions[i]);
+			cp.target.set(...targets[i]);
+		}
+
+		viewer.scene.addCameraAnimation(animation);
+
+
+	</script>
+
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+	// viewer.onGUILoaded(() => {
+		
+	// 	let section = $(`
+	// 		<h3 id="menu_meta" class="accordion-header ui-widget"><span>Camera Animation</span></h3>
+	// 		<div class="accordion-content ui-widget pv-menu-list"></div>
+	// 	`);
+	// 	let content = section.last();
+	// 	content.html(`
+	// 	<div class="pv-menu-list">
+
+	// 		<span id="animation_keyframes"></span>
+
+	// 		<span>
+	// 			<span>Time: </span><span id="lblTime"></span> <div id="sldTime"></div>
+
+	// 			<input name="play" type="button" value="play"/>
+	// 		</span>
+	// 	</div>
+	// 	`);
+
+	// 	const elPlay = content.find("input[name=play]");
+	// 	elPlay.click( () => {
+	// 		animation.play();
+	// 	});
+
+	// 	const elSlider = content.find('#sldTime');
+	// 	elSlider.slider({
+	// 		value: 0,
+	// 		min: 0,
+	// 		max: 1,
+	// 		step: 0.001,
+	// 		slide: (event, ui) => { 
+	// 			animation.set(ui.value);
+	// 		}
+	// 	});
+
+	// 	const elKeyframes = content.find("#animation_keyframes");
+
+	// 	const updateKeyframes = () => {
+	// 		elKeyframes.empty();
+
+	// 		let index = 0;
+
+	// 		const addNewKeyframeItem = (index) => {
+	// 			let elNewKeyframe = $(`
+	// 				<div style="display: flex; margin: 0.2em 0em">
+						
+	// 					<span style="flex-grow: 0;">
+	// 						<img name="add" src="${Potree.resourcePath}/icons/add.svg" style="width: 1.5em; height: 1.5em"/>
+	// 					</span>
+	// 					<span style="flex-grow: 1"></span>
+	// 				</div>
+	// 			`);
+
+	// 			const elAdd = elNewKeyframe.find("img[name=add]");
+	// 			elAdd.click( () => {
+	// 				animation.createControlPoint(index);
+	// 			});
+
+	// 			elKeyframes.append(elNewKeyframe);
+	// 		};
+
+	// 		const addKeyframeItem = (index) => {
+	// 			let elKeyframe = $(`
+	// 				<div style="display: flex; margin: 0.2em 0em">
+	// 					<span style="flex-grow: 0;">
+	// 						<img name="assign" src="${Potree.resourcePath}/icons/assign.svg" style="width: 1.5em; height: 1.5em"/>
+	// 					</span>
+	// 					<span style="flex-grow: 0;">
+	// 						<img name="move" src="${Potree.resourcePath}/icons/circled_dot.svg" style="width: 1.5em; height: 1.5em"/>
+	// 					</span>
+	// 					<span style="flex-grow: 0; width: 1.5em; height: 1.5em"></span>
+	// 					<span style="flex-grow: 0; font-size: 1.5em">keyframe</span>
+	// 					<span style="flex-grow: 1"></span>
+	// 					<span style="flex-grow: 0;">
+	// 						<img name="delete" src="${Potree.resourcePath}/icons/remove.svg" style="width: 1.5em; height: 1.5em"/>
+	// 					</span>
+	// 				</div>
+	// 			`);
+
+	// 			const elAssign = elKeyframe.find("img[name=assign]");
+	// 			const elMove = elKeyframe.find("img[name=move]");
+	// 			const elDelete = elKeyframe.find("img[name=delete]");
+
+	// 			elAssign.click( () => {
+	// 				const cp = animation.controlPoints[index];
+
+	// 				cp.position.copy(viewer.scene.view.position);
+	// 				cp.target.copy(viewer.scene.view.getPivot());
+	// 			});
+
+	// 			elMove.click( () => {
+	// 				const cp = animation.controlPoints[index];
+
+	// 				viewer.scene.view.position.copy(cp.position);
+	// 				viewer.scene.view.lookAt(cp.target);
+	// 			});
+
+	// 			elDelete.click( () => {
+	// 				const cp = animation.controlPoints[index];
+	// 				animation.removeControlPoint(cp);
+	// 			});
+
+	// 			elKeyframes.append(elKeyframe);
+	// 		};
+
+	// 		addNewKeyframeItem(index);
+
+	// 		for(const cp of animation.controlPoints){
+				
+	// 			addKeyframeItem(index);
+	// 			index++;
+	// 			addNewKeyframeItem(index);
+
+	// 		}
+	// 	};
+
+	// 	updateKeyframes();
+
+	// 	animation.addEventListener("controlpoint_added", updateKeyframes);
+	// 	animation.addEventListener("controlpoint_removed", updateKeyframes);
+
+
+	// 	section.first().click(() => content.slideToggle());
+	// 	section.insertBefore($('#menu_about'));
+		
+	// });
+
+	</script>
+	
+	
+  </body>
+</html>

examples/cesium_ca13.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+	<link rel="stylesheet" type="text/css" href="../libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	<script src="../libs/Cesium/Cesium.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');">
+			<div id="cesiumContainer" style="position: absolute; width: 100%; height: 100%; background-color:green"></div>
+		</div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+
+
+<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+
+	window.cesiumViewer = new Cesium.Viewer('cesiumContainer', {
+		useDefaultRenderLoop: false,
+		animation: false,
+		baseLayerPicker : false,
+		fullscreenButton: false, 
+		geocoder: false,
+		homeButton: false,
+		infoBox: false,
+		sceneModePicker: false,
+		selectionIndicator: false,
+		timeline: false,
+		navigationHelpButton: false,
+		imageryProvider : Cesium.createOpenStreetMapImageryProvider({url : 'https://a.tile.openstreetmap.org/'}),
+		terrainShadows: Cesium.ShadowMode.DISABLED,
+	});
+
+	let cp = new Cesium.Cartesian3(4303414.154026048, 552161.235598733, 4660771.704035539);
+	cesiumViewer.camera.setView({
+		destination : cp,
+		orientation: {
+			heading : 10, 
+			pitch : -Cesium.Math.PI_OVER_TWO * 0.5, 
+			roll : 0.0 
+		}
+	});
+
+	window.potreeViewer = new Potree.Viewer(document.getElementById("potree_render_area"), {
+		useDefaultRenderLoop: false
+	});
+	potreeViewer.setEDLEnabled(true);
+	potreeViewer.setFOV(60);
+	potreeViewer.setPointBudget(1_000_000);
+	potreeViewer.setMinNodeSize(0);
+	potreeViewer.loadSettingsFromURL();
+	potreeViewer.setBackground(null);
+
+	potreeViewer.loadGUI(() => {
+		potreeViewer.setLanguage('en');
+		$("#menu_appearance").next().show();
+		$("#menu_tools").next().show();
+		$("#menu_scene").next().show();
+		potreeViewer.toggleSidebar();
+	});
+	
+	Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/opentopography/CA13_1.4/cloud.js", "CA13", function(e){
+
+		let pointcloud = e.pointcloud;
+		let scene = potreeViewer.scene;
+		let material = pointcloud.material;
+
+		scene.addPointCloud(pointcloud);
+
+		material.size = 1;
+		material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+		
+		potreeViewer.scene.view.setView(
+			[689429.64, 3877023.77, 42878.97],
+			[696072.86, 3916730.04, 82.04],
+		);
+
+		let pointcloudProjection = e.pointcloud.projection;
+		let mapProjection = proj4.defs("WGS84");
+
+		window.toMap = proj4(pointcloudProjection, mapProjection);
+		window.toScene = proj4(mapProjection, pointcloudProjection);
+		
+	});
+
+	function loop(timestamp){
+		requestAnimationFrame(loop);
+
+		potreeViewer.update(potreeViewer.clock.getDelta(), timestamp);
+
+		potreeViewer.render();
+
+		if(window.toMap !== undefined){
+
+			{
+				let camera = potreeViewer.scene.getActiveCamera();
+
+				let pPos = new THREE.Vector3(0, 0, 0).applyMatrix4(camera.matrixWorld);
+				let pRight = new THREE.Vector3(600, 0, 0).applyMatrix4(camera.matrixWorld);
+				let pUp = new THREE.Vector3(0, 600, 0).applyMatrix4(camera.matrixWorld);
+				let pTarget = potreeViewer.scene.view.getPivot();
+
+				let toCes = (pos) => {
+					let xy = [pos.x, pos.y];
+					let height = pos.z;
+					let deg = toMap.forward(xy);
+					let cPos = Cesium.Cartesian3.fromDegrees(...deg, height);
+
+					return cPos;
+				};
+
+				let cPos = toCes(pPos);
+				let cUpTarget = toCes(pUp);
+				let cTarget = toCes(pTarget);
+
+				let cDir = Cesium.Cartesian3.subtract(cTarget, cPos, new Cesium.Cartesian3());
+				let cUp = Cesium.Cartesian3.subtract(cUpTarget, cPos, new Cesium.Cartesian3());
+
+				cDir = Cesium.Cartesian3.normalize(cDir, new Cesium.Cartesian3());
+				cUp = Cesium.Cartesian3.normalize(cUp, new Cesium.Cartesian3());
+
+				cesiumViewer.camera.setView({
+					destination : cPos,
+					orientation : {
+						direction : cDir,
+						up : cUp
+					}
+				});
+
+				let aspect = potreeViewer.scene.getActiveCamera().aspect;
+				if(aspect < 1){
+					let fovy = Math.PI * (potreeViewer.scene.getActiveCamera().fov / 180);
+					cesiumViewer.camera.frustum.fov = fovy;
+				}else{
+					let fovy = Math.PI * (potreeViewer.scene.getActiveCamera().fov / 180);
+					let fovx = Math.atan(Math.tan(0.5 * fovy) * aspect) * 2
+					cesiumViewer.camera.frustum.fov = fovx;
+				}
+
+			}
+
+			cesiumViewer.render();
+		}
+	}
+
+	requestAnimationFrame(loop);
+
+
+  </script>
+</body>
+</html>

examples/cesium_retz.html

@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+	<link rel="stylesheet" type="text/css" href="../libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	<script src="../libs/Cesium/Cesium.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');">
+			<div id="cesiumContainer" style="position: absolute; width: 100%; height: 100%; background-color:green"></div>
+		</div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+
+
+<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+	window.cesiumViewer = new Cesium.Viewer('cesiumContainer', {
+		useDefaultRenderLoop: false,
+		animation: false,
+		baseLayerPicker : false,
+		fullscreenButton: false, 
+		geocoder: false,
+		homeButton: false,
+		infoBox: false,
+		sceneModePicker: false,
+		selectionIndicator: false,
+		timeline: false,
+		navigationHelpButton: false,
+		imageryProvider : Cesium.createOpenStreetMapImageryProvider({url : 'https://a.tile.openstreetmap.org/'}),
+		terrainShadows: Cesium.ShadowMode.DISABLED,
+	});
+
+	let cp = new Cesium.Cartesian3(4303414.154026048, 552161.235598733, 4660771.704035539);
+	cesiumViewer.camera.setView({
+		destination : cp,
+		orientation: {
+			heading : 10, 
+			pitch : -Cesium.Math.PI_OVER_TWO * 0.5, 
+			roll : 0.0 
+		}
+	});
+
+	window.potreeViewer = new Potree.Viewer(document.getElementById("potree_render_area"), {
+		useDefaultRenderLoop: false
+	});
+	potreeViewer.setEDLEnabled(true);
+	potreeViewer.setFOV(60);
+	potreeViewer.setPointBudget(3_000_000);
+	potreeViewer.setMinNodeSize(50);
+	potreeViewer.loadSettingsFromURL();
+	potreeViewer.setBackground(null);
+	potreeViewer.useHQ = true;
+
+	potreeViewer.setDescription(`
+		Potree using <a href="https://cesiumjs.org/" target="_blank">Cesium</a> to display an 
+		<a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> map below.<br>
+		Point cloud courtesy of <a href="http://riegl.com/" target="_blank">Riegl</a><br>`);
+
+	potreeViewer.loadGUI(() => {
+		potreeViewer.setLanguage('en');
+		$("#menu_appearance").next().show();
+		$("#menu_tools").next().show();
+		$("#menu_scene").next().show();
+		potreeViewer.toggleSidebar();
+	});
+	
+	Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/riegl/retz/cloud.js", "Retz", function(e){
+		let scene = potreeViewer.scene;
+		
+		scene.addPointCloud(e.pointcloud);
+		
+		e.pointcloud.position.set(569277.402752, 5400050.599046, 0);
+		e.pointcloud.rotation.set(0, 0, -0.035);
+
+		let material = e.pointcloud.material;
+		material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+		material.size = 0.7;
+		material.elevationRange = [0, 70];
+		material.weightRGB = 1.0;
+		material.weightElevation = 1.0;
+		
+		scene.view.position.set(570975.577, 5398630.521, 1659.311);
+		scene.view.lookAt(570115.285, 5400866.092, 30.009);
+
+		{
+			let aTownHall = new Potree.Annotation({
+				position: [569879.768, 5400886.182, 80.691],
+				title: "Town Hall",
+				cameraPosition: [569955.329, 5400822.949, 98.807],
+				cameraTarget: [569879.768, 5400886.182, 46.691]
+			});
+			scene.annotations.add(aTownHall);
+
+			let aTrainStation = new Potree.Annotation({
+				position: [570337.407, 5400522.730, 30],
+				title: "Train Station",
+				cameraPosition: [570377.074, 5400427.884, 100.576],
+				cameraTarget: [570337.407, 5400522.730, 18.595]
+			});
+			scene.annotations.add(aTrainStation);
+
+			{ // Attribute Selector Annotation
+
+				// Create title element with jquery
+				let elTitle = $(`
+					<span>
+						Attribute:
+						<img title="Elevation" name="action_elevation" src="${Potree.resourcePath}/icons/profile.svg" class="annotation-action-icon"/>
+						<img title="RGB and Elevation" name="action_both" src="${Potree.resourcePath}/icons/rgb_elevation.png" class="annotation-action-icon"/>
+						<img title="RGB" name="action_rgb" src="${Potree.resourcePath}/icons/rgb.svg" class="annotation-action-icon"/>
+					</span>`);
+				elTitle.find("img[name=action_elevation]").click( () => {
+					scene.pointclouds.forEach( pc => pc.material.activeAttributeName = "elevation" );
+				});
+				elTitle.find("img[name=action_rgb]").click( () => {
+					scene.pointclouds.forEach( pc => pc.material.activeAttributeName = "rgba" );
+				});
+				elTitle.find("img[name=action_both]").click( () => {
+					scene.pointclouds.forEach( pc => pc.material.activeAttributeName = "composite" );
+				});
+
+				// Give the annotation a meaningful string representation for the sidebar
+				elTitle.toString = () => "Color Setting";
+
+				// Same as with other annotations, except title is a jquery object this time.
+				let aActions = new Potree.Annotation({
+					position: [569222.340, 5401213.625, 227],
+					title: elTitle
+				});
+				scene.annotations.add(aActions);
+			}
+
+			{ // Attribute Selector Annotation
+
+				let elTitle = $(`
+					<span>
+						Quality:
+						<span name="low"  style="font-family: monospace; margin-left: 4px">low</span>
+						<span name="med"  style="font-family: monospace; margin-left: 4px">med</span>
+						<span name="high" style="font-family: monospace; margin-left: 4px">high</span>
+					</span>`);
+				
+				elTitle.find("span").mouseover( (e) => {
+					$(e.target).css("filter", "drop-shadow(0px 0px 1px white)");
+				}).mouseout( (e) => {
+					$(e.target).css("filter", "");
+				});
+
+				elTitle.find("span[name=low]").click( () => {
+					potreeViewer.setPointBudget(1_000_000);
+					potreeViewer.useHQ = false;
+				});
+
+				elTitle.find("span[name=med]").click( () => {
+					potreeViewer.setPointBudget(3_000_000);
+					potreeViewer.useHQ = false;
+				});
+
+				elTitle.find("span[name=high]").click( () => {
+					potreeViewer.setPointBudget(4_000_000);
+					potreeViewer.useHQ = true;
+				});
+
+				// Give the annotation a meaningful string representation for the sidebar
+				elTitle.toString = () => "Quality Setting";
+
+				// Same as with other annotations, except title is a jquery object this time.
+				let aActions = new Potree.Annotation({
+					position: [570274.902, 5401873.626, 227],
+					title: elTitle
+				});
+				scene.annotations.add(aActions);
+			}
+		}
+		
+
+		//let pointcloudProjection = e.pointcloud.projection;
+		let pointcloudProjection = "+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +no_defs";
+		let mapProjection = proj4.defs("WGS84");
+
+		window.toMap = proj4(pointcloudProjection, mapProjection);
+		window.toScene = proj4(mapProjection, pointcloudProjection);
+		
+		{
+			let bb = potreeViewer.getBoundingBox();
+
+			let minWGS84 = proj4(pointcloudProjection, mapProjection, bb.min.toArray());
+			let maxWGS84 = proj4(pointcloudProjection, mapProjection, bb.max.toArray());
+		}
+	});
+
+	function loop(timestamp){
+		requestAnimationFrame(loop);
+
+		potreeViewer.update(potreeViewer.clock.getDelta(), timestamp);
+
+		potreeViewer.render();
+
+		if(window.toMap !== undefined){
+
+			{
+				let camera = potreeViewer.scene.getActiveCamera();
+
+				let pPos		= new THREE.Vector3(0, 0, 0).applyMatrix4(camera.matrixWorld);
+				let pRight  = new THREE.Vector3(600, 0, 0).applyMatrix4(camera.matrixWorld);
+				let pUp		 = new THREE.Vector3(0, 600, 0).applyMatrix4(camera.matrixWorld);
+				let pTarget = potreeViewer.scene.view.getPivot();
+
+				let toCes = (pos) => {
+					let xy = [pos.x, pos.y];
+					let height = pos.z;
+					let deg = toMap.forward(xy);
+					let cPos = Cesium.Cartesian3.fromDegrees(...deg, height);
+
+					return cPos;
+				};
+
+				let cPos = toCes(pPos);
+				let cUpTarget = toCes(pUp);
+				let cTarget = toCes(pTarget);
+
+				let cDir = Cesium.Cartesian3.subtract(cTarget, cPos, new Cesium.Cartesian3());
+				let cUp = Cesium.Cartesian3.subtract(cUpTarget, cPos, new Cesium.Cartesian3());
+
+				cDir = Cesium.Cartesian3.normalize(cDir, new Cesium.Cartesian3());
+				cUp = Cesium.Cartesian3.normalize(cUp, new Cesium.Cartesian3());
+
+				cesiumViewer.camera.setView({
+					destination : cPos,
+					orientation : {
+						direction : cDir,
+						up : cUp
+					}
+				});
+				
+			}
+
+			let aspect = potreeViewer.scene.getActiveCamera().aspect;
+			if(aspect < 1){
+				let fovy = Math.PI * (potreeViewer.scene.getActiveCamera().fov / 180);
+				cesiumViewer.camera.frustum.fov = fovy;
+			}else{
+				let fovy = Math.PI * (potreeViewer.scene.getActiveCamera().fov / 180);
+				let fovx = Math.atan(Math.tan(0.5 * fovy) * aspect) * 2
+				cesiumViewer.camera.frustum.fov = fovx;
+			}
+			
+		}
+
+		cesiumViewer.render();
+	}
+
+	requestAnimationFrame(loop);
+
+
+  </script>
+</body>
+</html>

examples/cesium_sorvilier.html

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+	<link rel="stylesheet" type="text/css" href="../libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	<script src="../libs/Cesium/Cesium.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');">
+			<div id="cesiumContainer" style="position: absolute; width: 100%; height: 100%; background-color:green"></div>
+		</div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+
+
+<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	window.cesiumViewer = new Cesium.Viewer('cesiumContainer', {
+		useDefaultRenderLoop: false,
+		animation: false,
+		baseLayerPicker : false,
+		fullscreenButton: false, 
+		geocoder: false,
+		homeButton: false,
+		infoBox: false,
+		sceneModePicker: false,
+		selectionIndicator: false,
+		timeline: false,
+		navigationHelpButton: false,
+		imageryProvider : Cesium.createOpenStreetMapImageryProvider({url : 'https://a.tile.openstreetmap.org/'}),
+		terrainShadows: Cesium.ShadowMode.DISABLED,
+	});
+
+	let cp = new Cesium.Cartesian3(4303414.154026048, 552161.235598733, 4660771.704035539);
+	cesiumViewer.camera.setView({
+		destination : cp,
+		orientation: {
+			heading : 10, 
+			pitch : -Cesium.Math.PI_OVER_TWO * 0.5, 
+			roll : 0.0 
+		}
+	});
+
+	window.potreeViewer = new Potree.Viewer(document.getElementById("potree_render_area"), {
+		useDefaultRenderLoop: false
+	});
+	potreeViewer.setEDLEnabled(true);
+	potreeViewer.setFOV(60);
+	potreeViewer.setPointBudget(1_000_000);
+	potreeViewer.setMinNodeSize(0);
+	potreeViewer.loadSettingsFromURL();
+	potreeViewer.setBackground(null);
+
+	potreeViewer.loadGUI(() => {
+	potreeViewer.setLanguage('en');
+	$("#menu_appearance").next().show();
+	//viewer.toggleSidebar();
+	});
+	
+	Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "sigeom.sa", e => {
+		potreeViewer.scene.addPointCloud(e.pointcloud);
+		e.pointcloud.position.z = 0;
+		let material = e.pointcloud.material;
+		material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+		
+		potreeViewer.scene.view.position.set(590093.649, 231823.465, 267.402);
+		potreeViewer.scene.view.lookAt(new THREE.Vector3(589837.149, 231438.996, -0.707));
+		
+
+		let pointcloudProjection = e.pointcloud.projection;
+		let mapProjection = proj4.defs("WGS84");
+
+		window.toMap = proj4(pointcloudProjection, mapProjection);
+		window.toScene = proj4(mapProjection, pointcloudProjection);
+		
+		{
+			let bb = potreeViewer.getBoundingBox();
+
+			let minWGS84 = proj4(pointcloudProjection, mapProjection, bb.min.toArray());
+			let maxWGS84 = proj4(pointcloudProjection, mapProjection, bb.max.toArray());
+		}
+	});
+
+	function loop(timestamp){
+		requestAnimationFrame(loop);
+
+		potreeViewer.update(potreeViewer.clock.getDelta(), timestamp);
+
+		potreeViewer.render();
+
+		if(window.toMap !== undefined){
+
+			{
+				let camera = potreeViewer.scene.getActiveCamera();
+
+				let pPos		= new THREE.Vector3(0, 0, 0).applyMatrix4(camera.matrixWorld);
+				let pRight  = new THREE.Vector3(600, 0, 0).applyMatrix4(camera.matrixWorld);
+				let pUp		 = new THREE.Vector3(0, 600, 0).applyMatrix4(camera.matrixWorld);
+				let pTarget = potreeViewer.scene.view.getPivot();
+
+				let toCes = (pos) => {
+					let xy = [pos.x, pos.y];
+					let height = pos.z;
+					let deg = toMap.forward(xy);
+					let cPos = Cesium.Cartesian3.fromDegrees(...deg, height);
+
+					return cPos;
+				};
+
+				let cPos = toCes(pPos);
+				let cUpTarget = toCes(pUp);
+				let cTarget = toCes(pTarget);
+
+				let cDir = Cesium.Cartesian3.subtract(cTarget, cPos, new Cesium.Cartesian3());
+				let cUp = Cesium.Cartesian3.subtract(cUpTarget, cPos, new Cesium.Cartesian3());
+
+				cDir = Cesium.Cartesian3.normalize(cDir, new Cesium.Cartesian3());
+				cUp = Cesium.Cartesian3.normalize(cUp, new Cesium.Cartesian3());
+
+				cesiumViewer.camera.setView({
+					destination : cPos,
+					orientation : {
+						direction : cDir,
+						up : cUp
+					}
+				});
+				
+			}
+
+			let aspect = potreeViewer.scene.getActiveCamera().aspect;
+			if(aspect < 1){
+				let fovy = Math.PI * (potreeViewer.scene.getActiveCamera().fov / 180);
+				cesiumViewer.camera.frustum.fov = fovy;
+			}else{
+				let fovy = Math.PI * (potreeViewer.scene.getActiveCamera().fov / 180);
+				let fovx = Math.atan(Math.tan(0.5 * fovy) * aspect) * 2
+				cesiumViewer.camera.frustum.fov = fovx;
+			}
+			
+		}
+
+		cesiumViewer.render();
+	}
+
+	requestAnimationFrame(loop);
+
+
+  </script>
+</body>
+</html>

examples/classifications.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');">
+
+			<span style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 10000">
+				<input type="button" value="Default Scheme" onclick="setDefaultScheme()"/>
+				<input type="button" value="Tree Scheme" onclick="setTreeScheme()"/>
+				<input type="button" value="Random Scheme" onclick="setRandomScheme()"/>
+			</span>
+
+		</div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+		import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+
+		viewer.setDescription(`
+		Classification schemes can be changed at runtime via viewer.setClassifications(...). <br>
+		<br>
+		Point cloud courtesy of <a target='_blank' href='https://www.pge.com/'>PG&E</a>, 
+		hosted by <a target='_blank' href='http://opentopo.sdsc.edu/lidarDataset?opentopoID=OTLAS.032013.26910.2'>Open Topography</a>`);
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(2_000_000);
+		
+		viewer.loadGUI(() => {
+			$("#menu_filters").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/opentopography/CA13_1.4/cloud.js", "CA13", function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+			e.pointcloud.position.z = 0;
+			let material = e.pointcloud.material;
+			material.size = 3;
+			material.pointSizeType = Potree.PointSizeType.FIXED;
+			material.activeAttributeName = "classification";
+			
+			viewer.scene.view.position.set(694274.518, 3916261.987, 348.732);
+			viewer.scene.view.lookAt(694683.097, 3916386.916, 30.879);
+		});
+		
+	</script>
+
+	<script type="module">
+
+		import * as THREE from "../libs/three.js/build/three.module.js";
+
+		window.setDefaultScheme = function(){
+			viewer.setClassifications(Potree.ClassificationScheme.DEFAULT);
+		}
+
+		window.setTreeScheme = function(){
+			viewer.setClassifications({
+				5:       { visible: true, name: 'trees'        , color: [0.0, 1.0, 0.0, 1.0] },
+				DEFAULT: { visible: false, name: 'other' , color: [0.0, 0.0, 0.0, 1.0] },
+			});
+		}
+
+		window.setRandomScheme = function(){
+			const scheme = {};
+
+			for(let i = 0; i < 32; i++){
+				scheme[i] = { visible: true, name: `random:_${i}`, color: [Math.random(), Math.random(), Math.random(), 1.0] };
+			}
+
+			viewer.setClassifications(scheme);
+		}
+
+	</script>
+	
+	
+  </body>
+</html>

examples/clipping_volume.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+
+		let clipSpheres = [
+			{position: [0.032, -2.382, 4.279], scale: 3},
+			{position: [-1.787, 6.011, 1.711], scale: 1},
+			{position: [0.095, 7.636, 10.997], scale: 2},
+		];
+
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(2_000_000);
+		viewer.loadSettingsFromURL();
+
+		viewer.setDescription(`
+		This example contains two clipping volumes, one with visible bounding box and another one without. <br>
+		Inside the "Tools" panel, you can specify whether you want to show points inside or outside the clip box, 
+		or to highlight points that are inside.<br>
+		The two volume entries in the "Scene" panel can be used to inspect the properties of the volumes and to show or hide them.
+		Point cloud courtesy of <a target='_blank' href='https://www.sigeom.ch/'>sigeom sa</a>`);
+
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_tools").next().show();
+			$("#menu_scene").next().show();
+			viewer.toggleSidebar();
+		});
+
+		// Sigeom
+		Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "sigeom.sa", function(e){
+			let scene = viewer.scene;
+			scene.addPointCloud(e.pointcloud);
+
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+
+			{ // VOLUME visible
+				let volume  = new Potree.BoxVolume();
+				volume.name = "Visible";
+				volume.scale.set(178.04, 159.14, 70.00);
+				volume.position.set(589877.20, 231374.01, 749.62);
+				volume.clip = true;
+				//volume.visible = false;
+
+				scene.addVolume(volume);
+			}
+
+			{ // VOLUME invisible
+				let volume  = new Potree.BoxVolume();
+				volume.name = "Invisible";
+				volume.scale.set(178.04, 159.14, 70.00);
+				volume.position.set(589661.930, 231374.010, 749.620);
+				volume.clip = true;
+				volume.visible = false;
+
+				scene.addVolume(volume);
+			}
+
+			scene.view.position.set(590017.55, 231689.93, 1027.90);
+			scene.view.lookAt(new THREE.Vector3(589807.53, 231410.61, 765.30));
+			// viewer.fitToScreen();
+
+			viewer.setClipTask(Potree.ClipTask.SHOW_INSIDE)
+		});
+
+		function test(){
+			let volume = viewer.scene.volumes[1];
+			let pointcloud = viewer.scene.pointclouds[0];
+
+			let fitted = pointcloud.root.getFittedBox(volume);
+			console.log(fitted);
+			volume.scale.copy(fitted.scale);
+			volume.position.copy(fitted.position);
+
+		}
+
+	</script>
+
+
+  </body>
+</html>

examples/custom_sidebar_section.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setDescription("Adding a custom section to the sidebar");
+		
+		viewer.loadGUI(() => {
+			viewer.toggleSidebar();
+			
+			let section = $(`
+				<h3 id="menu_meta" class="accordion-header ui-widget"><span>Metadata</span></h3>
+				<div class="accordion-content ui-widget pv-menu-list"></div>
+			`);
+			let content = section.last();
+			content.html(`
+			<div class="pv-menu-list">
+				A custom Section in the sidebar!<br>
+				<br>	
+				Uncomment "content.hide();" to hide content by default.<br>
+				<br>
+				Take a look at src/viewer/sidebar.html and sidebar.js to 
+				learn how the other sections were populated.
+			</div>
+			`);
+			section.first().click(() => content.slideToggle());
+			section.insertBefore($('#menu_about'));
+			
+		});
+		
+		Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "Sorvilier", e => {
+			viewer.scene.addPointCloud(e.pointcloud);
+			viewer.fitToScreen();
+		});
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/deviceorientation.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+
+		// viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.loadSettingsFromURL();
+
+		viewer.setDescription("Point cloud courtesy of <a target='_blank' href='https://www.sigeom.ch/'>sigeom sa</a>");
+
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+		});
+
+		// Load and add point cloud to scene
+		Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "sigeom.sa", e => {
+			let scene = viewer.scene;
+			let pointcloud = e.pointcloud;
+
+			let material = pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			material.shape = Potree.PointShape.SQUARE;
+
+			scene.addPointCloud(pointcloud);
+
+			//viewer.setNavigationMode(Potree.DeviceOrientationControls);
+
+			const controls = new Potree.DeviceOrientationControls(viewer);
+			viewer.setControls(controls);
+			viewer.scene.view.position.set(589976, 231432, 748);
+		});
+
+	</script>
+  </body>
+</html>

examples/elevation_profile.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription("Point cloud courtesy of <a target='_blank' href='https://www.sigeom.ch/'>sigeom sa</a>");
+		
+		viewer.loadGUI().then( () => {
+
+			console.log("gui loaded task");
+
+			viewer.setLanguage('en');
+			$("#menu_tools").next().show();
+			$("#menu_scene").next().show();
+			viewer.toggleSidebar();
+			viewer.profileWindow.show();
+			viewer.profileWindowController.setProfile(viewer.scene.profiles[0]);
+		});
+
+		{ // PROFILE
+			let profile = new Potree.Profile();
+			profile.name = "Elevation Profile";
+			profile.setWidth(6)
+			profile.addMarker(new THREE.Vector3(589997.02, 231327.75, 755.73));
+			profile.addMarker(new THREE.Vector3(589579.65, 231323.51, 775.78));
+			profile.addMarker(new THREE.Vector3(589500.87, 231356.23, 782.91));
+			
+			viewer.scene.addProfile(profile);
+		}
+		
+		// POINTCLOUD
+		Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "sigeom.sa", function(e){
+			let scene = viewer.scene;
+			scene.addPointCloud(e.pointcloud);
+			
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			
+			scene.view.position.set(589974.341, 231698.397, 986.146);
+			scene.view.lookAt(new THREE.Vector3(589851.587, 231428.213, 715.634));
+		});
+
+	</script>
+	
+	
+  </body>
+</html>

examples/embedded_iframe.html

@@ -0,0 +1,12 @@
+<html>
+<head></head>
+
+<body>
+
+	<div style="position: absolute; left: 20%; right: 20%; top: 20%; bottom: 20%">
+		<iframe src="viewer.html" style="width: 100%; height: 100%"></iframe>
+	</div>
+	
+</body>
+
+</html>

examples/ept.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(2_000_000);
+		viewer.loadSettingsFromURL();
+
+		viewer.setDescription("Loading Entwine-generated EPT format");
+
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+		});
+
+        var path = "../pointclouds/lion_takanawa_ept_laz/ept.json";
+		var name = "lion";
+
+		var getQueryParam = function(name) {
+			name = name.replace(/[\[\]]/g, "\\$&");
+			var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+				results = regex.exec(window.location.href);
+			if (!results || !results[2]) return null;
+			return decodeURIComponent(results[2].replace(/\+/g, " "));
+		}
+
+        var r = getQueryParam('r');
+        if (r) {
+			name = r;
+            var http = 'http';
+            if (r.substr(0, http.length) == http) path = name;
+            else path = "../pointclouds/" + name + "/ept.json";
+        }
+
+		Potree.loadPointCloud(path, name, function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+
+			viewer.fitToScreen(0.5);
+		});
+	</script>
+  </body>
+</html>
+

examples/ept_binary.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(2_000_000);
+		viewer.loadSettingsFromURL();
+
+		viewer.setDescription("Loading Entwine-generated EPT format");
+
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+		});
+
+        var path = "../pointclouds/lion_takanawa_ept_bin/ept.json";
+		var name = "lion";
+
+		var getQueryParam = function(name) {
+			name = name.replace(/[\[\]]/g, "\\$&");
+			var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+				results = regex.exec(window.location.href);
+			if (!results || !results[2]) return null;
+			return decodeURIComponent(results[2].replace(/\+/g, " "));
+		}
+
+        var r = getQueryParam('r');
+        if (r) {
+			name = r;
+            var http = 'http';
+            if (r.substr(0, http.length) == http) path = name;
+            else path = "../pointclouds/" + name + "/ept.json";
+        }
+
+		Potree.loadPointCloud(path, name, function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+
+			viewer.fitToScreen(0.5);
+		});
+	</script>
+  </body>
+</html>
+

examples/ept_zstandard.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(2_000_000);
+		viewer.loadSettingsFromURL();
+
+		viewer.setDescription("Loading Entwine-generated EPT format");
+
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+		});
+
+        var path = "../pointclouds/lion_takanawa_ept_zst/ept.json";
+		var name = "lion";
+
+		var getQueryParam = function(name) {
+			name = name.replace(/[\[\]]/g, "\\$&");
+			var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+				results = regex.exec(window.location.href);
+			if (!results || !results[2]) return null;
+			return decodeURIComponent(results[2].replace(/\+/g, " "));
+		}
+
+        var r = getQueryParam('r');
+        if (r) {
+			name = r;
+            var http = 'http';
+            if (r.substr(0, http.length) == http) path = name;
+            else path = "../pointclouds/" + name + "/ept.json";
+        }
+
+		Potree.loadPointCloud(path, name, function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+
+			viewer.fitToScreen(0.5);
+		});
+	</script>
+  </body>
+</html>
+

examples/features_ca13.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(3_000_000);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription("");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+			$("#menu_tools").next().show();
+			$("#menu_scene").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		// CA13
+		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/opentopography/CA13/cloud.js", "CA13", function(e){
+			let pointcloud = e.pointcloud;
+			let scene = viewer.scene;
+			let material = pointcloud.material;
+
+			scene.addPointCloud(pointcloud);
+			pointcloud.position.z = 0;
+			
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			
+			scene.view.position.set(690711.599, 3873671.422, 51647.850);
+			scene.view.lookAt(705119.301, 3920506.695, -564.566);
+
+			{ // ANNOTATIONS
+				let aRoot = viewer.scene.annotations;
+
+				let aCA13 = new Potree.Annotation({
+					title: "CA13",
+					position: [675036.45, 3850315.78, 65076.70],
+					cameraPosition: [675036.45, 3850315.78, 65076.70],
+					cameraTarget: [692869.03, 3925774.14, 1581.51],
+				});
+				aRoot.add(aCA13);
+
+				let aSanSimeon = new Potree.Annotation({
+					title: "San Simeon",
+					position: [664147.50, 3946008.73, 16.30],
+					cameraPosition: [664941.80, 3943568.06, 1925.30],
+					cameraTarget: [664147.50, 3946008.73, 16.30],
+				});
+				aCA13.add(aSanSimeon);
+
+				let aHearstCastle = new Potree.Annotation({
+					title: "Hearst Castle",
+					position: [665744.56, 3950567.52, 500.48],
+					cameraPosition: [665692.66, 3950521.65, 542.02],
+					cameraTarget: [665744.56, 3950567.52, 500.48],
+				});
+				aCA13.add(aHearstCastle);
+
+				let aMorroBay = new Potree.Annotation({
+					title: "Morro Bay",
+					position: [695483.33, 3916430.09, 25.75],
+					cameraPosition: [694114.65, 3911176.26, 3402.33],
+					cameraTarget: [695483.33, 3916430.09, 25.75],
+				});
+				aCA13.add(aMorroBay);
+
+				let aMorroRock = new Potree.Annotation({
+					title: "Morro Rock",
+					position: [693729.66, 3916085.19, 90.35],
+					cameraPosition: [693512.77, 3915375.61, 342.33],
+					cameraTarget: [693729.66, 3916085.19, 90.35],
+				});
+				aMorroBay.add(aMorroRock);
+
+				let aMorroBayMutualWaterCo = new Potree.Annotation({
+					title: "Morro Bay Mutual Water Co",
+					position: [694699.45, 3916425.75, 39.78],
+					cameraPosition: [694377.64, 3916289.32, 218.40],
+					cameraTarget: [694699.45, 3916425.75, 39.78],
+				});
+				aMorroBay.add(aMorroBayMutualWaterCo);
+
+				let aLilaKeiserPark = new Potree.Annotation({
+					title: "Lila Keiser Park",
+					position: [694674.99, 3917070.49, 10.86],
+					cameraPosition: [694452.59, 3916845.14, 298.64],
+					cameraTarget: [694674.99, 3917070.49, 10.86],
+				});
+				aMorroBay.add(aLilaKeiserPark);
+
+				let aSanLuisObispo = new Potree.Annotation({
+					title: "San Luis Obispo",
+					position: [712573.39, 3907588.33, 146.44],
+					cameraPosition: [711158.29, 3907019.82, 1335.89],
+					cameraTarget: [712573.39, 3907588.33, 146.44],
+				});
+				aCA13.add(aSanLuisObispo);
+
+				let aLopezHill = new Potree.Annotation({
+					title: "Lopez Hill",
+					position: [728635.63, 3895761.56, 456.33],
+					cameraPosition: [728277.24, 3895282.29, 821.51],
+					cameraTarget: [728635.63, 3895761.56, 456.33],
+				});
+				aCA13.add(aLopezHill);
+
+				let aWhaleRockReservoir = new Potree.Annotation({
+					title: "Whale Rock Reservoir",
+					position: [692845.46, 3925528.53, 140.91],
+					cameraPosition: [693073.32, 3922354.02, 2154.17],
+					cameraTarget: [692845.46, 3925528.53, 140.91],
+				});
+				aCA13.add(aWhaleRockReservoir);
+
+			}
+
+			{ // TREE RETURNS POI - ANNOTATION & VOLUME
+				let aRoot = scene.annotations;
+
+				let aTreeReturns = new Potree.Annotation({
+					title: "Tree Returns",
+					position: [675756.75, 3937590.94, 80.21],
+					cameraPosition: [675715.78, 3937700.36, 115.95],
+					cameraTarget: [675756.75, 3937590.94, 80.21],
+					actions: [{
+						"icon": Potree.resourcePath + "/icons/return_number.svg",
+						"onclick": function(){
+							material.activeAttributeName = "return number";
+							material.pointSizeType = Potree.PointSizeType.FIXED;
+							viewer.setClipTask(Potree.ClipTask.SHOW_INSIDE);
+						}
+					},{
+						"icon": Potree.resourcePath + "/icons/rgb.png",
+						"onclick": function(){
+							material.activeAttributeName = "rgba";
+							material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+							viewer.setClipTask(Potree.ClipTask.HIGHLIGHT);
+						}
+					}]
+				});
+				aRoot.add(aTreeReturns);
+				aTreeReturns.domElement.find(".annotation-action-icon:first").css("filter", "invert(1)");
+
+				let volume = new Potree.BoxVolume();
+				volume.position.set(675755.4039368022, 3937586.911614576, 85);
+				volume.scale.set(119.87189835418388, 68.3925257233834, 51.757483718373265);
+				volume.rotation.set(0, 0, 0.8819755090987993, "XYZ");
+				volume.clip = true;
+				volume.visible = false;
+				volume.name = "Trees";
+				scene.addVolume(volume);
+			}
+
+			{ // MEASUREMENTS
+				{
+					let measurement = new Potree.Measure();
+					measurement.addMarker([649883.34, 3964419.93, 815.99]);
+					measurement.addMarker([648709.04, 3963016.51, 2.36]);
+					measurement.showHeight = true;
+					measurement.showDistances = false;
+					measurement.name = "Mountain Height";
+					viewer.scene.addMeasurement(measurement);
+				}
+
+				{
+					let measurement = new Potree.Measure();
+					measurement.addMarker([655447.29, 3948399.92, 19.26]);
+					measurement.addMarker([655411.81, 3948369.64, 17.84]);
+					measurement.name = "Parking Space";
+					viewer.scene.addMeasurement(measurement);
+				}
+
+				{
+					let measurement = new Potree.Measure();
+					measurement.addMarker([646037.800, 3971448.200, 819.990]);
+					measurement.addMarker([736909.820, 3891012.300, 296.000]);
+					viewer.scene.addMeasurement(measurement);
+				}
+			}
+		});
+
+	</script>
+	
+	
+  </body>
+</html>

examples/features_sorvilier.html

@@ -0,0 +1,370 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+		import * as THREE from "../libs/three.js/build/three.module.js";
+		import {PLYLoader} from "../libs/three.js/loaders/PLYLoader.js";
+		import {OBJLoader} from "../libs/three.js/loaders/OBJLoader.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription("Point cloud courtesy of <a target='_blank' href='https://www.sigeom.ch/'>sigeom sa</a>");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_tools").next().show();
+			$("#menu_scene").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		// Sigeom
+		Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "sigeom.sa", function(e){
+			let scene = viewer.scene;
+			scene.addPointCloud(e.pointcloud);
+			
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+
+			scene.view.position.set(589974.341, 231698.397, 986.146);
+			scene.view.lookAt(new THREE.Vector3(589851.587, 231428.213, 715.634));
+			// viewer.fitToScreen();
+		});
+
+		{ // LIGHTS
+			const directional = new THREE.DirectionalLight( 0xffffff, 1.0);
+			directional.position.set( 10, 10, 10 );
+			directional.lookAt(0, 0, 0);
+
+			const ambient = new THREE.AmbientLight(0x555555);
+
+			viewer.scene.scene.add(directional);
+			viewer.scene.scene.add(ambient);
+		}
+
+		{ // MEASUREMENTS
+			let scene = viewer.scene;
+
+			{ // DISTANCE MEASURE
+				let measure = new Potree.Measure();
+				measure.closed = false;
+				measure.addMarker(new THREE.Vector3(589803.18, 231357.35, 745.38));
+				measure.addMarker(new THREE.Vector3(589795.74, 231323.42, 746.21));		
+				measure.addMarker(new THREE.Vector3(589822.50, 231315.90, 744.45));
+				
+				scene.addMeasurement(measure);
+			}
+			
+			{ // ANGLE MEASURE
+				let measure = new Potree.Measure();
+				measure.name = "Angle Sample";
+				measure.closed = true;
+				measure.showAngles = true;
+				measure.showDistances = false;
+				measure.addMarker(new THREE.Vector3(589866.11, 231372.25, 737.41));
+				measure.addMarker(new THREE.Vector3(589842.15, 231366.82, 743.61));		
+				measure.addMarker(new THREE.Vector3(589860.61, 231348.01, 740.33));
+				
+				scene.addMeasurement(measure);
+			}
+			
+			{ // SINGLE POINT MEASURE
+				let measure = new Potree.Measure();
+				measure.name = "Canopy";
+				measure.showDistances = false;
+				measure.showCoordinates = true;
+				measure.maxMarkers = 1;
+				measure.addMarker(new THREE.Vector3(589853.73, 231300.24, 775.48));
+				
+				scene.addMeasurement(measure);
+			}
+			
+			{ // HEIGHT MEASURE
+				let measure = new Potree.Measure();
+				measure.name = "Tree Height";
+				measure.closed = false;
+				measure.showDistances = false;
+				measure.showHeight = true;
+				measure.addMarker(new THREE.Vector3(589849.69, 231327.26, 766.32));
+				measure.addMarker(new THREE.Vector3(589840.96, 231329.53, 744.52));		
+				
+				scene.addMeasurement(measure);
+			}
+			
+			{ // AREA MEASURE
+				let measure = new Potree.Measure();
+				measure.name = "Area";
+				measure.closed = true;
+				measure.showArea = true;
+				measure.addMarker(new THREE.Vector3(589899.37, 231300.16, 750.25));
+				measure.addMarker(new THREE.Vector3(589874.60, 231326.06, 743.40));
+				measure.addMarker(new THREE.Vector3(589911.61, 231352.57, 743.58));
+				measure.addMarker(new THREE.Vector3(589943.50, 231300.08, 754.62));
+				
+				scene.addMeasurement(measure);
+			}
+
+			{ // PROFILE
+				let profile = new Potree.Profile();
+				profile.setWidth(6)
+				profile.addMarker(new THREE.Vector3(589641.6098756103, 231453.76974998094, 760.4950016784668)); 
+				profile.addMarker(new THREE.Vector3(589514.4799995422, 231309.46000003815, 775.6249989318848)); 
+				profile.addMarker(new THREE.Vector3(589512.4600000381, 231504.9597490845, 764.6350010681152));	
+				
+				scene.addProfile(profile);
+			}
+		}
+
+		{ // ANNOTATIONS
+			let scene = viewer.scene;
+
+			
+			scene.annotations.add(new Potree.Annotation({
+				position: [589847.17, 231436.78, 892.60],
+				cameraPosition: [590034.03, 231814.02, 961.68],
+				cameraTarget: [589847.17, 231436.78, 742.60],
+				title: "Sorvilier"
+			}));
+			
+			scene.annotations.add(new Potree.Annotation({
+				position: [589850.15, 231300.10, 770.94],
+				title: "Trees",
+				description: `Point cloud of a small section in Sorvilier, Switzerland. <br>
+				Courtesy of sigeom.sa`
+			}));
+			
+			scene.annotations.add(new Potree.Annotation({
+				position: [590043.63, 231490.79, 740.78],
+				title: "About Annotations",
+				cameraPosition: [590105.53, 231541.63, 782.05],
+				cameraTarget: [590043.63, 231488.79, 740.78],
+				description: `<ul><li>Click on the annotation label to move a predefined view.</li> 
+				<li>Click on the icon to execute the specified action.</li>
+				In this case, the action will bring you to another scene and point cloud.</ul>`,
+			}));
+
+			scene.annotations.add(new Potree.Annotation({
+				position: [589621, 231437, 784],
+				cameraPosition: [589585.81, 231463.63, 804.00],
+				cameraTarget: [589625.86, 231439, 775.38],
+				title: "About Annotations 2",
+				description: `
+				Suitable annotation positions and views can be obtained by 
+				looking up the current camera position and target in the "Scene" panel, 
+				or by evaluating following lines in your browser's developer console:<br><br>
+				<code>viewer.scene.view.position</code><br>
+				<code>viewer.scene.view.getPivot()</code><br>
+				`
+			}));
+
+			scene.annotations.add(new Potree.Annotation({
+				position: [589980, 231236.83, 783.89],
+				title: "About Annotations 1",
+				description: `
+				Annotations mark and describe locations. 
+				They can move users to a predefined location on click, 
+				and provide action buttons to offer easily accessible 
+				functionality at certain points of interest.
+				`
+			}));
+
+			scene.annotations.add(new Potree.Annotation({
+				position: [589880, 231236.83, 783.89],
+				title: "About Annotations 2",
+				description: `
+				Suitable annotation positions and views can be obtained by 
+				looking up the current camera position and target in the "Scene" panel, 
+				or by evaluating following lines in your browser's developer console:<br><br>
+				<code>viewer.scene.view.position</code><br>
+				<code>viewer.scene.view.getPivot()</code><br>
+				`
+			}));
+			
+			scene.annotations.add(new Potree.Annotation({
+				title: "Actions:&nbsp;",
+				position: [589769.27, 231236.83, 783.89],
+				description: `This annotation has actions that switch between elevation and color rendering modes.`,
+				actions: [{
+					"icon": Potree.resourcePath + "/icons/profile.svg",
+					"onclick": function(){
+						for(let pointcloud of viewer.scene.pointclouds){
+							pointcloud.material.activeAttributeName = "elevation";
+							pointcloud.material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+						}
+					}
+				},{
+					"icon": Potree.resourcePath + "/icons/rgb.png",
+					"onclick": function(){
+						for(let pointcloud of viewer.scene.pointclouds){
+							pointcloud.material.activeAttributeName = "rgba";
+							pointcloud.material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+						}
+					}
+				}]
+			}));
+		}
+
+		{
+			let volume = new Potree.BoxVolume();
+			volume.name = "Test Volume";
+			volume.scale.set(87.70990081104037, 65.01472874807978, 95.53770288101325);
+			volume.position.set(589688.5173246722, 231341.79786558595, 792.7726157084892);
+			volume.rotation.set(0, 0, 0.6338484063020134);
+			volume.clip = true;
+			viewer.scene.addVolume(volume);
+		}
+
+		{ // Load Textured bunny from obj
+			let manager = new THREE.LoadingManager();
+			manager.onProgress = function ( item, loaded, total ) {
+				console.log( item, loaded, total );
+			};
+			let textureLoader = new THREE.TextureLoader( manager );
+			let texture = textureLoader.load(`${Potree.resourcePath}/textures/brick_pavement.jpg`);
+			let onProgress = function ( xhr ) {
+				if ( xhr.lengthComputable ) {
+					let percentComplete = xhr.loaded / xhr.total * 100;
+					console.log( Math.round(percentComplete, 2) + '% downloaded' );
+				}
+			};
+			texture.wrapS = THREE.RepeatWrapping;
+			texture.wrapT = THREE.RepeatWrapping;
+
+			let onError = function ( xhr ) {};
+			let loader = new OBJLoader( manager );
+			loader.load(`${Potree.resourcePath}/models/stanford_bunny_reduced.obj`, function ( object ) {
+				object.traverse( function ( child ) {
+					if ( child instanceof THREE.Mesh ) {
+						child.material.map = texture;
+					}
+				} );
+
+				object.position.set(589871.587, 231528.213, 725.634);
+				object.scale.multiplyScalar(500);
+				object.rotation.set(Math.PI / 2, Math.PI, 0)
+
+				viewer.scene.scene.add( object );
+
+				viewer.onGUILoaded(() => {
+					// Add entries to object list in sidebar
+					let tree = $(`#jstree_scene`);
+					let parentNode = "other";
+
+					let bunnyID = tree.jstree('create_node', parentNode, { 
+							text: "Bunny Textured", 
+							icon: `${Potree.resourcePath}/icons/triangle.svg`,
+							data: object
+						}, 
+						"last", false, false);
+					tree.jstree(object.visible ? "check_node" : "uncheck_node", bunnyID);
+
+					//tree.jstree("open_node", parentNode);
+				});
+
+			}, onProgress, onError );
+		}
+		
+		// Load untextured bunny from ply
+		var loader = new PLYLoader();
+		loader.load( Potree.resourcePath + "/models/stanford_bunny_reduced.ply", (geometry) => {
+			geometry.computeVertexNormals();
+			
+			// place two instances of this bunny into the scene
+			
+			let mesh1;
+			{
+				let material = new THREE.MeshNormalMaterial();
+				mesh1 = new THREE.Mesh( geometry, material );
+				mesh1.position.set(589961.587, 231428.213, 710.634);
+				mesh1.scale.multiplyScalar(500);
+				mesh1.rotation.set(Math.PI / 2, Math.PI, 0)
+				viewer.scene.scene.add(mesh1);
+			}
+			
+			let mesh2;
+			{
+				let material = new THREE.MeshPhysicalMaterial( {
+					color: 0x226666,
+					metalness: 0,
+					roughness: 0.5,
+					clearCoat:  1.0,
+					clearCoatRoughness: 1.0,
+					reflectivity: 1.0
+				} );
+				mesh2 = new THREE.Mesh( geometry, material );
+				mesh2.position.set(589751.587, 231428.213, 725.634);
+				mesh2.scale.multiplyScalar(500);
+				mesh2.rotation.set(Math.PI / 2, Math.PI, 0)
+				viewer.scene.scene.add(mesh2);
+			}
+
+			viewer.onGUILoaded(() => {
+				// Add entries to object list in sidebar
+				let tree = $(`#jstree_scene`);
+				let parentNode = "other";
+
+				let bunny1ID = tree.jstree('create_node', parentNode, { 
+						text: "Bunny 1", 
+						icon: `${Potree.resourcePath}/icons/triangle.svg`,
+						data: mesh1
+					}, 
+					"last", false, false);
+				tree.jstree(mesh1.visible ? "check_node" : "uncheck_node", bunny1ID);
+
+				let bunny2ID = tree.jstree('create_node', parentNode, { 
+						text: "Bunny 2", 
+						icon: `${Potree.resourcePath}/icons/triangle.svg`,
+						data: mesh2
+					}, 
+					"last", false, false);
+				tree.jstree(mesh2.visible ? "check_node" : "uncheck_node", bunny2ID);
+			});
+			
+		});
+
+	</script>
+	
+	
+  </body>
+</html>

examples/geopackage.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(5_000_000);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription("");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			//$("#menu_appearance").next().show();
+			$("#menu_tools").next().show();
+			$("#menu_scene").next().show();
+			$("#menu_filters").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/opentopography/CA13_1.4/cloud.js", "CA13", async function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+			let material = e.pointcloud.material;
+			material.size = 0.7;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			material.activeAttributeName = "rgba";
+			
+			viewer.scene.view.setView(
+				[693943.373, 3915593.308, 1051.287],
+				[694667.183, 3916308.972, -96.390],
+			);
+
+			{ // load a geopackage
+				proj4.defs("WGS84", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs");
+				proj4.defs("pointcloud", viewer.getProjection());
+				const params = {
+					transform: proj4("WGS84", "pointcloud"),
+				};
+
+				const url = "./morro_bay_shp/gpkg/geopackage.gpkg";
+				const geopackage = await Potree.GeoPackageLoader.loadUrl(url, params);
+				viewer.scene.addGeopackage(geopackage);
+			}
+		});
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/github.html

@@ -0,0 +1,416 @@
+
+
+		<h1>Examples</h1>
+
+		<table>
+			<tr>
+				<td>
+					<a href="http://potree.org/potree/examples/viewer.html" target="_blank">
+						<img src="examples/thumbnails/viewer.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/oriented_images.html" target="_blank">
+						<img src="examples/thumbnails/oriented_images.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/360.html" target="_blank">
+						<img src="examples/thumbnails/360.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/geopackage.html" target="_blank">
+						<img src="examples/thumbnails/geopackage.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/classifications.html" target="_blank">
+						<img src="examples/thumbnails/classifications.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/camera_animation.html" target="_blank">
+						<img src="examples/thumbnails/camera_animation.jpg" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th>Basic Viewer</th><th>Oriented Images</th><th>360 images</th><th>Geopackage</th><th>Classifications</th><th>Camera Animation</th>
+			</tr><tr>
+				<td>
+					<a href="http://potree.org/potree/examples/load_project.html" target="_blank">
+						<img src="examples/thumbnails/load_project.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/toolbar.html" target="_blank">
+						<img src="examples/thumbnails/toolbar.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/matcap.html" target="_blank">
+						<img src="examples/thumbnails/matcap.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/heidentor.html" target="_blank">
+						<img src="examples/thumbnails/heidentor.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/lion.html" target="_blank">
+						<img src="examples/thumbnails/lion.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/lion_las.html" target="_blank">
+						<img src="examples/thumbnails/lion_las.png" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th>Load Project</th><th>Toolbar</th><th>Matcap</th><th>Heidentor</th><th>Lion</th><th>Lion LAS</th>
+			</tr><tr>
+				<td>
+					<a href="http://potree.org/potree/examples/lion_laz.html" target="_blank">
+						<img src="examples/thumbnails/lion_las.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/ept.html" target="_blank">
+						<img src="examples/thumbnails/lion.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/ept_binary.html" target="_blank">
+						<img src="examples/thumbnails/lion_las.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/ept_zstandard.html" target="_blank">
+						<img src="examples/thumbnails/lion_las.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/clipping_volume.html" target="_blank">
+						<img src="examples/thumbnails/clipping_volume.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/ca13.html" target="_blank">
+						<img src="examples/thumbnails/ca13.png" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th>Lion LAZ</th><th>EPT</th><th>EPT Binary</th><th>EPT zstandard</th><th>Clipping Volume</th><th>CA13</th>
+			</tr><tr>
+				<td>
+					<a href="http://potree.org/potree/examples/elevation_profile.html" target="_blank">
+						<img src="examples/thumbnails/elevation_profile.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/measurements.html" target="_blank">
+						<img src="examples/thumbnails/measurements.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/meshes.html" target="_blank">
+						<img src="examples/thumbnails/meshes.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/multiple_pointclouds.html" target="_blank">
+						<img src="examples/thumbnails/multiple_point_clouds.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/features_sorvilier.html" target="_blank">
+						<img src="examples/thumbnails/features_sorvilier.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/features_ca13.html" target="_blank">
+						<img src="examples/thumbnails/features_ca13.png" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th>Elevation Profile</th><th>Measurements</th><th>Meshes</th><th>Multiple Point Clouds</th><th>Features (Sorvilier)</th><th>Features (CA13)</th>
+			</tr><tr>
+				<td>
+					<a href="http://potree.org/potree/examples/annotations.html" target="_blank">
+						<img src="examples/thumbnails/annotations.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/annotation_hierarchy.html" target="_blank">
+						<img src="examples/thumbnails/annotation_hierarchy.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/animation_paths.html" target="_blank">
+						<img src="examples/thumbnails/animation_paths.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/shapefiles.html" target="_blank">
+						<img src="examples/thumbnails/shapefiles.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/cesium_ca13.html" target="_blank">
+						<img src="examples/thumbnails/cesium_ca13.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/cesium_retz.html" target="_blank">
+						<img src="examples/thumbnails/cesium_retz.png" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th>Annotations</th><th>Hierarchical Annotations</th><th>Animation Path</th><th>Shapefiles</th><th>Cesium CA13</th><th>Cesium Retz</th>
+			</tr><tr>
+				<td>
+					<a href="http://potree.org/potree/examples/cesium_sorvilier.html" target="_blank">
+						<img src="examples/thumbnails/cesium_sorvilier.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/custom_sidebar_section.html" target="_blank">
+						<img src="examples/thumbnails/custom_sidebar_section.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/embedded_iframe.html" target="_blank">
+						<img src="examples/thumbnails/embedded_iframe.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/gradient_colors.html" target="_blank">
+						<img src="examples/thumbnails/gradient_colors.png" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th>Cesium Sorvilier</th><th>Custom Sidebar Section</th><th>Embedded Iframe</th><th>Gradient Colors</th>
+			</tr>
+		</table>
+
+		<h1>VR</h1>
+
+		<table>
+			<tr>
+				<td>
+					<a href="http://potree.org/potree/examples/vr_heidentor.html" target="_blank">
+						<img src="examples/thumbnails/heidentor.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/vr_eclepens.html" target="_blank">
+						<img src="examples/thumbnails/eclepens.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/vr_morro_bay.html" target="_blank">
+						<img src="examples/thumbnails/ca13.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/vr_lion.html" target="_blank">
+						<img src="examples/thumbnails/lion.png" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/vr_dechen_cave.html" target="_blank">
+						<img src="examples/thumbnails/dechen_cave.jpg" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th>Heidentor</th><th>Eclepens</th><th>Morro Bay</th><th>Lion</th><th>Dechen Cave</th>
+			</tr>
+		</table>
+
+		<h1>Showcase</h1>
+
+		<table>
+			<tr>
+				<td>
+					<a href="http://potree.org/potree/examples/showcase/matterhorn.html" target="_blank">
+						<img src="examples/thumbnails/matterhorn.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/retz.html" target="_blank">
+						<img src="examples/thumbnails/retz.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/lake_tahoe.html" target="_blank">
+						<img src="examples/thumbnails/lake_tahoe.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/sorvilier.html" target="_blank">
+						<img src="examples/thumbnails/vol_total.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/grab_15.html" target="_blank">
+						<img src="examples/thumbnails/grab_15.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/tern_auscover_chowilla.html" target="_blank">
+						<img src="examples/thumbnails/chowilla.jpg" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th>Matterhorn</th><th>Retz</th><th>Lake Tahoe</th><th>Sorvilier</th><th>Grave</th><th>Chowilla</th>
+			</tr><tr>
+				<td>
+					<a href="http://potree.org/potree/examples/showcase/chiller.html" target="_blank">
+						<img src="examples/thumbnails/chiller.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/cooler_tower.html" target="_blank">
+						<img src="examples/thumbnails/cooler_tower.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/dechen_cave.html" target="_blank">
+						<img src="examples/thumbnails/dechen_cave.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/doverMillRuins.html" target="_blank">
+						<img src="examples/thumbnails/DoverMillRuins.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/eclepens.html" target="_blank">
+						<img src="examples/thumbnails/eclepens.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/heidentor.html" target="_blank">
+						<img src="examples/thumbnails/heidentor.jpg" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th>Chiller</th><th>Cooler</th><th>Dechen Cave</th><th>Ruins</th><th>Eclepens</th><th>Heidentor</th>
+			</tr><tr>
+				<td>
+					<a href="http://potree.org/potree/examples/showcase/land_building.html" target="_blank">
+						<img src="examples/thumbnails/land_building.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/LDHI_module.html" target="_blank">
+						<img src="examples/thumbnails/LDHI_module.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/lion_head_simone_garagnani.html" target="_blank">
+						<img src="examples/thumbnails/lion_head.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/overpass.html" target="_blank">
+						<img src="examples/thumbnails/overpass.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/pielach.html" target="_blank">
+						<img src="examples/thumbnails/pielach.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/pompei.html" target="_blank">
+						<img src="examples/thumbnails/pompei.jpg" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th>Building</th><th>LDHI</th><th>Lion Head</th><th>Overpass</th><th>Pielach</th><th>pompei</th>
+			</tr><tr>
+				<td>
+					<a href="http://potree.org/potree/examples/showcase/santorini.html" target="_blank">
+						<img src="examples/thumbnails/santorini.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/skatepark.html" target="_blank">
+						<img src="examples/thumbnails/skatepark.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/subsea_equipment.html" target="_blank">
+						<img src="examples/thumbnails/subsea_equipment.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/subsea_manifold.html" target="_blank">
+						<img src="examples/thumbnails/subseamanifold.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/westend_palais.html" target="_blank">
+						<img src="examples/thumbnails/westend_palais.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.org/potree/examples/showcase/whitby.html" target="_blank">
+						<img src="examples/thumbnails/whitby.jpg" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th>Santorini</th><th>Skatepark</th><th>Subsea Eq.</th><th>Subsea Man.</th><th>Westend Palais</th><th>Whitby</th>
+			</tr><tr>
+				
+			</tr>
+			<tr>
+				
+			</tr>
+		</table>
+
+		<h1>Third Party Showcase</h1>
+
+		<table>
+			<tr>
+				<td>
+					<a href="https://sitn.ne.ch/lidar/" target="_blank">
+						<img src="examples/third/sitn.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://potree.entwine.io/" target="_blank">
+						<img src="examples/third/entwine.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://files.digitisation.unimelb.edu.au/potree/pointclouds/hakea_macrorrhyncha.html" target="_blank">
+						<img src="examples/third/hakea_macrorrhyncha.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://betaportal.icgc.cat/wordpress/sagrada_familia_eixample_3d/" target="_blank">
+						<img src="examples/third/icgc_barcelona.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="https://www.linkedin.com/pulse/open-source-advent-21-partridge-potree-bj%C3%B8rn-ove-gr%C3%B8tan/?published=t" target="_blank">
+						<img src="examples/third/preikestolen.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://bermuda100.ucsd.edu/mary-celestia/index.php" target="_blank">
+						<img src="examples/third/bermuda100.jpg" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th>SITN</th><th>Entwine</th><th></th><th>Barcelona</th><th></th><th>Bermuda 100</th>
+			</tr><tr>
+				<td>
+					<a href="https://rapidlasso.com/laspublish/" target="_blank">
+						<img src="examples/third/laspublish.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="https://www.pointbox.xyz/" target="_blank">
+						<img src="examples/third/pointbox.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="https://digital.ucd.ie/view/ucdlib:30462" target="_blank">
+						<img src="examples/third/dublin.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://ahn2.pointclouds.nl/" target="_blank">
+						<img src="examples/third/AHN2.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="https://www.phoenixlidar.com/sampledata/" target="_blank">
+						<img src="examples/third/phoenix_lidar.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://www.kkapc.co.jp/potree-1.5RC/examples/apc_tatumi.html" target="_blank">
+						<img src="examples/third/tatsumi_dam.jpg" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th>laspublish</th><th>Pointbox</th><th>Dublin</th><th>AHN2</th><th>Phoenix Lidar</th><th>Tatsumi Dam</th>
+			</tr><tr>
+				<td>
+					<a href="http://www.airborneresearch.com.au/potree/ironbank1/examples/ironbank1.html" target="_blank">
+						<img src="examples/third/ara.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="https://digitalreality.ethz.ch/goldmine/" target="_blank">
+						<img src="examples/third/goldmine.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://files.digitisation.unimelb.edu.au/potree/pointclouds/ricketts-test2.html" target="_blank">
+						<img src="examples/third/ricketts_sanctuary.jpg" width="100%" />
+					</a>
+				</td><td>
+					<a href="http://wesmapping.com/blog/3d-visualization-of-the-grand-canyon-with-potree/" target="_blank">
+						<img src="examples/third/wesmapping_grand_canyon.jpg" width="100%" />
+					</a>
+				</td>
+			</tr>
+			<tr>
+				<th></th><th></th><th></th><th>Wesmapping</th>
+			</tr>
+		</table>

examples/gradient_colors.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.setMinNodeSize(10);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription(`Available gradient color schemes.<br>
+		Set scheme with 'pointcloud.material.gradient = Potree.Gradients.&lt;name&gt;'`);
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_scene").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		viewer.scene.view.position.set(1441.04, -826.93, 1604.68);
+		viewer.scene.view.lookAt(new THREE.Vector3(296.27, -162.42, 786.24));
+		
+		let gradientNames = Object.keys(Potree.Gradients);
+		let radius = 520;
+		for(let i = 0; i < gradientNames.length; i++){
+			let gradientName = gradientNames[i];
+			let gradient = Potree.Gradients[gradientName];
+			
+			let u = 2 * Math.PI * i / gradientNames.length;
+			
+			let x = 0; //Math.cos(u) * radius + 2.5;
+			let y = 400 * u - 900; //Math.sin(u) * radius + 0.8;
+			
+			Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", gradientName, e => {
+				viewer.scene.addPointCloud(e.pointcloud);
+				
+				let material = e.pointcloud.material;
+				material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+				material.activeAttributeName = "elevation";
+				material.gradient = gradient;
+
+				if(gradientName === "CONTOUR"){
+					material.elevationRange = [750, 760];
+					viewer.setElevationGradientRepeat(Potree.ElevationGradientRepeat.REPEAT);
+				}else{
+					material.elevationRange = [720, 800];
+				}
+				
+				e.pointcloud.position.set(x, y, e.pointcloud.position.z);
+				
+				e.pointcloud.updateMatrixWorld();
+				let box = e.pointcloud.pcoGeometry.tightBoundingBox.clone();
+				box.applyMatrix4(e.pointcloud.matrixWorld);
+				let center = box.getCenter();
+				
+				
+				let annotation = new Potree.Annotation({
+					title: gradientName,
+					radius: 600
+				});
+				annotation.position = center;
+				annotation.position.z += 30;
+				viewer.scene.annotations.add(annotation);
+			});
+		}
+		
+		Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "custom", e => {
+			viewer.scene.addPointCloud(e.pointcloud);
+			
+			let material = e.pointcloud.material;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			material.activeAttributeName = "elevation";
+			material.gradient = [
+				[0.0, new THREE.Color(0.090, 0.545, 0.400)],
+				[0.1, new THREE.Color(0.180, 0.590, 0.400)],
+				[0.2, new THREE.Color(0.271, 0.635, 0.400)],
+				[0.3, new THREE.Color(0.365, 0.682, 0.400)],
+				[0.4, new THREE.Color(0.455, 0.727, 0.400)],
+				[0.5, new THREE.Color(0.545, 0.773, 0.400)],
+				[0.6, new THREE.Color(0.635, 0.818, 0.400)],
+				[0.7, new THREE.Color(0.729, 0.865, 0.400)],
+				[0.8, new THREE.Color(0.820, 0.910, 0.400)],
+				[0.9, new THREE.Color(0.910, 0.955, 0.400)],
+				[1.0, new THREE.Color(1.000, 1.000, 0.400)],
+			];
+			material.elevationRange = [720, 800];
+			
+			e.pointcloud.position.set(0, -1200, e.pointcloud.position.z);
+			
+			let annotation = new Potree.Annotation({
+				title: "custom",
+				radius: 600
+			});
+			e.pointcloud.updateMatrixWorld();
+			let box = e.pointcloud.pcoGeometry.tightBoundingBox.clone();
+			box.applyMatrix4(e.pointcloud.matrixWorld);
+			let center = box.getCenter();
+			annotation.position = center;
+			annotation.position.z += 30;
+			//annotation.position = new THREE.Vector3(0, 0, 5);
+			viewer.scene.annotations.add(annotation);
+		});
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/heidentor.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+		<input id="tiffTest" type="button" value="tiff test" />
+	</div>
+
+	
+	
+	<script type="module">
+
+		import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(false);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.setMinNodeSize(0);
+		viewer.loadSettingsFromURL();
+		viewer.setBackground("skybox");
+		viewer.setShowBoundingBox(false);
+		
+		viewer.setDescription(`Heidentor point cloud courtesy of <a href="http://archpro.lbg.ac.at/" target="_blank">Ludwig Boltzmann Institute - Archeological Prospection and Virtual Archeology</a> (26M points)`);
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+			$("#menu_tools").next().show();
+			$("#menu_scene").next().show();
+			//viewer.toggleSidebar();
+		});
+		
+		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/archpro/heidentor/cloud.js", "Heidentor", function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+			e.pointcloud.position.z = 0;
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			
+			viewer.scene.view.setView(
+				[13.856, -9.125, 14.563],
+				[-3.548,  2.728,  6.140],
+			);
+
+		});
+
+
+		{ // ground plane
+			const texture = new THREE.TextureLoader().load(`${Potree.resourcePath}/textures/rectangle.png`);
+
+			texture.wrapS = THREE.RepeatWrapping;
+			texture.wrapT = THREE.RepeatWrapping;
+			texture.repeat.x = 10;
+			texture.repeat.y = 10;
+			texture.anisotropy = 16;
+
+			let geometry = new THREE.PlaneBufferGeometry(1, 1, 10, 10);
+			let material = new THREE.MeshBasicMaterial();
+			material.map = texture;
+			material.needsUpdate = true;
+			let plane = new THREE.Mesh(geometry, material);
+			plane.scale.set(18, 18, 18);
+			plane.position.set(-2, 3, 0);
+			plane.material.color.setRGB(0.8, 0.8, 0.8);
+			window.plane = plane;
+			viewer.scene.scene.add(plane);
+		}
+
+		// { // spheres to indicate coordinate axes
+		// 	let sg = new THREE.SphereGeometry(0.1, 8, 8);
+
+		// 	{ // ORIGIN
+		// 		let sm = new THREE.MeshBasicMaterial({color: 0xaaaaaa});
+		// 		let sphere = new THREE.Mesh(sg, sm);
+		// 		sphere.position.set(0, 0, 0);
+		// 		viewer.scene.scene.add(sphere);
+		// 	}
+
+		// 	{ // X
+		// 		let sm = new THREE.MeshBasicMaterial({color: 0xff0000});
+		// 		let sphere = new THREE.Mesh(sg, sm);
+		// 		sphere.position.set(2, 0, 0);
+		// 		viewer.scene.scene.add(sphere);
+		// 	}
+
+			
+		// 	{ // Y
+		// 		let sm = new THREE.MeshBasicMaterial({color: 0x00ff00});
+		// 		let sphere = new THREE.Mesh(sg, sm);
+		// 		sphere.position.set(0, 2, 0);
+		// 		viewer.scene.scene.add(sphere);
+		// 	}
+
+			
+		// 	{ // Z
+		// 		let sm = new THREE.MeshBasicMaterial({color: 0x0000ff});
+		// 		let sphere = new THREE.Mesh(sg, sm);
+		// 		sphere.position.set(0, 0, 2);
+		// 		viewer.scene.scene.add(sphere);
+		// 	}
+
+		// 	{ // RANDOM SPHERES
+		// 		for(let i = 0; i < 2000; i++){
+		// 			let color = 
+		// 				((Math.random() * 255) << 16) |
+		// 				((Math.random() * 255) <<  8) |
+		// 				((Math.random() * 255) <<  0);
+		// 			let sm = new THREE.MeshBasicMaterial({color: color});
+		// 			let sphere = new THREE.Mesh(sg, sm);
+		// 			sphere.position.set(
+		// 				100 * Math.random() - 50, 
+		// 				100 * Math.random() - 50, 
+		// 				2);
+		// 			sphere.scale.set(3, 3, 3);
+		// 			viewer.scene.scene.add(sphere);
+
+		// 			sphere.frustumCulled = false;
+		// 		}
+		// 	}
+			
+		// }
+		
+	</script>
+	
+  </body>
+</html>

examples/light.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+		<input id="tiffTest" type="button" value="tiff test" />
+	</div>
+
+	
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(2_000_000);
+		viewer.setMinNodeSize(0);
+		viewer.loadSettingsFromURL();
+		viewer.setServer("http://localhost:3000");
+		
+		viewer.setDescription("");
+		
+		viewer.loadGUI().then(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+			// viewer.toggleSidebar();
+		});
+
+		let light = new THREE.SpotLight();
+		light.distance = 15;
+		light.angle = (60 / 180) * Math.PI;
+		light.position.set(8.489, 3.577, 5.796);
+		light.lookAt(new THREE.Vector3(1.219, -0.171, 2.776));
+		viewer.scene.scene.add(light);
+
+		let sph = new Potree.SpotLightHelper(light, new THREE.Color().setHex(0xff0000));
+		viewer.scene.scene.add(sph);
+		
+		// Sigeom
+		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/archpro/heidentor/cloud.js", "Heidentor", function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+			e.pointcloud.position.z = 0;
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			material.activeAttributeName = "elevation";
+			material.uniforms.uShadowColor.value = [0.6, 0.6, 0.6];
+
+			viewer.scene.view.position.set(19.474, -14.324, 12.829);
+			viewer.scene.view.lookAt(0.339, 0.145, 4.073);
+		});
+
+		
+		Potree.loadPointCloud("../pointclouds/lion_takanawa/cloud.js", "lion", function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+			
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			material.uniforms.uShadowColor.value = [0.6, 0.6, 0.6];
+			
+			e.pointcloud.position.set(0, -2, 0);
+			
+		});
+
+		
+	</script>
+	
+  </body>
+</html>

examples/light_animated.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+		<input id="tiffTest" type="button" value="tiff test" />
+	</div>
+
+	
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(2_000_000);
+		viewer.setMinNodeSize(0);
+		viewer.loadSettingsFromURL();
+		viewer.setServer("http://localhost:3000");
+		
+		viewer.setDescription("");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+			$("#menu_tools").next().show();
+			$("#menu_scene").next().show();
+			viewer.toggleSidebar();
+		});
+
+		let light = new THREE.SpotLight();
+		light.distance = 40;
+		light.angle = (40 / 180) * Math.PI;
+		light.position.set(-22.124, 15.918, 3.518);
+		light.lookAt(new THREE.Vector3(-5.306, 5.288, 3.084));
+		viewer.scene.scene.add(light);
+
+		let sph = new Potree.SpotLightHelper(light);
+		viewer.scene.scene.add(sph);
+
+		//let sphere = new THREE.Mesh(
+		//	new THREE.SphereGeometry(0.5, 32, 32),
+		//	new THREE.MeshNormalMaterial()
+		//);
+		//light.add(sphere);
+		
+		// Sigeom
+		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/archpro/heidentor/cloud.js", "Heidentor", function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+			e.pointcloud.position.z = 0;
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			material.activeAttributeName = "elevation";
+			material.uniforms.uShadowColor.value = [0.6, 0.6, 0.6];
+
+			viewer.scene.view.position.set(41.557, -27.297, 26.594);
+			viewer.scene.view.lookAt(0.183, -0.257, 3.687);
+		});
+
+		
+		Potree.loadPointCloud("../pointclouds/lion_takanawa/cloud.js", "lion", function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+			
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			material.uniforms.uShadowColor.value = [0.6, 0.6, 0.6];
+			
+			e.pointcloud.position.set(0, -2, 0);
+			
+		});
+
+
+
+		{
+			let path = [
+				[15.506560868146664, 19.85424459156799, 10.430903526784371],
+				[24.153037203881826, 8.630984861344729, 7.868461364682684],
+				[23.058229889155083, -9.364026455540067, 10.041731679632687],
+				[15.391447906397026, -17.97155939811601, 13.277761105290196],
+				[6.90802562298856, -17.486519615816228, 20.39621870363415],
+				[14.015309300286365, -3.716868043023982, 23.822233937781892],
+				[15.16757893483406, 14.923678231139498, 17.66449022142635],
+			].map(v => new THREE.Vector3(...v));
+			let target = new THREE.Vector3(-3.548, 2.729, 6.141);
+
+			let animationPath = new Potree.AnimationPath(path);
+			animationPath.closed = true;
+
+			{ // render the path
+				let geometry = animationPath.getGeometry();
+				let material = new THREE.LineBasicMaterial();
+				let line = new THREE.Line(geometry, material, {closed: animationPath.closed});
+				viewer.scene.scene.add(line);
+			}
+
+			{ // render the control points of the path
+				for(let pos of path){
+					let sg = new THREE.SphereGeometry(0.2, 32, 32);
+					let sm = new THREE.MeshBasicMaterial({color: 0xff0000});
+					let s = new THREE.Mesh(sg, sm); 
+					s.position.copy(pos);
+					viewer.scene.scene.add(s);
+				}
+			}
+
+			{ // Animate from beginning to end with a speed of 10 meters per second
+				let start = 0;
+				let end = Infinity;
+				let speed = 20; 
+				let animation = animationPath.animate(start, end, speed, t => {
+					animation.repeat = true;
+
+					// t is a value between 0 and 1.
+					// use getPoint(t) to map from t to the position on the animation path
+					let point = animation.getPoint(t);
+					light.position.copy(point);
+					light.lookAt(target);
+
+					sph.update();
+				});
+				window.animation = animation;
+			}
+
+		}
+		
+	</script>
+	
+  </body>
+</html>

examples/light_ca13.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');">
+			<input type="button" id="animation_toggle" value="pause" 
+				style="position: absolute; bottom: 20px; left: 45%; width: 20%; height: 30px; z-index: 10000"/>
+		</div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+
+	
+	
+	<script type="module">
+
+		import * as THREE from "../libs/three.js/build/three.module.js";
+
+		$("#animation_toggle").click( () => {
+			if(!animation.tween){
+				$("#animation_toggle").prop("value", "pause");
+				animation.resume();
+			}else{
+				$("#animation_toggle").prop("value", "resume");
+				animation.pause();
+			}
+		});
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(3_000_000);
+		viewer.setMinNodeSize(0);
+		viewer.loadSettingsFromURL();
+		viewer.setServer("http://localhost:3000");
+		
+		viewer.setDescription("");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+			$("#menu_tools").next().show();
+			$("#menu_scene").next().show();
+			viewer.toggleSidebar();
+		});
+
+		let light = new THREE.SpotLight();
+		light.distance = 1000;
+		light.position.set(694183.609, 3916133.150, 294.804);
+		light.lookAt(new THREE.Vector3(694784.299, 3916302.204, 2.697));
+		viewer.scene.scene.add(light);
+
+		let sph = new Potree.SpotLightHelper(light, new THREE.Color().setHex(0xff0000));
+		viewer.scene.scene.add(sph);
+		
+		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/opentopography/CA13_1.4/cloud.js", "CA13", function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			material.uniforms.uShadowColor.value = [0.6, 0.0, 0.0];
+
+			viewer.scene.view.position.set(695235.543, 3914545.349, 1135.256);
+			viewer.scene.view.lookAt(695234.024, 3916032.892, 178.648);
+		});
+
+	
+		{
+			let path = [
+				[694677.10, 3916294.33, 10.53],
+				[694733.42, 3916254.71, 13.31],
+				[694823.14, 3916179.50, 46.80],
+				[695019.24, 3916116.38, 48.62],
+				[695174.56, 3916209.34, 88.01],
+				[695151.25, 3916485.92, 93.09],
+				[695024.73, 3916701.16, 88.34],
+				[694749.78, 3916853.10, 62.62],
+				[694469.97, 3916728.42, 43.01],
+				[694457.56, 3916456.28, 23.38]
+			].map(v => new THREE.Vector3(...v));
+			let target = new THREE.Vector3(-3.548, 2.729, 6.141);
+
+			let animationPath = new Potree.AnimationPath(path);
+			animationPath.closed = true;
+
+			{ // render the path
+				let geometry = animationPath.getGeometry();
+				let material = new THREE.LineBasicMaterial();
+				let line = new THREE.Line(geometry, material, {closed: animationPath.closed});
+				viewer.scene.scene.add(line);
+			}
+
+			{ // render the control points of the path
+				for(let pos of path){
+					let sg = new THREE.SphereGeometry(5.0, 32, 32);
+					let sm = new THREE.MeshBasicMaterial({color: 0x0000ff});
+					let s = new THREE.Mesh(sg, sm); 
+					s.position.copy(pos);
+					viewer.scene.scene.add(s);
+				}
+			}
+
+			{ // Animate from beginning to end with a speed of 10 meters per second
+				let start = 0;
+				let end = Infinity;
+				let speed = 200; 
+				let animation = animationPath.animate(start, end, speed, t => {
+					animation.repeat = true;
+
+					// t is a value between 0 and 1.
+					// use getPoint(t) to map from t to the position on the animation path
+					let point = animation.getPoint(t);
+					let target = animation.getPoint(t + 0.0001);
+					light.position.copy(point);
+					light.lookAt(target);
+					sph.update();
+				});
+				window.animation = animation;
+			}
+
+			{
+				viewer.onGUILoaded(() => {
+
+					console.log("adding to gui");
+
+					// Add entries to object list in sidebar
+					let tree = $(`#jstree_scene`);
+					let parentNode = "other";
+
+					let node = tree.jstree('create_node', parentNode, { 
+							"text": "Light", 
+							"icon": `${Potree.resourcePath}/icons/triangle.svg`,
+							"data": light
+						}, 
+						"last", false, false);
+					tree.jstree("check_node", node);
+
+				});
+			}
+		}
+
+		function pause(){
+			animation.pause();
+		}
+
+		function resume(){
+			animation.resume();
+		}
+		
+	</script>
+	
+  </body>
+</html>

examples/lines.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+		import * as THREE from "../libs/three.js/build/three.module.js";
+		import {Line2} from "../libs/three.js/lines/Line2.js";
+		import {LineGeometry} from "../libs/three.js/lines/LineGeometry.js";
+		import {LineMaterial} from "../libs/three.js/lines/LineMaterial.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription("Point cloud courtesy of <a target='_blank' href='https://www.sigeom.ch/'>sigeom sa</a>");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_tools").next().show();
+			//viewer.toggleSidebar();
+		});
+		
+		// Sigeom
+		Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "sigeom.sa", function(e){
+			let scene = viewer.scene;
+			scene.addPointCloud(e.pointcloud);
+			
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			
+			scene.view.position.set(589974.341, 231698.397, 986.146);
+			scene.view.lookAt(new THREE.Vector3(589851.587, 231428.213, 715.634));
+			// viewer.fitToScreen();
+		});
+		
+		{ // add a polyline
+			let path = [
+				590058.52, 231354.16, 766.42,
+				589941.68, 231476.67, 736.52,
+				589781.32, 231491.91, 757.73,
+				589711.88, 231445.56, 768.16,
+				589702.04, 231336.49, 772.91
+			];
+
+			let lineGeometry = new LineGeometry();
+
+			lineGeometry.setPositions(path);
+
+			let lineMaterial = new LineMaterial({ 
+				color: 0x00ff00, 
+				dashSize: 5, 
+				gapSize: 2,
+				linewidth: 2, 
+				resolution:  new THREE.Vector2(1000, 1000),
+			});
+
+			viewer.addEventListener("update", () => {
+				viewer.renderer.getSize(lineMaterial.resolution);
+				
+			});
+
+			const line = new Line2(lineGeometry, lineMaterial);
+			viewer.scene.scene.add(line);
+		}
+		
+	</script>
+	
+	
+  </body>
+</html>
+
+

examples/lion.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	
+	
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription("");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+			//viewer.toggleSidebar();
+		});
+		
+		// Lion
+		Potree.loadPointCloud("../pointclouds/lion_takanawa/cloud.js", "lion", function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+			
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			
+			viewer.fitToScreen();
+		});
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/lion_las.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription("Loading Octree of LAS files");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+			//viewer.toggleSidebar();
+		});
+		
+		// Sigeom
+		Potree.loadPointCloud("../pointclouds/lion_takanawa_las/cloud.js", "lion", function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+			
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			
+			e.pointcloud.position.x += 3;
+			e.pointcloud.position.y -= 3;
+			e.pointcloud.position.z += 4;
+			
+			viewer.fitToScreen();
+		});
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/lion_laz.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	
+	
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription("Loading LAZ compressed octree format");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_appearance").next().show();
+			//viewer.toggleSidebar();
+		});
+		
+		Potree.loadPointCloud("../pointclouds/lion_takanawa_laz/cloud.js", "lion", function(e){
+			viewer.scene.addPointCloud(e.pointcloud);
+			
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			
+			e.pointcloud.position.x += 3;
+			e.pointcloud.position.y -= 3;
+			e.pointcloud.position.z += 4;
+			
+			viewer.fitToScreen();
+		});
+		
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/load_project.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	
+	
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setDescription("Potree projects that were exported (Scene → Export → Potree) can be loaded with viewer.loadProject(url). ");
+		
+		viewer.loadGUI().then( () => {
+			viewer.setLanguage('en');
+			$("#menu_tools").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		viewer.loadProject("./resources/sorvilier.json").then( () => {
+			console.log("project loaded");
+		});
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/matcap.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	
+	
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+	import * as THREE from "../libs/three.js/build/three.module.js";
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(false);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.loadSettingsFromURL();
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_scene").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		// Load and add point cloud to scene
+		Potree.loadPointCloud("../pointclouds/lion_takanawa_normals/cloud.js", "lion takanawa normals", e => {
+			let scene = viewer.scene;
+			let pointcloud = e.pointcloud;
+			scene.addPointCloud(pointcloud);
+			
+			let material = pointcloud.material;
+			material.size = 3;
+			material.pointSizeType = Potree.PointSizeType.FIXED;
+			material.shape = Potree.PointShape.CIRCLE;
+
+			// Edit matcap properties
+			material.activeAttributeName = "matcap"; 
+			material.matcap = 'metal_shiny.jpg'
+
+			viewer.scene.view.setView(
+				[4.087, -2.473, 2.015],
+				[-2.887, 3.882, -1.160],
+			);
+		});
+		
+	</script>
+	
+	
+</body>
+</html>

examples/measurements.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+		import * as THREE from "../libs/three.js/build/three.module.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription("Point cloud courtesy of <a target='_blank' href='https://www.sigeom.ch/'>sigeom sa</a>");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_tools").next().show();
+			$("#menu_scene").next().show();
+			viewer.toggleSidebar();
+		});
+		
+		// Sigeom
+		Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "sigeom.sa", function(e){
+			let scene = viewer.scene;
+			scene.addPointCloud(e.pointcloud);
+			
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+			
+			{ // DISTANCE MEASURE
+				let measure = new Potree.Measure();
+				measure.closed = false;
+				measure.addMarker(new THREE.Vector3(589803.18, 231357.35, 745.38));
+				measure.addMarker(new THREE.Vector3(589795.74, 231323.42, 746.21));
+				measure.addMarker(new THREE.Vector3(589822.50, 231315.90, 744.45));
+				
+				scene.addMeasurement(measure);
+			}
+			
+			{ // ANGLE MEASURE
+				let measure = new Potree.Measure();
+				measure.name = "Angle Sample";
+				measure.closed = true;
+				measure.showAngles = true;
+				measure.showDistances = false;
+				measure.addMarker(new THREE.Vector3(589866.11, 231372.25, 737.41));
+				measure.addMarker(new THREE.Vector3(589842.15, 231366.82, 743.61));
+				measure.addMarker(new THREE.Vector3(589860.61, 231348.01, 740.33));
+				
+				scene.addMeasurement(measure);
+			}
+			
+			{ // SINGLE POINT MEASURE
+				let measure = new Potree.Measure();
+				measure.name = "Canopy";
+				measure.showDistances = false;
+				measure.showCoordinates = true;
+				measure.maxMarkers = 1;
+				measure.addMarker(new THREE.Vector3(589853.73, 231300.24, 775.48));
+				
+				scene.addMeasurement(measure);
+			}
+			
+			{ // HEIGHT MEASURE
+				let measure = new Potree.Measure();
+				measure.name = "Tree Height";
+				measure.closed = false;
+				measure.showDistances = false;
+				measure.showHeight = true;
+				measure.addMarker(new THREE.Vector3(589849.69, 231327.26, 766.32));
+				measure.addMarker(new THREE.Vector3(589840.96, 231329.53, 744.52));
+				
+				scene.addMeasurement(measure);
+			}
+			
+			{ // AREA MEASURE
+				let measure = new Potree.Measure();
+				measure.name = "Area";
+				measure.closed = true;
+				measure.showArea = true;
+				measure.addMarker(new THREE.Vector3(589899.37, 231300.16, 750.25));
+				measure.addMarker(new THREE.Vector3(589874.60, 231326.06, 743.40));
+				measure.addMarker(new THREE.Vector3(589911.61, 231352.57, 743.58));
+				measure.addMarker(new THREE.Vector3(589943.50, 231300.08, 754.62));
+				
+				scene.addMeasurement(measure);
+			}
+			
+			scene.view.position.set(589874.36, 231447.43, 835.03);
+			scene.view.lookAt(new THREE.Vector3(589853.01, 231318.55, 738.91));
+
+		});
+		
+	</script>
+	
+	
+  </body>
+</html>

examples/meshes.html

@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<title>Potree Viewer</title>
+
+	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
+	<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
+	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
+	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
+</head>
+
+<body>
+	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
+	<script src="../libs/spectrum/spectrum.js"></script>
+	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
+	<script src="../libs/other/BinaryHeap.js"></script>
+	<script src="../libs/tween/tween.min.js"></script>
+	<script src="../libs/d3/d3.js"></script>
+	<script src="../libs/proj4/proj4.js"></script>
+	<script src="../libs/openlayers3/ol.js"></script>
+	<script src="../libs/i18next/i18next.js"></script>
+	<script src="../libs/jstree/jstree.js"></script>
+	<script src="../build/potree/potree.js"></script>
+	<script src="../libs/plasio/js/laslaz.js"></script>
+	
+	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
+	<!-- INCLUDE SETTINGS HERE -->
+	
+	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
+		<div id="potree_sidebar_container"> </div>
+	</div>
+	
+	<script type="module">
+
+		import * as THREE from "../libs/three.js/build/three.module.js";
+		import {PLYLoader} from "../libs/three.js/loaders/PLYLoader.js";
+		import {OBJLoader} from "../libs/three.js/loaders/OBJLoader.js";
+	
+		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
+		
+		viewer.setEDLEnabled(true);
+		viewer.setFOV(60);
+		viewer.setPointBudget(1_000_000);
+		viewer.loadSettingsFromURL();
+		
+		viewer.setDescription("Point cloud courtesy of <a target='_blank' href='https://www.sigeom.ch/'>sigeom sa</a>");
+		
+		viewer.loadGUI(() => {
+			viewer.setLanguage('en');
+			$("#menu_tools").next().show();
+			$("#menu_scene").next().show();
+			//viewer.toggleSidebar();
+		});
+		
+		// Sigeom
+		Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "sigeom.sa", function(e){
+			let scene = viewer.scene;
+			scene.addPointCloud(e.pointcloud);
+			
+			let material = e.pointcloud.material;
+			material.size = 1;
+			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+
+			scene.view.position.set(589974.341, 231698.397, 986.146);
+			scene.view.lookAt(new THREE.Vector3(589851.587, 231428.213, 715.634));
+			// viewer.fitToScreen();
+		});
+		
+		var loader = new PLYLoader();
+		loader.load( Potree.resourcePath + "/models/stanford_bunny_reduced.ply", (geometry) => {
+			geometry.computeVertexNormals();
+			
+			// place three instances of this bunny into the scene
+			
+			let mesh1;
+			{
+				let material = new THREE.MeshNormalMaterial();
+				mesh1 = new THREE.Mesh( geometry, material );
+				mesh1.position.set(589951.587, 231428.213, 710.634);
+				mesh1.scale.multiplyScalar(500);
+				mesh1.rotation.set(Math.PI / 2, Math.PI, 0)
+				viewer.scene.scene.add(mesh1);
+			}
+			
+			let mesh2;
+			{
+				let material = new THREE.MeshStandardMaterial( { 
+					color: 0x0055ff, 
+					flatShading: true,
+					metalness: 0.2} );
+				mesh2 = new THREE.Mesh( geometry, material );
+				mesh2.position.set(589851.587, 231348.213, 720.634);
+				mesh2.scale.multiplyScalar(500);
+				mesh2.rotation.set(Math.PI / 2, Math.PI, 0)
+				viewer.scene.scene.add(mesh2);
+			}
+			
+			let mesh3;
+			{
+				let material = new THREE.MeshPhysicalMaterial( {
+					color: 0x226666,
+					metalness: 0,
+					roughness: 0.5,
+					reflectivity: 1.0
+				} );
+				mesh3 = new THREE.Mesh( geometry, material );
+				mesh3.position.set(589751.587, 231428.213, 725.634);
+				mesh3.scale.multiplyScalar(500);
+				mesh3.rotation.set(Math.PI / 2, Math.PI, 0)
+				viewer.scene.scene.add(mesh3);
+			}
+
+			viewer.onGUILoaded(() => {
+				// Add entries to object list in sidebar
+				let tree = $(`#jstree_scene`);
+				let parentNode = "other";
+
+				let bunny1ID = tree.jstree('create_node', parentNode, { 
+						"text": "Bunny 1", 
+						"icon": `${Potree.resourcePath}/icons/triangle.svg`,
+						"data": mesh1
+					}, 
+					"last", false, false);
+				tree.jstree(mesh1.visible ? "check_node" : "uncheck_node", bunny1ID);
+
+				let bunny2ID = tree.jstree('create_node', parentNode, { 
+						"text": "Bunny 2", 
+						"icon": `${Potree.resourcePath}/icons/triangle.svg`,
+						"data": mesh2
+					}, 
+					"last", false, false);
+				tree.jstree(mesh2.visible ? "check_node" : "uncheck_node", bunny2ID);
+
+				let bunny3ID = tree.jstree('create_node', parentNode, { 
+						"text": "Bunny 3", 
+						"icon": `${Potree.resourcePath}/icons/triangle.svg`,
+						"data": mesh3
+					}, 
+					"last", false, false);
+				tree.jstree(mesh3.visible ? "check_node" : "uncheck_node", bunny3ID);
+			});
+			
+		});
+
+
+		{
+			let manager = new THREE.LoadingManager();
+			manager.onProgress = function ( item, loaded, total ) {
+				console.log( item, loaded, total );
+			};
+
+			let onProgress = function ( xhr ) {
+				if ( xhr.lengthComputable ) {
+					let percentComplete = xhr.loaded / xhr.total * 100;
+					console.log( Math.round(percentComplete, 2) + '% downloaded' );
+				}
+			};
+			let onError = function ( xhr ) {};
+
+			const texture = new THREE.TextureLoader().load(`${Potree.resourcePath}/textures/brick_pavement.jpg`);
+
+			texture.wrapS = THREE.RepeatWrapping;
+			texture.wrapT = THREE.RepeatWrapping;
+
+			let loader = new OBJLoader( manager );
+			loader.load(`${Potree.resourcePath}/models/stanford_bunny_reduced.obj`, function ( object ) {
+				object.traverse( function ( child ) {
+					if ( child instanceof THREE.Mesh ) {
+						child.material.map = texture;
+					}
+				} );
+
+				object.position.set(589871.587, 231528.213, 725.634);
+				object.scale.multiplyScalar(500);
+				object.rotation.set(Math.PI / 2, Math.PI, 0)
+
+				viewer.scene.scene.add( object );
+
+				viewer.onGUILoaded(() => {
+					// Add entries to object list in sidebar
+					let tree = $(`#jstree_scene`);
+					let parentNode = "other";
+
+					let bunnyID = tree.jstree('create_node', parentNode, { 
+							text: "Bunny Textured", 
+							icon: `${Potree.resourcePath}/icons/triangle.svg`,
+							data: object
+						}, 
+						"last", false, false);
+					tree.jstree(object.visible ? "check_node" : "uncheck_node", bunnyID);
+
+					//tree.jstree("open_node", parentNode);
+				});
+
+			}, onProgress, onError );
+		}
+
+		{ // LIGHTS
+			const directional = new THREE.DirectionalLight( 0xffffff, 1.0);
+			directional.position.set( 10, 10, 10 );
+			directional.lookAt(0, 0, 0);
+
+			const ambient = new THREE.AmbientLight(0x555555);
+
+			viewer.scene.scene.add(directional);
+			viewer.scene.scene.add(ambient);
+		}
+
+	</script>
+	
+	
+  </body>
+</html>

examples/morro_bay_shp/CHECKSUM.txt

@@ -0,0 +1,80 @@
+1ca15bf75755838f3db6aa559b6db2d3  shape/buildings.cpg
+6168495b90444704d0876e04c16811a4  shape/buildings.dbf
+4aed6d03a6f3dc069565e358219b11b3  shape/buildings.prj
+f77b5a519c75ddbe9834d764a9dd20d6  shape/buildings.shp
+d674e389eb529b3cec74d87a2d34c659  shape/buildings.shx
+1ca15bf75755838f3db6aa559b6db2d3  shape/landuse.cpg
+b658e499e0b5e35707eb91ddd12c43b4  shape/landuse.dbf
+4aed6d03a6f3dc069565e358219b11b3  shape/landuse.prj
+bdb1246739a26158d705e58925c2ecb8  shape/landuse.shp
+7c3074ef505dd3822e5b8ba03a5e492f  shape/landuse.shx
+1ca15bf75755838f3db6aa559b6db2d3  shape/natural.cpg
+f40953aff5cd7929d5f7c10a3170695f  shape/natural.dbf
+4aed6d03a6f3dc069565e358219b11b3  shape/natural.prj
+651972e406a91ad709003008a6299559  shape/natural.shp
+c5c1295df6f119557e6d2004b1c9d825  shape/natural.shx
+1ca15bf75755838f3db6aa559b6db2d3  shape/places.cpg
+5c972c30d5ae478c2633587db375697a  shape/places.dbf
+4aed6d03a6f3dc069565e358219b11b3  shape/places.prj
+76a4ce257b05783061192c906c3b1031  shape/places.shp
+479007e427e8102ce31f5c787a3d0873  shape/places.shx
+1ca15bf75755838f3db6aa559b6db2d3  shape/points.cpg
+d0add80df57e93363944768d2f97c55c  shape/points.dbf
+4aed6d03a6f3dc069565e358219b11b3  shape/points.prj
+ec0dca1c1c1c2e3e969d2688ef0a999e  shape/points.shp
+3b01d097e4f026cc890cc0e856d6cf2d  shape/points.shx
+1ca15bf75755838f3db6aa559b6db2d3  shape/railways.cpg
+58e1c5eb9ff1dea3097fc1f6f5a5b927  shape/railways.dbf
+4aed6d03a6f3dc069565e358219b11b3  shape/railways.prj
+f0deb5ec5cd8e219488ecb30b667d642  shape/railways.shp
+f0deb5ec5cd8e219488ecb30b667d642  shape/railways.shx
+1ca15bf75755838f3db6aa559b6db2d3  shape/roads.cpg
+9d2d29852f85d4e7e3eff1f524c7246c  shape/roads.dbf
+4aed6d03a6f3dc069565e358219b11b3  shape/roads.prj
+4fcfe53767d31710433c30576626401a  shape/roads.shp
+e2b6c344df6b28620706b8a2bc8de728  shape/roads.shx
+1ca15bf75755838f3db6aa559b6db2d3  shape/waterways.cpg
+7735c6077c5c00fe7a8c703d68b471cd  shape/waterways.dbf
+4aed6d03a6f3dc069565e358219b11b3  shape/waterways.prj
+17031af1bbd570b75cf134928684c4c8  shape/waterways.shp
+f32f74f2cfdf454accc7277c87fcdba2  shape/waterways.shx
+146d6789ffe033a5297c1ad046e6a62ee35319b86b021444f05b6ea2aa8a1f4a  shape/buildings.cpg
+f71dbb34d5a40ca9d52cec0fbfe297901e25a5409f94c8efb4d9f4e5b0951422  shape/buildings.dbf
+ffc9162903c37f0867d1e7f36c20036a165f7aa555dda24c1ae0ee4328d2977f  shape/buildings.prj
+e3bc9054d022363d5e3475baa65aa4fd1fc5ec788c32009dcaac868afa7ed3d3  shape/buildings.shp
+e49375cbc399af9220188f19c2c0cb9fc547c00ffe7faca14072396f5d94c7de  shape/buildings.shx
+146d6789ffe033a5297c1ad046e6a62ee35319b86b021444f05b6ea2aa8a1f4a  shape/landuse.cpg
+a83ed56435f1e5a67b07d5a9cdf1fba49f027cabb696cef8613b6f3ed066e5e6  shape/landuse.dbf
+ffc9162903c37f0867d1e7f36c20036a165f7aa555dda24c1ae0ee4328d2977f  shape/landuse.prj
+a3183de51cde98086e85cc6fd5d9b20c1bd5ddf5452f640b7f51a757b8d37a42  shape/landuse.shp
+a42d0a21484277ca9ce49e3123deea8b5e365768724f287db001aa5187df2fc6  shape/landuse.shx
+146d6789ffe033a5297c1ad046e6a62ee35319b86b021444f05b6ea2aa8a1f4a  shape/natural.cpg
+32a3e33a2a6fddc1c3b2edd8b518b2a5835c7a81f0178a46d8898f90940bbf84  shape/natural.dbf
+ffc9162903c37f0867d1e7f36c20036a165f7aa555dda24c1ae0ee4328d2977f  shape/natural.prj
+2891feae015a11da4ca452676d1a8ad6f561fe56887dbc1104f7f86c7eb0644d  shape/natural.shp
+59e98dfdb063bfde560edfbcd8e556f1de9f255948b8e0b151a4ff8c494abeca  shape/natural.shx
+146d6789ffe033a5297c1ad046e6a62ee35319b86b021444f05b6ea2aa8a1f4a  shape/places.cpg
+fce272c2ddc2bf96f3d8ebf89fc0f0b276718b0a1fd010584638414b690b8bef  shape/places.dbf
+ffc9162903c37f0867d1e7f36c20036a165f7aa555dda24c1ae0ee4328d2977f  shape/places.prj
+51cb24b20eb243e038259d7011172ae478c116f04391affb31da66fdb57bb92f  shape/places.shp
+76dcd112ae9e56a9162cd711c59b935a663cacc1eae81469b7868510bfc73b45  shape/places.shx
+146d6789ffe033a5297c1ad046e6a62ee35319b86b021444f05b6ea2aa8a1f4a  shape/points.cpg
+590c6a4d7d102e92a6f6cc86109322880770eb9b71d2af8935de226a7ce0ec52  shape/points.dbf
+ffc9162903c37f0867d1e7f36c20036a165f7aa555dda24c1ae0ee4328d2977f  shape/points.prj
+da64629f42eb7762209f29f93284c36f98d957ffb65f700495d1608175443b43  shape/points.shp
+6f088c7c73ffdf75714ba8fa614d001e4313e9be96ebf832acae5b1d47d7a046  shape/points.shx
+146d6789ffe033a5297c1ad046e6a62ee35319b86b021444f05b6ea2aa8a1f4a  shape/railways.cpg
+0e9be3988a30f066800e4f801ea8fa680ca0a825e6f0d5575d3a61b6e4128237  shape/railways.dbf
+ffc9162903c37f0867d1e7f36c20036a165f7aa555dda24c1ae0ee4328d2977f  shape/railways.prj
+926401bfc2997f7c001f827859a1281ceb6f688660720f605f14f3e54207568e  shape/railways.shp
+926401bfc2997f7c001f827859a1281ceb6f688660720f605f14f3e54207568e  shape/railways.shx
+146d6789ffe033a5297c1ad046e6a62ee35319b86b021444f05b6ea2aa8a1f4a  shape/roads.cpg
+7b641d3b271ede56d798c96793aa65f2fed1d43ba8a729e77517430b17bb2134  shape/roads.dbf
+ffc9162903c37f0867d1e7f36c20036a165f7aa555dda24c1ae0ee4328d2977f  shape/roads.prj
+2aabbd68cbf4a7d84c72898dc54228fe404fcc0781e0f5ad449baeae07db1534  shape/roads.shp
+e33a97465d389b9c81843b189c3c5e3a9c3eeb80cdabe13617ec65283a1f4d96  shape/roads.shx
+146d6789ffe033a5297c1ad046e6a62ee35319b86b021444f05b6ea2aa8a1f4a  shape/waterways.cpg
+9b57d852853004fa916cd136cd32d914858fb2f99526331f15a3ac61c6fab80c  shape/waterways.dbf
+ffc9162903c37f0867d1e7f36c20036a165f7aa555dda24c1ae0ee4328d2977f  shape/waterways.prj
+fd8b219e001113281f14c9bab825ec033febf1083ae6989087b7da526eecf83e  shape/waterways.shp
+9f756dc1503752fa821f8cb4d18e4c8678d1cc4c39d5bd8d794e55db4b646aa3  shape/waterways.shx

examples/morro_bay_shp/README.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
+
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title>README</title>
+</head>
+
+<body>
+  <pre>
+Map data (c) OpenStreetMap contributors, <a href="https://www.openstreetmap.org">https://www.openstreetmap.org</a>
+Extracts created by BBBike, <a href="https://extract.bbbike.org">https://extract.bbbike.org</a>
+osmium2shape by Geofabrik, <a href="https://geofabrik.de">https://geofabrik.de</a>
+
+
+Please read the OSM wiki how to use shape files.
+
+  <a href="https://wiki.openstreetmap.org/wiki/Shapefiles">https://wiki.openstreetmap.org/wiki/Shapefiles</a>
+
+
+Dieses Esri shapefile wurde erzeugt am: Tue Jun 13 12:40:57 UTC 2017
+GPS Rechteck Koordinaten (lng,lat): -120.884,35.36 x -120.821,35.392
+Script URL: <a href="https://extract.bbbike.org/?sw_lng=-120.884&amp;sw_lat=35.36&amp;ne_lng=-120.821&amp;ne_lat=35.392&amp;format=shp.zip&amp;city=Morro%20Bay&amp;lang=de">https://extract.bbbike.org/?sw_lng=-120.884&amp;sw_lat=35.36&amp;ne_lng=-120.821&amp;ne_lat=35.392&amp;format=shp.zip&amp;city=Morro%20Bay&amp;lang=de</a>
+Name des Gebietes: Morro Bay
+
+Spenden sind willkommen! Du kannst uns via PayPal, Flattr oder Bankueberweisung
+unterstuetzen: <a href="https://www.bbbike.org/community.de.html">https://www.bbbike.org/community.de.html</a>
+
+Danke, Wolfram Schneider
+
+--
+Dein Fahrrad-Routenplaner: <a href="https://www.BBBike.org">https://www.BBBike.org</a>
+BBBike Map Compare: <a href="https://bbbike.org/mc">https://bbbike.org/mc</a>
+</pre>
+</body>
+</html>