title: Overlays on one face/side of three js cube
body: <p>I am building a cube that has weather information on its four faces.Now I want to show sunrise,sunset, day duration and moon rise, moon set and night duration on 2nd face of the cube within two overlays with some opacity. How can we have two separate overlays with some text in them on one face/side of threejs cube? Can we make a div with some width and height,give it a color and opacity and then place the text in it? I couldn't find much help on internet. Hope to find a solution here.</p>
  
  <pre><code>    dynamicTextures.push(_this.dynamicTextureForFaceTextAndImage1(current_temp,feed.RealFeelTemperature,this.hi_lo,this.precip,feed.WeatherText,data['cube_color'],data['header_overlay_color'],data['daytime_cube_color'],data['nighttime_cube_color'],data['image1'],data['weatherinfo_font'],data['weatherinfo_font_color'],data['weatherinfo_font_bold'],data['weatherinfo_font_italic'],feed.IsDayTime));
      dynamicTextures.push(_this.dynamicTextureForFaceTextAndImage1(current_temp,feed.RealFeelTemperature,this.hi_lo,this.precip,feed.WeatherText,data['cube_color'],data['header_overlay_color'],data['daytime_cube_color'],data['nighttime_cube_color'],data['image1'],data['weatherinfo_font'],data['weatherinfo_font_color'],data['weatherinfo_font_bold'],data['weatherinfo_font_italic'],feed.IsDayTime));
      dynamicTextures.push(_this.dynamicTextureForFaceTextAndImage1(current_temp,feed.RealFeelTemperature,this.hi_lo,this.precip,feed.WeatherText,data['cube_color'],data['header_overlay_color'],data['daytime_cube_color'],data['nighttime_cube_color'],data['image1'],data['weatherinfo_font'],data['weatherinfo_font_color'],data['weatherinfo_font_bold'],data['weatherinfo_font_italic'],feed.IsDayTime));
      dynamicTextures.push(_this.dynamicTextureForFaceTextAndImage1(current_temp,feed.RealFeelTemperature,this.hi_lo,this.precip,feed.WeatherText,data['cube_color'],data['header_overlay_color'],data['daytime_cube_color'],data['nighttime_cube_color'],data['image1'],data['weatherinfo_font'],data['weatherinfo_font_color'],data['weatherinfo_font_bold'],data['weatherinfo_font_italic'],feed.IsDayTime));
      dynamicTextures.push(_this.dynamicTextureForFaceTextAndImage2(this.day_text,feed.Sunrise,feed.Sunset,this.day_duration,this.night_text,feed.Moonrise,feed.Moonrise,this.night_duration,data['cube_color'],data['header_overlay_color'],data['daytime_cube_color'],data['nighttime_cube_color'],data['image2'],data['image3'],data['weatherinfo_font'],data['weatherinfo_font_color'],data['weatherinfo_font_bold'],data['weatherinfo_font_italic'],feed.IsDayTime));
      dynamicTextures.push(_this.dynamicTextureForFaceTextAndImage4(feed.WindSpeed,feed.WindDirection,feed.WindGust,feed.Humidity,feed.Pressure,feed.UVIndex,feed.CloudCover,feed.Ceiling,feed.DewPoint,feed.Visibility,data['cube_color'],data['header_overlay_color'],data['daytime_cube_color'],data['nighttime_cube_color'],data['image1'],data['weatherinfo_font'],data['weatherinfo_font_color'],data['weatherinfo_font_bold'],data['weatherinfo_font_italic'],feed.IsDayTime));
  
  var text = [];
      for (var i = 0; i &lt; dynamicTextures.length; i++) {
          text.push(new THREE.MeshLambertMaterial({
              ambient: 0xffffff,
              map: dynamicTextures[i].texture
          }))
      }
  
       var geo = new THREE.BoxGeometry(data['cube_width'],data['cube_height'],data['cube_depth']); // w, h, d
      _this.cube = new THREE.Mesh(geo, new THREE.MeshFaceMaterial(text));
      //var cube    = new THREE.Mesh( geo, materialText );
      _this.cube.name = "scene-1-lambert-cube";
      scene.add(_this.cube);
  </code></pre>