mirror of
https://github.com/wassname/svg2cube.git
synced 2026-06-27 18:26:20 +08:00
108 lines
3.4 KiB
HTML
Executable File
108 lines
3.4 KiB
HTML
Executable File
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>svg2cube</title>
|
|
<style>
|
|
.thumbnail {
|
|
height: 15em;
|
|
}
|
|
.center-block
|
|
{
|
|
text-align:center;
|
|
display:block;
|
|
}
|
|
#svg2cube {
|
|
display: inline-block;
|
|
width: 512px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="center-block">
|
|
<h1>svg2cube - demo</h1>
|
|
|
|
|
|
<div>
|
|
<p>Fold a svg panel into a cube and take images at isometric angles. </p>
|
|
|
|
<p>The buttons allow you to try different parameters. </p>
|
|
</div>
|
|
|
|
|
|
<h2>Input</h2>
|
|
<img src="inputs/panels.svg" class="thumbnail"></img>
|
|
<h2>Rendered output</h2>
|
|
<img src="images/result.png" class="thumbnail" ></img>
|
|
|
|
<h2>Real time output</h2>
|
|
<div id="loading"><h2>Loading...<h2></div>
|
|
<div id="svg2cube"></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>
|
|
var cube1
|
|
|
|
// redraw cube oninput
|
|
var update = function() {
|
|
if (cube1) {
|
|
cube1.update()
|
|
}
|
|
}
|
|
|
|
window.onload = function() {
|
|
|
|
cube1 = new SvgCube.SvgCube('inputs/panels.svg', {
|
|
rotateX: 45,
|
|
clipCircle: false,
|
|
stroke: {
|
|
"stroke": 'black', // stroke color for outline
|
|
"stroke-width": 0, // outline width
|
|
},
|
|
size: 128,
|
|
});
|
|
|
|
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('Images urls');
|
|
imgUrls.add(cube1.options, 'svgPanel').onChange(update);
|
|
|
|
var outline = gui.addFolder('outline');
|
|
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>
|