diff --git a/src/index.js b/src/index.js
index f200e80f8..de4198c52 100644
--- a/src/index.js
+++ b/src/index.js
@@ -364,42 +364,49 @@ AFRAME.registerComponent('street-environment', {
   schema: {
     preset: { type: 'string', default: 'day', oneOf: ['day', 'night'] }
   },
-  init: function () {
-    var data = this.data;
-    var el = this.el;
-    if (data.preset === 'night') {
-      const light = document.createElement('a-entity');
-      light.setAttribute('id', 'light');
-      light.setAttribute('light', { type: 'ambient', color: '#FFF', intensity: 0.5 });
-      el.appendChild(light);
-      const light2 = document.createElement('a-entity');
-      light2.setAttribute('id', 'light');
-      light2.setAttribute('position', { x: 0.5, y: 1, z: -1 });
-      light2.setAttribute('light', { type: 'directional', color: '#FFF', intensity: 0.15 });
-      el.appendChild(light2);
-      const sky = document.createElement('a-sky');
-      sky.setAttribute('id', 'sky');
+  setEnvOption: function () {
+    const sky = this.sky;
+    const light1 = this.light1;
+    const light2 = this.light2;
+  
+    if (this.data.preset === 'night') {
+      light1.setAttribute('light', 'intensity', 0.5 );
+      light2.setAttribute('light', 'intensity', 0.15 );
       sky.setAttribute('color', '#444');
       sky.setAttribute('src', '#sky-night');
-
-      el.appendChild(sky);
+      sky.setAttribute('rotation', '0 0 0');
     } else { // day
       // TODO: create a parent with children
-      const light = document.createElement('a-entity');
-      light.setAttribute('id', 'light');
-      light.setAttribute('light', { type: 'ambient', color: '#FFF', intensity: 2 });
-      el.appendChild(light);
-      const light2 = document.createElement('a-entity');
-      light2.setAttribute('id', 'light');
-      light2.setAttribute('position', { x: 0.5, y: 1, z: -1 });
-      light2.setAttribute('light', { type: 'directional', color: '#FFF', intensity: 0.6 });
-      el.appendChild(light2);
-      const sky = document.createElement('a-sky');
-      sky.setAttribute('id', 'sky');
+      light1.setAttribute('light', 'intensity', 2 );
+      light2.setAttribute('light', 'intensity', 0.6 );
+      sky.setAttribute('color', '#FFF');
       sky.setAttribute('src', '#sky');
       sky.setAttribute('rotation', '0 255 0');
-      el.appendChild(sky);
     }
+  },
+  init: function () {
+    const el = this.el;
+    
+    this.light1 = document.createElement('a-entity');
+    const light1 = this.light1;
+    light1.setAttribute('id', 'env-light1');
+    light1.setAttribute('light', { type: 'ambient', color: '#FFF'});
+    el.appendChild(light1);
+
+    this.light2 = document.createElement('a-entity');
+    const light2 = this.light2;
+    light2.setAttribute('id', 'env-light2');
+    light2.setAttribute('position', { x: 0.5, y: 1, z: -1 });
+    light2.setAttribute('light', { type: 'directional', color: '#FFF'});
+    el.appendChild(light2);
+
+    this.sky = document.createElement('a-sky');
+    const sky = this.sky;
+    sky.setAttribute('id', 'env-sky');
+    el.appendChild(sky);     
+  },
+  update: function (oldData) { 
+    this.setEnvOption();
   }
 });
 
diff --git a/src/json-utils.js b/src/json-utils.js
index 3d9819bd3..9c08f23ef 100644
--- a/src/json-utils.js
+++ b/src/json-utils.js
@@ -6,12 +6,14 @@ and returns a Javascript object
 */
 function convertDOMElToObject (entity) {
   const data = [];
-  if (entity.length) {
-    for (const entry of entity) {
-      data.push(getElementData(entry));
+  const environmentElement = document.querySelector('#environment');
+  const sceneEntities = [entity, environmentElement];
+
+  for (const entry of sceneEntities) {
+    const entityData = getElementData(entry);
+    if (entityData) {
+      data.push(entityData);
     }
-  } else {
-    data.push(getElementData(entity));
   }
   return {
     title: 'scene',
@@ -21,6 +23,9 @@ function convertDOMElToObject (entity) {
 }
 
 function getElementData (entity) {
+  if (!entity.isEntity) {
+    return;
+  }
   const elementTree = getAttributes(entity);
   const children = entity.childNodes;
   if (children.length) {
@@ -36,7 +41,8 @@ function getElementData (entity) {
 
 function getAttributes (entity) {
   const elemObj = {};
-  elemObj['element'] = entity.tagName.toLowerCase();
+
+  elemObj['element'] = entity.tagName.toLowerCase();  
 
   if (entity.id) {
     elemObj['id'] = entity.id;
@@ -112,7 +118,8 @@ const removeProps = {
   normalMap: {},
   'set-loader-from-hash': '*',
   'create-from-json': '*',
-  street: { JSON: '*' }
+  street: { JSON: '*' },
+  'street-environment': '*'
 };
 // a list of component_name:new_component_name pairs to rename in JSON string
 const renameProps = {
@@ -122,7 +129,6 @@ const renameProps = {
 
 function filterJSONstreet (removeProps, renameProps, streetJSON) {
   function removeValueCheck (removeVal, value) {
-    // console.error(removeVal, value, AFRAME.utils.deepEqual(removeVal, value))
     if (AFRAME.utils.deepEqual(removeVal, value) || removeVal === '*') {
       return true;
     }
@@ -256,7 +262,6 @@ function getModifiedProperty (entity, componentName) {
       return data;
     }
   }
-
   const diff = {};
   for (const key in data) {
     const defaultValue = defaultData[key].default;
@@ -270,11 +275,11 @@ function getModifiedProperty (entity, componentName) {
       diff[key] = data[key];
     }
   }
-
   return diff;
 }
 
-function createEntities (entitiesData, parentEl) {
+function createEntities (entitiesData, parentEl) { 
+  const sceneElement = document.querySelector('a-scene');
   for (const entityData of entitiesData) {
     if (entityData.id === 'street-container' &&
     entityData.children &&
@@ -282,7 +287,7 @@ function createEntities (entitiesData, parentEl) {
     entityData.children[0].components.hasOwnProperty('set-loader-from-hash')) {
       delete entityData.children[0].components['set-loader-from-hash'];
     }
-    createEntityFromObj(entityData, parentEl);
+    createEntityFromObj(entityData, sceneElement);
   }
 }
 
@@ -330,12 +335,14 @@ function createEntityFromObj (entityData, parentEl) {
       entity.setAttribute('mixin', entityData.mixin);
     }
     // Ensure the components are loaded before update the UI
+
     entity.emit('entitycreated', {}, false);
   });
 
-  if (entityData.children) {
-    for (const childEntityData of entityData.children) {
-      createEntityFromObj(childEntityData, entity);
-    }
-  }
+    if (entityData.children) {
+      for (const childEntityData of entityData.children) {
+        createEntityFromObj(childEntityData, entity);
+      }
+    }    
+  }); 
 }