Merge branch 'main_dev' into 'main'

Main dev

See merge request yunteng/thingskit-view!316

@@ -3,5 +3,6 @@ node_modules
 dist
 dist-ssr
 *.local
+*.zip
 .vscode
 .idea

+FROM nginx:latest
+
+COPY ./dist/ /usr/share/nginx/html/
+COPY default.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 8084

-import path from 'path'
+import path, { resolve } from 'path'
 import { BuildOptions } from 'vite'
 export const OUTPUT_DIR = 'dist'
 
@@ -13,6 +13,10 @@ export const brotliSize = false
 
 // 分包
 export const rollupOptions: BuildOptions['rollupOptions'] = {
+  input: {
+    main: resolve(__dirname, '../index.html'),
+    editor: resolve(__dirname, '../editor/index.html'),
+  },
   output: {
     chunkFileNames: 'static/js/[name]-[hash].js',
     entryFileNames: 'static/js/[name]-[hash].js',

-import { createHtmlPlugin } from 'vite-plugin-html'
+import { HtmlTagDescriptor, Plugin } from 'vite'
+// import { createHtmlPlugin } from 'vite-plugin-html'
 
 const GLOB_CONFIG_FILE_NAME = '_app.config.js'
 
-export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
+export function configHtmlPlugin(env: ViteEnv, isBuild: boolean): Plugin {
   const { VITE_GLOB_APP_TITLE, VITE_GLOB_PUBLIC_PATH } = env
   const getAppConfigSrc = () => {
     const path = VITE_GLOB_PUBLIC_PATH
     return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${Date.now()}`
   }
 
-  const htmlPlugin = createHtmlPlugin({
-    minify: isBuild,
-    inject: {
-      data: {
-        title: VITE_GLOB_APP_TITLE,
-      },
-      tags: isBuild ? [
-        {
-          tag: 'script',
-          attrs: { src: getAppConfigSrc() }
-        }
-      ] : []
+  // const htmlPlugin = createHtmlPlugin({
+  //   minify: isBuild,
+  //   inject: {
+  //     data: {
+  //       title: VITE_GLOB_APP_TITLE,
+  //     },
+  //     tags: isBuild ? [
+  //       {
+  //         tag: 'script',
+  //         attrs: { src: getAppConfigSrc() }
+  //       }
+  //     ] : []
+  //   }
+  // })
+
+
+
+  const tags:HtmlTagDescriptor[] = [
+    {
+      tag: 'title',
+      children: VITE_GLOB_APP_TITLE
     }
-  })
+  ]
 
-  return htmlPlugin
+  if (isBuild) {
+    tags.push(
+      {
+        tag: 'script',
+        attrs: { src: getAppConfigSrc() }
+      }
+    )
+  }
+  return {
+    name: 'html-plugin',
+    transformIndexHtml: (code, ctx) => {
+    
+      return {
+        html: code,
+        tags
+      }
+    },
+
+  }
 }

+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  192.168.1.48;
+    #charset koi8-r;
+    #access_log  /var/log/nginx/host.access.log  main;
+   
+	root    /usr/share/nginx/html; 
+	index  index.html index.htm;
+	try_files $uri $uri/ /index.html;
+    
+
+	
+	location /api/ {
+		proxy_pass http://192.168.1.48:8080;
+		proxy_http_version 1.1;
+		proxy_set_header Upgrade $http_upgrade;
+		proxy_set_header Connection "Upgrade";
+		proxy_set_header Host $host;
+		proxy_cache_bypass $http_upgrade;
+	}
+	
+	location /yt/ {
+		proxy_pass http://192.168.1.48:8080;
+		proxy_http_version 1.1;
+		proxy_set_header Upgrade $http_upgrade;
+		proxy_set_header Connection "Upgrade";
+		proxy_set_header Host $host;
+		proxy_cache_bypass $http_upgrade;
+	}
+	
+	location /upload/ {
+		proxy_pass http://192.168.1.48:8080;
+		proxy_http_version 1.1;
+		proxy_set_header Upgrade $http_upgrade;
+		proxy_set_header Connection "Upgrade";
+		proxy_set_header Host $host;
+		proxy_cache_bypass $http_upgrade;
+	}
+	
+	#error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}
\ No newline at end of file

+{
+    "extends": [
+        "../.eslintrc.json"
+    ],
+    "parserOptions": {
+        "sourceType": "module",
+        "ecmaVersion": 2020
+    }
+}
\ No newline at end of file

+:root {
+	color-scheme: light dark;
+}
+
+[hidden] {
+	display: none !important;
+}
+
+body {
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 14px;
+	margin: 0;
+	overflow: hidden;
+}
+
+hr {
+	border: 0;
+	border-top: 1px solid #ccc;
+}
+
+button {
+	position: relative;
+}
+
+input {
+	vertical-align: middle;
+}
+
+	input[type="color"]::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+	input[type="color"]::-webkit-color-swatch {
+		border: none;
+	}
+
+textarea {
+	tab-size: 4;
+	white-space: pre;
+	word-wrap: normal;
+}
+
+	textarea.success {
+		border-color: #8b8 !important;
+	}
+
+	textarea.fail {
+		border-color: #f00 !important;
+		background-color: rgba(255,0,0,0.05);
+	}
+
+textarea, input { outline: none; } /* osx */
+
+.Panel {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+
+	/* No support for these yet */
+	-o-user-select: none;
+	user-select: none;
+}
+
+.TabbedPanel {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+
+	/* No support for these yet */
+	-o-user-select: none;
+	user-select: none;
+	position: relative;
+	display: block;
+	width: 100%;
+	min-width: 335px;
+}
+
+.TabbedPanel .Tabs {
+	position: relative;
+	z-index: 1; /** Above .Panels **/
+	display: block;
+	width: 100%;
+	white-space: pre;
+	overflow: hidden;
+	overflow-x: auto;
+}
+
+	.TabbedPanel .Tabs::-webkit-scrollbar {
+		height: 5px;
+		background: #eee;
+	}
+	.TabbedPanel .Tabs::-webkit-scrollbar-thumb {
+		background: #08f3;
+	}
+	.TabbedPanel .Tabs:hover::-webkit-scrollbar-thumb {
+		background: #08f;
+		cursor: ew-resize;
+	}
+
+	.TabbedPanel .Tabs .Tab {
+		padding: 10px 9px;
+		text-transform: uppercase;
+	}
+
+	.TabbedPanel .Panels {
+		position: absolute;
+		top: 40px;
+		display: block;
+		width: 100%;
+	}
+
+/* Listbox */
+.Listbox {
+	color: #444;
+	background-color: #fff;
+	padding: 0;
+	width: 100%;
+	min-height: 180px;
+	font-size: 12px;
+	cursor: default;
+	overflow: auto;
+}
+
+.Listbox .ListboxItem {
+	padding: 6px;
+	color: #666;
+	white-space: nowrap;
+}
+
+.Listbox .ListboxItem.active {
+	background-color: rgba(0, 0, 0, 0.04);
+}
+
+/* CodeMirror */
+
+.CodeMirror {
+
+	position: absolute !important;
+	top: 37px;
+	width: 100% !important;
+	height: calc(100% - 37px) !important;
+
+}
+
+	.CodeMirror .errorLine {
+
+		background: rgba(255,0,0,0.25);
+
+	}
+
+	.CodeMirror .esprima-error {
+
+		color: #f00;
+		text-align: right;
+		padding: 0 20px;
+
+	}
+
+/* outliner */
+
+#outliner .opener {
+	display: inline-block;
+	width: 14px;
+	height: 14px;
+	margin: 0px 4px;
+	vertical-align: top;
+	text-align: center;
+}
+
+	#outliner .opener.open:after {
+		content: '−';
+	}
+
+	#outliner .opener.closed:after {
+		content: '+';
+	}
+
+#outliner .option {
+
+	border: 1px solid transparent;
+
+}
+
+#outliner .option.drag {
+
+	border: 1px dashed #999;
+
+}
+
+#outliner .option.dragTop {
+
+	border-top: 1px dashed #999;
+
+}
+
+#outliner .option.dragBottom {
+
+	border-bottom: 1px dashed #999;
+
+}
+
+#outliner .type {
+	display: inline-block;
+	width: 14px;
+	height: 14px;
+	color: #ddd;
+	text-align: center;
+}
+
+#outliner .type:after {
+	content: '●';
+}
+
+/* */
+
+#outliner .Scene {
+	color: #8888dd;
+}
+
+#outliner .Camera {
+	color: #dd8888;
+}
+
+#outliner .Light {
+	color: #dddd88;
+}
+
+/* */
+
+#outliner .Object3D {
+	color: #aaaaee;
+}
+
+#outliner .Mesh {
+	color: #8888ee;
+}
+
+#outliner .Line {
+	color: #88ee88;
+}
+
+#outliner .LineSegments {
+	color: #88ee88;
+}
+
+#outliner .Points {
+	color: #ee8888;
+}
+
+/* */
+
+#outliner .Geometry {
+	color: #aaeeaa;
+}
+
+#outliner .Material {
+	color: #eeaaee;
+}
+
+/* */
+
+#outliner .Script:after {
+	content: '◎'
+}
+
+/*  */
+
+button {
+	color: #555;
+	background-color: #ddd;
+	border: 0px;
+	margin: 0px; /* GNOME Web */
+	padding: 5px 8px;
+	font-size: 12px;
+	text-transform: uppercase;
+	cursor: pointer;
+	outline: none;
+}
+
+	button:hover {
+		background-color: #fff;
+	}
+
+	button.selected {
+		background-color: #fff;
+	}
+
+input, textarea {
+	border: 1px solid transparent;
+	color: #444;
+}
+
+input.Number {
+	color: #08f!important;
+	font-size: 12px;
+	border: 0px;
+	padding: 2px;
+}
+
+select {
+	color: #666;
+	background-color: #ddd;
+	border: 0px;
+	text-transform: uppercase;
+	cursor: pointer;
+	outline: none;
+}
+
+	select:hover {
+		background-color: #fff;
+	}
+
+/* UI */
+
+#resizer {
+	position: absolute;
+	z-index: 2; /* Above #sidebar */
+	top: 32px;
+	right: 350px;
+	width: 5px;
+	bottom: 0px;
+	transform: translatex(2.5px);
+	cursor: col-resize;
+}
+
+	#resizer:hover {
+		background-color: #08f8;
+		transition-property: background-color;
+		transition-delay: 0.1s;
+		transition-duration: 0.2s;
+	}
+
+	#resizer:active {
+		background-color: #08f;
+	}
+
+#viewport {
+	position: absolute;
+	top: 32px;
+	left: 0;
+	right: 350px;
+	bottom: 0;
+}
+
+	#viewport .Text {
+		text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
+		pointer-events: none;
+	}
+
+#script {
+	position: absolute;
+	top: 32px;
+	left: 0;
+	right: 350px;
+	bottom: 0;
+	opacity: 0.9;
+}
+
+#player {
+	position: absolute;
+	top: 32px;
+	left: 0;
+	right: 350px;
+	bottom: 0;
+}
+
+#menubar {
+	position: absolute;
+	width: 100%;
+	height: 32px;
+	background: #eee;
+	padding: 0;
+	margin: 0;
+	right: 0;
+	top: 0;
+}
+
+	#menubar .menu {
+		float: left;
+		cursor: pointer;
+		padding-right: 8px;
+	}
+
+	#menubar .menu.right {
+		float: right;
+		cursor: auto;
+		padding-right: 0;
+		text-align: right;
+	}
+
+		#menubar .menu .title {
+			display: inline-block;
+			color: #888;
+			margin: 0;
+			padding: 8px;
+			line-height: 16px;
+		}
+
+		#menubar .menu .key {
+			position: absolute;
+			right: 10px;
+			color: #ccc;
+			border: 1px solid #ccc;
+			border-radius: 4px;
+			font-size: 9px;
+			padding: 2px 4px;
+			right: 10px;
+			pointer-events: none;
+		}
+
+		#menubar .menu .options {
+			position: fixed;
+			z-index: 1; /* higher than resizer */
+			display: none;
+			padding: 5px 0;
+			background: #eee;
+			min-width: 150px;
+			max-height: calc(100vh - 80px);
+			overflow: auto;
+		}
+
+		#menubar .menu:hover .options {
+			display: block;
+			box-shadow: 0 10px 10px -5px #00000033;
+		}
+
+			#menubar .menu .options hr {
+				border-color: #ddd;
+			}
+
+			#menubar .menu .options .option {
+				color: #666;
+				background-color: transparent;
+				padding: 5px 10px;
+				margin: 0 !important;
+			}
+
+				#menubar .menu .options .option:hover {
+					color: #fff;
+					background-color: #08f;
+				}
+
+				#menubar .menu .options .option:not(.submenu-title):active {
+					color: #666;
+					background: transparent;
+				}
+
+				#menubar .menu .options .option.toggle::before {
+
+					content: ' ';
+					display: inline-block;
+					width: 16px;
+
+				}
+
+				#menubar .menu .options .option.toggle-on::before {
+
+					content: '✔';
+					font-size: 12px;
+
+				}
+
+				#menubar .submenu-title::after {
+					content: '⏵';
+					float: right;
+				}
+
+		#menubar .menu .options .inactive {
+			color: #bbb;
+			background-color: transparent;
+			padding: 5px 10px;
+			margin: 0 !important;
+			cursor: not-allowed;
+		}
+
+		
+
+#sidebar {
+	position: absolute;
+	right: 0;
+	top: 32px;
+	bottom: 0;
+	width: 350px;
+	background: #eee;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+	#sidebar .Panel {
+		color: #888;
+		padding: 10px;
+		border-top: 1px solid #ccc;
+	}
+
+	#sidebar .Panel.collapsed {
+		margin-bottom: 0;
+	}
+
+	#sidebar .Row {
+		display: flex;
+		align-items: center;
+		min-height: 24px;
+		margin-bottom: 10px;
+	}
+
+	#sidebar .Row .Label {
+
+		width: 120px;
+
+	}
+
+#tabs {
+	background-color: #ddd;
+	border-top: 1px solid #ccc;
+}
+
+	#tabs span {
+		color: #aaa;
+		border-right: 1px solid #ccc;
+		padding: 10px;
+	}
+
+	#tabs span.selected {
+		color: #888;
+		background-color: #eee;
+	}
+
+#toolbar {
+	position: absolute;
+	left: 10px;
+	top: 42px;
+	width: 32px;
+	background: #eee;
+	text-align: center;
+}
+
+	#toolbar button, #toolbar input {
+		height: 32px;
+	}
+
+		#toolbar button img {
+			width: 16px;
+			opacity: 0.5;
+		}
+
+.Outliner {
+	color: #444;
+	background-color: #fff;
+	padding: 0;
+	width: 100%;
+	height: 180px;
+	font-size: 12px;
+	cursor: default;
+	overflow: auto;
+	resize: vertical;
+	outline: none !important;
+}
+
+	.Outliner .option {
+		padding: 4px;
+		color: #666;
+		white-space: nowrap;
+	}
+
+	.Outliner .option:hover {
+		background-color: rgba(0,0,0,0.02);
+	}
+
+	.Outliner .option.active {
+		background-color: rgba(0,0,0,0.04);
+	}
+
+
+.TabbedPanel .Tabs {
+	background-color: #ddd;
+	border-top: 1px solid #ccc;
+}
+
+	.TabbedPanel .Tab {
+		color: #aaa;
+		border-right: 1px solid #ccc;
+	}
+
+	.TabbedPanel .Tab.selected {
+		color: #888;
+		background-color: #eee;
+	}
+
+.Listbox {
+	color: #444;
+	background-color: #fff;
+}
+
+.Panel {
+	color: #888;
+}
+
+/* */
+
+@media all and ( max-width: 600px ) {
+
+	#resizer {
+		display: none;
+	}
+
+	#menubar .menu .options {
+		max-height: calc(100% - 80px);
+	}
+
+	#menubar .menu.right {
+		display: none;
+	}
+
+	#viewport {
+		left: 0;
+		right: 0;
+		top: 32px;
+		height: calc(100% - 352px);
+	}
+
+	#script {
+		left: 0;
+		right: 0;
+		top: 32px;
+		height: calc(100% - 352px);
+	}
+
+	#player {
+		left: 0;
+		right: 0;
+		top: 32px;
+		height: calc(100% - 352px);
+	}
+
+	#sidebar {
+		left: 0;
+		width: 100%;
+		top: calc(100% - 320px);
+		bottom: 0;
+	}
+
+}
+
+/* DARK MODE */
+
+@media ( prefers-color-scheme: dark ) {
+
+	button {
+		color: #aaa;
+		background-color: #222;
+	}
+
+		button:hover {
+			color: #ccc;
+			background-color: #444;
+		}
+
+		button.selected {
+			color: #fff;
+			background-color: #08f;
+		}
+
+	input, textarea {
+		background-color: #222;
+		border: 1px solid transparent;
+		color: #888;
+	}
+
+	select {
+		color: #aaa;
+		background-color: #222;
+	}
+
+		select:hover {
+			color: #ccc;
+			background-color: #444;
+		}
+
+	/* UI */
+
+	#menubar {
+		background: #111;
+	}
+
+			#menubar .menu .key {
+				color: #444;
+				border-color: #444;
+			}
+
+			#menubar .menu .options {
+				background: #111;
+			}
+
+				#menubar .menu .options hr {
+					border-color: #222;
+				}
+
+				#menubar .menu .options .option {
+					color: #888;
+				}
+
+			#menubar .menu .options .inactive {
+				color: #444;
+			}
+
+	#sidebar {
+		background-color: #111;
+	}
+
+		#sidebar .Panel {
+			border-top: 1px solid #222;
+		}
+
+		#sidebar .Panel.Material canvas {
+			border: solid 1px #5A5A5A;
+		}
+
+	#tabs {
+		background-color: #1b1b1b;
+		border-top: 1px solid #222;
+	}
+
+		#tabs span {
+			color: #555;
+			border-right: 1px solid #222;
+		}
+
+		#tabs span.selected {
+			background-color: #111;
+		}
+
+	#toolbar {
+		background-color: #111;
+	}
+
+		#toolbar img {
+			filter: invert(1);
+		}
+
+	.Outliner {
+		background: #222;
+	}
+
+		.Outliner .option {
+			color: #999;
+		}
+
+		.Outliner .option:hover {
+			background-color: rgba(21,60,94,0.5);
+		}
+
+		.Outliner .option.active {
+			background-color: rgba(21,60,94,1);
+		}
+
+	.TabbedPanel .Tabs {
+		background-color: #1b1b1b;
+		border-top: 1px solid #222;
+	}
+
+		.TabbedPanel .Tabs::-webkit-scrollbar {
+			background: #111;
+		}
+
+		.TabbedPanel .Tab {
+			color: #555;
+			border-right: 1px solid #222;
+		}
+
+		.TabbedPanel .Tab.selected {
+			color: #888;
+			background-color: #111;
+		}
+
+	.Listbox {
+		color: #888;
+		background: #222;
+	}
+
+	.Listbox .ListboxItem:hover {
+		background-color: rgba(21,60,94,0.5);
+	}
+
+	.Listbox .ListboxItem.active {
+		background-color: rgba(21,60,94,1);
+	}
+
+}
+
+/* Temporary Chrome fix (#24794) */
+
+[draggable="true"] {
+	transform: translate(0, 0);
+	z-index: 0;
+}

+How to implement additional commands for undo/redo functionality?
+===
+
+### Basics ###
+
+After evaluating different design patterns for undo/redo we decided to use the [command-pattern](http://en.wikipedia.org/wiki/Command_pattern) for implementing undo/redo functionality in the three.js-editor.
+
+This means that every action is encapsulated in a command-object which contains all the relevant information to restore the previous state.
+
+In our implementation we store the old and the new state separately (we don't store the complete state but rather the attribute and value which has changed).
+It would also be possible to only store the difference between the old and the new state.
+
+**Before implementing your own command you should look if you can't reuse one of the already existing ones.**
+
+For numbers, strings or booleans the Set...ValueCommand-commands can be used.
+Then there are separate commands for:
+- setting a color property (THREE.Color)
+- setting maps (THREE.Texture)
+- setting geometries
+- setting materials
+- setting position, rotation and scale
+
+### Template for new commands ###
+
+Every command needs a constructor. In the constructor
+
+```javascript
+
+function DoSomethingCommand( editor ) {
+
+	Command.call( this, editor ); // Required: Call default constructor
+
+	this.type = 'DoSomethingCommand';            // Required: has to match the object-name!
+	this.name = 'Set/Do/Update Something'; // Required: description of the command, used in Sidebar.History
+
+	// TODO: store all the relevant information needed to
+	// restore the old and the new state
+
+}
+```
+
+And as part of the prototype you need to implement four functions
+- **execute:** which is also used for redo
+- **undo:** which reverts the changes made by 'execute'
+- **toJSON:** which serializes the command so that the undo/redo-history can be preserved across a browser refresh
+- **fromJSON:** which deserializes the command
+
+```javascript
+DoSomethingCommand.prototype = {
+
+	execute: function () {
+
+		// TODO: apply changes to 'object' to reach the new state
+
+	},
+
+	undo: function () {
+
+		// TODO: restore 'object' to old state
+
+	},
+
+	toJSON: function () {
+
+		var output = Command.prototype.toJSON.call( this ); // Required: Call 'toJSON'-method of prototype 'Command'
+
+		// TODO: serialize all the necessary information as part of 'output' (JSON-format)
+		// so that it can be restored in 'fromJSON'
+
+		return output;
+
+	},
+
+	fromJSON: function ( json ) {
+
+		Command.prototype.fromJSON.call( this, json ); // Required: Call 'fromJSON'-method of prototype 'Command'
+
+		// TODO: restore command from json
+
+	}
+
+};
+
+```
+
+### Executing a command ###
+
+To execute a command we need an instance of the main editor-object. The editor-object functions as the only entry point through which all commands have to go to be added as part of the undo/redo-history.
+On **editor** we then call **.execute(...)*** with the new command-object which in turn calls **history.execute(...)** and adds the command to the undo-stack.
+
+```javascript
+
+editor.execute( new DoSomethingCommand() );
+
+```
+
+### Updatable commands ###
+
+Some commands are also **updatable**. By default a command is not updatable. Making a command updatable means that you
+have to implement a fifth function 'update' as part of the prototype. In it only the 'new' state gets updated while the old one stays the same.
+
+Here as an example is the update-function of **SetColorCommand**:
+
+```javascript
+update: function ( cmd ) {
+
+	this.newValue = cmd.newValue;
+
+},
+
+```
+
+#### List of updatable commands
+
+- SetColorCommand
+- SetGeometryCommand
+- SetMaterialColorCommand
+- SetMaterialValueCommand
+- SetPositionCommand
+- SetRotationCommand
+- SetScaleCommand
+- SetValueCommand
+- SetScriptValueCommand
+
+The idea behind 'updatable commands' is that two commands of the same type which occur
+within a short period of time should be merged into one.
+**For example:** Dragging with your mouse over the x-position field in the sidebar
+leads to hundreds of minor changes to the x-position.
+The user expectation is not to undo every single change that happened while they dragged
+the mouse cursor but rather to go back to the position before they started to drag their mouse.
+
+When editing a script the changes are also merged into one undo-step.

+Writing unit tests for undo-redo commands
+===
+
+### Overview ###
+
+Writing unit tests for undo/redo commands is easy.
+The main idea to simulate a scene, execute actions and perform undo and redo.
+Following steps are required.
+
+1. Create a new unit test file
+2. Include the new command and the unit test file in the editor's test suite
+3. Write the test
+4. Execute the test
+
+Each of the listed steps will now be described in detail.
+
+### 1. Create a new unit test file ###
+
+Create a new file in path `test/unit/editor/TestDoSomethingCommand.js`.
+
+### 2. Include the new command in the editor test suite ###
+
+Navigate to the editor test suite `test/unit/unittests_editor.html` and open it.
+Within the file, go to the `<!-- command object classes -->` and include the new command:
+
+```html
+// <!-- command object classes -->
+//...
+<script src="../../editor/js/commands/AddScriptCommand.js"></script>
+<script src="../../editor/js/commands/DoSomethingCommand.js"></script>         // add this line
+<script src="../../editor/js/commands/MoveObjectCommand.js"></script>
+//...
+```
+
+It is recommended to keep the script inclusions in alphabetical order, if possible.
+
+Next, in the same file, go to `<!-- Undo-Redo tests -->` and include the test file for the new command:
+
+```html
+// <!-- Undo-Redo tests -->
+//...
+<script src="editor/TestAddScriptCommand.js"></script>
+<script src="editor/TestDoSomethingCommand.js"></script>              // add this line
+<script src="editor/TestMoveObjectCommand.js"></script>
+//...
+```
+
+Again, keeping the alphabetical order is recommended.
+
+### 3. Write the test ###
+
+#### Template ####
+
+Open the unit test file `test/unit/editor/TestDoSomethingCommand.js` and paste following code:
+
+```javascript
+module( "DoSomethingCommand" );
+
+test("Test DoSomethingCommand (Undo and Redo)", function() {
+
+    var editor = new Editor();
+
+    var box = aBox( 'Name your box' );
+
+    // other available objects from "CommonUtilities.js"
+    // var sphere = aSphere( 'Name your sphere' );
+    // var pointLight = aPointLight( 'Name your pointLight' );
+    // var perspectiveCamera = aPerspectiveCamera( 'Name your perspectiveCamera' );
+
+    // in most cases you'll need to add the object to work with
+    editor.execute( new AddObjectCommand( editor, box ) );
+
+
+    // your test begins here...
+
+
+} );
+```
+
+The predefined code is just meant to ease the development, you do not have to stick with it.
+However, the test should cover at least one `editor.execute()`, one `editor.undo()` and one `editor.redo()` call.
+
+Best practice is to call `editor.execute( new DoSomethingCommand( {custom parameters} ) )` **twice**. Since you'll have to do one undo (go one step back), it is recommended to have a custom state for comparison. Try to avoid assertions `ok()` against default values.
+
+#### Assertions ####
+After performing `editor.execute()` twice, you can do your first assertion to check whether the executes are done correctly.
+
+Next, you perform `editor.undo()` and check if the last action was undone.
+
+Finally, perform `editor.redo()` and verify if the values are as expected.
+
+### 4. Execute the test ###
+
+Open the editor's unit test suite `test/unit/unittests_editor.html` in your browser and check the results from the test framework.

+{
+	"metadata": {
+		"type": "App"
+	},
+	"project": {
+		"shadows": true,
+		"vr": false
+	},
+	"camera": {
+		"metadata": {
+			"version": 4.5,
+			"type": "Object",
+			"generator": "Object3D.toJSON"
+		},
+		"object": {
+			"uuid": "0C0DD0AD-3A7F-4ECD-A9FE-CECD97D5CBD9",
+			"type": "PerspectiveCamera",
+			"name": "Camera",
+			"layers": 1,
+			"matrix": [0.939236,0,-0.343272,0,-0.147782,0.902586,-0.404351,0,0.309832,0.430511,0.847741,0,11.713146,19.228675,40.388679,1],
+			"fov": 50,
+			"zoom": 1,
+			"near": 0.1,
+			"far": 100000,
+			"focus": 10,
+			"aspect": 1.428977,
+			"filmGauge": 35,
+			"filmOffset": 0
+		}
+	},
+	"scene": {
+		"metadata": {
+			"version": 4.5,
+			"type": "Object",
+			"generator": "Object3D.toJSON"
+		},
+		"geometries": [
+			{
+				"uuid": "BBEE74D1-E43D-4C32-A9F3-4656E78C26F3",
+				"type": "PlaneGeometry",
+				"width": 30,
+				"height": 40,
+				"widthSegments": 1,
+				"heightSegments": 1
+			},
+			{
+				"uuid": "C1722F5F-89AD-45D8-B78C-D1D34AF2A012",
+				"type": "BoxGeometry",
+				"width": 2,
+				"height": 1,
+				"depth": 1,
+				"widthSegments": 1,
+				"heightSegments": 1,
+				"depthSegments": 1
+			},
+			{
+				"uuid": "327EFFCF-649C-4EF3-86D4-B422C5A86E89",
+				"type": "CylinderGeometry",
+				"radiusTop": 0.5,
+				"radiusBottom": 0.5,
+				"height": 2,
+				"radialSegments": 32,
+				"heightSegments": 1,
+				"openEnded": false
+			},
+			{
+				"uuid": "0791211B-BB02-4E57-82B5-64C05DE92B39",
+				"type": "SphereGeometry",
+				"radius": 0.5,
+				"widthSegments": 32,
+				"heightSegments": 16,
+				"phiStart": 0,
+				"phiLength": 6.28,
+				"thetaStart": 0,
+				"thetaLength": 3.14
+			},
+			{
+				"uuid": "73F12A47-9EA7-47FD-BCF3-89B8219B2626",
+				"type": "BoxGeometry",
+				"width": 2,
+				"height": 1,
+				"depth": 1,
+				"widthSegments": 1,
+				"heightSegments": 1,
+				"depthSegments": 1
+			},
+			{
+				"uuid": "3BDEB9FB-BDD4-44AD-8A47-008BED1C8982",
+				"type": "CylinderGeometry",
+				"radiusTop": 0.5,
+				"radiusBottom": 0.5,
+				"height": 2,
+				"radialSegments": 32,
+				"heightSegments": 1,
+				"openEnded": false
+			}],
+		"materials": [
+			{
+				"uuid": "2F69AF3A-DDF5-4BBA-87B5-80159F90DDBF",
+				"type": "MeshPhongMaterial",
+				"color": 86015,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true
+			},
+			{
+				"uuid": "D98FC4D1-169E-420A-92EA-20E55009A46D",
+				"type": "MeshBasicMaterial",
+				"color": 63744,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true,
+				"wireframe": true
+			},
+			{
+				"uuid": "3B9DE64D-E1C8-4C24-9F73-3A9E10E3E655",
+				"type": "MeshPhongMaterial",
+				"color": 16777215,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true
+			},
+			{
+				"uuid": "043B208C-1F83-42C6-802C-E0E35621C27C",
+				"type": "MeshPhongMaterial",
+				"color": 16777215,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true
+			},
+			{
+				"uuid": "40EC9BDA-91C0-4671-937A-2BCB6DA7EEBB",
+				"type": "MeshBasicMaterial",
+				"color": 63744,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true,
+				"wireframe": true
+			}],
+		"object": {
+			"uuid": "31517222-A9A7-4EAF-B5F6-60751C0BABA3",
+			"type": "Scene",
+			"name": "Scene",
+			"layers": 1,
+			"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
+			"children": [
+				{
+					"uuid": "EBBB1E63-6318-4752-AE2E-440A4E0B3EF3",
+					"type": "Mesh",
+					"name": "Ground",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,0.000796,-1,0,0,1,0.000796,0,0,0,0,1],
+					"geometry": "BBEE74D1-E43D-4C32-A9F3-4656E78C26F3",
+					"material": "2F69AF3A-DDF5-4BBA-87B5-80159F90DDBF"
+				},
+				{
+					"uuid": "6EE2E764-43E0-48E0-85F2-E0C8823C20DC",
+					"type": "DirectionalLight",
+					"name": "DirectionalLight 1",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,10,20,15,1],
+					"color": 16777215,
+					"intensity": 1,
+					"shadow": {
+						"camera": {
+							"uuid": "3BC010F7-9766-4087-BA04-1D4FD7721ABA",
+							"type": "OrthographicCamera",
+							"layers": 1,
+							"zoom": 1,
+							"left": -5,
+							"right": 5,
+							"top": 5,
+							"bottom": -5,
+							"near": 0.5,
+							"far": 500
+						}
+					}
+				},
+				{
+					"uuid": "38219749-1E67-45F2-AB15-E64BA0940CAD",
+					"type": "Mesh",
+					"name": "Brick",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0.5,0,1],
+					"geometry": "C1722F5F-89AD-45D8-B78C-D1D34AF2A012",
+					"material": "D98FC4D1-169E-420A-92EA-20E55009A46D",
+					"children": [
+						{
+							"uuid": "711A5955-8F17-4A8B-991A-7604D27E6FA0",
+							"type": "Mesh",
+							"name": "Cylinder",
+							"layers": 1,
+							"matrix": [0.000795,0.000795,1,0,-1.000001,-0.000001,0.000795,0,0.000001,-1.000001,0.000795,0,0,0,0,1],
+							"geometry": "327EFFCF-649C-4EF3-86D4-B422C5A86E89",
+							"material": "3B9DE64D-E1C8-4C24-9F73-3A9E10E3E655"
+						}]
+				},
+				{
+					"uuid": "18FFA67C-F893-4E7A-8A76-8D996DEBE0C6",
+					"type": "Mesh",
+					"name": "Ball",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0.5,3.55,1],
+					"geometry": "0791211B-BB02-4E57-82B5-64C05DE92B39",
+					"material": "043B208C-1F83-42C6-802C-E0E35621C27C"
+				},
+				{
+					"uuid": "6D660D49-39B8-40C3-95F6-E4E007AA8D79",
+					"type": "Mesh",
+					"name": "Paddle",
+					"layers": 1,
+					"matrix": [2,0,0,0,0,1,0,0,0,0,1,0,0,0.5,15.95,1],
+					"geometry": "73F12A47-9EA7-47FD-BCF3-89B8219B2626",
+					"material": "40EC9BDA-91C0-4671-937A-2BCB6DA7EEBB",
+					"children": [
+						{
+							"uuid": "4F5F884C-9E1B-45E6-8F1E-4D538A46D8CB",
+							"type": "Mesh",
+							"name": "Cylinder",
+							"layers": 1,
+							"matrix": [0.000795,0.000795,1,0,-1.000001,-0.000001,0.000795,0,0.000001,-1.000001,0.000795,0,0,0,0,1],
+							"geometry": "3BDEB9FB-BDD4-44AD-8A47-008BED1C8982",
+							"material": "3B9DE64D-E1C8-4C24-9F73-3A9E10E3E655"
+						}]
+				},
+				{
+					"uuid": "B0BEAF69-8B5D-4D87-ADCA-FDE83A02762D",
+					"type": "PointLight",
+					"name": "PointLight 2",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-11.65,6.949,-20.682,1],
+					"color": 16777215,
+					"intensity": 1,
+					"distance": 0,
+					"decay": 1,
+					"shadow": {
+						"camera": {
+							"uuid": "2F0DA21A-EFB8-4E9A-83C5-A601D6113780",
+							"type": "PerspectiveCamera",
+							"layers": 1,
+							"fov": 90,
+							"zoom": 1,
+							"near": 0.5,
+							"far": 500,
+							"focus": 10,
+							"aspect": 1,
+							"filmGauge": 35,
+							"filmOffset": 0
+						}
+					}
+				}],
+			"background": 11184810
+		}
+	},
+	"scripts": {
+		"6D660D49-39B8-40C3-95F6-E4E007AA8D79": [
+			{
+				"name": "User",
+				"source": "function pointermove( event ) {\n\n\tthis.position.x = ( event.clientX / player.width ) * 30 - 15;\n\n}\n\n// function update( event ) {}"
+			}],
+		"31517222-A9A7-4EAF-B5F6-60751C0BABA3": [
+			{
+				"name": "Game Logic",
+				"source": "var ball = this.getObjectByName( 'Ball' );\n\nvar direction = new THREE.Vector3();\ndirection.x = Math.random() - 0.5;\ndirection.z = - 0.5;\ndirection.normalize();\n\nvar speed = new THREE.Vector3();\n\n//\n\nvar group = new THREE.Group();\nthis.add( group );\n\nvar paddle = this.getObjectByName( 'Paddle' );\npaddle.material.visible = false;\ngroup.add( paddle );\n\nvar brick = this.getObjectByName( 'Brick' );\n\nfor ( var j = 0; j < 8; j ++ ) {\n\n\tvar material = new THREE.MeshPhongMaterial( { color: Math.random() * 0xffffff } );\n\n\tfor ( var i = 0; i < 12; i ++ ) {\n\t\t\n\t\tvar object = brick.clone();\n\t\tobject.position.x = i * 2.2 - 12;\n\t\tobject.position.z = j * 1.4 - 12;\n\t\tgroup.add( object );\n\n\t\tvar cylinder = object.getObjectByName( 'Cylinder' );\n\t\tcylinder.material = material;\n\n\t}\n\t\n}\n\nbrick.visible = false;\nbrick.material.visible = false;\n\n//\n\nvar raycaster = new THREE.Raycaster();\n\nfunction update( event ) {\n\t\n\tif ( ball.position.x < - 15 || ball.position.x > 15 ) direction.x = - direction.x;\n\tif ( ball.position.z < - 20 || ball.position.z > 20 ) direction.z = - direction.z;\n\n\tball.position.x = Math.max( - 15, Math.min( 15, ball.position.x ) );\n\tball.position.z = Math.max( - 20, Math.min( 20, ball.position.z ) );\n\t\t\n\traycaster.set( ball.position, direction );\n\t\n\tvar intersections = raycaster.intersectObjects( group.children );\n\t\n\tif ( intersections.length > 0 ) {\n\t\n\t\tvar intersection = intersections[ 0 ];\n\t\t\n\t\tif ( intersection.distance < 0.5 ) {\n\t\t\t\n\t\t\tif ( intersection.object !== paddle ) {\n\n\t\t\t\tgroup.remove( intersection.object );\n\t\t\t\t\n\t\t\t}\n\t\t\t\n\t\t\tdirection.reflect( intersection.face.normal );\n\t\t\t\n\t\t}\n\t\t\n\t}\n\n\tball.position.add( speed.copy( direction ).multiplyScalar( event.delta / 40 ) );\n\t\n}"
+			}]
+	}
+}

+{
+	"metadata": {
+		"type": "App"
+	},
+	"project": {
+		"shadows": true,
+		"vr": false
+	},
+	"camera": {
+		"metadata": {
+			"version": 4.5,
+			"type": "Object",
+			"generator": "Object3D.toJSON"
+		},
+		"object": {
+			"uuid": "60EBAF60-53DA-47B0-A028-8FC031B708F6",
+			"type": "PerspectiveCamera",
+			"name": "Camera",
+			"layers": 1,
+			"matrix": [0.970041,0,-0.242943,0,-0.048226,0.980099,-0.192562,0,0.238108,0.198509,0.950736,0,1.548,1.29,6.18,1],
+			"fov": 50,
+			"zoom": 1,
+			"near": 0.1,
+			"far": 100000,
+			"focus": 10,
+			"aspect": 1.428977,
+			"filmGauge": 35,
+			"filmOffset": 0
+		}
+	},
+	"scene": {
+		"metadata": {
+			"version": 4.5,
+			"type": "Object",
+			"generator": "Object3D.toJSON"
+		},
+		"geometries": [
+			{
+				"uuid": "6D90C4BE-EBA6-4E21-8F54-7CFDAA61F30B",
+				"type": "PlaneGeometry",
+				"width": 10,
+				"height": 10,
+				"widthSegments": 1,
+				"heightSegments": 1
+			},
+			{
+				"uuid": "D3008B2A-ACDD-43CC-87F7-4F942607D21A",
+				"type": "BoxGeometry",
+				"width": 1,
+				"height": 1,
+				"depth": 1,
+				"widthSegments": 1,
+				"heightSegments": 1,
+				"depthSegments": 1
+			},
+			{
+				"uuid": "F482ACD4-013A-49CF-AE0F-C9FF4ADAE409",
+				"type": "CylinderGeometry",
+				"radiusTop": 0,
+				"radiusBottom": 0.4,
+				"height": 0.75,
+				"radialSegments": 4,
+				"heightSegments": 1,
+				"openEnded": false
+			},
+			{
+				"uuid": "51CDDCED-BC71-4B1B-A485-725B6A48204B",
+				"type": "IcosahedronGeometry",
+				"radius": 0.4,
+				"detail": 2
+			}],
+		"materials": [
+			{
+				"uuid": "4AE8130E-B6A8-47BC-ACCF-060973C74044",
+				"type": "MeshPhongMaterial",
+				"color": 16777215,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true
+			},
+			{
+				"uuid": "B5943856-E404-45D9-A427-4774202C2CD0",
+				"type": "MeshPhongMaterial",
+				"color": 37119,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true
+			},
+			{
+				"uuid": "3F872310-2067-4BE4-9250-5B3F4E43797E",
+				"type": "MeshPhongMaterial",
+				"color": 15859456,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true
+			},
+			{
+				"uuid": "E1826901-7922-4584-A25D-6D487E2C9BBD",
+				"type": "MeshPhongMaterial",
+				"color": 16711680,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true
+			}],
+		"object": {
+			"uuid": "3741222A-BD8F-401C-A5D2-5A907E891896",
+			"type": "Scene",
+			"name": "Scene",
+			"layers": 1,
+			"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
+			"children": [
+				{
+					"uuid": "B7CBBC6F-EC26-49B5-8D0D-67D9C535924B",
+					"type": "Group",
+					"name": "Dummy",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,1,4,1],
+					"children": [
+						{
+							"uuid": "60B69C58-4201-43FD-815E-AD2EDFBBD0CE",
+							"type": "PerspectiveCamera",
+							"name": "PerspectiveCamera",
+							"layers": 1,
+							"matrix": [-1,0,0,0,0,1,0,0,0,0,-1,0,0,0,0,1],
+							"fov": 50,
+							"zoom": 1,
+							"near": 0.1,
+							"far": 100,
+							"focus": 10,
+							"aspect": 1,
+							"filmGauge": 35,
+							"filmOffset": 0
+						}]
+				},
+				{
+					"uuid": "A460C230-DC88-4A8F-A3FB-AA0FE735F3ED",
+					"type": "Mesh",
+					"name": "Plane",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,0.040785,-0.999168,0,0,0.999168,0.040785,0,0,-0.5,0,1],
+					"geometry": "6D90C4BE-EBA6-4E21-8F54-7CFDAA61F30B",
+					"material": "4AE8130E-B6A8-47BC-ACCF-060973C74044"
+				},
+				{
+					"uuid": "26DAAD69-725D-43B7-AF9D-990A99DEF8C5",
+					"type": "Mesh",
+					"name": "Box",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
+					"geometry": "D3008B2A-ACDD-43CC-87F7-4F942607D21A",
+					"material": "B5943856-E404-45D9-A427-4774202C2CD0"
+				},
+				{
+					"uuid": "AAAFF2D6-4725-4AFC-A9FE-26419B11011F",
+					"type": "Mesh",
+					"name": "Cylinder",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-1.3,-0.15,0,1],
+					"geometry": "F482ACD4-013A-49CF-AE0F-C9FF4ADAE409",
+					"material": "3F872310-2067-4BE4-9250-5B3F4E43797E"
+				},
+				{
+					"uuid": "B855E267-A266-4098-ACD6-6A1FDE7B88BA",
+					"type": "Mesh",
+					"name": "Icosahedron",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,1.3,-0.1,0,1],
+					"geometry": "51CDDCED-BC71-4B1B-A485-725B6A48204B",
+					"material": "E1826901-7922-4584-A25D-6D487E2C9BBD"
+				},
+				{
+					"uuid": "E2939A7B-5E40-438A-8C1B-32126FBC6892",
+					"type": "PointLight",
+					"name": "PointLight 1",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-0.939,1.271,-1.143,1],
+					"color": 9474221,
+					"intensity": 0.75,
+					"distance": 0,
+					"decay": 1,
+					"shadow": {
+						"camera": {
+							"uuid": "EFF42F46-1E27-4B36-B9D9-CF7D879D258E",
+							"type": "PerspectiveCamera",
+							"layers": 1,
+							"fov": 90,
+							"zoom": 1,
+							"near": 0.5,
+							"far": 500,
+							"focus": 10,
+							"aspect": 1,
+							"filmGauge": 35,
+							"filmOffset": 0
+						}
+					}
+				},
+				{
+					"uuid": "3412781E-27CC-43C3-A5DB-54C0C8E42ED6",
+					"type": "PointLight",
+					"name": "PointLight 2",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0.881,0.083,1.254,1],
+					"color": 12773063,
+					"intensity": 1,
+					"distance": 0,
+					"decay": 1,
+					"shadow": {
+						"camera": {
+							"uuid": "81E800FE-E8A7-4A9E-AFAA-4F04FD56AFE4",
+							"type": "PerspectiveCamera",
+							"layers": 1,
+							"fov": 90,
+							"zoom": 1,
+							"near": 0.5,
+							"far": 500,
+							"focus": 10,
+							"aspect": 1,
+							"filmGauge": 35,
+							"filmOffset": 0
+						}
+					}
+				}],
+			"background": 11184810
+		}
+	},
+	"scripts": {
+		"60B69C58-4201-43FD-815E-AD2EDFBBD0CE": [
+			{
+				"name": "Player Camera",
+				"source": "player.setCamera( this );"
+			}],
+		"B7CBBC6F-EC26-49B5-8D0D-67D9C535924B": [
+			{
+				"name": "Orbit",
+				"source": "function update( event ) {\n\n\tvar time = event.time * 0.001;\n\n\tthis.position.x = Math.sin( time ) * 4;\n\tthis.position.z = Math.cos( time ) * 4;\n\tthis.lookAt( scene.position );\n\n}"
+			}]
+	}
+}

+{
+	"metadata": {
+		"type": "App"
+	},
+	"project": {
+		"shadows": true,
+		"vr": false
+	},
+	"camera": {
+		"metadata": {
+			"version": 4.5,
+			"type": "Object",
+			"generator": "Object3D.toJSON"
+		},
+		"object": {
+			"uuid": "056199EB-6985-481B-97CC-A57FB7C87809",
+			"type": "PerspectiveCamera",
+			"name": "Camera",
+			"layers": 1,
+			"matrix": [0.707107,0,-0.707107,0,-0.235702,0.942809,-0.235702,0,0.666667,0.333333,0.666667,0,4.182,2.091,4.182,1],
+			"fov": 50,
+			"zoom": 1,
+			"near": 0.1,
+			"far": 100000,
+			"focus": 10,
+			"aspect": 0.666193,
+			"filmGauge": 35,
+			"filmOffset": 0
+		}
+	},
+	"scene": {
+		"metadata": {
+			"version": 4.5,
+			"type": "Object",
+			"generator": "Object3D.toJSON"
+		},
+		"geometries": [
+			{
+				"uuid": "C3C0CE7D-10B8-43FC-8F74-011CC6E57800",
+				"type": "PlaneGeometry",
+				"width": 100,
+				"height": 100,
+				"widthSegments": 1,
+				"heightSegments": 1
+			}],
+		"materials": [
+			{
+				"uuid": "3A9449D2-62DB-4BB4-ABBD-6F3F9D46DE1A",
+				"type": "MeshStandardMaterial",
+				"color": 5465019,
+				"roughness": 1,
+				"metalness": 0,
+				"emissive": 0,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true
+			},
+			{
+				"uuid": "F5361474-F5F1-412F-8D99-3699B868092D",
+				"type": "SpriteMaterial",
+				"color": 16777215,
+				"transparent": true,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true
+			}],
+		"object": {
+			"uuid": "3741222A-BD8F-401C-A5D2-5A907E891896",
+			"type": "Scene",
+			"name": "Scene",
+			"layers": 1,
+			"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
+			"children": [
+				{
+					"uuid": "05B57416-1BE5-4A96-BB05-9D9CD112D52B",
+					"type": "Mesh",
+					"name": "Ground",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,0.000796,-1,0,0,1,0.000796,0,0,-0.5,0,1],
+					"geometry": "C3C0CE7D-10B8-43FC-8F74-011CC6E57800",
+					"material": "3A9449D2-62DB-4BB4-ABBD-6F3F9D46DE1A"
+				},
+				{
+					"uuid": "0A3CB873-07E6-4EEB-830B-68192504111B",
+					"type": "Sprite",
+					"name": "Particle",
+					"layers": 1,
+					"matrix": [0.04,0,0,0,0,0.04,0,0,0,0,0.04,0,0,0,0,1],
+					"material": "F5361474-F5F1-412F-8D99-3699B868092D"
+				},
+				{
+					"uuid": "40E5CDA4-0E39-4265-9293-3E9EC3207F61",
+					"type": "PointLight",
+					"name": "PointLight",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,1.183,0,1],
+					"color": 16777215,
+					"intensity": 1,
+					"distance": 0,
+					"decay": 1,
+					"shadow": {
+						"camera": {
+							"uuid": "B6D3493E-E5C9-4D65-9E26-BB788D127BE1",
+							"type": "PerspectiveCamera",
+							"layers": 1,
+							"fov": 90,
+							"zoom": 1,
+							"near": 0.5,
+							"far": 500,
+							"focus": 10,
+							"aspect": 1,
+							"filmGauge": 35,
+							"filmOffset": 0
+						}
+					}
+				}],
+			"background": 2171689,
+			"fog": {
+				"type": "Fog",
+				"color": 2171688,
+				"near": 1,
+				"far": 50
+			}
+		}
+	},
+	"scripts": {
+		"3741222A-BD8F-401C-A5D2-5A907E891896": [
+			{
+				"name": "Fountain",
+				"source": "var original = this.getObjectByName( 'Particle' );\n\nvar particles = [];\n\nfor ( var i = 0; i < 100; i ++ ) {\n\n\tvar particle = original.clone();\n\tparticle.userData.velocity = new THREE.Vector3();\n\tthis.add( particle );\n\n\tparticles.push( particle );\n\n}\n\nfunction update( event ) {\n\t\n\tvar particle = particles.shift();\n\tparticles.push( particle );\n\t\t\n\tvar velocity = particle.userData.velocity;\n\tvelocity.x = Math.random() * 0.1 - 0.05;\n\tvelocity.y = Math.random() * 0.1 + 0.1;\n\tvelocity.z = Math.random() * 0.1 - 0.05;\n\n\tfor ( var i = 0; i < particles.length; i ++ ) {\n\n\t\tvar particle = particles[ i ];\n\n\t\tvar velocity = particle.userData.velocity;\n\n\t\tvelocity.y -= 0.0098;\n\n\t\tparticle.position.add( velocity );\n\n\t\tif ( particle.position.y < 0 ) {\n\n\t\t\tparticle.position.y = 0;\n\n\t\t\tvelocity.y = - velocity.y;\n\t\t\tvelocity.multiplyScalar( 0.6 );\n\n\t\t}\n\n\t}\n\n}"
+			}]
+	}
+}

+{
+	"metadata": {
+		"type": "App"
+	},
+	"project": {
+		"shadows": true,
+		"vr": false
+	},
+	"camera": {
+		"metadata": {
+			"version": 4.5,
+			"type": "Object",
+			"generator": "Object3D.toJSON"
+		},
+		"object": {
+			"uuid": "4AC7ADED-CC22-4B16-8218-2E0A0C38C8F8",
+			"type": "PerspectiveCamera",
+			"name": "Camera",
+			"layers": 1,
+			"matrix": [0.952212,0,-0.305438,0,-0.17743,0.813973,-0.553142,0,0.248618,0.580902,0.775075,0,1.865,4.357,5.813,1],
+			"fov": 50,
+			"zoom": 1,
+			"near": 0.1,
+			"far": 100000,
+			"focus": 10,
+			"aspect": 1.428977,
+			"filmGauge": 35,
+			"filmOffset": 0
+		}
+	},
+	"scene": {
+		"metadata": {
+			"version": 4.5,
+			"type": "Object",
+			"generator": "Object3D.toJSON"
+		},
+		"geometries": [
+			{
+				"uuid": "490CEBA3-6A25-4BE1-B517-C5FB11A5D18A",
+				"type": "PlaneGeometry",
+				"width": 6,
+				"height": 4,
+				"widthSegments": 1,
+				"heightSegments": 1
+			},
+			{
+				"uuid": "D9A92F2D-2F08-4851-99C7-12D8D1CA13C7",
+				"type": "BoxGeometry",
+				"width": 0.1,
+				"height": 0.1,
+				"depth": 0.1,
+				"widthSegments": 1,
+				"heightSegments": 1,
+				"depthSegments": 1
+			},
+			{
+				"uuid": "5E63B8CF-E225-4ABC-994A-4D06BD4E21EB",
+				"type": "BoxGeometry",
+				"width": 0.2,
+				"height": 0.2,
+				"depth": 1,
+				"widthSegments": 1,
+				"heightSegments": 1,
+				"depthSegments": 1
+			},
+			{
+				"uuid": "D61532B4-24C3-4BC4-B56B-7245E8163E09",
+				"type": "BoxGeometry",
+				"width": 0.2,
+				"height": 0.2,
+				"depth": 1,
+				"widthSegments": 1,
+				"heightSegments": 1,
+				"depthSegments": 1
+			}],
+		"materials": [
+			{
+				"uuid": "7EDF7C08-6325-418A-BBAB-89341C694730",
+				"type": "MeshPhongMaterial",
+				"color": 16777215,
+				"emissive": 0,
+				"specular": 16777215,
+				"shininess": 30,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true
+			},
+			{
+				"uuid": "B1CAF098-FE36-45E1-BEBE-8D6AC04821CC",
+				"type": "MeshPhongMaterial",
+				"color": 16711680,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true
+			},
+			{
+				"uuid": "FBDBE66D-B613-4741-802D-5AE1DE07DE46",
+				"type": "MeshPhongMaterial",
+				"color": 2752767,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30,
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true
+			}],
+		"object": {
+			"uuid": "31517222-A9A7-4EAF-B5F6-60751C0BABA3",
+			"type": "Scene",
+			"name": "Scene",
+			"layers": 1,
+			"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
+			"children": [
+				{
+					"uuid": "B47D0BFC-D63A-4CBB-985E-9C4DBDF086E4",
+					"type": "Mesh",
+					"name": "Ground",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,0.000796,-1,0,0,1,0.000796,0,0,-0.1,0,1],
+					"geometry": "490CEBA3-6A25-4BE1-B517-C5FB11A5D18A",
+					"material": "7EDF7C08-6325-418A-BBAB-89341C694730"
+				},
+				{
+					"uuid": "CE13E58A-4E8B-4F72-9E2E-7DE57C58F989",
+					"type": "Mesh",
+					"name": "Ball",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
+					"geometry": "D9A92F2D-2F08-4851-99C7-12D8D1CA13C7",
+					"material": "B1CAF098-FE36-45E1-BEBE-8D6AC04821CC"
+				},
+				{
+					"uuid": "2AAEA3AA-EC45-492B-B450-10473D1EC6C5",
+					"type": "Mesh",
+					"name": "Pad 1",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-2.4,0,0,1],
+					"geometry": "5E63B8CF-E225-4ABC-994A-4D06BD4E21EB",
+					"material": "FBDBE66D-B613-4741-802D-5AE1DE07DE46"
+				},
+				{
+					"uuid": "F1DD46A7-6584-4A37-BC76-852C3911077E",
+					"type": "Mesh",
+					"name": "Pad 2",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,2.4,0,0,1],
+					"geometry": "D61532B4-24C3-4BC4-B56B-7245E8163E09",
+					"material": "FBDBE66D-B613-4741-802D-5AE1DE07DE46"
+				},
+				{
+					"uuid": "C62AAE9F-9E51-46A5-BD2B-71BA804FC0B3",
+					"type": "DirectionalLight",
+					"name": "DirectionalLight",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,1,2,1.5,1],
+					"color": 16777215,
+					"intensity": 1,
+					"shadow": {
+						"camera": {
+							"uuid": "2CF1F42A-8992-4E8D-8D94-7CC20979344C",
+							"type": "OrthographicCamera",
+							"layers": 1,
+							"zoom": 1,
+							"left": -5,
+							"right": 5,
+							"top": 5,
+							"bottom": -5,
+							"near": 0.5,
+							"far": 500
+						}
+					}
+				}],
+			"background": 11184810
+		}
+	},
+	"scripts": {
+		"31517222-A9A7-4EAF-B5F6-60751C0BABA3": [
+			{
+				"name": "Game logic",
+				"source": "var ball = this.getObjectByName( 'Ball' );\n\nvar position = ball.position;\n\nvar velocity = new THREE.Vector3();\n\nvar direction = new THREE.Vector3();\ndirection.x = Math.random() - 0.5;\ndirection.z = Math.random() - 0.5;\ndirection.normalize().multiplyScalar( 0.1 );\n\nvar pad1 = this.getObjectByName( 'Pad 1' );\nvar pad2 = this.getObjectByName( 'Pad 2' );\n\nvar raycaster = new THREE.Raycaster();\nvar objects = [ pad1, pad2 ];\n\n//\n\nfunction pointermove( event ) {\n\n\tpad1.position.z = ( event.clientX / player.width ) * 3 - 1.5;\n\tpad2.position.z = - pad1.position.z;\n\n}\n\nfunction update( event ) {\n\t\n\tif ( position.x < -3 || position.x > 3 ) direction.x = - direction.x;\n\tif ( position.z < -2 || position.z > 2 ) direction.z = - direction.z;\n\t\n\tposition.x = Math.max( - 3, Math.min( 3, position.x ) );\n\tposition.z = Math.max( - 2, Math.min( 2, position.z ) );\n\t\n\traycaster.set( position, direction );\n\t\n\tvar intersections = raycaster.intersectObjects( objects );\n\t\n\tif ( intersections.length > 0 ) {\n\n\t\tvar intersection = intersections[ 0 ];\n\t\t\n\t\tif ( intersection.distance < 0.1 ) {\n\t\t\t\n\t\t\tdirection.reflect( intersection.face.normal );\n\t\t\t\n\t\t}\n\t\t\n\t}\n\n\tposition.add( velocity.copy( direction ).multiplyScalar( event.delta / 20 ) );\n\n}"
+			}]
+	}
+}

+{
+	"metadata": {
+		"type": "App"
+	},
+	"project": {
+		"shadows": true,
+		"vr": false
+	},
+	"camera": {
+		"metadata": {
+			"version": 4.5,
+			"type": "Object",
+			"generator": "Object3D.toJSON"
+		},
+		"object": {
+			"uuid": "4AC7ADED-CC22-4B16-8218-2E0A0C38C8F8",
+			"type": "PerspectiveCamera",
+			"name": "Camera",
+			"layers": 1,
+			"matrix": [0.605503,0,-0.795843,0,-0.261526,0.944464,-0.198978,0,0.751645,0.328615,0.571876,0,2.571484,1.124239,1.956469,1],
+			"fov": 50,
+			"zoom": 1,
+			"near": 0.1,
+			"far": 10000,
+			"focus": 10,
+			"aspect": 1.428977,
+			"filmGauge": 35,
+			"filmOffset": 0
+		}
+	},
+	"scene": {
+		"metadata": {
+			"version": 4.5,
+			"type": "Object",
+			"generator": "Object3D.toJSON"
+		},
+		"geometries": [
+			{
+				"uuid": "EA781333-F3AE-470D-9110-A9724FCB42AA",
+				"type": "IcosahedronGeometry",
+				"radius": 1,
+				"detail": 24
+			}],
+		"materials": [
+			{
+				"uuid": "50ED51F1-DEA4-4B61-8082-BF41609E8C27",
+				"type": "ShaderMaterial",
+				"depthFunc": 3,
+				"depthTest": true,
+				"depthWrite": true,
+				"wireframe": true,
+				"uniforms": {
+					"time": {
+						"value": 0
+					}
+				},
+				"vertexShader": "uniform float time;\nvarying vec3 vPosition;\nvoid main() {\n\tvPosition = position;\n\tvPosition.x += sin( time + vPosition.z * 4.0 ) / 4.0;\n\tvPosition.y += cos( time + vPosition.z * 4.0 ) / 4.0;\n\tgl_Position = projectionMatrix * modelViewMatrix * vec4( vPosition, 1.0 );\n}",
+				"fragmentShader": "varying vec3 vPosition;\nvoid main() {\n\tgl_FragColor = vec4( vPosition * 2.0, 1.0 );\n}"
+			}],
+		"object": {
+			"uuid": "5FC9ACA9-2A93-474D-AA32-FACC76551914",
+			"type": "Scene",
+			"name": "Scene",
+			"layers": 1,
+			"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
+			"children": [
+				{
+					"uuid": "FC7B6CF2-6386-4F47-9CE6-8ADB9FCA6E1F",
+					"type": "Mesh",
+					"name": "Icosahedron 1",
+					"layers": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
+					"geometry": "EA781333-F3AE-470D-9110-A9724FCB42AA",
+					"material": "50ED51F1-DEA4-4B61-8082-BF41609E8C27"
+				}],
+			"background": 11184810
+		}
+	},
+	"scripts": {
+		"FC7B6CF2-6386-4F47-9CE6-8ADB9FCA6E1F": [
+			{
+				"name": "",
+				"source": "function update( event ) {\n\n\tthis.material.uniforms.time.value = event.time / 500.0;\n\n}"
+			}]
+	}
+}

+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+ <path d="m247.8 474.12c61.315 0 112.09-26.692 147.65-59.495l-1.6947 75.58c-0.17697 10.509 8.2063 19.178 18.721 19.349h0.32318c10.364 0 18.855-8.3198 19.033-18.721l2.5382-126.18c0.0827-5.1592-1.9294-10.135-5.5843-13.784-3.6492-3.6492-8.5987-5.6603-13.784-5.5718l-126.73 2.5383c-10.509 0.18371-18.885 8.8469-18.708 19.362 0.17794 10.401 8.6689 18.714 19.032 18.714h0.32991l83.195-1.7957c-29.35 27.815-72.656 51.93-124.33 51.93-105.91 0-177.05-91.548-177.05-177.05-0.31704-10.248-6.2951-19.251-18.532-19.479-12.237-0.22764-19.196 8.1831-19.543 19.486 0 103.89 86.446 215.13 215.13 215.13zm4.3538-435.25c-61.315 0-112.09 26.692-147.65 59.495l1.6947-75.579c0.17698-10.509-8.2063-19.178-18.721-19.349h-0.32317c-10.364 0-18.855 8.3198-19.033 18.721l-2.5383 126.18c-0.08272 5.1592 1.9294 10.135 5.5844 13.784 3.6492 3.6492 8.5987 5.6603 13.784 5.5719l126.73-2.5383c10.509-0.18371 18.885-8.8469 18.708-19.362-0.17794-10.401-8.6689-18.714-19.032-18.714h-0.32991l-83.195 1.7957c29.35-27.815 72.656-51.93 124.33-51.93 105.91 0 177.05 91.548 177.05 177.05 0.31703 10.248 6.2951 19.251 18.532 19.479 12.237 0.22763 19.196-8.1831 19.543-19.486 0-103.89-86.446-215.13-215.13-215.13z"/>
+</svg>

+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+ <path d="m450.25 44.182-133.13 1.1699c-9.691 0.076-17.482 7.9849-17.406 17.67 0.076 9.638 27.155 17.4 17.535 17.4h0.1289l90.35-0.84375-116.88 116.87c-6.85 6.844-6.85 17.949 0 24.793 3.425 3.425 7.9075 5.1387 12.396 5.1387 4.483 0 8.9734-1.7137 12.398-5.1387l116.87-116.88-0.84179 90.344c-0.07 9.685 7.7193 17.594 17.404 17.67h0.12891c9.62 0 17.459-7.7624 17.535-17.4l1.168-133.13c1.3e-4 -0.01637-2e-3 -0.03246-2e-3 -0.04883 3e-3 -0.51471-0.0239-1.0297-0.0664-1.543-4e-3 -0.05325-9.6e-4 -0.10695-6e-3 -0.16016-2.4e-4 -0.0027-2e-3 -0.0051-2e-3 -0.0078-0.26224-2.8345-1.2132-5.6145-2.8516-8.0742-0.31876-0.47858-0.66235-0.94631-1.0332-1.3984-0.36831-0.45029-0.76079-0.88383-1.1758-1.2988-0.41658-0.41735-0.85218-0.81156-1.3047-1.1816-0.24176-0.19804-0.49656-0.36957-0.7461-0.55273-0.21514-0.15762-0.42293-0.32538-0.64453-0.47266-0.35614-0.23723-0.72494-0.4459-1.0938-0.6543-0.12574-0.07096-0.24567-0.15292-0.37304-0.2207-0.42481-0.22631-0.86059-0.42442-1.2988-0.61328-0.0824-0.03554-0.16117-0.07901-0.24414-0.11328-0.42706-0.17629-0.86181-0.32571-1.2988-0.4668-0.10761-0.03483-0.21201-0.07858-0.32031-0.11133-0.37604-0.11341-0.75724-0.19952-1.1387-0.28711-0.18044-0.04161-0.35715-0.09494-0.53906-0.13086-0.30867-0.06068-0.62071-0.09471-0.93164-0.13867-0.25679-0.03651-0.51062-0.0862-0.76953-0.11133-0.56319-0.0544-1.128-0.08394-1.6934-0.08398zm-387.45 255.62c-9.62 0-17.459 7.7663-17.535 17.404l-1.1699 133.12c-1.22e-4 0.0164 2e-3 0.0325 2e-3 0.0488-0.0025 0.51395 0.02395 1.0285 0.06641 1.541 0.0046 0.0557 0.0026 0.11233 0.0078 0.16797 0.31299 3.3855 1.6059 6.695 3.8809 9.4727 0.3666 0.44761 0.75628 0.88287 1.1738 1.3008h2e-3c0.20731 0.20728 0.42966 0.38925 0.64453 0.58398 0.21795 0.19755 0.42764 0.40626 0.6543 0.5918 0.29789 0.24417 0.61028 0.46004 0.91992 0.68164 0.15919 0.11373 0.31004 0.23952 0.47266 0.34766 0.37454 0.24954 0.76185 0.46983 1.1504 0.6875 0.10897 0.061 0.21208 0.1328 0.32227 0.1914 0.38726 0.20616 0.78506 0.38353 1.1836 0.5586 0.12552 0.0552 0.24628 0.12161 0.37305 0.17382 0.36908 0.15187 0.74642 0.27673 1.123 0.40235 0.16645 0.0556 0.32796 0.12318 0.49609 0.17383 0.46956 0.14111 0.94417 0.25454 1.4219 0.35547 0.07285 0.0154 0.14372 0.0382 0.2168 0.0527 0.4682 0.0927 0.94102 0.15666 1.4141 0.21094 0.09821 0.0113 0.19446 0.0313 0.29297 0.041 0.57076 0.0558 1.6783-0.48578 1.7168 0.0859h0.13477l133.13-1.1699c9.685-0.07 17.476-7.9831 17.4-17.662-0.076-9.69-8.1259-17.387-17.67-17.404l-90.338 0.83996 116.87-116.87c6.844-6.844 6.85-17.943 0-24.793s-17.955-6.85-24.799 0l-116.87 116.86 0.84375-90.344c0.076-9.679-7.7154-17.586-17.4-17.662z"/>
+</svg>

+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+ <path d="m256 0c-1.2452 0-2.4586 0.12791-3.6387 0.35156-0.0659 0.012567-0.13349 0.018008-0.19922 0.03125-0.57894 0.11595-1.146 0.26357-1.7051 0.42969-0.047 0.01399-0.0957 0.022767-0.14258 0.037109-1.8151 0.55436-3.5159 1.3682-5.0625 2.3965-0.0312 0.020703-0.0646 0.037706-0.0957 0.058594-0.32576 0.21931-0.63201 0.46307-0.94336 0.70117-0.70605 0.53787-1.3906 1.1059-2.0234 1.7422l-75.18 75.828c-7.563 7.628-7.5048 19.937 0.11718 27.5 7.628 7.557 19.941 7.5048 27.498-0.11719l41.932-42.291v169.89h-169.88l42.295-41.926c7.622-7.563 7.6782-19.87 0.11523-27.498s-19.876-7.6802-27.498-0.11719l-75.828 75.18c-0.00297 3e-3 -0.00485 7e-3 -0.00781 0.01-2.2463 2.2302-3.9501 5.0041-4.8984 8.1094-0.004708 0.0154-0.007049 0.0315-0.011719 0.0469-0.17839 0.58935-0.3326 1.1892-0.45508 1.8008-0.013248 0.0657-0.018677 0.13332-0.03125 0.19922-0.10655 0.56223-0.19883 1.1288-0.25586 1.707-0.062671 0.63522-0.095706 1.2794-0.095706 1.9314s0.033035 1.2962 0.095703 1.9316c0.057025 0.57824 0.14931 1.1448 0.25586 1.707 0.012572 0.0659 0.018003 0.13349 0.03125 0.19922 0.11595 0.57894 0.26357 1.146 0.42969 1.7051 0.014761 0.0496 0.023909 0.10093 0.039062 0.15039 0.56503 1.8473 1.396 3.5783 2.4512 5.1465 0.35511 0.52775 0.73293 1.0381 1.1367 1.5274 0.00265 3e-3 0.00516 7e-3 0.00781 0.01 0.067158 0.0815 0.14629 0.15391 0.21484 0.23438 0.33891 0.39681 0.68535 0.78801 1.0547 1.1562 0.01376 0.0137 0.025257 0.0293 0.039063 0.043l75.826 75.18c3.791 3.753 8.7375 5.6328 13.689 5.6328 5.003 0 10.007-1.9189 13.805-5.7559 7.563-7.628 7.5048-19.935-0.11719-27.498l-42.289-41.926h169.89v169.89l-41.926-42.289c-7.557-7.635-19.87-7.667-27.498-0.12305-7.622 7.563-7.6802 19.872-0.11719 27.5l75.18 75.826c3e-3 3e-3 7e-3 5e-3 0.01 8e-3 1.3458 1.3556 2.8885 2.5158 4.584 3.4297 0.0637 0.0343 0.13128 0.0602 0.19532 0.0937 0.50006 0.26239 1.0086 0.50958 1.5332 0.72852 0.0287 0.012 0.0591 0.0194 0.0879 0.0312 0.55148 0.22706 1.1139 0.43292 1.6894 0.60937 0.13059 0.0401 0.26501 0.0662 0.39649 0.10352 0.48459 0.13741 0.97149 0.26916 1.4707 0.36914 0.0657 0.0132 0.13332 0.0187 0.19922 0.0312 1.1798 0.22361 2.3932 0.35152 3.6384 0.35152 1.8194 0 3.572-0.26909 5.2422-0.73633 0.15543-0.0435 0.31454-0.0738 0.46875-0.12109 1.1011-0.33792 2.1539-0.78025 3.1621-1.2988 0.11472-0.0588 0.23407-0.10685 0.34765-0.16797 0.37259-0.20111 0.72848-0.42812 1.0859-0.65234 0.1868-0.11676 0.38143-0.22052 0.56445-0.34375 0.10467-0.0707 0.19953-0.15388 0.30274-0.22657 0.93571-0.65673 1.8271-1.3857 2.6445-2.209l75.18-75.826c7.556-7.628 7.503-19.937-0.125-27.5-7.635-7.557-19.941-7.505-27.498 0.12305l-41.932 42.299v-169.9h169.89l-42.293 41.926c-7.628 7.563-7.68 19.87-0.12305 27.498 3.804 3.837 8.8076 5.7559 13.811 5.7559 4.945 0 9.8984-1.8808 13.689-5.6328l75.826-75.18c0.0141-0.014 0.0269-0.0289 0.041-0.043 0.2515-0.2508 0.48121-0.52292 0.71875-0.78711 0.18447-0.20534 0.38168-0.40105 0.55664-0.61328 0.404-0.48955 0.78339-0.9993 1.1387-1.5274 0.0249-0.0371 0.0437-0.0779 0.0684-0.11523 0.32713-0.4935 0.63802-0.99972 0.91992-1.5234 0.0324-0.0604 0.0561-0.12484 0.0879-0.18555 0.26306-0.50133 0.51109-1.0112 0.73047-1.5371 0.0125-0.0301 0.0208-0.0617 0.0332-0.0918 0.22497-0.54707 0.42834-1.105 0.60352-1.6758 0.0473-0.15419 0.0776-0.31334 0.12109-0.46875 0.13019-0.46537 0.25974-0.93139 0.35547-1.4102 0.0128-0.0637 0.0171-0.12948 0.0293-0.19336 0.22362-1.1801 0.35153-2.3934 0.35153-3.6386 0-1.3125-0.13302-2.5925-0.38086-3.832-4e-4 -2e-3 -2e-3 -4e-3 -2e-3 -6e-3 -0.0955-0.47674-0.22387-0.94085-0.35352-1.4043-0.0435-0.15541-0.0738-0.31456-0.12109-0.46875-0.18478-0.60207-0.39663-1.192-0.63672-1.7676-5.6e-4 -1e-3 -1e-3 -3e-3 -2e-3 -4e-3 -0.24542-0.58801-0.51657-1.1617-0.81641-1.7188-2e-3 -3e-3 -4e-3 -6e-3 -6e-3 -0.01-0.30165-0.55963-0.62921-1.1039-0.98242-1.6289-8e-4 -1e-3 -1e-3 -3e-3 -2e-3 -4e-3 -0.35459-0.52676-0.73364-1.035-1.1367-1.5234-0.17496-0.21223-0.37217-0.40794-0.55664-0.61328-0.23754-0.26419-0.46725-0.53631-0.71875-0.78711-0.0141-0.014-0.0269-0.029-0.041-0.043l-75.826-75.18c-7.635-7.563-19.943-7.5048-27.5 0.11718-7.557 7.628-7.505 19.935 0.12305 27.498l42.295 41.932h-169.89v-169.89l41.926 42.289c3.804 3.837 8.8076 5.7559 13.811 5.7559 4.945 0 9.8955-1.8738 13.688-5.6328 7.628-7.563 7.68-19.872 0.12304-27.5l-75.18-75.826c-0.0137-0.013805-0.0292-0.025303-0.043-0.039063-0.44175-0.44306-0.90413-0.86662-1.3867-1.2656-5e-3 -0.00382-9e-3 -0.0079-0.0137-0.011719-3.3608-2.7735-7.6688-4.4395-12.367-4.4395z"/>
+</svg>

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>ThingsKit 3D Model Editor</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
+  </head>
+
+  <body>
+    <link rel="stylesheet" href="css/main.css" />
+    <link rel="stylesheet" href="./js/libs/spin/spin.css">
+    <link rel="stylesheet" href="js/libs/codemirror/codemirror.css" />
+    <link rel="stylesheet" href="js/libs/codemirror/theme/monokai.css" />
+    <link rel="stylesheet" href="js/libs/codemirror/addon/dialog.css" />
+    <link rel="stylesheet" href="js/libs/codemirror/addon/show-hint.css" />
+    <link rel="stylesheet" href="js/libs/codemirror/addon/tern.css" />
+    <script type="module" src="./jsm/libs/draco/draco_encoder.js"></script>
+    <script type="module" src="./js/libs/codemirror/codemirror.js"></script>
+    <script type="module" src="./js/libs/codemirror/mode/javascript.js"></script>
+    <script type="module" src="./js/libs/codemirror/mode/glsl.js"></script>
+    <script type="module" src="./js/libs/esprima.js"></script>
+    <script type="module" src="./js/libs/jsonlint.js"></script>
+    <script type="module" src="./js/libs/ffmpeg/ffmpeg.min.js"></script>
+    <script type="module" src="./js/libs/codemirror/addon/dialog.js"></script>
+    <script type="module" src="./js/libs/codemirror/addon/show-hint.js"></script>
+    <script type="module" src="./js/libs/codemirror/addon/tern.js"></script>
+    <script type="module" src="./js/libs/acorn/acorn.js"></script>
+    <script type="module" src="./js/libs/acorn/acorn_loose.js"></script>
+    <script type="module" src="./js/libs/acorn/walk.js"></script>
+    <script type="module" src="./js/libs/ternjs/polyfill.js"></script>
+    <script type="module" src="./js/libs/ternjs/signal.js"></script>
+    <script type="module" src="./js/libs/ternjs/tern.js"></script>
+    <script type="module" src="./js/libs/ternjs/def.js"></script>
+    <script type="module" src="./js/libs/ternjs/comment.js"></script>
+    <script type="module" src="./js/libs/ternjs/infer.js"></script>
+    <script type="module" src="./js/libs/ternjs/doc_comment.js"></script>
+    <script type="module" src="./js/libs/tern-threejs/threejs.js"></script>
+    <script type="module" src="./js/libs/signals.min.js"></script>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

+/**
+ * @param editor pointer to main editor object used to initialize
+ *        each command object with a reference to the editor
+ * @constructor
+ */
+
+class Command {
+
+	constructor( editor ) {
+
+		this.id = - 1;
+		this.inMemory = false;
+		this.updatable = false;
+		this.type = '';
+		this.name = '';
+		this.editor = editor;
+
+	}
+
+	toJSON() {
+
+		const output = {};
+		output.type = this.type;
+		output.id = this.id;
+		output.name = this.name;
+		return output;
+
+	}
+
+	fromJSON( json ) {
+
+		this.inMemory = true;
+		this.type = json.type;
+		this.id = json.id;
+		this.name = json.name;
+
+	}
+
+}
+
+export { Command };

+function Config() {
+
+	const name = 'threejs-editor';
+
+	const userLanguage = navigator.language.split( '-' )[ 0 ];
+
+	const suggestedLanguage = [ 'fr', 'ja', 'zh', 'ko' ].includes( userLanguage ) ? userLanguage : 'en';
+
+	const storage = {
+		'language': suggestedLanguage,
+
+		'autosave': true,
+
+		'project/title': '',
+		'project/editable': false,
+		'project/vr': false,
+
+		'project/renderer/antialias': true,
+		'project/renderer/shadows': true,
+		'project/renderer/shadowType': 1, // PCF
+		'project/renderer/toneMapping': 0, // NoToneMapping
+		'project/renderer/toneMappingExposure': 1,
+
+		'settings/history': false,
+
+		'settings/shortcuts/translate': 'w',
+		'settings/shortcuts/rotate': 'e',
+		'settings/shortcuts/scale': 'r',
+		'settings/shortcuts/undo': 'z',
+		'settings/shortcuts/focus': 'f'
+	};
+
+	if ( window.localStorage[ name ] === undefined ) {
+
+		window.localStorage[ name ] = JSON.stringify( storage );
+
+	} else {
+
+		const data = JSON.parse( window.localStorage[ name ] );
+
+		for ( const key in data ) {
+
+			storage[ key ] = data[ key ];
+
+		}
+
+	}
+
+	return {
+
+		getKey: function ( key ) {
+
+			return storage[ key ];
+
+		},
+
+		setKey: function () { // key, value, key, value ...
+
+			for ( let i = 0, l = arguments.length; i < l; i += 2 ) {
+
+				storage[ arguments[ i ] ] = arguments[ i + 1 ];
+
+			}
+
+			window.localStorage[ name ] = JSON.stringify( storage );
+
+			console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Saved config to LocalStorage.' );
+
+		},
+
+		clear: function () {
+
+			delete window.localStorage[ name ];
+
+		}
+
+	};
+
+}
+
+export { Config };

+import * as THREE from 'three';
+
+import { Config } from './Config.js';
+import { Loader } from './Loader.js';
+import { History as _History } from './History.js';
+import { Strings } from './Strings.js';
+import { Storage as _Storage } from './Storage.js';
+import { Selector } from './Selector.js';
+
+var _DEFAULT_CAMERA = new THREE.PerspectiveCamera(50, 1, 0.01, 1000);
+_DEFAULT_CAMERA.name = 'Camera';
+_DEFAULT_CAMERA.position.set(0, 5, 10);
+_DEFAULT_CAMERA.lookAt(new THREE.Vector3());
+
+function Editor() {
+
+	const Signal = signals.Signal; // eslint-disable-line no-undef
+
+	this.signals = {
+
+		// script
+
+		editScript: new Signal(),
+
+		// player
+
+		startPlayer: new Signal(),
+		stopPlayer: new Signal(),
+
+		// xr
+
+		enterXR: new Signal(),
+		offerXR: new Signal(),
+		leaveXR: new Signal(),
+
+		// notifications
+
+		editorCleared: new Signal(),
+
+		savingStarted: new Signal(),
+		savingFinished: new Signal(),
+
+		transformModeChanged: new Signal(),
+		snapChanged: new Signal(),
+		spaceChanged: new Signal(),
+		rendererCreated: new Signal(),
+		rendererUpdated: new Signal(),
+		rendererDetectKTX2Support: new Signal(),
+
+		sceneBackgroundChanged: new Signal(),
+		sceneEnvironmentChanged: new Signal(),
+		sceneFogChanged: new Signal(),
+		sceneFogSettingsChanged: new Signal(),
+		sceneGraphChanged: new Signal(),
+		sceneRendered: new Signal(),
+
+		cameraChanged: new Signal(),
+		cameraResetted: new Signal(),
+
+		geometryChanged: new Signal(),
+
+		objectSelected: new Signal(),
+		objectFocused: new Signal(),
+
+		objectAdded: new Signal(),
+		objectChanged: new Signal(),
+		objectRemoved: new Signal(),
+
+		cameraAdded: new Signal(),
+		cameraRemoved: new Signal(),
+
+		helperAdded: new Signal(),
+		helperRemoved: new Signal(),
+
+		materialAdded: new Signal(),
+		materialChanged: new Signal(),
+		materialRemoved: new Signal(),
+
+		scriptAdded: new Signal(),
+		scriptChanged: new Signal(),
+		scriptRemoved: new Signal(),
+
+		windowResize: new Signal(),
+
+		showHelpersChanged: new Signal(),
+		refreshSidebarObject3D: new Signal(),
+		refreshSidebarEnvironment: new Signal(),
+		historyChanged: new Signal(),
+
+		viewportCameraChanged: new Signal(),
+		viewportShadingChanged: new Signal(),
+
+		intersectionsDetected: new Signal(),
+
+		pathTracerUpdated: new Signal(),
+
+	};
+
+	this.config = new Config();
+	this.history = new _History(this);
+	this.selector = new Selector(this);
+	this.storage = new _Storage();
+	this.strings = new Strings(this.config);
+
+	this.loader = new Loader(this);
+
+	this.camera = _DEFAULT_CAMERA.clone();
+
+	this.scene = new THREE.Scene();
+	this.scene.name = 'Scene';
+
+	this.sceneHelpers = new THREE.Scene();
+	this.sceneHelpers.add(new THREE.HemisphereLight(0xffffff, 0x888888, 2));
+
+	this.object = {};
+	this.geometries = {};
+	this.materials = {};
+	this.textures = {};
+	this.scripts = {};
+
+	this.materialsRefCounter = new Map(); // tracks how often is a material used by a 3D object
+
+	this.mixer = new THREE.AnimationMixer(this.scene);
+
+	this.selected = null;
+	this.helpers = {};
+
+	this.cameras = {};
+
+	this.viewportCamera = this.camera;
+	this.viewportShading = 'default';
+
+	this.addCamera(this.camera);
+
+}
+
+Editor.prototype = {
+
+	setScene: function (scene) {
+
+		this.scene.uuid = scene.uuid;
+		this.scene.name = scene.name;
+
+		this.scene.background = scene.background;
+		this.scene.environment = scene.environment;
+		this.scene.fog = scene.fog;
+		this.scene.backgroundBlurriness = scene.backgroundBlurriness;
+		this.scene.backgroundIntensity = scene.backgroundIntensity;
+
+		this.scene.userData = JSON.parse(JSON.stringify(scene.userData));
+
+		// avoid render per object
+
+		this.signals.sceneGraphChanged.active = false;
+
+		while (scene.children.length > 0) {
+
+			this.addObject(scene.children[0]);
+
+		}
+
+		this.signals.sceneGraphChanged.active = true;
+		this.signals.sceneGraphChanged.dispatch();
+
+	},
+
+	//
+
+	addObject: function (object, parent, index) {
+
+		var scope = this;
+
+		object.traverse(function (child) {
+
+			if (child.geometry !== undefined) scope.addGeometry(child.geometry);
+			if (child.material !== undefined) scope.addMaterial(child.material);
+
+			scope.addCamera(child);
+			scope.addHelper(child);
+
+		});
+
+		if (parent === undefined) {
+
+			this.scene.add(object);
+
+		} else {
+
+			parent.children.splice(index, 0, object);
+			object.parent = parent;
+
+		}
+
+		this.signals.objectAdded.dispatch(object);
+		this.signals.sceneGraphChanged.dispatch();
+
+	},
+
+	nameObject: function (object, name) {
+
+		object.name = name;
+		this.signals.sceneGraphChanged.dispatch();
+
+	},
+
+	removeObject: function (object) {
+
+		if (object.parent === null) return; // avoid deleting the camera or scene
+
+		var scope = this;
+
+		object.traverse(function (child) {
+
+			scope.removeCamera(child);
+			scope.removeHelper(child);
+
+			if (child.material !== undefined) scope.removeMaterial(child.material);
+
+		});
+
+		object.parent.remove(object);
+
+		this.signals.objectRemoved.dispatch(object);
+		this.signals.sceneGraphChanged.dispatch();
+
+	},
+
+	addGeometry: function (geometry) {
+
+		this.geometries[geometry.uuid] = geometry;
+
+	},
+
+	setGeometryName: function (geometry, name) {
+
+		geometry.name = name;
+		this.signals.sceneGraphChanged.dispatch();
+
+	},
+
+	addMaterial: function (material) {
+
+		if (Array.isArray(material)) {
+
+			for (var i = 0, l = material.length; i < l; i++) {
+
+				this.addMaterialToRefCounter(material[i]);
+
+			}
+
+		} else {
+
+			this.addMaterialToRefCounter(material);
+
+		}
+
+		this.signals.materialAdded.dispatch();
+
+	},
+
+	addMaterialToRefCounter: function (material) {
+
+		var materialsRefCounter = this.materialsRefCounter;
+
+		var count = materialsRefCounter.get(material);
+
+		if (count === undefined) {
+
+			materialsRefCounter.set(material, 1);
+			this.materials[material.uuid] = material;
+
+		} else {
+
+			count++;
+			materialsRefCounter.set(material, count);
+
+		}
+
+	},
+
+	removeMaterial: function (material) {
+
+		if (Array.isArray(material)) {
+
+			for (var i = 0, l = material.length; i < l; i++) {
+
+				this.removeMaterialFromRefCounter(material[i]);
+
+			}
+
+		} else {
+
+			this.removeMaterialFromRefCounter(material);
+
+		}
+
+		this.signals.materialRemoved.dispatch();
+
+	},
+
+	removeMaterialFromRefCounter: function (material) {
+
+		var materialsRefCounter = this.materialsRefCounter;
+
+		var count = materialsRefCounter.get(material);
+		count--;
+
+		if (count === 0) {
+
+			materialsRefCounter.delete(material);
+			delete this.materials[material.uuid];
+
+		} else {
+
+			materialsRefCounter.set(material, count);
+
+		}
+
+	},
+
+	getMaterialById: function (id) {
+
+		var material;
+		var materials = Object.values(this.materials);
+
+		for (var i = 0; i < materials.length; i++) {
+
+			if (materials[i].id === id) {
+
+				material = materials[i];
+				break;
+
+			}
+
+		}
+
+		return material;
+
+	},
+
+	setMaterialName: function (material, name) {
+
+		material.name = name;
+		this.signals.sceneGraphChanged.dispatch();
+
+	},
+
+	addTexture: function (texture) {
+
+		this.textures[texture.uuid] = texture;
+
+	},
+
+	//
+
+	addCamera: function (camera) {
+
+		if (camera.isCamera) {
+
+			this.cameras[camera.uuid] = camera;
+
+			this.signals.cameraAdded.dispatch(camera);
+
+		}
+
+	},
+
+	removeCamera: function (camera) {
+
+		if (this.cameras[camera.uuid] !== undefined) {
+
+			delete this.cameras[camera.uuid];
+
+			this.signals.cameraRemoved.dispatch(camera);
+
+		}
+
+	},
+
+	//
+
+	addHelper: function () {
+
+		var geometry = new THREE.SphereGeometry(2, 4, 2);
+		var material = new THREE.MeshBasicMaterial({ color: 0xff0000, visible: false });
+
+		return function (object, helper) {
+
+			if (helper === undefined) {
+
+				if (object.isCamera) {
+
+					helper = new THREE.CameraHelper(object);
+
+				} else if (object.isPointLight) {
+
+					helper = new THREE.PointLightHelper(object, 1);
+
+				} else if (object.isDirectionalLight) {
+
+					helper = new THREE.DirectionalLightHelper(object, 1);
+
+				} else if (object.isSpotLight) {
+
+					helper = new THREE.SpotLightHelper(object);
+
+				} else if (object.isHemisphereLight) {
+
+					helper = new THREE.HemisphereLightHelper(object, 1);
+
+				} else if (object.isSkinnedMesh) {
+
+					helper = new THREE.SkeletonHelper(object.skeleton.bones[0]);
+
+				} else if (object.isBone === true && object.parent && object.parent.isBone !== true) {
+
+					helper = new THREE.SkeletonHelper(object);
+
+				} else {
+
+					// no helper for this object type
+					return;
+
+				}
+
+				const picker = new THREE.Mesh(geometry, material);
+				picker.name = 'picker';
+				picker.userData.object = object;
+				helper.add(picker);
+
+			}
+
+			this.sceneHelpers.add(helper);
+			this.helpers[object.id] = helper;
+
+			this.signals.helperAdded.dispatch(helper);
+
+		};
+
+	}(),
+
+	removeHelper: function (object) {
+
+		if (this.helpers[object.id] !== undefined) {
+
+			var helper = this.helpers[object.id];
+			helper.parent.remove(helper);
+			helper.dispose();
+
+			delete this.helpers[object.id];
+
+			this.signals.helperRemoved.dispatch(helper);
+
+		}
+
+	},
+
+	//
+
+	addScript: function (object, script) {
+
+		if (this.scripts[object.uuid] === undefined) {
+
+			this.scripts[object.uuid] = [];
+
+		}
+
+		this.scripts[object.uuid].push(script);
+
+		this.signals.scriptAdded.dispatch(script);
+
+	},
+
+	removeScript: function (object, script) {
+
+		if (this.scripts[object.uuid] === undefined) return;
+
+		var index = this.scripts[object.uuid].indexOf(script);
+
+		if (index !== - 1) {
+
+			this.scripts[object.uuid].splice(index, 1);
+
+		}
+
+		this.signals.scriptRemoved.dispatch(script);
+
+	},
+
+	getObjectMaterial: function (object, slot) {
+
+		var material = object.material;
+
+		if (Array.isArray(material) && slot !== undefined) {
+
+			material = material[slot];
+
+		}
+
+		return material;
+
+	},
+
+	setObjectMaterial: function (object, slot, newMaterial) {
+
+		if (Array.isArray(object.material) && slot !== undefined) {
+
+			object.material[slot] = newMaterial;
+
+		} else {
+
+			object.material = newMaterial;
+
+		}
+
+	},
+
+	setViewportCamera: function (uuid) {
+
+		this.viewportCamera = this.cameras[uuid];
+		this.signals.viewportCameraChanged.dispatch();
+
+	},
+
+	setViewportShading: function (value) {
+
+		this.viewportShading = value;
+		this.signals.viewportShadingChanged.dispatch();
+
+	},
+
+	//
+
+	select: function (object) {
+
+		this.selector.select(object);
+
+	},
+
+	selectById: function (id) {
+
+		if (id === this.camera.id) {
+
+			this.select(this.camera);
+			return;
+
+		}
+
+		this.select(this.scene.getObjectById(id));
+
+	},
+
+	selectByUuid: function (uuid) {
+
+		var scope = this;
+
+		this.scene.traverse(function (child) {
+
+			if (child.uuid === uuid) {
+
+				scope.select(child);
+
+			}
+
+		});
+
+	},
+
+	deselect: function () {
+
+		this.selector.deselect();
+
+	},
+
+	focus: function (object) {
+
+		if (object !== undefined) {
+
+			this.signals.objectFocused.dispatch(object);
+
+		}
+
+	},
+
+	focusById: function (id) {
+
+		this.focus(this.scene.getObjectById(id));
+
+	},
+
+	clear: function () {
+
+		this.history.clear();
+		this.storage.clear();
+
+		this.camera.copy(_DEFAULT_CAMERA);
+		this.signals.cameraResetted.dispatch();
+
+		this.scene.name = 'Scene';
+		this.scene.userData = {};
+		this.scene.background = null;
+		this.scene.environment = null;
+		this.scene.fog = null;
+
+		var objects = this.scene.children;
+
+		this.signals.sceneGraphChanged.active = false;
+
+		while (objects.length > 0) {
+
+			this.removeObject(objects[0]);
+
+		}
+
+		this.signals.sceneGraphChanged.active = true;
+
+		this.geometries = {};
+		this.materials = {};
+		this.textures = {};
+		this.scripts = {};
+
+		this.materialsRefCounter.clear();
+
+		this.animations = {};
+		this.mixer.stopAllAction();
+
+		this.deselect();
+
+		this.signals.editorCleared.dispatch();
+
+	},
+
+	//
+
+	fromJSON: async function (json) {
+
+		var loader = new THREE.ObjectLoader();
+		var camera = await loader.parseAsync(json.camera);
+
+		const existingUuid = this.camera.uuid;
+		const incomingUuid = camera.uuid;
+
+		// copy all properties, including uuid
+		this.camera.copy(camera);
+		this.camera.uuid = incomingUuid;
+
+		delete this.cameras[existingUuid]; // remove old entry [existingUuid, this.camera]
+		this.cameras[incomingUuid] = this.camera; // add new entry [incomingUuid, this.camera]
+
+		this.signals.cameraResetted.dispatch();
+
+		this.history.fromJSON(json.history);
+		this.scripts = json.scripts;
+
+		this.setScene(await loader.parseAsync(json.scene));
+
+		if (json.environment === 'ModelViewer') {
+
+			this.signals.sceneEnvironmentChanged.dispatch(json.environment);
+			this.signals.refreshSidebarEnvironment.dispatch();
+
+		}
+
+	},
+
+	toJSON: function () {
+
+		// scripts clean up
+
+		var scene = this.scene;
+		var scripts = this.scripts;
+
+		for (var key in scripts) {
+
+			var script = scripts[key];
+
+			if (script.length === 0 || scene.getObjectByProperty('uuid', key) === undefined) {
+
+				delete scripts[key];
+
+			}
+
+		}
+
+		// honor modelviewer environment
+
+		let environment = null;
+
+		if (this.scene.environment !== null && this.scene.environment.isRenderTargetTexture === true) {
+
+			environment = 'ModelViewer';
+
+		}
+
+		//
+
+		return {
+
+			metadata: {},
+			project: {
+				shadows: this.config.getKey('project/renderer/shadows'),
+				shadowType: this.config.getKey('project/renderer/shadowType'),
+				toneMapping: this.config.getKey('project/renderer/toneMapping'),
+				toneMappingExposure: this.config.getKey('project/renderer/toneMappingExposure')
+			},
+			camera: this.viewportCamera.toJSON(),
+			scene: this.scene.toJSON(),
+			scripts: this.scripts,
+			history: this.history.toJSON(),
+			environment: environment
+
+		};
+
+	},
+
+	objectByUuid: function (uuid) {
+
+		return this.scene.getObjectByProperty('uuid', uuid, true);
+
+	},
+
+	execute: function (cmd, optionalName) {
+		this.history.execute(cmd, optionalName);
+		console.log(this)
+		this.saveTooltip?.show?.()
+	},
+
+	undo: function () {
+
+		this.history.undo();
+
+	},
+
+	redo: function () {
+
+		this.history.redo();
+
+	},
+
+	utils: {
+
+		save: save,
+		saveArrayBuffer: saveArrayBuffer,
+		saveString: saveString,
+		formatNumber: formatNumber
+
+	}
+
+};
+
+const link = document.createElement('a');
+
+function save(blob, filename) {
+
+	if (link.href) {
+
+		URL.revokeObjectURL(link.href);
+
+	}
+
+	link.href = URL.createObjectURL(blob);
+	link.download = filename || 'data.json';
+	link.dispatchEvent(new MouseEvent('click'));
+
+}
+
+function saveArrayBuffer(buffer, filename) {
+
+	save(new Blob([buffer], { type: 'application/octet-stream' }), filename);
+
+}
+
+function saveString(text, filename) {
+
+	save(new Blob([text], { type: 'text/plain' }), filename);
+
+}
+
+function formatNumber(number) {
+
+	return new Intl.NumberFormat('en-us', { useGrouping: true }).format(number);
+
+}
+
+export { Editor };

+import * as THREE from 'three';
+
+class EditorControls extends THREE.EventDispatcher {
+
+	constructor( object, domElement ) {
+
+		super();
+
+		// API
+
+		this.enabled = true;
+		this.center = new THREE.Vector3();
+		this.panSpeed = 0.002;
+		this.zoomSpeed = 0.1;
+		this.rotationSpeed = 0.005;
+
+		// internals
+
+		var scope = this;
+		var vector = new THREE.Vector3();
+		var delta = new THREE.Vector3();
+		var box = new THREE.Box3();
+
+		var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2 };
+		var state = STATE.NONE;
+
+		var center = this.center;
+		var normalMatrix = new THREE.Matrix3();
+		var pointer = new THREE.Vector2();
+		var pointerOld = new THREE.Vector2();
+		var spherical = new THREE.Spherical();
+		var sphere = new THREE.Sphere();
+
+		var pointers = [];
+		var pointerPositions = {};
+
+		// events
+
+		var changeEvent = { type: 'change' };
+
+		this.focus = function ( target ) {
+
+			var distance;
+
+			box.setFromObject( target );
+
+			if ( box.isEmpty() === false ) {
+
+				box.getCenter( center );
+				distance = box.getBoundingSphere( sphere ).radius;
+
+			} else {
+
+				// Focusing on an Group, AmbientLight, etc
+
+				center.setFromMatrixPosition( target.matrixWorld );
+				distance = 0.1;
+
+			}
+
+			delta.set( 0, 0, 1 );
+			delta.applyQuaternion( object.quaternion );
+			delta.multiplyScalar( distance * 4 );
+
+			object.position.copy( center ).add( delta );
+
+			scope.dispatchEvent( changeEvent );
+
+		};
+
+		this.pan = function ( delta ) {
+
+			var distance = object.position.distanceTo( center );
+
+			delta.multiplyScalar( distance * scope.panSpeed );
+			delta.applyMatrix3( normalMatrix.getNormalMatrix( object.matrix ) );
+
+			object.position.add( delta );
+			center.add( delta );
+
+			scope.dispatchEvent( changeEvent );
+
+		};
+
+		this.zoom = function ( delta ) {
+
+			var distance = object.position.distanceTo( center );
+
+			delta.multiplyScalar( distance * scope.zoomSpeed );
+
+			if ( delta.length() > distance ) return;
+
+			delta.applyMatrix3( normalMatrix.getNormalMatrix( object.matrix ) );
+
+			object.position.add( delta );
+
+			scope.dispatchEvent( changeEvent );
+
+		};
+
+		this.rotate = function ( delta ) {
+
+			vector.copy( object.position ).sub( center );
+
+			spherical.setFromVector3( vector );
+
+			spherical.theta += delta.x * scope.rotationSpeed;
+			spherical.phi += delta.y * scope.rotationSpeed;
+
+			spherical.makeSafe();
+
+			vector.setFromSpherical( spherical );
+
+			object.position.copy( center ).add( vector );
+
+			object.lookAt( center );
+
+			scope.dispatchEvent( changeEvent );
+
+		};
+
+		//
+
+		function onPointerDown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( pointers.length === 0 ) {
+
+				domElement.setPointerCapture( event.pointerId );
+
+				domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
+				domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
+
+			}
+
+			//
+
+			if ( isTrackingPointer( event ) ) return;
+
+			//
+
+			addPointer( event );
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchStart( event );
+
+			} else {
+
+				onMouseDown( event );
+
+			}
+
+		}
+
+		function onPointerMove( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchMove( event );
+
+			} else {
+
+				onMouseMove( event );
+
+			}
+
+		}
+
+		function onPointerUp( event ) {
+
+			removePointer( event );
+
+			switch ( pointers.length ) {
+
+				case 0:
+
+					domElement.releasePointerCapture( event.pointerId );
+
+					domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
+					domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
+
+					break;
+
+				case 1:
+
+					var pointerId = pointers[ 0 ];
+					var position = pointerPositions[ pointerId ];
+
+					// minimal placeholder event - allows state correction on pointer-up
+					onTouchStart( { pointerId: pointerId, pageX: position.x, pageY: position.y } );
+
+					break;
+
+			}
+
+		}
+
+		// mouse
+
+		function onMouseDown( event ) {
+
+			if ( event.button === 0 ) {
+
+				state = STATE.ROTATE;
+
+			} else if ( event.button === 1 ) {
+
+				state = STATE.ZOOM;
+
+			} else if ( event.button === 2 ) {
+
+				state = STATE.PAN;
+
+			}
+
+			pointerOld.set( event.clientX, event.clientY );
+
+		}
+
+		function onMouseMove( event ) {
+
+			pointer.set( event.clientX, event.clientY );
+
+			var movementX = pointer.x - pointerOld.x;
+			var movementY = pointer.y - pointerOld.y;
+
+			if ( state === STATE.ROTATE ) {
+
+				scope.rotate( delta.set( - movementX, - movementY, 0 ) );
+
+			} else if ( state === STATE.ZOOM ) {
+
+				scope.zoom( delta.set( 0, 0, movementY ) );
+
+			} else if ( state === STATE.PAN ) {
+
+				scope.pan( delta.set( - movementX, movementY, 0 ) );
+
+			}
+
+			pointerOld.set( event.clientX, event.clientY );
+
+		}
+
+		function onMouseUp() {
+
+			state = STATE.NONE;
+
+		}
+
+		function onMouseWheel( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			event.preventDefault();
+
+			// Normalize deltaY due to https://bugzilla.mozilla.org/show_bug.cgi?id=1392460
+			scope.zoom( delta.set( 0, 0, event.deltaY > 0 ? 1 : - 1 ) );
+
+		}
+
+		function contextmenu( event ) {
+
+			event.preventDefault();
+
+		}
+
+		this.dispose = function () {
+
+			domElement.removeEventListener( 'contextmenu', contextmenu );
+			domElement.removeEventListener( 'dblclick', onMouseUp );
+			domElement.removeEventListener( 'wheel', onMouseWheel );
+
+			domElement.removeEventListener( 'pointerdown', onPointerDown );
+
+		};
+
+		domElement.addEventListener( 'contextmenu', contextmenu );
+		domElement.addEventListener( 'dblclick', onMouseUp );
+		domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
+
+		domElement.addEventListener( 'pointerdown', onPointerDown );
+
+		// touch
+
+		var touches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
+		var prevTouches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
+
+		var prevDistance = null;
+
+		function onTouchStart( event ) {
+
+			trackPointer( event );
+
+			switch ( pointers.length ) {
+
+				case 1:
+					touches[ 0 ].set( event.pageX, event.pageY, 0 ).divideScalar( window.devicePixelRatio );
+					touches[ 1 ].set( event.pageX, event.pageY, 0 ).divideScalar( window.devicePixelRatio );
+					break;
+
+				case 2:
+
+					var position = getSecondPointerPosition( event );
+
+					touches[ 0 ].set( event.pageX, event.pageY, 0 ).divideScalar( window.devicePixelRatio );
+					touches[ 1 ].set( position.x, position.y, 0 ).divideScalar( window.devicePixelRatio );
+					prevDistance = touches[ 0 ].distanceTo( touches[ 1 ] );
+					break;
+
+			}
+
+			prevTouches[ 0 ].copy( touches[ 0 ] );
+			prevTouches[ 1 ].copy( touches[ 1 ] );
+
+		}
+
+
+		function onTouchMove( event ) {
+
+			trackPointer( event );
+
+			function getClosest( touch, touches ) {
+
+				var closest = touches[ 0 ];
+
+				for ( var touch2 of touches ) {
+
+					if ( closest.distanceTo( touch ) > touch2.distanceTo( touch ) ) closest = touch2;
+
+				}
+
+				return closest;
+
+			}
+
+			switch ( pointers.length ) {
+
+				case 1:
+					touches[ 0 ].set( event.pageX, event.pageY, 0 ).divideScalar( window.devicePixelRatio );
+					touches[ 1 ].set( event.pageX, event.pageY, 0 ).divideScalar( window.devicePixelRatio );
+					scope.rotate( touches[ 0 ].sub( getClosest( touches[ 0 ], prevTouches ) ).multiplyScalar( - 1 ) );
+					break;
+
+				case 2:
+
+					var position = getSecondPointerPosition( event );
+
+					touches[ 0 ].set( event.pageX, event.pageY, 0 ).divideScalar( window.devicePixelRatio );
+					touches[ 1 ].set( position.x, position.y, 0 ).divideScalar( window.devicePixelRatio );
+					var distance = touches[ 0 ].distanceTo( touches[ 1 ] );
+					scope.zoom( delta.set( 0, 0, prevDistance - distance ) );
+					prevDistance = distance;
+
+
+					var offset0 = touches[ 0 ].clone().sub( getClosest( touches[ 0 ], prevTouches ) );
+					var offset1 = touches[ 1 ].clone().sub( getClosest( touches[ 1 ], prevTouches ) );
+					offset0.x = - offset0.x;
+					offset1.x = - offset1.x;
+
+					scope.pan( offset0.add( offset1 ) );
+
+					break;
+
+			}
+
+			prevTouches[ 0 ].copy( touches[ 0 ] );
+			prevTouches[ 1 ].copy( touches[ 1 ] );
+
+		}
+
+		function addPointer( event ) {
+
+			pointers.push( event.pointerId );
+
+		}
+
+		function removePointer( event ) {
+
+			delete pointerPositions[ event.pointerId ];
+
+			for ( var i = 0; i < pointers.length; i ++ ) {
+
+				if ( pointers[ i ] == event.pointerId ) {
+
+					pointers.splice( i, 1 );
+					return;
+
+				}
+
+			}
+
+		}
+
+		function isTrackingPointer( event ) {
+
+			for ( var i = 0; i < pointers.length; i ++ ) {
+
+				if ( pointers[ i ] == event.pointerId ) return true;
+
+			}
+
+			return false;
+
+		}
+
+		function trackPointer( event ) {
+
+			var position = pointerPositions[ event.pointerId ];
+
+			if ( position === undefined ) {
+
+				position = new THREE.Vector2();
+				pointerPositions[ event.pointerId ] = position;
+
+			}
+
+			position.set( event.pageX, event.pageY );
+
+		}
+
+		function getSecondPointerPosition( event ) {
+
+			var pointerId = ( event.pointerId === pointers[ 0 ] ) ? pointers[ 1 ] : pointers[ 0 ];
+
+			return pointerPositions[ pointerId ];
+
+		}
+
+	}
+
+}
+
+export { EditorControls };

+import * as Commands from './commands/Commands.js';
+
+class History {
+
+	constructor( editor ) {
+
+		this.editor = editor;
+		this.undos = [];
+		this.redos = [];
+		this.lastCmdTime = Date.now();
+		this.idCounter = 0;
+
+		this.historyDisabled = false;
+		this.config = editor.config;
+
+		// signals
+
+		const scope = this;
+
+		this.editor.signals.startPlayer.add( function () {
+
+			scope.historyDisabled = true;
+
+		} );
+
+		this.editor.signals.stopPlayer.add( function () {
+
+			scope.historyDisabled = false;
+
+		} );
+
+	}
+
+	execute( cmd, optionalName ) {
+
+		const lastCmd = this.undos[ this.undos.length - 1 ];
+		const timeDifference = Date.now() - this.lastCmdTime;
+
+		const isUpdatableCmd = lastCmd &&
+			lastCmd.updatable &&
+			cmd.updatable &&
+			lastCmd.object === cmd.object &&
+			lastCmd.type === cmd.type &&
+			lastCmd.script === cmd.script &&
+			lastCmd.attributeName === cmd.attributeName;
+
+		if ( isUpdatableCmd && cmd.type === 'SetScriptValueCommand' ) {
+
+			// When the cmd.type is "SetScriptValueCommand" the timeDifference is ignored
+
+			lastCmd.update( cmd );
+			cmd = lastCmd;
+
+		} else if ( isUpdatableCmd && timeDifference < 500 ) {
+
+			lastCmd.update( cmd );
+			cmd = lastCmd;
+
+		} else {
+
+			// the command is not updatable and is added as a new part of the history
+
+			this.undos.push( cmd );
+			cmd.id = ++ this.idCounter;
+
+		}
+
+		cmd.name = ( optionalName !== undefined ) ? optionalName : cmd.name;
+		cmd.execute();
+		cmd.inMemory = true;
+
+		if ( this.config.getKey( 'settings/history' ) ) {
+
+			cmd.json = cmd.toJSON();	// serialize the cmd immediately after execution and append the json to the cmd
+
+		}
+
+		this.lastCmdTime = Date.now();
+
+		// clearing all the redo-commands
+
+		this.redos = [];
+		this.editor.signals.historyChanged.dispatch( cmd );
+
+	}
+
+	undo() {
+
+		if ( this.historyDisabled ) {
+
+			alert( this.editor.strings.getKey( 'prompt/history/forbid' ) );
+			return;
+
+		}
+
+		let cmd = undefined;
+
+		if ( this.undos.length > 0 ) {
+
+			cmd = this.undos.pop();
+
+			if ( cmd.inMemory === false ) {
+
+				cmd.fromJSON( cmd.json );
+
+			}
+
+		}
+
+		if ( cmd !== undefined ) {
+
+			cmd.undo();
+			this.redos.push( cmd );
+			this.editor.signals.historyChanged.dispatch( cmd );
+
+		}
+
+		return cmd;
+
+	}
+
+	redo() {
+
+		if ( this.historyDisabled ) {
+
+			alert( this.editor.strings.getKey( 'prompt/history/forbid' ) );
+			return;
+
+		}
+
+		let cmd = undefined;
+
+		if ( this.redos.length > 0 ) {
+
+			cmd = this.redos.pop();
+
+			if ( cmd.inMemory === false ) {
+
+				cmd.fromJSON( cmd.json );
+
+			}
+
+		}
+
+		if ( cmd !== undefined ) {
+
+			cmd.execute();
+			this.undos.push( cmd );
+			this.editor.signals.historyChanged.dispatch( cmd );
+
+		}
+
+		return cmd;
+
+	}
+
+	toJSON() {
+
+		const history = {};
+		history.undos = [];
+		history.redos = [];
+
+		if ( ! this.config.getKey( 'settings/history' ) ) {
+
+			return history;
+
+		}
+
+		// Append Undos to History
+
+		for ( let i = 0; i < this.undos.length; i ++ ) {
+
+			if ( this.undos[ i ].hasOwnProperty( 'json' ) ) {
+
+				history.undos.push( this.undos[ i ].json );
+
+			}
+
+		}
+
+		// Append Redos to History
+
+		for ( let i = 0; i < this.redos.length; i ++ ) {
+
+			if ( this.redos[ i ].hasOwnProperty( 'json' ) ) {
+
+				history.redos.push( this.redos[ i ].json );
+
+			}
+
+		}
+
+		return history;
+
+	}
+
+	fromJSON( json ) {
+
+		if ( json === undefined ) return;
+
+		for ( let i = 0; i < json.undos.length; i ++ ) {
+
+			const cmdJSON = json.undos[ i ];
+			const cmd = new Commands[ cmdJSON.type ]( this.editor ); // creates a new object of type "json.type"
+			cmd.json = cmdJSON;
+			cmd.id = cmdJSON.id;
+			cmd.name = cmdJSON.name;
+			this.undos.push( cmd );
+			this.idCounter = ( cmdJSON.id > this.idCounter ) ? cmdJSON.id : this.idCounter; // set last used idCounter
+
+		}
+
+		for ( let i = 0; i < json.redos.length; i ++ ) {
+
+			const cmdJSON = json.redos[ i ];
+			const cmd = new Commands[ cmdJSON.type ]( this.editor ); // creates a new object of type "json.type"
+			cmd.json = cmdJSON;
+			cmd.id = cmdJSON.id;
+			cmd.name = cmdJSON.name;
+			this.redos.push( cmd );
+			this.idCounter = ( cmdJSON.id > this.idCounter ) ? cmdJSON.id : this.idCounter; // set last used idCounter
+
+		}
+
+		// Select the last executed undo-command
+		this.editor.signals.historyChanged.dispatch( this.undos[ this.undos.length - 1 ] );
+
+	}
+
+	clear() {
+
+		this.undos = [];
+		this.redos = [];
+		this.idCounter = 0;
+
+		this.editor.signals.historyChanged.dispatch();
+
+	}
+
+	goToState( id ) {
+
+		if ( this.historyDisabled ) {
+
+			alert( this.editor.strings.getKey( 'prompt/history/forbid' ) );
+			return;
+
+		}
+
+		this.editor.signals.sceneGraphChanged.active = false;
+		this.editor.signals.historyChanged.active = false;
+
+		let cmd = this.undos.length > 0 ? this.undos[ this.undos.length - 1 ] : undefined;	// next cmd to pop
+
+		if ( cmd === undefined || id > cmd.id ) {
+
+			cmd = this.redo();
+			while ( cmd !== undefined && id > cmd.id ) {
+
+				cmd = this.redo();
+
+			}
+
+		} else {
+
+			while ( true ) {
+
+				cmd = this.undos[ this.undos.length - 1 ];	// next cmd to pop
+
+				if ( cmd === undefined || id === cmd.id ) break;
+
+				this.undo();
+
+			}
+
+		}
+
+		this.editor.signals.sceneGraphChanged.active = true;
+		this.editor.signals.historyChanged.active = true;
+
+		this.editor.signals.sceneGraphChanged.dispatch();
+		this.editor.signals.historyChanged.dispatch( cmd );
+
+	}
+
+	enableSerialization( id ) {
+
+		/**
+		 * because there might be commands in this.undos and this.redos
+		 * which have not been serialized with .toJSON() we go back
+		 * to the oldest command and redo one command after the other
+		 * while also calling .toJSON() on them.
+		 */
+
+		this.goToState( - 1 );
+
+		this.editor.signals.sceneGraphChanged.active = false;
+		this.editor.signals.historyChanged.active = false;
+
+		let cmd = this.redo();
+		while ( cmd !== undefined ) {
+
+			if ( ! cmd.hasOwnProperty( 'json' ) ) {
+
+				cmd.json = cmd.toJSON();
+
+			}
+
+			cmd = this.redo();
+
+		}
+
+		this.editor.signals.sceneGraphChanged.active = true;
+		this.editor.signals.historyChanged.active = true;
+
+		this.goToState( id );
+
+	}
+
+}
+
+export { History };

+import * as THREE from 'three';
+
+import { TGALoader } from 'three/addons/loaders/TGALoader.js';
+
+import { AddObjectCommand } from './commands/AddObjectCommand.js';
+
+import { LoaderUtils } from './LoaderUtils.js';
+
+import { unzipSync, strFromU8 } from 'three/addons/libs/fflate.module.js';
+
+function Loader( editor ) {
+
+	const scope = this;
+
+	this.texturePath = '';
+
+	this.loadItemList = function ( items ) {
+
+		LoaderUtils.getFilesFromItemList( items, function ( files, filesMap ) {
+
+			scope.loadFiles( files, filesMap );
+
+		} );
+
+	};
+
+	this.loadFiles = function ( files, filesMap ) {
+
+		if ( files.length > 0 ) {
+
+			filesMap = filesMap || LoaderUtils.createFilesMap( files );
+
+			const manager = new THREE.LoadingManager();
+			manager.setURLModifier( function ( url ) {
+
+				url = url.replace( /^(\.?\/)/, '' ); // remove './'
+
+				const file = filesMap[ url ];
+
+				if ( file ) {
+
+					console.log( 'Loading', url );
+
+					return URL.createObjectURL( file );
+
+				}
+
+				return url;
+
+			} );
+
+			manager.addHandler( /\.tga$/i, new TGALoader() );
+
+			for ( let i = 0; i < files.length; i ++ ) {
+
+				scope.loadFile( files[ i ], manager );
+
+			}
+
+		}
+
+	};
+
+	this.loadFile = function ( file, manager ) {
+
+		const filename = file.name;
+		const extension = filename.split( '.' ).pop().toLowerCase();
+
+		const reader = new FileReader();
+		reader.addEventListener( 'progress', function ( event ) {
+
+			const size = '(' + editor.utils.formatNumber( Math.floor( event.total / 1000 ) ) + ' KB)';
+			const progress = Math.floor( ( event.loaded / event.total ) * 100 ) + '%';
+
+			console.log( 'Loading', filename, size, progress );
+
+		} );
+
+		switch ( extension ) {
+
+			case '3dm':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { Rhino3dmLoader } = await import( 'three/addons/loaders/3DMLoader.js' );
+
+					const loader = new Rhino3dmLoader();
+					loader.setLibraryPath( '../examples/jsm/libs/rhino3dm/' );
+					loader.parse( contents, function ( object ) {
+
+						object.name = filename;
+
+						editor.execute( new AddObjectCommand( editor, object ) );
+
+					}, function ( error ) {
+
+						console.error( error );
+
+					} );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case '3ds':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const { TDSLoader } = await import( 'three/addons/loaders/TDSLoader.js' );
+
+					const loader = new TDSLoader();
+					const object = loader.parse( event.target.result );
+
+					editor.execute( new AddObjectCommand( editor, object ) );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case '3mf':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const { ThreeMFLoader } = await import( 'three/addons/loaders/3MFLoader.js' );
+
+					const loader = new ThreeMFLoader();
+					const object = loader.parse( event.target.result );
+
+					editor.execute( new AddObjectCommand( editor, object ) );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case 'amf':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const { AMFLoader } = await import( 'three/addons/loaders/AMFLoader.js' );
+
+					const loader = new AMFLoader();
+					const amfobject = loader.parse( event.target.result );
+
+					editor.execute( new AddObjectCommand( editor, amfobject ) );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case 'dae':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { ColladaLoader } = await import( 'three/addons/loaders/ColladaLoader.js' );
+
+					const loader = new ColladaLoader( manager );
+					const collada = loader.parse( contents );
+
+					collada.scene.name = filename;
+
+					editor.execute( new AddObjectCommand( editor, collada.scene ) );
+
+				}, false );
+				reader.readAsText( file );
+
+				break;
+
+			}
+
+			case 'drc':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
+
+					const loader = new DRACOLoader();
+					loader.setDecoderPath( '../examples/jsm/libs/draco/' );
+					loader.parse( contents, function ( geometry ) {
+
+						let object;
+
+						if ( geometry.index !== null ) {
+
+							const material = new THREE.MeshStandardMaterial();
+
+							object = new THREE.Mesh( geometry, material );
+							object.name = filename;
+
+						} else {
+
+							const material = new THREE.PointsMaterial( { size: 0.01 } );
+							material.vertexColors = geometry.hasAttribute( 'color' );
+
+							object = new THREE.Points( geometry, material );
+							object.name = filename;
+
+						}
+
+						loader.dispose();
+						editor.execute( new AddObjectCommand( editor, object ) );
+
+					} );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case 'fbx':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { FBXLoader } = await import( 'three/addons/loaders/FBXLoader.js' );
+
+					const loader = new FBXLoader( manager );
+					const object = loader.parse( contents );
+
+					editor.execute( new AddObjectCommand( editor, object ) );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case 'glb':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const loader = await createGLTFLoader();
+
+					loader.parse( contents, '', function ( result ) {
+
+						const scene = result.scene;
+						scene.name = filename;
+
+						scene.animations.push( ...result.animations );
+						editor.execute( new AddObjectCommand( editor, scene ) );
+
+						loader.dracoLoader.dispose();
+						loader.ktx2Loader.dispose();
+
+					} );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case 'gltf':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const loader = await createGLTFLoader( manager );
+
+					loader.parse( contents, '', function ( result ) {
+
+						const scene = result.scene;
+						scene.name = filename;
+
+						scene.animations.push( ...result.animations );
+						editor.execute( new AddObjectCommand( editor, scene ) );
+
+						loader.dracoLoader.dispose();
+						loader.ktx2Loader.dispose();
+
+					} );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case 'js':
+			case 'json':
+
+			{
+
+				reader.addEventListener( 'load', function ( event ) {
+
+					const contents = event.target.result;
+
+					// 2.0
+
+					if ( contents.indexOf( 'postMessage' ) !== - 1 ) {
+
+						const blob = new Blob( [ contents ], { type: 'text/javascript' } );
+						const url = URL.createObjectURL( blob );
+
+						const worker = new Worker( url );
+
+						worker.onmessage = function ( event ) {
+
+							event.data.metadata = { version: 2 };
+							handleJSON( event.data );
+
+						};
+
+						worker.postMessage( Date.now() );
+
+						return;
+
+					}
+
+					// >= 3.0
+
+					let data;
+
+					try {
+
+						data = JSON.parse( contents );
+
+					} catch ( error ) {
+
+						alert( error );
+						return;
+
+					}
+
+					handleJSON( data );
+
+				}, false );
+				reader.readAsText( file );
+
+				break;
+
+			}
+
+			case 'kmz':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const { KMZLoader } = await import( 'three/addons/loaders/KMZLoader.js' );
+
+					const loader = new KMZLoader();
+					const collada = loader.parse( event.target.result );
+
+					collada.scene.name = filename;
+
+					editor.execute( new AddObjectCommand( editor, collada.scene ) );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case 'ldr':
+			case 'mpd':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const { LDrawLoader } = await import( 'three/addons/loaders/LDrawLoader.js' );
+
+					const loader = new LDrawLoader();
+					loader.setPath( '../../examples/models/ldraw/officialLibrary/' );
+					loader.parse( event.target.result, function ( group ) {
+
+						group.name = filename;
+						// Convert from LDraw coordinates: rotate 180 degrees around OX
+						group.rotation.x = Math.PI;
+
+						editor.execute( new AddObjectCommand( editor, group ) );
+
+					} );
+
+				}, false );
+				reader.readAsText( file );
+
+				break;
+
+			}
+
+			case 'md2':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { MD2Loader } = await import( 'three/addons/loaders/MD2Loader.js' );
+
+					const geometry = new MD2Loader().parse( contents );
+					const material = new THREE.MeshStandardMaterial();
+
+					const mesh = new THREE.Mesh( geometry, material );
+					mesh.mixer = new THREE.AnimationMixer( mesh );
+					mesh.name = filename;
+
+					mesh.animations.push( ...geometry.animations );
+					editor.execute( new AddObjectCommand( editor, mesh ) );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case 'obj':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { OBJLoader } = await import( 'three/addons/loaders/OBJLoader.js' );
+
+					const object = new OBJLoader().parse( contents );
+					object.name = filename;
+
+					editor.execute( new AddObjectCommand( editor, object ) );
+
+				}, false );
+				reader.readAsText( file );
+
+				break;
+
+			}
+
+			case 'pcd':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { PCDLoader } = await import( 'three/addons/loaders/PCDLoader.js' );
+
+					const points = new PCDLoader().parse( contents );
+					points.name = filename;
+
+					editor.execute( new AddObjectCommand( editor, points ) );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case 'ply':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { PLYLoader } = await import( 'three/addons/loaders/PLYLoader.js' );
+
+					const geometry = new PLYLoader().parse( contents );
+					let object;
+
+					if ( geometry.index !== null ) {
+
+						const material = new THREE.MeshStandardMaterial();
+
+						object = new THREE.Mesh( geometry, material );
+						object.name = filename;
+
+					} else {
+
+						const material = new THREE.PointsMaterial( { size: 0.01 } );
+						material.vertexColors = geometry.hasAttribute( 'color' );
+
+						object = new THREE.Points( geometry, material );
+						object.name = filename;
+
+					}
+
+					editor.execute( new AddObjectCommand( editor, object ) );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case 'stl':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { STLLoader } = await import( 'three/addons/loaders/STLLoader.js' );
+
+					const geometry = new STLLoader().parse( contents );
+					const material = new THREE.MeshStandardMaterial();
+
+					const mesh = new THREE.Mesh( geometry, material );
+					mesh.name = filename;
+
+					editor.execute( new AddObjectCommand( editor, mesh ) );
+
+				}, false );
+
+				if ( reader.readAsBinaryString !== undefined ) {
+
+					reader.readAsBinaryString( file );
+
+				} else {
+
+					reader.readAsArrayBuffer( file );
+
+				}
+
+				break;
+
+			}
+
+			case 'svg':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { SVGLoader } = await import( 'three/addons/loaders/SVGLoader.js' );
+
+					const loader = new SVGLoader();
+					const paths = loader.parse( contents ).paths;
+
+					//
+
+					const group = new THREE.Group();
+					group.name = filename;
+					group.scale.multiplyScalar( 0.1 );
+					group.scale.y *= - 1;
+
+					for ( let i = 0; i < paths.length; i ++ ) {
+
+						const path = paths[ i ];
+
+						const material = new THREE.MeshBasicMaterial( {
+							color: path.color,
+							depthWrite: false
+						} );
+
+						const shapes = SVGLoader.createShapes( path );
+
+						for ( let j = 0; j < shapes.length; j ++ ) {
+
+							const shape = shapes[ j ];
+
+							const geometry = new THREE.ShapeGeometry( shape );
+							const mesh = new THREE.Mesh( geometry, material );
+
+							group.add( mesh );
+
+						}
+
+					}
+
+					editor.execute( new AddObjectCommand( editor, group ) );
+
+				}, false );
+				reader.readAsText( file );
+
+				break;
+
+			}
+
+			case 'usdz':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { USDZLoader } = await import( 'three/addons/loaders/USDZLoader.js' );
+
+					const group = new USDZLoader().parse( contents );
+					group.name = filename;
+
+					editor.execute( new AddObjectCommand( editor, group ) );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case 'vox':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { VOXLoader, VOXMesh } = await import( 'three/addons/loaders/VOXLoader.js' );
+
+					const chunks = new VOXLoader().parse( contents );
+
+					const group = new THREE.Group();
+					group.name = filename;
+
+					for ( let i = 0; i < chunks.length; i ++ ) {
+
+						const chunk = chunks[ i ];
+
+						const mesh = new VOXMesh( chunk );
+						group.add( mesh );
+
+					}
+
+					editor.execute( new AddObjectCommand( editor, group ) );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case 'vtk':
+			case 'vtp':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { VTKLoader } = await import( 'three/addons/loaders/VTKLoader.js' );
+
+					const geometry = new VTKLoader().parse( contents );
+					const material = new THREE.MeshStandardMaterial();
+
+					const mesh = new THREE.Mesh( geometry, material );
+					mesh.name = filename;
+
+					editor.execute( new AddObjectCommand( editor, mesh ) );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			case 'wrl':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { VRMLLoader } = await import( 'three/addons/loaders/VRMLLoader.js' );
+
+					const result = new VRMLLoader().parse( contents );
+
+					editor.execute( new AddObjectCommand( editor, result ) );
+
+				}, false );
+				reader.readAsText( file );
+
+				break;
+
+			}
+
+			case 'xyz':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { XYZLoader } = await import( 'three/addons/loaders/XYZLoader.js' );
+
+					const geometry = new XYZLoader().parse( contents );
+
+					const material = new THREE.PointsMaterial();
+					material.vertexColors = geometry.hasAttribute( 'color' );
+
+					const points = new THREE.Points( geometry, material );
+					points.name = filename;
+
+					editor.execute( new AddObjectCommand( editor, points ) );
+
+				}, false );
+				reader.readAsText( file );
+
+				break;
+
+			}
+
+			case 'zip':
+
+			{
+
+				reader.addEventListener( 'load', function ( event ) {
+
+					handleZIP( event.target.result );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
+			default:
+
+				console.error( 'Unsupported file format (' + extension + ').' );
+
+				break;
+
+		}
+
+	};
+
+	function handleJSON( data ) {
+
+		if ( data.metadata === undefined ) { // 2.0
+
+			data.metadata = { type: 'Geometry' };
+
+		}
+
+		if ( data.metadata.type === undefined ) { // 3.0
+
+			data.metadata.type = 'Geometry';
+
+		}
+
+		if ( data.metadata.formatVersion !== undefined ) {
+
+			data.metadata.version = data.metadata.formatVersion;
+
+		}
+
+		switch ( data.metadata.type.toLowerCase() ) {
+
+			case 'buffergeometry':
+
+			{
+
+				const loader = new THREE.BufferGeometryLoader();
+				const result = loader.parse( data );
+
+				const mesh = new THREE.Mesh( result );
+
+				editor.execute( new AddObjectCommand( editor, mesh ) );
+
+				break;
+
+			}
+
+			case 'geometry':
+
+				console.error( 'Loader: "Geometry" is no longer supported.' );
+
+				break;
+
+			case 'object':
+
+			{
+
+				const loader = new THREE.ObjectLoader();
+				loader.setResourcePath( scope.texturePath );
+
+				loader.parse( data, function ( result ) {
+
+					editor.execute( new AddObjectCommand( editor, result ) );
+
+				} );
+
+				break;
+
+			}
+
+			case 'app':
+
+				editor.fromJSON( data );
+
+				break;
+
+		}
+
+	}
+
+	async function handleZIP( contents ) {
+
+		const zip = unzipSync( new Uint8Array( contents ) );
+
+		const manager = new THREE.LoadingManager();
+		manager.setURLModifier( function ( url ) {
+
+			const file = zip[ url ];
+
+			if ( file ) {
+
+				console.log( 'Loading', url );
+
+				const blob = new Blob( [ file.buffer ], { type: 'application/octet-stream' } );
+				return URL.createObjectURL( blob );
+
+			}
+
+			return url;
+
+		} );
+
+		// Poly
+
+		if ( zip[ 'model.obj' ] && zip[ 'materials.mtl' ] ) {
+
+			const { MTLLoader } = await import( 'three/addons/loaders/MTLLoader.js' );
+			const { OBJLoader } = await import( 'three/addons/loaders/OBJLoader.js' );
+
+			const materials = new MTLLoader( manager ).parse( strFromU8( zip[ 'materials.mtl' ] ) );
+			const object = new OBJLoader().setMaterials( materials ).parse( strFromU8( zip[ 'model.obj' ] ) );
+
+			editor.execute( new AddObjectCommand( editor, object ) );
+			return;
+
+		}
+
+		//
+
+		for ( const path in zip ) {
+
+			const file = zip[ path ];
+
+			const extension = path.split( '.' ).pop().toLowerCase();
+
+			switch ( extension ) {
+
+				case 'fbx':
+
+				{
+
+					const { FBXLoader } = await import( 'three/addons/loaders/FBXLoader.js' );
+
+					const loader = new FBXLoader( manager );
+					const object = loader.parse( file.buffer );
+
+					editor.execute( new AddObjectCommand( editor, object ) );
+
+					break;
+
+				}
+
+				case 'glb':
+
+				{
+
+					const loader = await createGLTFLoader();
+
+					loader.parse( file.buffer, '', function ( result ) {
+
+						const scene = result.scene;
+
+						scene.animations.push( ...result.animations );
+						editor.execute( new AddObjectCommand( editor, scene ) );
+
+						loader.dracoLoader.dispose();
+						loader.ktx2Loader.dispose();
+
+					} );
+
+					break;
+
+				}
+
+				case 'gltf':
+
+				{
+
+					const loader = await createGLTFLoader( manager );
+
+					loader.parse( strFromU8( file ), '', function ( result ) {
+
+						const scene = result.scene;
+
+						scene.animations.push( ...result.animations );
+						editor.execute( new AddObjectCommand( editor, scene ) );
+
+						loader.dracoLoader.dispose();
+						loader.ktx2Loader.dispose();
+
+					} );
+
+					break;
+
+				}
+
+			}
+
+		}
+
+	}
+
+	async function createGLTFLoader( manager ) {
+
+		const { GLTFLoader } = await import( 'three/addons/loaders/GLTFLoader.js' );
+		const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
+		const { KTX2Loader } = await import( 'three/addons/loaders/KTX2Loader.js' );
+		const { MeshoptDecoder } = await import( 'three/addons/libs/meshopt_decoder.module.js' );
+
+		const dracoLoader = new DRACOLoader();
+		dracoLoader.setDecoderPath( '../examples/jsm/libs/draco/gltf/' );
+
+		const ktx2Loader = new KTX2Loader( manager );
+		ktx2Loader.setTranscoderPath( '../examples/jsm/libs/basis/' );
+
+		editor.signals.rendererDetectKTX2Support.dispatch( ktx2Loader );
+
+		const loader = new GLTFLoader( manager );
+		loader.setDRACOLoader( dracoLoader );
+		loader.setKTX2Loader( ktx2Loader );
+		loader.setMeshoptDecoder( MeshoptDecoder );
+
+		return loader;
+
+	}
+
+}
+
+export { Loader };
\ No newline at end of file

+const LoaderUtils = {
+
+	createFilesMap: function ( files ) {
+
+		const map = {};
+
+		for ( let i = 0; i < files.length; i ++ ) {
+
+			const file = files[ i ];
+			map[ file.name ] = file;
+
+		}
+
+		return map;
+
+	},
+
+	getFilesFromItemList: function ( items, onDone ) {
+
+		// TOFIX: setURLModifier() breaks when the file being loaded is not in root
+
+		let itemsCount = 0;
+		let itemsTotal = 0;
+
+		const files = [];
+		const filesMap = {};
+
+		function onEntryHandled() {
+
+			itemsCount ++;
+
+			if ( itemsCount === itemsTotal ) {
+
+				onDone( files, filesMap );
+
+			}
+
+		}
+
+		function handleEntry( entry ) {
+
+			if ( entry.isDirectory ) {
+
+				const reader = entry.createReader();
+				reader.readEntries( function ( entries ) {
+
+					for ( let i = 0; i < entries.length; i ++ ) {
+
+						handleEntry( entries[ i ] );
+
+					}
+
+					onEntryHandled();
+
+				} );
+
+			} else if ( entry.isFile ) {
+
+				entry.file( function ( file ) {
+
+					files.push( file );
+
+					filesMap[ entry.fullPath.slice( 1 ) ] = file;
+					onEntryHandled();
+
+				} );
+
+			}
+
+			itemsTotal ++;
+
+		}
+
+		for ( let i = 0; i < items.length; i ++ ) {
+
+			const item = items[ i ];
+
+			if ( item.kind === 'file' ) {
+
+				handleEntry( item.webkitGetAsEntry() );
+
+			}
+
+		}
+
+	}
+
+};
+
+export { LoaderUtils };