Small updates

src/App.jsx

@@ -27,16 +27,12 @@ const App = () => {
         ]}
       >
         <Canvas
-          shadows
           camera={{
             fov: 75,
             near: 0.1,
             far: 1000,
             position: [-4, 2, -4],
           }}
-          onCreated={({ gl }) => {
-            gl.setClearColor(0x131313, 0);
-          }}
         >
           <Perf position='top-left' />
           <World />

src/World/Audio/components/AudioSphere.jsx

@@ -10,7 +10,6 @@ Globals.assign({ frameLoop: 'always' });
 const AudioSphere = ({ audio, info, analyser }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [gain, setGain] = useState(0);
-  const [matColor, setMatColor] = useState(['#000000']);
   const [isMuted, setIsMuted] = useState(false);
 
   const { hovered } = useInterface();

src/World/Environment/components/Lights.jsx

@@ -5,7 +5,6 @@ const Lights = () => {
   return (
     <>
       <DREI.Environment preset='city' />
-      {/* <ambientLight intensity={0.5} /> */}
     </>
   );
 };

src/World/Environment/components/Structure.jsx

@@ -11,6 +11,8 @@ const material = new THREE.MeshStandardMaterial({
   color: 0x131313,
   transparent: true,
   opacity: 0.3,
+  // roughness: 0.5,
+  // metalness: 0.5,
 });
 
 const Structure = () => {

src/defaults.config.js

@@ -8,17 +8,17 @@ const defaults = {
     minScaleMultiplier: 0.5,
     maxScaleMultiplier: 5,
     // Gravity
-    gravity: [0, -9.8, 0],
+    gravity: [0, -5, 0], // Earth: [0, -9.81, 0]
     // Colors
     colors: {
-      a1: '#FEC8D8',
-      a2: '#FFE6EA',
-      b1: '#C5B0D5',
-      b2: '#E4D6EC',
-      c1: '#AED6F1',
-      c2: '#D9EAF6',
-      d1: '#A9DFBF',
-      d2: '#DDEFD9',
+      a1: '#FFD1E1',
+      a2: '#FF9BAA',
+      b1: '#D3B3FF',
+      b2: '#A066D3',
+      c1: '#B3E6FF',
+      c2: '#0099FF',
+      d1: '#B3FFCC',
+      d2: '#00CC99',
     },
   },
 };