"editor"
Bootstrap 3.0.0 Snippet by evarevirus

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

Related: See More


Questions / Comments: