Question

我正在构建一个在其四面上有天气信息的立方体。现在我想在两个覆盖层的两个覆盖层上显示日出，日落，日持续时间和月亮上升，月亮设置和夜间持续时间，并且具有一些不透明度。我们如何在threejs立方体的一个面/侧面上有两个单独的叠加层，其中包含一些文本？我们可以制作一个具有一定宽度和高度的div，给它一个颜色和不透明度然后将文本放入其中吗？我无法在互联网上找到很多帮助。希望在这里找到解决方案。

    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 < 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);

在三个js立方体的一个面/侧面覆盖

0 个答案: