Merge pull request #405 from 3DStreet/environment-color

add environment option color
3DStreet · Nov 9, 2023 · 0826fd8 · 0826fd8
2 parents d467f14 + 5f80867
commit 0826fd8
Showing 1 changed file with 16 additions and 4 deletions.
diff --git 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,46 +408,55 @@ 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');
     } else if (this.data.preset === 'sunny-afternoon') {
        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');
     } else if (this.data.preset === 'sunny-noon') {
       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');