mirror of
https://github.com/wassname/svg2cube.git
synced 2026-06-27 17:17:43 +08:00
163 lines
5.9 KiB
HTML
Executable File
163 lines
5.9 KiB
HTML
Executable File
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title><a href="https://github.com/wassname/svg2cube" >svg2cube</a></title>
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
|
|
<style>
|
|
.thumbnail {
|
|
height: 10em;
|
|
}
|
|
|
|
.center-block {
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
|
|
#svg2cube {
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="container"><div class="row"><div class="col-sm-6"><div class="">
|
|
<h1 class=" center-block"><a href="https://github.com/wassname/svg2cube" >svg2cube</a></h1>
|
|
|
|
|
|
<div>
|
|
<p>Fold a svg panel into a cube and take images at isometric angles. </p>
|
|
|
|
<p>The panel on the right allows you to try different parameters. </p>
|
|
</div>
|
|
|
|
<div class="row"><div class="col-sm-6 center-block">
|
|
<h2>Input</h2>
|
|
<img src="inputs/panels.svg" class="thumbnail center-block"></img>
|
|
<br>
|
|
</div><div class="col-sm-6 center-block">
|
|
<h2>Output</h2>
|
|
<img src="images/result.png" class="thumbnail center-block"></img>
|
|
<br></div></div>
|
|
<h2>Real time output</h2>
|
|
<div id="loading">
|
|
<h2>Loading...<h2></div>
|
|
<div id="svg2cube"></div>
|
|
</div></div></div>
|
|
</body>
|
|
|
|
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
|
|
<script src="svg2cube-frontend.js"></script>
|
|
<script>
|
|
function has3d() {
|
|
if (!window.getComputedStyle) {
|
|
return false;
|
|
}
|
|
|
|
var el = document.createElement('p'),
|
|
has3d,
|
|
transforms = {
|
|
'webkitTransform':'-webkit-transform',
|
|
'OTransform':'-o-transform',
|
|
'msTransform':'-ms-transform',
|
|
'MozTransform':'-moz-transform',
|
|
'transform':'transform'
|
|
};
|
|
|
|
// Add it to the body to get the computed style.
|
|
document.body.insertBefore(el, null);
|
|
|
|
for (var t in transforms) {
|
|
if (el.style[t] !== undefined) {
|
|
el.style[t] = "translate3d(1px,1px,1px)";
|
|
has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
|
|
}
|
|
}
|
|
|
|
document.body.removeChild(el);
|
|
|
|
return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
var cube1
|
|
|
|
// redraw cube oninput
|
|
var update = function() {
|
|
if (cube1) {
|
|
cube1.update()
|
|
}
|
|
}
|
|
|
|
window.onload = function() {
|
|
|
|
if (!has3d()){
|
|
var warning = $('<h2>Sorry <a href="http://caniuse.com/#feat=transforms3d">your browser does not support css-3d</a></h2>')
|
|
$('#svg2cube').append(warning);
|
|
|
|
}
|
|
|
|
cube1 = new SvgCube.SvgCube('inputs/panels.svg', {
|
|
rotateX: 45,
|
|
clipCircle: false,
|
|
stroke: {
|
|
"stroke": 'black', // stroke color for outline
|
|
"stroke-width": 0, // outline width
|
|
},
|
|
size: 256,
|
|
});
|
|
|
|
var gui = new dat.GUI();
|
|
gui.remember(cube1.options);
|
|
|
|
gui.add(cube1.options, 'size').min(1).max(512).step(10).onChange(update);
|
|
gui.add(cube1.options, 'rotateX').min(0).max(360).step(1).onChange(update);
|
|
gui.add(cube1.options, 'rotateY').min(0).max(360).step(1).onChange(update);
|
|
gui.add(cube1.options, 'rotateZ').min(0).max(360).step(1).onChange(update);
|
|
//gui.add(cube1.options,'perspective').min(0).max(50).step(1).onChange(update);
|
|
gui.add(cube1.options, 'scaleX').min(0.0).max(2.01).step(0.1).onChange(update);
|
|
gui.add(cube1.options, 'scaleY').min(-1.00).max(2.01).step(0.1).onChange(update);
|
|
gui.add(cube1.options, 'scaleZ').min(0.0).max(2.01).step(0.1).onChange(update);
|
|
|
|
var imgUrls = gui.addFolder('Sides');
|
|
imgUrls.add(cube1.options, 'svgPanel').onChange(update);
|
|
imgUrls.add(cube1.options, 'leftRender').onChange(update);
|
|
imgUrls.add(cube1.options, 'topRender').onChange(update);
|
|
imgUrls.add(cube1.options, 'bottomRender').onChange(update);
|
|
imgUrls.add(cube1.options, 'rightRender').onChange(update);
|
|
imgUrls.add(cube1.options, 'frontRender').onChange(update);
|
|
imgUrls.add(cube1.options, 'backRender').onChange(update);
|
|
|
|
var shading = gui.addFolder('Shading');
|
|
shading.add(cube1.options, 'drawShading').onChange(update);
|
|
shading.add(cube1.options, 'topShad').min(0.0).max(1).step(0.05).onChange(update);
|
|
shading.add(cube1.options, 'leftShad').min(0.0).max(1).step(0.05).onChange(update);
|
|
shading.add(cube1.options, 'rightShad').min(0.0).max(1).step(0.05).onChange(update);
|
|
shading.add(cube1.options, 'backShad').min(0.0).max(1).step(0.05).onChange(update);
|
|
shading.add(cube1.options, 'bottomShad').min(0.0).max(1).step(0.05).onChange(update);
|
|
shading.add(cube1.options, 'frontShad').min(0.0).max(1).step(0.05).onChange(update);
|
|
|
|
var outline = gui.addFolder('Outline');
|
|
outline.add(cube1.options, 'drawOutline').onChange(update);
|
|
outline.add(cube1.options.stroke, 'stroke-width').min(0.0).max(20).step(1).onChange(update);
|
|
outline.add(cube1.options.stroke, 'stroke').onChange(update);
|
|
outline.add(cube1.options, 'borderRadius').min(0).max(128).step(1).onChange(update);
|
|
|
|
|
|
var imageRot = gui.addFolder('Image rotation');
|
|
imageRot.add(cube1.options, 'topRot').min(0.0).max(360).step(90).onChange(update);
|
|
imageRot.add(cube1.options, 'bottomRot').min(0.0).max(360).step(90).onChange(update);
|
|
imageRot.add(cube1.options, 'leftRot').min(0.0).max(360).step(90).onChange(update);
|
|
imageRot.add(cube1.options, 'rightRot').min(0.0).max(360).step(90).onChange(update);
|
|
imageRot.add(cube1.options, 'backRot').min(0.0).max(360).step(90).onChange(update);
|
|
imageRot.add(cube1.options, 'frontRot').min(0.0).max(360).step(90).onChange(update);
|
|
|
|
$('#loading').remove();
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
</html>
|