LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
    
    Bar3D Isometric - ECHARTS-GL
    
     
  
  
    
Drop files here or click to upload
CSS
#main {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
#image-upload {
  width: 300px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  border: 2px dashed #999;
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 10;
  color: #fff;
}
JS
var chart = echarts.init(document.getElementById("main"));
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

var imgData;

chart.setOption({
  tooltip: {},
  backgroundColor: "#000",
  xAxis3D: {
    type: "value"
  },
  yAxis3D: {
    type: "value"
  },
  zAxis3D: {
    type: "value",
    min: 0,
    max: 100
  },
  grid3D: {
    show: false,
    viewControl: {
      projection: "orthographic",
      alpha: 45,
      beta: -45,
      rotateSensitivity: [1, 0],
      damping: 0.9,
      panSensitivity: 0,
      orthographicSize: 120
    },
    postEffect: {
      enable: true,
      bloom: {
        intensity: 0.2
      },
      screenSpaceAmbientOcclusion: {
        enable: true,
        intensity: 1.5,
        radius: 5,
        quality: "high"
      },
      screenSpaceReflection: {
        enable: true
      }
      // depthOfField: {
      //     enable: true,
      //     blurRadius: 4,
      //     fstop: 10
      // }
    },
    boxDepth: 100,
    boxHeight: 20,
    environment: "none",
    light: {
      main: {
        shadow: true,
        intensity: 2
      },
      ambientCubemap: {
        texture: canyonUrl,
        exposure: 2,
        diffuseIntensity: 0.2
      }
    }
  }
});

function updateData(data, width, height) {
  console.time("update");
  var dataItem = [];
  var dataProvider = {
    getItem: function(i) {
      var r = data[i * 4];
      var g = data[i * 4 + 1];
      var b = data[i * 4 + 2];

      var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b;
      lum = (lum - 125) * config.scale + 50;
      dataItem[0] = i % width;
      dataItem[1] = height - Math.floor(i / width);
      dataItem[2] = lum;
      return dataItem;
    },
    count: function() {
      return data.length / 4;
    }
  };

  chart.setOption({
    grid3D: {
      boxWidth: 100 / height * width
    },
    series: [
      {
        animation: false,
        type: "bar3D",
        shading: "realistic",
        realisticMaterial: {
          roughness: config.roughness,
          metalness: config.metalness
        },
        barSize: 0.5,
        silent: true,
        itemStyle: {
          color: config.sameColor ? config.color : function(params) {
            var i = params.dataIndex;
            var r = data[i * 4] / 255;
            var g = data[i * 4 + 1] / 255;
            var b = data[i * 4 + 2] / 255;
            var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b;
            // r *= lum * 2;
            // g *= lum * 2;
            // b *= lum * 2;
            return [r, g, b, 1];
          }
        },
        data: dataProvider
      }
    ]
  });

  console.timeEnd("update");
  
  setTimeout(function () {
    chart.getZr().refresh()
  }, 100);
}

function loadImage(img) {
  var height = (canvas.height = Math.min(256, img.height));
  var aspect = img.width / img.height;
  var width = (canvas.width = Math.round(height * aspect));

  ctx.drawImage(img, 0, 0, width, height);

  imgData = ctx.getImageData(0, 0, width, height);

  updateData(imgData.data, width, height);
}

// Configurations
var config = {
  scale: 0.25,
  roughness: 1,
  metalness: 0,
  projection: "orthographic",
  depthOfField: false,
  lockY: true,
  move: false,
  sameColor: false,
  color: '#777',
  lightIntensity: 2,
  lightColor: '#fff',
  lightRotate: 30,
  lightPitch: 40,
  AO: 1.5,
  showEnvironment: false,
  environment: 'canyon'
};

var gui = new dat.GUI();
function updateDataWhenChange() {
  if (imgData) {
    updateData(imgData.data, imgData.width, imgData.height);
  }
}
gui.add(config, "scale", -1, 1).onFinishChange(updateDataWhenChange);
gui.add(config, 'sameColor').onChange(updateDataWhenChange);
gui.addColor(config, 'color').onChange(updateDataWhenChange);

["roughness", "metalness"].forEach(function(propName) {
  gui.add(config, propName, 0, 1).step(0.01).onFinishChange(function() {
    chart.setOption({
      series: [
        {
          realisticMaterial: {
            roughness: config.roughness,
            metalness: config.metalness
          }
        }
      ]
    });
  });
});

function updateControlAndLight() {
  chart.setOption({
    grid3D: {
      environment: config.showEnvironment ? 'auto' : '#000',
      viewControl: {
        panSensitivity: config.move ? 1 : 0,
        rotateSensitivity: config.lockY ? [1, 0] : 1
      },
      light: {
        main: {
          intensity: config.lightIntensity,
          color: config.lightColor,
          alpha: config.lightPitch,
          beta: config.lightRotate
        },
        ambientCubemap: {
          texture: config.environment === 'canyon' ? canyonUrl : pisaUrl
        }
      },
      postEffect: {
        screenSpaceAmbientOcclusion: {
          intensity: config.AO
        }
      }
    }
  });
}

gui.add(config, 'lightIntensity', 0, 10).onChange(updateControlAndLight);
gui.add(config, 'lightRotate', -180, 180).onChange(updateControlAndLight);
gui.add(config, 'lightPitch', 10, 90).onChange(updateControlAndLight);
gui.add(config, 'AO', 0, 2).onChange(updateControlAndLight);
// gui.addColor(config, 'lightColor').onChange(updateControlAndLight);

// FIXME Not work
// gui.add(config, 'showEnvironment').onChange(updateControlAndLight);
// gui.add(config, 'environment', ['canyon', 'pisa']).onChange(updateControlAndLight);

gui.add(config, 'move').onChange(updateControlAndLight);
gui.add(config, 'lockY').onChange(updateControlAndLight);

gui.add(config, 'projection', ['orthographic', 'perspective']).onChange(function () {
  chart.setOption({
    grid3D: {
      viewControl: {
        projection: config.projection
      }
    }
  });
   
  // FIXME
  setTimeout(function () {  
    chart.setOption({});
    setTimeout(function () {
      var grid3DModel = chart.getModel().getComponent('grid3D');
      var opt = grid3DModel.option.viewControl
      chart.getViewOfComponentModel(grid3DModel)._control._needsUpdate = true;
    });
  }, 100);
});


// Handle file uploads.
function readFile(file) {
  if (!file || !file.type.match(/image/)) {
    return;
  }

  var fileReader = new FileReader();
  fileReader.onload = function(e) {
    img = new Image();
    img.onload = function() {
      loadImage(img);
    };
    img.src = e.target.result;
  };
  fileReader.readAsDataURL(file);
}
$("#image-upload").on("dragover", function(e) {
  e.stopPropagation();
  e.preventDefault();
});
$("#image-upload")[0].addEventListener("drop", function(e) {
  e.stopPropagation();
  e.preventDefault();

  var files = e.dataTransfer.files;
  return readFile(files[0]);
});
$("#image-upload").on("click", function() {
  var $file = $('');
  $file.on("change", function(e) {
    readFile(e.target.files[0]);
  });
  $file.click();
});

window.onresize = chart.resize;

// Default
var img = new Image();
img.onload = function() {
  loadImage(img);
};
img.src =
  "data:image/png;charset=utf-8;base64,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";
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 21:47

Related Codes

Pen ID
Pen ID
Pen ID