Background color scene

plugins/default/scene/data/SceneSettingsResource.ts

@@ -3,6 +3,7 @@ interface SceneSettingsResourcePub {
 
   defaultCameraMode: string;
   defaultVerticalAxis: string;
+  defaultBackgroundColor: string;
   [key: string]: any;
 }
 
@@ -13,7 +14,8 @@ export default class SceneSettingsResource extends SupCore.Data.Base.Resource {
     formatVersion: { type: "integer" },
 
     defaultCameraMode: { type: "enum", items: [ "3D", "2D" ], mutable: true },
-    defaultVerticalAxis: { type: "enum", items: [ "Y", "Z" ], mutable: true }
+    defaultVerticalAxis: { type: "enum", items: [ "Y", "Z" ], mutable: true },
+    defaultBackgroundColor: { type: "string", mutable: true }
   };
 
   pub: SceneSettingsResourcePub;
@@ -27,7 +29,8 @@ export default class SceneSettingsResource extends SupCore.Data.Base.Resource {
       formatVersion: SceneSettingsResource.currentFormatVersion,
 
       defaultCameraMode: "3D",
-      defaultVerticalAxis: "Y"
+      defaultVerticalAxis: "Y",
+      defaultBackgroundColor: "#000000"
     };
 
     super.init(callback);

plugins/default/scene/editors/scene/network.ts

@@ -3,7 +3,7 @@ import ui, {
   setCameraMode, setCameraVerticalAxis, createNodeElement, setupSelectedNode, createComponentElement,
   setInspectorPosition, setInspectorOrientation, setInspectorScale,
   setInspectorVisible, setInspectorLayer, setInspectorPrefabScene,
-  setupInspectorLayers } from "./ui";
+  setupInspectorLayers, setBackgroundColor } from "./ui";
 import engine, { start as engineStart, setupHelpers } from "./engine";
 import * as async from "async";
 
@@ -89,6 +89,7 @@ function startIfReady() {
 
     setCameraMode(data.sceneSettingsResource.pub.defaultCameraMode);
     setCameraVerticalAxis(data.sceneSettingsResource.pub.defaultVerticalAxis);
+    setBackgroundColor(data.sceneSettingsResource.pub.defaultBackgroundColor);
     setupInspectorLayers();
   }
 }

plugins/default/scene/editors/scene/ui.ts

@@ -747,6 +747,10 @@ function onChangeCameraVerticalAxis(event: any) {
   setCameraVerticalAxis(ui.cameraVerticalAxis === "Y" ? "Z" : "Y");
 }
 
+export function setBackgroundColor(color: string) {
+  engine.gameInstance.threeRenderer.setClearColor(color);
+}
+
 function onChangeCameraSpeed() {
   engine.cameraControls.movementSpeed = ui.cameraSpeedSlider.value;
 }

plugins/default/scene/public/locales/en/settingsEditors.json

@@ -2,6 +2,7 @@
   "Scene": {
     "label": "Scene",
     "defaultCameraMode": "Default camera mode",
-    "defaultCameraVerticalAxis": "Default camera vertical axis"
+    "defaultCameraVerticalAxis": "Default camera vertical axis",
+    "defaultBackgroundColor": "Default background color"
   }
 }

plugins/default/scene/settingsEditors/SceneSettingsEditor.ts

@@ -26,6 +26,13 @@ export default class SceneSettingsEditor {
       this.projectClient.editResource("sceneSettings", "setProperty", "defaultVerticalAxis", event.target.value);
     });
 
+    let defaultBackgroundColorRow = SupClient.table.appendRow(tbody, SupClient.i18n.t("settingsEditors:Scene.defaultBackgroundColor"));
+    this.fields["defaultBackgroundColor"] = SupClient.table.appendColorField(defaultBackgroundColorRow.valueCell, "0x000000").pickerField;
+
+    this.fields["defaultBackgroundColor"].addEventListener("change", (event: any) => {
+      this.projectClient.editResource("sceneSettings", "setProperty", "defaultBackgroundColor", event.target.value);
+    });
+
     this.projectClient.subResource("sceneSettings", this);
   }