diff --git a/src/aframe-streetmix-parsers.js b/src/aframe-streetmix-parsers.js
index 68dcde30e..64fedba8c 100644
--- a/src/aframe-streetmix-parsers.js
+++ b/src/aframe-streetmix-parsers.js
@@ -83,12 +83,12 @@ function insertSeparatorSegments (segments) {
       // if adjacent to parking lane with markings, do not draw white line
       if (currentValue.type === 'parking-lane' || previousValue.type === 'parking-lane') { variantString = 'invisible'; }
 
-      newArray.push({ type: 'separator', variantString: variantString, width: 0 });
+      newArray.push({ type: 'separator', variantString: variantString, width: 0, elevation: currentValue.elevation });
     }
 
     // if a *lane segment and divider are adjacent, use a solid separator
     if ((isLaneIsh(currentValue.type) && previousValue.type === 'divider') || (isLaneIsh(previousValue.type) && currentValue.type === 'divider')) {
-      newArray.push({ type: 'separator', variantString: 'solid', width: 0 });
+      newArray.push({ type: 'separator', variantString: 'solid', width: 0, elevation: currentValue.elevation });
     }
 
     newArray.push(currentValue);
@@ -193,7 +193,7 @@ function getZPositions (start, end, step) {
   return arr.sort(() => 0.5 - Math.random());
 }
 
-function createSidewalkClonedVariants (segmentWidthInMeters, density, streetLength, direction = 'random', animated = false) {
+function createSidewalkClonedVariants (segmentWidthInMeters, density, elevationPosY = 0, streetLength, direction = 'random', animated = false) {
   const xValueRange = [-(0.37 * segmentWidthInMeters), (0.37 * segmentWidthInMeters)];
   const zValueRange = getZPositions((-0.5 * streetLength), (0.5 * streetLength), 1.5);
   const densityFactors = {
@@ -204,16 +204,16 @@ function createSidewalkClonedVariants (segmentWidthInMeters, density, streetLeng
   };
   const totalPedestrianNumber = parseInt(densityFactors[density] * streetLength, 10);
   const dividerParentEl = createParentElement('pedestrians-parent');
+  dividerParentEl.setAttribute('position', {y: elevationPosY});
   // Randomly generate avatars
   for (let i = 0; i < totalPedestrianNumber; i++) {
     const variantName = (animated === true) ? 'a_char' + String(getRandomIntInclusive(1, 8)) : 'char' + String(getRandomIntInclusive(1, 16));
     const xVal = getRandomArbitrary(xValueRange[0], xValueRange[1]);
     const zVal = zValueRange.pop();
-    const yVal = 0.2;
+    const yVal = 0;
     // y = 0.2 for sidewalk elevation
     const placedObjectEl = document.createElement('a-entity');
     let animationDirection = 'inbound';
-    placedObjectEl.setAttribute('position', `${xVal} ${yVal} ${zVal}`);
     placedObjectEl.setAttribute('mixin', variantName);
     // Roughly 50% of traffic will be incoming
     if (Math.random() < 0.5 && direction === 'random') {
@@ -374,11 +374,11 @@ function createDriveLaneElement (variantList, segmentWidthInMeters, streetLength
   } else {
     rotationY = rotationVariants[lineVariant];
   }
-
+/*
   if (carType === 'pedestrian') {
     return createSidewalkClonedVariants(segmentWidthInMeters, 'normal', streetLength, lineVariant, animated);
   }
-
+*/
   const driveLaneParentEl = document.createElement('a-entity');
 
   if (variantList.length == 1) {
@@ -503,20 +503,20 @@ function createMagicCarpetElement (showVehicles) {
   return magicCarpetParentEl;
 }
 
-function createOutdoorDining (length) {
+function createOutdoorDining (length, posY) {
   const outdoorDiningParentEl = document.createElement('a-entity');
 
   const reusableObjectEl = document.createElement('a-entity');
   reusableObjectEl.setAttribute('mixin', 'outdoor_dining');
   const outdorDiningLength = 2.27;
   const positionZ = randomPosition(reusableObjectEl, 'z', length, outdorDiningLength);
-  reusableObjectEl.setAttribute('position', '0 0 ' + positionZ);
+  reusableObjectEl.setAttribute('position', {y: posY, z: positionZ});
   outdoorDiningParentEl.append(reusableObjectEl);
 
   return outdoorDiningParentEl;
 }
 
-function createMicroMobilityElement (variantList, segmentType, length, showVehicles) {
+function createMicroMobilityElement (variantList, segmentType, posY = 0, length, showVehicles) {
   if (!showVehicles) {
     return;
   }
@@ -532,7 +532,7 @@ function createMicroMobilityElement (variantList, segmentType, length, showVehic
   }
   const bikeLength = 2.03;
   const positionZ = randomPosition(reusableObjectEl, 'z', length, bikeLength);
-  reusableObjectEl.setAttribute('position', '0 0 ' + positionZ);
+  reusableObjectEl.setAttribute('position', {y: posY, z: positionZ});
   microMobilityParentEl.append(reusableObjectEl);
 
   return microMobilityParentEl;
@@ -593,19 +593,20 @@ function createBenchesParentElement () {
   return placedObjectEl;
 }
 
-function createBikeRacksParentElement () {
+function createBikeRacksParentElement (posY) {
   const placedObjectEl = document.createElement('a-entity');
   placedObjectEl.setAttribute('class', 'bikerack-parent');
-  placedObjectEl.setAttribute('position', '0 0 -3.5');
+  placedObjectEl.setAttribute('position', {y: posY, z: -3.5});
   return placedObjectEl;
 }
 
-function createBikeShareStationElement (variantList) {
+function createBikeShareStationElement (variantList, posY) {
   const placedObjectEl = document.createElement('a-entity');
   placedObjectEl.setAttribute('class', 'bikeshare');
   placedObjectEl.setAttribute('mixin', 'bikeshare');
   const rotationCloneY = (variantList[0] === 'left') ? 90 : 270;
   placedObjectEl.setAttribute('rotation', '0 ' + rotationCloneY + ' 0');
+  placedObjectEl.setAttribute('position', {y: posY});
   return placedObjectEl;
 }
 
@@ -635,11 +636,12 @@ function createLampsParentElement () {
   return placedObjectEl;
 }
 
-function createBusStopElement (rotationBusStopY) {
+function createBusStopElement (rotationBusStopY, posY) {
   const placedObjectEl = document.createElement('a-entity');
   placedObjectEl.setAttribute('class', 'bus-stop');
   placedObjectEl.setAttribute('rotation', '0 ' + rotationBusStopY + ' 0');
   placedObjectEl.setAttribute('mixin', 'bus-stop');
+  placedObjectEl.setAttribute('position', {y: posY});
   return placedObjectEl;
 }
 
@@ -661,21 +663,22 @@ function createCenteredStreetElement (segments) {
 
 function createSegmentElement (segmentWidthInMeters, positionY, mixinId, length, repeatCount, elevation = 0) {
   var segmentEl = document.createElement('a-entity');
-
-  if (mixinId === 'sidewalk' || elevation === 1) {
-    segmentEl.setAttribute('geometry', 'primitive', 'box');
-    segmentEl.setAttribute('geometry', 'height: 0.4');
-    segmentEl.setAttribute('geometry', 'depth', length);
-    segmentEl.setAttribute('geometry', 'width', segmentWidthInMeters);
-  } else { // else if *lane or divider or temporary
-    positionY -= 0.1;
-    segmentEl.setAttribute('geometry', 'primitive', 'box');
-    segmentEl.setAttribute('geometry', 'height: 0.2');
-    segmentEl.setAttribute('geometry', 'depth', length);
-    segmentEl.setAttribute('geometry', 'width', segmentWidthInMeters);
+  let heightLevels = [0.2, 0.4, 0.6]
+  let height = heightLevels[elevation];
+  if (elevation === 0) {
+    positionY = -0.1;
+  } else if (elevation === 2) {
+    positionY = 0.1;
   }
 
-  segmentEl.setAttribute('position', '0 ' + positionY + ' 0');
+  segmentEl.setAttribute('geometry', 
+    `primitive: box; 
+    height: ${height}; 
+    depth: ${length};
+    width: ${segmentWidthInMeters};`
+  );
+  
+  segmentEl.setAttribute('position', {y: positionY});
   segmentEl.setAttribute('mixin', mixinId);
 
   if (repeatCount.length !== 0) {
@@ -737,6 +740,12 @@ function processSegments (segments, showStriping, length, globalAnimated, showVe
     // get variantString
     var variantList = segments[i].variantString.split('|');
 
+    // elevation property from streetmix segment
+    const elevation = segments[i].elevation;
+
+    elevationLevels = [0, 0.2, 0.4];
+    let elevationPosY = elevationLevels[elevation];
+
     // Note: segment 3d models are outbound by default
     // If segment variant inbound, rotate segment model by 180 degrees
     var rotationY = (variantList[0] === 'inbound' || variantList[1] === 'inbound') ? 180 : 0;
@@ -751,21 +760,21 @@ function processSegments (segments, showStriping, length, globalAnimated, showVe
     // look at segment type and variant(s) to determine specific cases
     if (segments[i].type === 'drive-lane' && variantList[1] === 'sharrow') {
       // make a parent entity for the stencils
-      const stencilsParentEl = createStencilsParentElement('0 0.015 0');
+      const stencilsParentEl = createStencilsParentElement({y: elevationPosY + 0.015});
       // clone a bunch of stencil entities (note: this is not draw call efficient)
       cloneMixinAsChildren({ objectMixinId: 'stencils sharrow', parentEl: stencilsParentEl, rotation: '-90 ' + rotationY + ' 0', step: 10, radius: clonedObjectRadius });
       // add this stencil stuff to the segment parent
       segmentParentEl.append(stencilsParentEl);
     } else if (segments[i].type === 'bike-lane' || segments[i].type === 'scooter') {
       // make a parent entity for the stencils
-      const stencilsParentEl = createStencilsParentElement('0 0.015 0');
+      const stencilsParentEl = createStencilsParentElement({y: elevationPosY + 0.015});
       // get the mixin id for a bike lane
       groundMixinId = getBikeLaneMixin(variantList[1]);
       // clone a bunch of stencil entities (note: this is not draw call efficient)
       cloneMixinAsChildren({ objectMixinId: 'stencils bike-arrow', parentEl: stencilsParentEl, rotation: '-90 ' + rotationY + ' 0', step: 20, radius: clonedObjectRadius });
       // add this stencil stuff to the segment parent
       segmentParentEl.append(stencilsParentEl);
-      segmentParentEl.append(createMicroMobilityElement(variantList, segments[i].type, length, showVehicles));
+      segmentParentEl.append(createMicroMobilityElement(variantList, segments[i].type, elevationPosY, length, showVehicles));
     } else if (segments[i].type === 'light-rail' || segments[i].type === 'streetcar') {
       // get the mixin id for a bus lane
       groundMixinId = getBusLaneMixin(variantList[1]);
@@ -796,13 +805,13 @@ function processSegments (segments, showStriping, length, globalAnimated, showVe
       var mixinString = 'stencils ' + markerMixinId;
 
       // make the parent for all the objects to be cloned
-      const stencilsParentEl = createStencilsParentElement('0 0.015 0');
+      const stencilsParentEl = createStencilsParentElement({y: elevationPosY + 0.015});
       cloneMixinAsChildren({ objectMixinId: mixinString, parentEl: stencilsParentEl, rotation: '-90 ' + rotationY + ' 0', step: 15, radius: clonedObjectRadius });
       // add this stencil stuff to the segment parent
       segmentParentEl.append(stencilsParentEl);
       if (variantList[1] === 'shared') {
         // add an additional marking to represent the opposite turn marking stencil (rotated 180º)
-        const stencilsParentEl = createStencilsParentElement('0 0.015 ' + (-3 * isOutbound));
+        const stencilsParentEl = createStencilsParentElement({y: elevationPosY + 0.015, z: -3 * isOutbound});
         cloneMixinAsChildren({ objectMixinId: mixinString, parentEl: stencilsParentEl, rotation: '-90 ' + (rotationY + 180) + ' 0', step: 15, radius: clonedObjectRadius });
         // add this stencil stuff to the segment parent
         segmentParentEl.append(stencilsParentEl);
@@ -863,17 +872,17 @@ function processSegments (segments, showStriping, length, globalAnimated, showVe
       // create parent for the bus lane stencils to rotate the phrase instead of the word
       let reusableObjectStencilsParentEl;
 
-      reusableObjectStencilsParentEl = createStencilsParentElement('0 0.015 0');
+      reusableObjectStencilsParentEl = createStencilsParentElement({y: elevationPosY + 0.015});
       cloneMixinAsChildren({ objectMixinId: 'stencils word-bus', parentEl: reusableObjectStencilsParentEl, rotation: '-90 ' + rotationY + ' 0', step: 50, radius: clonedObjectRadius });
       // add this stencil stuff to the segment parent
       segmentParentEl.append(reusableObjectStencilsParentEl);
 
-      reusableObjectStencilsParentEl = createStencilsParentElement('0 0.015 10');
+      reusableObjectStencilsParentEl = createStencilsParentElement({y: elevationPosY + 0.015, z: 10});
       cloneMixinAsChildren({ objectMixinId: 'stencils word-taxi', parentEl: reusableObjectStencilsParentEl, rotation: '-90 ' + rotationY + ' 0', step: 50, radius: clonedObjectRadius });
       // add this stencil stuff to the segment parent
       segmentParentEl.append(reusableObjectStencilsParentEl);
 
-      reusableObjectStencilsParentEl = createStencilsParentElement('0 0.015 20');
+      reusableObjectStencilsParentEl = createStencilsParentElement({y: elevationPosY + 0.015, z: 20});
       cloneMixinAsChildren({ objectMixinId: 'stencils word-only', parentEl: reusableObjectStencilsParentEl, rotation: '-90 ' + rotationY + ' 0', step: 50, radius: clonedObjectRadius });
       // add this stencil stuff to the segment parent
       segmentParentEl.append(reusableObjectStencilsParentEl);
@@ -889,19 +898,19 @@ function processSegments (segments, showStriping, length, globalAnimated, showVe
 
       let reusableObjectStencilsParentEl;
 
-      reusableObjectStencilsParentEl = createStencilsParentElement('0 0.015 5');
+      reusableObjectStencilsParentEl = createStencilsParentElement({y: elevationPosY + 0.015, z: 5});
       cloneMixinAsChildren({ objectMixinId: 'stencils word-loading-small', parentEl: reusableObjectStencilsParentEl, rotation: '-90 ' + rotationY + ' 0', step: 50, radius: clonedObjectRadius });
       // add this stencil stuff to the segment parent
       segmentParentEl.append(reusableObjectStencilsParentEl);
 
-      reusableObjectStencilsParentEl = createStencilsParentElement('0 0.015 -5');
+      reusableObjectStencilsParentEl = createStencilsParentElement({y: elevationPosY + 0.015, z: -5});
       cloneMixinAsChildren({ objectMixinId: 'stencils word-only-small', parentEl: reusableObjectStencilsParentEl, rotation: '-90 ' + rotationY + ' 0', step: 50, radius: clonedObjectRadius });
       // add this stencil stuff to the segment parent
       segmentParentEl.append(reusableObjectStencilsParentEl);
     } else if (segments[i].type === 'sidewalk' && variantList[0] !== 'empty') {
       // handles variantString with value sparse, normal, or dense sidewalk
       const isAnimated = (variantList[1] === 'animated') || globalAnimated;
-      segmentParentEl.append(createSidewalkClonedVariants(segmentWidthInMeters, variantList[0], length, 'random', isAnimated));
+      segmentParentEl.append(createSidewalkClonedVariants(segmentWidthInMeters, variantList[0], elevationPosY, length, 'random', isAnimated));
     } else if (segments[i].type === 'sidewalk-wayfinding') {
       segmentParentEl.append(createWayfindingElements());
     } else if (segments[i].type === 'sidewalk-bench') {
@@ -921,7 +930,7 @@ function processSegments (segments, showStriping, length, globalAnimated, showVe
       }
     } else if (segments[i].type === 'sidewalk-bike-rack') {
       // make the parent for all the bike racks
-      const bikeRacksParentEl = createBikeRacksParentElement();
+      const bikeRacksParentEl = createBikeRacksParentElement(elevationPosY);
 
       const rotationCloneY = (variantList[1] === 'sidewalk-parallel') ? 90 : 0;
       cloneMixinAsChildren({ objectMixinId: 'bikerack', parentEl: bikeRacksParentEl, rotation: '0 ' + rotationCloneY + ' 0', radius: clonedObjectRadius });
@@ -932,13 +941,13 @@ function processSegments (segments, showStriping, length, globalAnimated, showVe
       segmentParentEl.append(createMagicCarpetElement(showVehicles));
     } else if (segments[i].type === 'outdoor-dining') {
       groundMixinId = (variantList[1] === 'road') ? 'drive-lane' : 'sidewalk';
-      segmentParentEl.append(createOutdoorDining(length));
+      segmentParentEl.append(createOutdoorDining(length, elevationPosY));
     } else if (segments[i].type === 'parklet') {
       groundMixinId = 'drive-lane';
       segmentParentEl.append(createParkletElement(variantList));
     } else if (segments[i].type === 'bikeshare') {
       // make the parent for all the stations
-      segmentParentEl.append(createBikeShareStationElement(variantList));
+      segmentParentEl.append(createBikeShareStationElement(variantList, elevationPosY));
     } else if (segments[i].type === 'utilities') {
       var rotation = (variantList[0] === 'right') ? '0 180 0' : '0 0 0';
       const utilityPoleElems = createClonedVariants('utility_pole', clonedObjectRadius, 15, rotation);
@@ -980,33 +989,33 @@ function processSegments (segments, showStriping, length, globalAnimated, showVe
       segmentParentEl.append(lampsParentEl);
     } else if (segments[i].type === 'transit-shelter') {
       var rotationBusStopY = (variantList[0] === 'left') ? 90 : 270;
-      segmentParentEl.append(createBusStopElement(rotationBusStopY));
+      segmentParentEl.append(createBusStopElement(rotationBusStopY, elevationPosY));
     } else if (segments[i].type === 'brt-station') {
       segmentParentEl.append(createBrtStationElement());
     } else if (segments[i].type === 'separator' && variantList[0] === 'dashed') {
       groundMixinId = 'markings dashed-stripe';
-      positionY = positionY + 0.01; // make sure the lane marker is above the asphalt
+      positionY = elevationPosY + 0.01; // make sure the lane marker is above the asphalt
       // for all markings material property repeat = "1 25". So every 150/25=6 meters put a dash
       repeatCount[0] = 1;
       repeatCount[1] = parseInt(length / 6);
     } else if (segments[i].type === 'separator' && variantList[0] === 'solid') {
       groundMixinId = 'markings solid-stripe';
-      positionY = positionY + 0.01; // make sure the lane marker is above the asphalt
+      positionY = elevationPosY + 0.01; // make sure the lane marker is above the asphalt
     } else if (segments[i].type === 'separator' && variantList[0] === 'doubleyellow') {
       groundMixinId = 'markings solid-doubleyellow';
-      positionY = positionY + 0.01; // make sure the lane marker is above the asphalt
+      positionY = elevationPosY + 0.01; // make sure the lane marker is above the asphalt
     } else if (segments[i].type === 'separator' && variantList[0] === 'shortdashedyellow') {
       groundMixinId = 'markings yellow short-dashed-stripe';
-      positionY = positionY + 0.01; // make sure the lane marker is above the asphalt
+      positionY = elevationPosY + 0.01; // make sure the lane marker is above the asphalt
       // for short-dashed-stripe every 3 meters put a dash
       repeatCount[0] = 1;
       repeatCount[1] = parseInt(length / 3);
     } else if (segments[i].type === 'separator' && variantList[0] === 'soliddashedyellow') {
       groundMixinId = 'markings yellow solid-dashed';
-      positionY = positionY + 0.01; // make sure the lane marker is above the asphalt
+      positionY = elevationPosY + 0.01; // make sure the lane marker is above the asphalt
     } else if (segments[i].type === 'separator' && variantList[0] === 'soliddashedyellowinverted') {
       groundMixinId = 'markings yellow solid-dashed';
-      positionY = positionY + 0.01; // make sure the lane marker is above the asphalt
+      positionY = elevationPosY + 0.01; // make sure the lane marker is above the asphalt
       rotationY = '180';
       repeatCount[0] = 1;
       repeatCount[1] = parseInt(length / 6);
@@ -1051,10 +1060,10 @@ function processSegments (segments, showStriping, length, globalAnimated, showVe
 
       segmentParentEl.append(createDriveLaneElement([...variantList, 'car'], segmentWidthInMeters, length, false, showVehicles, carCount, carStep));
       if (variantList[1] === 'left') {
-        reusableObjectStencilsParentEl = createStencilsParentElement('0 0.015 0');
+        reusableObjectStencilsParentEl = createStencilsParentElement({y: elevationPosY + 0.015});
         cloneMixinAsChildren({ objectMixinId: parkingMixin, parentEl: reusableObjectStencilsParentEl, positionXYString: markingPosXY, rotation: '-90 ' + '90 ' + markingsRotZ, length: markingLength, step: carStep, radius: clonedStencilRadius });
       } else {
-        reusableObjectStencilsParentEl = createStencilsParentElement('0 0.015 0');
+        reusableObjectStencilsParentEl = createStencilsParentElement({y: elevationPosY + 0.015});
         cloneMixinAsChildren({ objectMixinId: parkingMixin, parentEl: reusableObjectStencilsParentEl, positionXYString: markingPosXY, rotation: '-90 ' + '90 ' + markingsRotZ, length: markingLength, step: carStep, radius: clonedStencilRadius });
       }
       // add the stencils to the segment parent
@@ -1068,9 +1077,6 @@ function processSegments (segments, showStriping, length, globalAnimated, showVe
       repeatCount[1] = parseInt(length / 2);
     }
 
-    // elevation property from streetmix segment
-    const elevation = segments[i].elevation;
-
     // add new object
     if (segments[i].type !== 'separator') {
       segmentParentEl.append(createSegmentElement(segmentWidthInMeters, positionY, groundMixinId, length, repeatCount, elevation));
diff --git a/src/index.js b/src/index.js
index d4e9cd0ce..db331b4e7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -379,7 +379,8 @@ AFRAME.registerComponent('intersection', {
 
 AFRAME.registerComponent('street-environment', {
   schema: {
-    preset: { type: 'string', default: 'day', oneOf: ['day', 'night', 'sunny-morning', 'cloudy-afternoon', 'sunny-afternoon', 'sunny-noon', 'foggy', 'cloudy'] }
+    preset: { type: 'string', default: 'day', oneOf: ['day', 'night', 'color', 'sunny-morning', 'cloudy-afternoon', 'sunny-afternoon', 'sunny-noon', 'foggy', 'cloudy'] },
+    backgroundColor: { type: 'color', default: '#FFF' }
   },
   setEnvOption: function () {
     const sky = this.sky;
@@ -390,12 +391,14 @@ AFRAME.registerComponent('street-environment', {
     if (this.data.preset === 'night') {
       light1.setAttribute('light', 'intensity', 0.5);
       light2.setAttribute('light', 'intensity', 0.15);
+      sky.setAttribute('visible', true);
       sky.setAttribute('color', '#444');
       sky.setAttribute('src', '#sky-night');
       sky.setAttribute('rotation', '0 0 0');
-    } else if (this.data.preset === 'day') { // day
+    } else if (this.data.preset === 'day') {
       // TODO: create a parent with children
       light1.setAttribute('light', 'intensity', 0.8);
+      sky.setAttribute('visible', true);
       sky.setAttribute('color', '#FFF');
       sky.setAttribute('src', '#sky');
       sky.setAttribute('rotation', '0 20 0');
@@ -405,12 +408,14 @@ AFRAME.registerComponent('street-environment', {
       light1.setAttribute('light', 'intensity', 0.8);
       light2.setAttribute('light', 'intensity: 2.2; castShadow: true; shadowCameraBottom: -20; shadowCameraLeft: -30; shadowCameraRight: 40; shadowCameraTop: 30; shadowMapHeight: 2048; shadowMapWidth: 2048');
       light2.setAttribute('position', '-60 56 -16');
+      sky.setAttribute('visible', true);
       sky.setAttribute('color', '#FFF');
       sky.setAttribute('src', `url(${assetsPathRoot}images/skies/2048-polyhaven-qwantani_puresky-sdr.jpeg)`);
       sky.setAttribute('rotation', '0 0 0');
     } else if (this.data.preset === 'cloudy-afternoon') {
       light1.setAttribute('light', 'intensity', 2);
       light2.setAttribute('light', 'intensity', 0.6);
+      sky.setAttribute('visible', true);
       sky.setAttribute('color', '#FFF');
       sky.setAttribute('src', `url(${assetsPathRoot}images/skies/2048-mud_road_puresky-sdr.jpeg)`);
       sky.setAttribute('rotation', '0 0 0');
@@ -418,6 +423,7 @@ AFRAME.registerComponent('street-environment', {
        light1.setAttribute('light', 'intensity', 2);
        light2.setAttribute('light', 'intensity: 2.2; castShadow: true; shadowCameraBottom: -20; shadowCameraLeft: -30; shadowCameraRight: 40; shadowCameraTop: 30; shadowMapHeight: 2048; shadowMapWidth: 2048');
        light2.setAttribute('position', '60 56 -16');
+       sky.setAttribute('visible', true);
        sky.setAttribute('color', '#FFF');
        sky.setAttribute('src', `url(${assetsPathRoot}images/skies/2048-kloofendal_43d_clear_puresky-sdr.jpeg)`);
        sky.setAttribute('rotation', '0 0 0');
@@ -425,26 +431,32 @@ AFRAME.registerComponent('street-environment', {
       light1.setAttribute('light', 'intensity', 2);
       light2.setAttribute('light', 'intensity: 2.2; castShadow: true; shadowCameraBottom: -20; shadowCameraLeft: -30; shadowCameraRight: 40; shadowCameraTop: 30; shadowMapHeight: 2048; shadowMapWidth: 2048');
       light2.setAttribute('position', '5 56 -16');
+      sky.setAttribute('visible', true);
       sky.setAttribute('color', '#FFF');
       sky.setAttribute('src', `url(${assetsPathRoot}images/skies/2048-kloppenheim_05_puresky-sdr.jpeg)`);
       sky.setAttribute('rotation', '0 0 0');
     } else if (this.data.preset === 'foggy') {
       light1.setAttribute('light', 'intensity', 2);
       light2.setAttribute('light', 'intensity: 0.6; castShadow: false;');
+      sky.setAttribute('visible', true);
       sky.setAttribute('color', '#FFF');
       sky.setAttribute('src', `url(${assetsPathRoot}images/skies/2048-kloofendal_misty_morning_puresky-sdr.jpeg)`);
       sky.setAttribute('rotation', '0 0 0');
     } else if (this.data.preset === 'cloudy') {
       light1.setAttribute('light', 'intensity', 2);
       light2.setAttribute('light', 'intensity', 0.6);
+      sky.setAttribute('visible', true);
       sky.setAttribute('color', '#FFF');
       sky.setAttribute('src', `url(${assetsPathRoot}images/skies/2048-kloofendal_48d_partly_cloudy_puresky-sdr.jpeg)`);
-      sky.setAttribute('rotation', '0 0 0');
+      sky.setAttribute('rotation', '0 0 0');      
+    } else { // color
+      sky.setAttribute('visible', false);
+      this.scene.setAttribute('background', 'color', this.data.backgroundColor);
     }
   },
   init: function () {
     const el = this.el;
-
+    this.scene = document.querySelector('a-scene');
     this.light1 = document.createElement('a-entity');
     const light1 = this.light1;
     light1.setAttribute('id', 'env-light1');