-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added an experimental .obj to HTML converter
- Loading branch information
1 parent
a28a843
commit 8231826
Showing
8 changed files
with
342,471 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -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; | |||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -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"> | |||
<~ 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -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; | |||
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -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); | |||
})(); |
Loading
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.