-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
103 lines (78 loc) · 2.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html>
<head>
<title>STL Viewer</title>
<link href="css/stlviewer.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/jscolor/jscolor.js"></script>
<script src="js/thingiview/Three.js"></script>
<script src="js/thingiview/plane.js"></script>
<script src="js/thingiview/thingiview.js"></script>
<script>
$(document).ready(function() {
thingiurlbase = "js/thingiview";
thingiview = new Thingiview("stlviewer");
thingiview.setObjectColor('#C0D8F0');
thingiview.setBackgroundColor('#000');
thingiview.initScene();
thingiview.setCameraView('iso');
if (!Modernizr.draganddrop) {
$('#message').html("Your browser cannot handle drag and drop.");
}
function handleDrop(e) {
e.stopPropagation(); // Stops some browsers from redirecting.
e.preventDefault();
var files = e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
// Read the File objects in this FileList.
console.log(f.name + " - " + f.type)
if (!/.*\.stl$/i.test(f.name)){
alert("File type not recognised.")
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
var fileContents = e.target.result;
if (fileContents.match(/^solid/)) {
thingiview.loadSTLString(fileContents);
} else {
var reader2 = new FileReader();
reader2.onload = (function(theFile){
return function(e) {
thingiview.loadSTLBinary(e.target.result);
};
})(theFile);
reader2.readAsBinaryString(theFile);
}
};
})(f);
reader.readAsText(f);
$('#message').text(f.name);
}
}
var dropZone = document.getElementById("stlviewer");
dropZone.addEventListener('drop', handleDrop, false);
// for Firefox
dropZone.ondragover = function(e) {
e.preventDefault();
};
$('#backround_colour').change(function(){
thingiview.setBackgroundColor('#'+$(this).val());
});
$('#model_colour').change(function(){
thingiview.setObjectColor('#'+$(this).val());
});
});
</script>
</head>
<body>
<div id="stlviewer"></div>
<div id="message"></div>
<div class="settings">
Background: <input class="color" id="backround_colour" value="000000"> Model: <input class="color" id="model_colour" value="C0D8F0">
Drag and drop STL files (binary or ascii) to the window to display.
</div>
</body>
</html>