added background

main.js

@@ -11,8 +11,8 @@ const createWindow = () => {
 
 app.on('ready', () => {
     createWindow()
-})
+});
 
 app.on('window-all-closed', () => {
     app.quit()
-})
+});

view/controls.js

@@ -1,8 +1,10 @@
 import * as THREE from "three";
 
 let isMousePressed = false
+
 let sensetivityX = 0.5;
 let sensetivityY = 1.;
+let fixedAxisMovement = false;
 
 export class SpiralCamera {
     constructor(canvas, segmentHeight) {
@@ -33,7 +35,7 @@ export class SpiralCamera {
             if (isMousePressed) {
                 let horizontal = event.movementX;
                 let vertical = event.movementY;
-                Math.abs(horizontal) > Math.abs(vertical)? vertical = 0 : horizontal = 0;
+                if (fixedAxisMovement) Math.abs(horizontal) > Math.abs(vertical)? vertical = 0 : horizontal = 0;
                 this.updateCameraPosition(horizontal * sensetivityX, vertical * sensetivityY);
             }
         });

view/graphics.js

@@ -5,6 +5,7 @@ import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 
 
+
 const spiralMaterial = new THREE.ShaderMaterial( {
 
 	uniforms: {
@@ -71,6 +72,15 @@ let viewDistance = 5;
 //setting scene
 const scene = new THREE.Scene();
 
+const loader = new THREE.TextureLoader();
+const texture = loader.load(
+  'view/img/space.jpg',
+  () => {
+    texture.mapping = THREE.EquirectangularReflectionMapping;
+    texture.colorSpace = THREE.SRGBColorSpace;
+    scene.background = texture;
+  });
+
 //setting canvas
 var canvas = document.querySelector('#canvas');
 const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
@@ -121,6 +131,7 @@ addEventListener("changedViewYear", (e) => {
     viewingYear = newYear;
 });
 
+
 //main loop
 function animate() {
     if (resizeRendererToDisplaySize(renderer)) {