working black background

Author: lukesorvik

main.js

@@ -1,7 +1,6 @@
 import './style.css' //import the css file
 import * as THREE from 'three'; //import the three.js library
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; //import the orbit controls from three.js
-import imgUrl from './space.jpg' //have to import the path for the image, since once we build it will be a different url
 
 
 const scene = new THREE.Scene(); //create a scene
@@ -12,33 +11,6 @@ const renderer = new THREE.WebGLRenderer({
   canvas: document.querySelector('#bg'),
 });
 
-renderer.setSize(window.innerWidth, window.innerHeight); // set the size of the renderer to the window size
-renderer.setSize( window.innerWidth, window.innerHeight ); //set the size of the renderer to the window size
-renderer.setPixelRatio(window.devicePixelRatio); //set pixel ratio to device pixel ratio
-document.body.appendChild( renderer.domElement ) //append the renderer's DOM element to the body
-
-camera.position.z = 10; //set the camera's z position to 5
-camera.position.x = 0; //set the camera's z position to 5
-
-
-
-
-//create an ambient light
-const ambientLight = new THREE.AmbientLight(0xffffff, 10); //ambient light, with color white and intensity 0.5
-scene.add(ambientLight);
-
-/*
-//create a directional light helper shows where the light is in the scene
-const lighthelper = new THREE.DirectionalLightHelper(light, 1); //create a directional light helper
-scene.add(lighthelper); //add the light helper to the scene
-
-//create a grid helper, to show the grid in the scene
-const gridHelper = new THREE.GridHelper(200, 50); //create a grid helper
-scene.add(gridHelper); //add the grid helper to the scene
-*/
-//create an orbit controls, allows us to move around the scene
-const controls = new OrbitControls(camera, renderer.domElement); //create orbit controls with camera and renderer's DOM element
-
 
 function addStar() {
   const geometry = new THREE.OctahedronGeometry(Math.random() * 0.5 + 0.1, 0); //create a sphere geometry with random size
@@ -51,57 +23,67 @@ function addStar() {
   scene.add(star); //add the star to the scene
 }
 
-Array(500).fill().forEach(addStar); //create array of 200, call to create 200 stars in the scene
-
-//create a background texture
-var bgTexture = new THREE.TextureLoader().load(imgUrl);
-bgTexture.minFilter = THREE.LinearFilter;
-scene.background = bgTexture;
-
-function moveCamera() {
-  const t = document.body.getBoundingClientRect().top;
-
-  camera.position.z = t * -0.01;
-
-}
-
-document.body.onscroll = moveCamera;
-moveCamera();
-
-window.addEventListener( 'resize', onWindowResize, false );
 
 function onWindowResize(){
 
-    camera.aspect = window.innerWidth / window.innerHeight;
-    camera.updateProjectionMatrix();
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
 
-    renderer.setSize( window.innerWidth, window.innerHeight );
+  renderer.setSize( window.innerWidth, window.innerHeight );
 
 }
 
 function animateStars() {
-  scene.traverse((object) => {
-    if (object.isMesh ) {
-      object.rotation.y += 0.01; // rotate the star around the y-axis
-      object.rotation.x += 0.02; // rotate the star around the y-axis
-      /*
-      object.position.y += Math.random() * 0.01 - 0.005; // float the star in a random direction
-      object.position.x += Math.random() * 0.01 - 0.005; // float the star in a random direction
-      object.position.z += Math.random() * 0.01 - 0.005; // float the star in a random direction
-      */
-    }
-  });
+scene.traverse((object) => {
+  if (object.isMesh ) {
+    object.rotation.y += 0.01; // rotate the star around the y-axis
+    object.rotation.x += 0.02; // rotate the star around the y-axis
+  }
+});
 }
 
+function moveCamera() {
+  const t = document.body.getBoundingClientRect().top;
+
+  camera.position.z = t * -0.01;
 
+}
 //we want to set up a recursive function to set up infinite loop to animate automatically
 function animate() {
   requestAnimationFrame(animate);
   animateStars(); // call the animateStars function to animate the stars
   renderer.render(scene, camera);
-}
+  }
+
+
+  
+function main() {
 
+  renderer.setSize(window.innerWidth, window.innerHeight); // set the size of the renderer to the window size
+  renderer.setSize( window.innerWidth, window.innerHeight ); //set the size of the renderer to the window size
+  renderer.setPixelRatio(window.devicePixelRatio); //set pixel ratio to device pixel ratio
+  document.body.appendChild( renderer.domElement ) //append the renderer's DOM element to the body
+  
+  camera.position.z = 10; //set the camera's z position to 5
+  camera.position.x = 0; //set the camera's z position to 5
+  
+  //create an ambient light
+  const ambientLight = new THREE.AmbientLight(0xffffff, 10); //ambient light, with color white and intensity 0.5
+  scene.add(ambientLight);
 
+  //create an orbit controls, allows us to move around the scene
+  const controls = new OrbitControls(camera, renderer.domElement); //create orbit controls with camera and renderer's DOM element
 
+  Array(500).fill().forEach(addStar); //create array of 200, call to create 200 stars in the scene
+  
+  scene.background = new THREE.Color(0x000000); // Set background to solid black
+
+  document.body.onscroll = moveCamera;
+  moveCamera();
+  
+  window.addEventListener( 'resize', onWindowResize, false );
+
+  animate(); //call the animate function
+}
 
-animate(); //call the animate function
+main(); //call the main function