<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/pissang/pen/RZWVzx?limit=all&page=76&q=app" />
<style class="cp-pen-styles">#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;
}</style></head><body>
<html>
<head>
<meta charset="utf-8">
<title>Bar3D Isometric - ECHARTS-GL</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
</head>
<body>
<div id="main"></div>
<div id="image-upload">Drop files here or click to upload</div>
</body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js'></script><script src='https://rawgit.com/ecomfe/echarts-gl/master/dist/echarts-gl.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdn.rawgit.com/ecomfe/echarts-doc/gh-pages/slides/webgl/asset/texture/canyon.hdr.js'></script>
<script >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 = $('<input type="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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";
//# sourceURL=pen.js
</script>
</body></html>
