[+] Toggle sky button

src/animation/Home.ts

@@ -8,6 +8,7 @@ import Cursor from "@/animation/components/Cursor";
 import IUpdatable from "@/animation/components/IUpdatable";
 import Grid from "@/animation/components/Grid";
 import Editor from "@/animation/components/Editor";
+import {Color} from "three";
 
 export let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera
 export let editor: Editor
@@ -105,6 +106,7 @@ function update(dt: number): void
 export function start(id: string): void
 {
     scene = new THREE.Scene()
+    scene.background = new Color('#f9f2e0')
     // Create camera
     camera = new THREE.PerspectiveCamera(config.cam.fov, window.innerWidth / window.innerHeight,
         config.cam.near, config.cam.far)

src/views/NewHome.vue

@@ -24,9 +24,7 @@
 
             <div class="separator"/>
 
-            <div>
-                Light
-            </div>
+            <div @click="_ => toggle('sky')">Sky</div>
         </div>
         <MyColorPicker v-if="pickerColor" :color="pickerColor" style="z-index: 3"
                        @close="pickerColor = ''" :initial-pos="initialPos"
@@ -36,7 +34,7 @@
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
-import {editor, start} from "@/animation/Home";
+import {editor, objects, start} from "@/animation/Home";
 import {config} from "@/animation/Config";
 import {KeyHandler, range} from "@/utils";
 import MyColorPicker from "@/views/color/ColorPicker.vue";
@@ -68,6 +66,16 @@ export default class NewHome extends KeyHandler
         }
     }
 
+    toggle(s: string): void
+    {
+        if (s == 'sky')
+        {
+            objects.hemiLight.visible = !objects.hemiLight.visible
+            objects.dirLight.visible = !objects.dirLight.visible
+            objects.sky.visible = !objects.sky.visible
+        }
+    }
+
     openPicker(e: MouseEvent, c: string): void
     {
         this.pickerColor = c