index.html

2026-08-11 11:27:04 +08:00 · 2016-01-19 07:35:34 +08:00
parent ed1e415666
commit 6d06b21447
1 changed files with 0 additions and 0 deletions
@@ -0,0 +1,89 @@
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>svg2Cube</title>
+</head>
+
+<body>
+
+    <div>
+        <p>This uses a css3 to make an SVG cube from a SVG panel. </p>
+
+        <p>The buttons allow you to try different parameters. </p>
+        <p>The front, left, etc svg's are just linked to panel.svg </p>
+    </div>
+
+</body>
+
+<!-- <script type="text/javascript" src="node_modules/snapsvg/dist/snap.svg.js"></script> -->
+<script  type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
+<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/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: 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('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);
+
+
+
+
+    }
+
+
+
+    var module
+    if (module) {
+        module.exports = SvgCube
+    }
+</script>
+
+</html>