Permalink
Browse files

Added an experimental .obj to HTML converter

  • Loading branch information...
1 parent a28a843 commit 8231826a98a1496e2e61baba6ded0db44658ba53 @victorporof committed Aug 7, 2012
View
@@ -0,0 +1,65 @@
+body {
+ background: #000 url("img/noise.png");
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ font-family: monospace;
+ text-shadow: 0 4px 24px #0f0, 0 3px 2px #000, 0 1px #000;
+ color: #0f6;
+}
+
+* ::-moz-selection {
+ background: #040;
+}
+
+a {
+ background: #020;
+ color: #afc;
+ outline: none;
+}
+
+mark {
+ background: #030;
+ color: inherit;
+}
+
+#hello {
+ margin-top: 130px;
+ text-align: center;
+ font-size: 16px;
+}
+
+#sadpanda {
+ font-size: 20px;
+ color: #fff;
+}
+
+#progress {
+ font-weight: 600;
+ font-size: 16px;
+ text-shadow: 0 0 6px #afa;
+ color: #0fa;
+}
+
+#importing {
+ visibility: hidden;
+ font-size: 12px;
+ color: #040;
+}
+
+#bottom {
+ position: absolute;
+ bottom: 30px;
+ left: 30px;
+ font-size: 12px;
+}
+
+#bound {
+ background: transparent;
+ width: 40px;
+ border: 1px solid #040;
+ text-align: center;
+ font: inherit;
+ color: #fff;
+}
View
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+ <head>
+ <meta charset="UTF-8"/>
+ <title>Blimp!</title>
+ <link href="blimp.css" rel="stylesheet" type="text/css" />
+ </head>
+
+ <body>
+ <div id="hello">
+ <p id="sadpanda">
+ Whoa there! This is bleeding edge stuff, you'll need
+ <a href='http://nightly.mozilla.org/'>Firefox Nightly</a>
+ to play with this.
+ </p>
+ <p>
+ "Blimp!" is a nifty tool which turns a 3D model into basic HTML voxels.<br>
+ <mark>Drag and drop</mark> an .obj file, wait a bit, then start Tilt.
+ </p>
+ <div id="progress"></div>
+ <div id="importing">hardcore importing, stand by...</div>
+ </div>
+ <div id="bottom">
+ <div>
+ You can even play with this magic number!
+ </div>
+ <input id="bound" type="number" value="350">
+ &lt;~ generated mesh dimensions (try not to enter a very large value;
+ <a href="http://twitter.com/victorporof">#kthxbye</a>)
+ </div>
+ <a href="http://github.com/victorporof"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/bec6c51521dcc8148146135149fe06a9cc737577/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
+
+ <script type="text/javascript;version=1.8" src="blimp.js"></script>
+ <script type="text/javascript;version=1.8" src="dropbox.js"></script>
+ </body>
+
+</html>
View
@@ -0,0 +1,112 @@
+"use strict";
+
+(function() {
+ let $sadpanda = document.getElementById("sadpanda");
+ let $progress = document.getElementById("progress");
+ let $importing = document.getElementById("importing");
+ let $bound = document.getElementById("bound");
+
+ // we'll need some features that started being availalbe only in Nightlies
+ // (currently Firefox 13+), mostly related to bug 726634
+ if (parseInt(navigator.userAgent.replace(/.*Firefox\//, "")
+ .replace(/[^0-9.]+\d+$/, "")) < 14) {
+ return; // :(
+ } else {
+ $sadpanda.style.display = "none"; // :)
+ }
+
+ /**
+ * Mesh constructor, containing the model strings. Currently, only 'obj' is
+ * used, but we may tackle with the 'mtl' at some point.
+ *
+ * @param String obj
+ * The model obj file contents (vertices, faces etc.)
+ * @param String mtl
+ * Optional, the material file contents. Unused.
+ */
+ function Mesh(obj, mtl) {
+ this.obj = obj || "";
+ this.mtl = mtl || "";
+ this.importer = new ImporterWorker(this);
+ }
+
+ Mesh.prototype = {
+
+ /**
+ * Talks to a worker responsible with creating the html representing a
+ * voxelized version of the mesh.
+ */
+ export: function()
+ {
+ let bound = parseInt($bound.value);
+ let size = 15; // magic constant, the thickness of a stack node in Tilt
+
+ this.importer.request("export", { bound: bound, size: size }, function(data) {
+ document.head.innerHTML = data.css;
+ document.body.innerHTML = data.html;
+ });
+ }
+ };
+
+ /**
+ * A wrapper around the importer.js worker.
+ *
+ * @param Mesh mesh
+ * The mesh containing the model 'obj' and 'mtl' strings.
+ */
+ function ImporterWorker(mesh) {
+ this.mesh = mesh;
+ }
+
+ ImporterWorker.prototype = {
+
+ /**
+ * Sends a generic request message to the worker and issues a callback when
+ * ready. See importer.js for more goodies. Possible requests could be:
+ *
+ * @param String method
+ * The method name in the importer. Either "vertices",
+ * "triangles",
+ * "bounds",
+ * "intersections",
+ * "xyzscan",
+ * "voxels" or
+ * "export".
+ * @param Object params
+ * An object containing stuff to be sent as params for the method.
+ * @param Function callback
+ * To be called when worker finished working.
+ */
+ request: function(method, params, callback)
+ {
+ let worker = new Worker("importer.js");
+
+ // cool animation bro'
+ let spinner = ["|", "/", "", "\\", "|", "/", "", "\\"];
+ let count = 0;
+
+ worker.addEventListener("message", function(event) {
+ let data = event.data;
+
+ if (data.signature === method) {
+ // the response is exactly what we wanted, callback!
+ callback(event.data.response);
+ } else {
+ // sometimes bad stuff may happen in the importer worker, or maybe
+ // simple status report messages can be sent; deal with this here
+ console.log(JSON.stringify(data));
+ $progress.textContent = spinner[(count++) % spinner.length];
+ $importing.style.visibility = "visible";
+ }
+ });
+
+ worker.postMessage({
+ mesh: this.mesh,
+ method: method,
+ params: params
+ });
+ }
+ };
+
+ window.Mesh = Mesh;
+})();
View
@@ -0,0 +1,37 @@
+"use strict";
+
+(function() {
+
+ function dragenter(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ }
+
+ function dragover(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ }
+
+ function drop(e) {
+ e.stopPropagation();
+ e.preventDefault();
+
+ let file = e.dataTransfer.files[0];
+ if (!file.name.match(/\.obj$/)) {
+ return;
+ }
+
+ let reader = new FileReader();
+ reader.onload = function(e) {
+ let text = e.target.result;
+ let mesh = new Mesh(text).export();
+ };
+
+ reader.readAsText(file);
+ }
+
+ let dropbox = document.body;
+ dropbox.addEventListener("dragenter", dragenter, false);
+ dropbox.addEventListener("dragover", dragover, false);
+ dropbox.addEventListener("drop", drop, false);
+})();
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit 8231826

Please sign in to comment.