1357 lines
51 KiB
JavaScript
1357 lines
51 KiB
JavaScript
/**
|
|
* @author Junho Jin[junho.jin@kaist.ac.kr] | https://github.com/JinJunho
|
|
* @version 1.0.0
|
|
*
|
|
* [Project] Madeleine.js, Pure JavaScript STL Parser & Renderer.
|
|
*
|
|
* [Description] Madeleine.js constists of three part: DataReader, Madeleine and Lily.
|
|
* DataReader is a helper function to read binary data, which is a customized version
|
|
* of DataView. Lily is a helper Object that manages created Madeleines and logs
|
|
* messages to console. Madeleine is the part that deals with actual parsing, rendering
|
|
* and showing your stl files. Customize them however you want. This project is under
|
|
* MIT License (see the LICENSE file for details). You are allowed to do anything with
|
|
* this code, as long as you leave the attribution (MUST!). It will be glad if you
|
|
* contact me for any bug you found or interesting ideas to do with Madeleine.js.
|
|
* I'm willing to co-work with you!
|
|
*/
|
|
|
|
(function() {
|
|
|
|
// Madeleine constructor
|
|
Madeleine = function(options) {
|
|
|
|
var Madeleine;
|
|
|
|
// Constants for default setting
|
|
var CONVERT_TO_BINARY = true;
|
|
|
|
var OBJECT_MATERIAL = "matt";
|
|
var OBJECT_STATUS = false;
|
|
var OBJECT_BACKGROUND = "DADADA";
|
|
var OBJECT_COLOR = "FF9900";
|
|
|
|
var CAMERA_SIGHT = 45;
|
|
var CAMERA_NEARFIELD = 1;
|
|
var CAMERA_FARFIELD = 100000;
|
|
|
|
var VIEWER_THEME = "default";
|
|
var VIEWER_PREFIX = "mad-";
|
|
var VIEWER_CREATE = true;
|
|
var VIEWER_HEIGHT = 400;
|
|
var VIEWER_WIDTH = 640;
|
|
|
|
var USER_ROTATE_SENSITIVITY = 0.005;
|
|
var USER_ZOOM_SENSITIVITY = 100;
|
|
var SCROLL_FACTOR = 10;
|
|
|
|
// Necessary option check
|
|
if (!document.getElementById(options.target)) {
|
|
console.log("MADELEINE[ERR] Target must be a valid DOM Element.");
|
|
return null;
|
|
} else if (!options.data) {
|
|
console.log("MADELEINE[ERR] Option must contain target and data.");
|
|
return null;
|
|
}
|
|
|
|
// Construct new Madeleine
|
|
Madeleine = function(options) {
|
|
// Alias to own object
|
|
var scope = this;
|
|
// Internal properties
|
|
this.__uniqueID = Lily.push(this);
|
|
this.__containerID = options.target;
|
|
this.__timer = {start: (new Date).getTime(), end: null};
|
|
// About 3d model
|
|
this.__status = null;
|
|
this.__object = null;
|
|
this.__bounds = null;
|
|
this.__center = null;
|
|
this.__rawText = null;
|
|
this.__converted = null;
|
|
this.__arrayBuffer = null;
|
|
// Initialize data info object
|
|
this.__info = {type: null, load: this.type, vertices: 0, facets: 0, faces: 0};
|
|
// About visualization
|
|
this.__scene = new THREE.Scene();
|
|
this.__camera = null;
|
|
this.__viewer = null;
|
|
this.__canvas = null;
|
|
// About rendering
|
|
this.__geometry = null;
|
|
this.__renderer = null;
|
|
// About camera view
|
|
this.__width = null;
|
|
this.__height = null;
|
|
this.__sizeRatio = 1;
|
|
// About user interaction
|
|
this.__firstPerson = false;
|
|
this.__movable = true;
|
|
this.__zoomable = true;
|
|
this.__rotatable = true;
|
|
this.__rotating = false;
|
|
this.__trackMouse = false;
|
|
this.__mouseX = 0;
|
|
this.__mouseY = 0;
|
|
// Crucial properties to render 3d model
|
|
this.data = options.data;
|
|
this.type = options.type ? options.type : 'file';
|
|
this.container = document.getElementById(this.__containerID);
|
|
this.relPath = options.path ? options.path + (options.path[options.path.length-1] == "/" ? "" : "/") : "./";
|
|
// User configuration
|
|
this.options = Lily.extend(true, {}, { // Default option
|
|
material : OBJECT_MATERIAL,
|
|
showStatus : OBJECT_STATUS,
|
|
backgroundColor : OBJECT_BACKGROUND,
|
|
objectColor : OBJECT_COLOR,
|
|
viewer : {
|
|
create : VIEWER_CREATE, // Create new viewer?
|
|
prefix : VIEWER_PREFIX, // Viewer id prefix
|
|
height : VIEWER_HEIGHT, // Viewer height
|
|
width : VIEWER_WIDTH, // Viewer width
|
|
theme : VIEWER_THEME, // Viewer theme
|
|
},
|
|
camera : {
|
|
sight : CAMERA_SIGHT, // Vertical Field of View
|
|
near : CAMERA_NEARFIELD, // Near Field Distance
|
|
far : CAMERA_FARFIELD, // Far Field Distance
|
|
},
|
|
rotateSensitivity : USER_ROTATE_SENSITIVITY,
|
|
scrollFactor : SCROLL_FACTOR,
|
|
zoomSensitivity : USER_ZOOM_SENSITIVITY,
|
|
}, options);
|
|
|
|
// Event Listeners
|
|
this.scrollHandler = function(e) {
|
|
var delta = e.wheelDelta ? e.wheelDelta/40 : (e.detail ? -e.detail : 0);
|
|
if (delta < 0) delta -= this.options.scrollFactor;
|
|
if (delta > 0) delta += this.options.scrollFactor;
|
|
scope.cameraZoom(delta);
|
|
e.preventDefault();
|
|
}.bind(this);
|
|
this.gestureHandler = function(e) {
|
|
scope.cameraZoom(( 1 < e.scale ? "in" : "out" ));
|
|
e.preventDefault();
|
|
};
|
|
this.mouseDownHandler = function(e) {
|
|
e.preventDefault();
|
|
if ((e.which && e.which == 3) || (e.button && e.button == 2)) {
|
|
// alert("Right click on 3D viewer is disabled.");
|
|
} else {
|
|
scope.trackMouse = true;
|
|
scope.__rotating = false;
|
|
scope.mouseY = e.clientY;
|
|
scope.mouseX = e.clientX;
|
|
}
|
|
};
|
|
this.mouseMoveHandler = function(e) {
|
|
if (scope.trackMouse) {
|
|
// Top-left corner is (0, 0)
|
|
// e.clientX grows as mouse goes down
|
|
// e.clientY grows as mouse goes right
|
|
|
|
//IMPROVED move object on wheel drag and rotate with left mouse drag
|
|
if (e.which == 1) {//left button mouse
|
|
scope.rotateObjectZ(scope.mouseX - e.clientX);
|
|
scope.rotateObjectX(scope.mouseY - e.clientY);
|
|
}
|
|
|
|
if (e.which == 2) {//whell button mouse
|
|
scope.moveObject(event, scope.mouseX - e.clientX);
|
|
scope.moveObject(event, scope.mouseY - e.clientY);
|
|
}
|
|
scope.mouseY = e.clientY;
|
|
scope.mouseX = e.clientX;
|
|
}
|
|
e.preventDefault();
|
|
};
|
|
this.mouseUpHandler = function(e) {
|
|
scope.trackMouse = false;
|
|
scope.__rotating = true;
|
|
e.preventDefault();
|
|
};
|
|
this.touchStartHandler = function(e) {
|
|
if (e.changedTouches.length == 1) {
|
|
scope.trackMouse = true;
|
|
scope.__rotating = false;
|
|
scope.mouseY = e.changedTouches[0].clientY;
|
|
scope.mouseX = e.changedTouches[0].clientX;
|
|
}
|
|
};
|
|
this.touchMoveHandler = function(e) {
|
|
if (scope.trackMouse) {
|
|
// Top-left corner is (0, 0)
|
|
// e.clientX grows as touch goes down
|
|
// e.clientY grows as touch goes right
|
|
scope.rotateObjectZ(scope.mouseX - e.clientX);
|
|
scope.rotateObjectX(scope.mouseY - e.clientY);
|
|
scope.mouseY = e.clientY;
|
|
scope.mouseX = e.clientX;
|
|
}
|
|
e.preventDefault();
|
|
};
|
|
this.touchEndHandler = function(e) {
|
|
scope.trackMouse = false;
|
|
scope.__rotating = true;
|
|
e.preventDefault();
|
|
};
|
|
this.rightClickHandler = function(e) {
|
|
e.preventDefault();
|
|
};
|
|
this.viewModeHandler = function(e) {
|
|
if (scope.__firstPerson) {
|
|
e.target.className = e.target.className.replace(" focused", "");
|
|
scope.__firstPerson = false;
|
|
scope.disableFirstPersonViewerMode();
|
|
} else {
|
|
e.target.className += " focused";
|
|
scope.__firstPerson = true;
|
|
scope.enableFirstPersonViewerMode();
|
|
}
|
|
};
|
|
this.captureHandler = function(e) {
|
|
// TODO capture the model
|
|
};
|
|
|
|
// Check if option values are correct
|
|
this.adjustUserConfiguration();
|
|
// Initialize rendering
|
|
this.init();
|
|
};
|
|
|
|
// Initialize rendering
|
|
Madeleine.prototype.init = function() {
|
|
|
|
//IMPROVE callbackstart process i.e.: show another loader in other scope
|
|
if (this.options.callbackstart) this.options.callbackstart();
|
|
|
|
// Get file name
|
|
this.__info.name = (typeof this.data == "string") ? this.data.split("/").slice(-1)[0] : this.data.name;
|
|
|
|
// If create new viewer, set canvas size to the viewer.
|
|
if (this.options.viewer.create) {
|
|
this.__height = this.options.viewer.height;
|
|
this.__width = this.options.viewer.width;
|
|
// Get target width and height, otherwise.
|
|
} else if (document.defaultView && document.defaultView.getComputedStyle) {
|
|
this.__height = parseFloat(document.defaultView.getComputedStyle(this.container,null).getPropertyValue('height'));
|
|
this.__width = parseFloat(document.defaultView.getComputedStyle(this.container,null).getPropertyValue('width'));
|
|
} else {
|
|
this.__height = parseFloat(this.container.currentStyle.height);
|
|
this.__width = parseFloat(this.container.currentStyle.width);
|
|
}
|
|
// Create viewer
|
|
this.createViewer();
|
|
|
|
// Adjust canvas width/height ratio
|
|
this.__sizeRatio = this.__width / this.__height;
|
|
|
|
// Create camera
|
|
this.__camera = new THREE.PerspectiveCamera(
|
|
this.options.camera.sight,
|
|
this.__sizeRatio,
|
|
this.options.camera.near,
|
|
this.options.camera.far
|
|
);
|
|
|
|
// Set user's point-of-view and default camera position
|
|
this.__camera.position.set(0, 0, 0);
|
|
this.__scene.add(this.__camera);
|
|
|
|
// Add lights
|
|
if (OBJECT_MATERIAL == "shiny") {
|
|
this.addShadowedLight(1, 1, 1, 0xFFFFFF, 1.3);
|
|
this.addShadowedLight(0.5, 1, -1, 0xFFCC66, 1);
|
|
var ambientLight = new THREE.AmbientLight(0x111111);
|
|
this.__scene.add(ambientLight);
|
|
} else {
|
|
var directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
|
|
var ambientLight = new THREE.AmbientLight(0x202020);
|
|
directionalLight.position.set(0, 1, 1).normalize();
|
|
this.__scene.add(directionalLight);
|
|
this.__scene.add(ambientLight);
|
|
}
|
|
|
|
// Start rendering
|
|
this.draw();
|
|
};
|
|
|
|
// Rendering start
|
|
Madeleine.prototype.draw = function() {
|
|
// Wait until data is fully loaded
|
|
var queued = (function(scope) {
|
|
return function() {
|
|
// When data ready, parse and render it.
|
|
scope.run(scope.relPath + "lib/MadeleineLoader.js", {
|
|
arrbuf: scope.__arrayBuffer,
|
|
rawtext: scope.__rawText
|
|
}, function(result) {
|
|
var hasColors = result.hasColors;
|
|
var vertices = result.vertices;
|
|
var normals = result.normals;
|
|
var colors = result.colors;
|
|
var alpha = result.alpha;
|
|
|
|
// Create new geometry
|
|
scope.__geometry = new THREE.Geometry();
|
|
|
|
// Parsing done. Add vertices and normals to geometry
|
|
scope.__geometry = new THREE.BufferGeometry();
|
|
scope.__geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
|
|
scope.__geometry.addAttribute('normal', new THREE.BufferAttribute(normals, 3));
|
|
|
|
// Set color information
|
|
if (hasColors) {
|
|
scope.__geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
|
|
scope.__geometry.hasColors = true;
|
|
scope.__geometry.alpha = alpha;
|
|
}
|
|
|
|
// Start rendering
|
|
scope.renderObject();
|
|
|
|
// Compute time consumed in parsing and rendering
|
|
scope.__timer.end = (new Date()).getTime();
|
|
var consumed = (scope.__timer.end - scope.__timer.start) / 1000;
|
|
console.log("MADELEINE[LOG] Time spent: " + consumed + " sec.");
|
|
|
|
// Render object
|
|
scope.render();
|
|
// Log rendering status
|
|
scope.logStatus();
|
|
// Start rotating animation
|
|
scope.startAnimation();
|
|
// Enable mouse zoom action
|
|
scope.enableZoomAsMouseScroll();
|
|
// Enable mouse motion action
|
|
scope.enableUserInteraction();
|
|
|
|
//IMPROVED callback end i.e: hide loading of another scope
|
|
if (scope.options.callbackend) scope.options.callbackend();
|
|
|
|
});
|
|
};
|
|
})(this);
|
|
|
|
// Check input type and get STL Binary data
|
|
switch (this.type) {
|
|
case "upload":
|
|
this.getDataFromBlob(this.data, queued);break;
|
|
case "file":
|
|
this.getDataFromUrl(this.data, queued);break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
// Get arrayBuffer from Blob
|
|
Madeleine.prototype.getDataFromBlob = function(file, queuedWork) {
|
|
var scope = this;
|
|
|
|
if (Detector.fileapi) {
|
|
var arrbuf = new FileReader();
|
|
var rawtxt = new FileReader();
|
|
// arraybuffer onload function
|
|
arrbuf.onload = function () {
|
|
scope.__arrayBuffer = arrbuf.result
|
|
//console.log("scope.__arrayBuffer------>", scope.__arrayBuffer);
|
|
if (scope.__arrayBuffer && scope.__rawText) {//IMPROVED asynchronous onload arrbuf.onload rawtxt.onload doesnt know witch will finish first causing null __arrayBuffer or null __rawText
|
|
console.log('calling o queuedWork no arrbuf onload');
|
|
queuedWork();
|
|
}
|
|
};
|
|
// read arrayBuffer from Blob
|
|
arrbuf.readAsArrayBuffer(file);
|
|
|
|
// rawtext onload function
|
|
rawtxt.onload = function () {
|
|
scope.__rawText = rawtxt.result;
|
|
//console.log("scope.__rawText ----->", scope.__rawText);
|
|
if (scope.__arrayBuffer && scope.__rawText) {//IMPROVED asynchronous onload arrbuf.onload rawtxt.onload doesnt know witch will finish first causing null __arrayBuffer or null __rawText
|
|
console.log('calling in no rawtxt onload');
|
|
queuedWork();
|
|
}
|
|
};
|
|
// read raw text data from Blob
|
|
rawtxt.readAsText(file);
|
|
}
|
|
};
|
|
|
|
// Get arrayBuffer from external file
|
|
Madeleine.prototype.getDataFromUrl = function(url, queuedWork, type) {
|
|
var scope = this;
|
|
var getArrayBuffer = function() {
|
|
var arrbuf = new XMLHttpRequest();
|
|
arrbuf.onerror = function(e) { console.log("MADELEINE[ERR] Ajax failed.") };
|
|
arrbuf.onreadystatechange = function() {
|
|
if (arrbuf.readyState == 4 && (arrbuf.status == 200 || arrbuf.status == 0)) {
|
|
scope.__arrayBuffer = arrbuf.response;
|
|
if (type == "binary") queuedWork();
|
|
if (!type) getRawText();
|
|
}
|
|
};
|
|
arrbuf.responseType = "arraybuffer";
|
|
arrbuf.open("GET", url, true);
|
|
arrbuf.send(null);
|
|
};
|
|
var getRawText = function() {
|
|
var rawtxt = new XMLHttpRequest();
|
|
rawtxt.onerror = function(e) { console.log("MADELEINE[ERR] Ajax failed.") };
|
|
rawtxt.onreadystatechange = function() {
|
|
if (rawtxt.readyState == 4 && (rawtxt.status == 200 || rawtxt.status == 0)) {
|
|
scope.__rawText = rawtxt.response;
|
|
queuedWork();
|
|
}
|
|
};
|
|
rawtxt.responseType = "text";
|
|
rawtxt.open("GET", url, true);
|
|
rawtxt.send(null);
|
|
};
|
|
|
|
// Get data from external resource
|
|
switch(type) {
|
|
case "ascii":
|
|
getRawText();
|
|
break;
|
|
default:
|
|
getArrayBuffer();
|
|
break;
|
|
}
|
|
};
|
|
|
|
// Render object
|
|
Madeleine.prototype.renderObject = function() {
|
|
// Create renderer
|
|
if (!this.__object) this.createRenderer();
|
|
|
|
// Get material
|
|
var material = null;
|
|
if (this.options.material == "shiny") {
|
|
material = new THREE.MeshPhongMaterial({
|
|
color: this.getHexColor(this.options.objectColor),
|
|
ambient: this.getHexColor(this.options.objectColor),
|
|
specular: 0x1F1F1F,
|
|
shininess: 25,
|
|
side: THREE.DoubleSide,
|
|
overdraw: true
|
|
});
|
|
} else {
|
|
material = new THREE.MeshLambertMaterial({
|
|
color: this.getHexColor(this.options.objectColor),
|
|
shading: THREE.FlatShading,
|
|
side: THREE.DoubleSide,
|
|
overdraw: true
|
|
});
|
|
}
|
|
|
|
// Generate mesh for object
|
|
this.__object = new THREE.Mesh(this.__geometry, material);
|
|
this.__geometry.computeBoundingSphere();
|
|
this.__geometry.computeVertexNormals();
|
|
this.__geometry.computeBoundingBox();
|
|
|
|
// Adjust positions of camera and object to make object fit into screen properly
|
|
var radius = this.__geometry.boundingSphere.radius;
|
|
// 1.865 times zoomed object with radius 85 practically fits best to the screen
|
|
var zoomFactor = 1.865 * 85 / radius;
|
|
|
|
// Zoom object to fit into the screen. ZoomFactor is practically best to fit
|
|
this.__object.scale.set(zoomFactor, zoomFactor, zoomFactor);
|
|
// Height 125 fits well to the screen. If taller, lower the center of y-axis
|
|
var maxY = this.__geometry.boundingBox.max.y;
|
|
var minY = this.__geometry.boundingBox.min.y;
|
|
var height = maxY - minY;
|
|
var deltaY = (height > 125 ? parseFloat(0.99 * (height - Math.max(maxY, Math.abs(minY)))) : 15);
|
|
// deltaY in some cases can make object out of screen height
|
|
//console.log(deltaY, height, minY, maxY);
|
|
if (options.XY) {//IMPROVMENT setXY mannually
|
|
if (options.XY.X) {
|
|
this.__object.position.setX(options.XY.X);
|
|
}
|
|
if (options.XY.Y) {
|
|
this.__object.position.setY(options.XY.Y);
|
|
}
|
|
} else {
|
|
this.__object.position.setY(-deltaY);
|
|
}
|
|
|
|
// If object is too large to fit in, make camera look further
|
|
// 500 (default camera distance) : 466 (view height)
|
|
// new distance (x) : boundingSphere radius (r) * 2
|
|
// x = (2 * r * 500) / 466 ~= 2.146 * r
|
|
if (radius < 233) this.__camera.position.z = 500;
|
|
else this.__camera.position.z = radius * 2.146;
|
|
this.__camera.updateProjectionMatrix();
|
|
|
|
// Parsing finished
|
|
this.__scene.add(this.__object);
|
|
this.__object.rotation.x = -1.2;
|
|
this.__object.rotation.z = 1.2;
|
|
};
|
|
|
|
// Generate Renderer
|
|
Madeleine.prototype.createRenderer = function() {
|
|
// create renderer
|
|
this.__renderer = Detector.webgl ?
|
|
new THREE.WebGLRenderer({
|
|
preserveDrawingBuffer: true,
|
|
alpha: true
|
|
}) : new THREE.CanvasRenderer();
|
|
// attach canvas to viewer
|
|
this.__canvas = this.__renderer.domElement;
|
|
this.__viewer.appendChild(this.__canvas);
|
|
// renderer configuration
|
|
this.__renderer.setSize(this.__width, this.__height);
|
|
this.__renderer.setClearColor(0x000000, 0);
|
|
// this.__renderer.shadowMapCullFace = THREE.CullFaceBack;
|
|
// this.__renderer.shadowMapEnabled = true;
|
|
// this.__renderer.gammaOutput = true;
|
|
// this.__renderer.gammaInput = true;
|
|
};
|
|
|
|
// Generate Madeleine Viewer
|
|
Madeleine.prototype.createViewer = function() {
|
|
if (!this.options.viewer.create) this.container.appendChild(this.__renderer.domElement);
|
|
else {
|
|
// Create viewer element
|
|
this.__viewer = document.createElement("div");
|
|
this.__viewer.id = this.options.viewer.prefix + this.__uniqueID;
|
|
|
|
// Force viewer size
|
|
this.container.style["max-height"] = this.__height+"px";
|
|
this.container.style["min-height"] = this.__height+"px";
|
|
this.__viewer.style["max-height"] = this.__height+"px";
|
|
this.__viewer.style["min-height"] = this.__height+"px";
|
|
this.__viewer.style["max-width"] = this.__width+"px";
|
|
this.__viewer.style["min-width"] = this.__width+"px";
|
|
this.__viewer.style.height = this.__height;
|
|
this.__viewer.style.width = this.__width;
|
|
|
|
// Set default style
|
|
this.__viewer.style.background = "transparent";
|
|
this.__viewer.style.position = "relative";
|
|
this.__viewer.style.margin = "0 0 10px 0";
|
|
|
|
// Progress bar
|
|
var progress = document.createElement("div");
|
|
progress.id = "progressBar-" + this.__uniqueID;
|
|
progress.style["-webkit-transition"] = "width .5s ease-in-out, opacity 2s ease";
|
|
progress.style["-moz-transition"] = "width .5s ease-in-out, opacity 2s ease";
|
|
progress.style["-ms-transition"] = "width .5s ease-in-out, opacity 2s ease";
|
|
progress.style["-o-transition"] = "width .5s ease-in-out, opacity 2s ease";
|
|
progress.style["transition"] = "width .5s ease-in-out, opacity 2s ease";
|
|
progress.style["min-height"] = "2px";
|
|
progress.style.background = "#009999";
|
|
progress.style.position = "absolute";
|
|
progress.style.height = "2px";
|
|
progress.style.width = 0;
|
|
progress.style.left = 0;
|
|
progress.style.top = 0;
|
|
|
|
// Viewer iconGrid
|
|
var iconGrid = document.createElement("div");
|
|
iconGrid.style.cssText += "background:transparent;position:absolute;padding:15px 10px;";
|
|
iconGrid.style.cssText += "height:50px;width:"+this.__width+"px;top:0;overflow:hidden;";
|
|
iconGrid.className += "box";
|
|
|
|
var logo = document.createElement("div");
|
|
var info = document.createElement("div");
|
|
var view = document.createElement("div");
|
|
var capture = document.createElement("div");
|
|
//var download = document.createElement("div");
|
|
var fullscreen = document.createElement("div");
|
|
|
|
info.id = "model-info-" + this.__uniqueID;
|
|
info.className += "model-info noselect";
|
|
info.innerHTML = this.__info.name;
|
|
|
|
logo.className += "clickable pull-left madeleine-logo";
|
|
view.className += "clickable pull-right icon-mad-view";
|
|
capture.className += "clickable pull-right icon-mad-capture";
|
|
//download.className += "clickable pull-right icon-mad-download";
|
|
fullscreen.className += "clickable pull-right icon-mad-screen-full";
|
|
|
|
Lily.bind(view, "click", this.viewModeHandler);
|
|
Lily.bind(capture, "click", this.captureHandler);
|
|
|
|
var rotator = document.createElement("div");
|
|
var faster = document.createElement("div");
|
|
var slower = document.createElement("div");
|
|
var player = document.createElement("div");
|
|
|
|
rotator.style.cssText += "background:transparent;position:absolute;padding:15px 10px;right:0;";
|
|
rotator.style.cssText += "height:50px;width:"+this.__width+"px;top:0;overflow:hidden;";
|
|
rotator.style.cssText += "margin-top:"+(this.__height-30)+"px;";
|
|
|
|
player.className += "icon-clickable pull-right icon-mad-stop";
|
|
slower.className += "icon-clickable pull-right icon-mad-slower";
|
|
faster.className += "icon-clickable pull-right icon-mad-faster";
|
|
|
|
rotator.appendChild(faster);
|
|
rotator.appendChild(player);
|
|
rotator.appendChild(slower);
|
|
|
|
var controller = document.createElement("div");
|
|
var trackball = document.createElement("div");
|
|
var right = document.createElement("div");
|
|
var left = document.createElement("div");
|
|
var down = document.createElement("div");
|
|
var up = document.createElement("div");
|
|
|
|
iconGrid.appendChild(fullscreen);
|
|
//iconGrid.appendChild(download);
|
|
iconGrid.appendChild(capture);
|
|
iconGrid.appendChild(view);
|
|
iconGrid.appendChild(logo);
|
|
iconGrid.appendChild(info);
|
|
iconGrid.appendChild(rotator);
|
|
|
|
// Append to container
|
|
if (this.options.viewer.notappend) {//IMPROVED not append a new canvas put in same
|
|
$(this.container).html(this.__viewer);
|
|
this.__viewer.appendChild(iconGrid);
|
|
this.__viewer.appendChild(progress);
|
|
} else {
|
|
this.container.appendChild(this.__viewer);
|
|
this.__viewer.appendChild(iconGrid);
|
|
this.__viewer.appendChild(progress);
|
|
}
|
|
this.adaptViewerTheme();
|
|
}
|
|
};
|
|
|
|
// Set viewer theme
|
|
Madeleine.prototype.adaptViewerTheme = function() {
|
|
var theme = arguments.length == 0 ? this.options.viewer.theme : arguments[0];
|
|
|
|
// Adapt theme
|
|
switch (theme) {
|
|
case "dark":
|
|
this.__viewer.style.background = "#000000";
|
|
this.options.objectColor = "FFD300";
|
|
break;
|
|
case "lime":
|
|
this.__viewer.style.cssText += this.generateGradation({dark: "2B2B2B"});
|
|
this.options.objectColor = "D4FF00"; // [212, 255, 0];
|
|
break;
|
|
case "rose":
|
|
this.__viewer.style.cssText += this.generateGradation({bright: "369075"});
|
|
this.options.objectColor = "C94C66"; // [201, 76, 102];
|
|
break;
|
|
case "lego":
|
|
this.__viewer.style.cssText += this.generateGradation({bright: "FFA400"});
|
|
this.options.objectColor = "00A08C"; // [0, 160, 140];
|
|
break;
|
|
case "toxic":
|
|
this.__viewer.style.cssText += this.generateGradation({bright: "FFEE4D"});
|
|
this.options.objectColor = "5254CB"; // [82, 84, 203];
|
|
break;
|
|
case "cobalt":
|
|
this.__viewer.style.cssText += this.generateGradation({bright: "FFC200"});
|
|
this.options.objectColor = "0C6BC0"; // [12, 107, 192];
|
|
break;
|
|
case "light":
|
|
this.__viewer.style.cssText += this.generateGradation({bright: "FFFFFF"});
|
|
this.options.objectColor = "F00842";
|
|
break;
|
|
case "soft":
|
|
this.__viewer.style.cssText += this.generateGradation({dark: "0F0F0F", bright: "4D4D4D", pos1: "0", pos2: "60"});
|
|
this.options.objectColor = OBJECT_COLOR;
|
|
break;
|
|
default:
|
|
this.__viewer.style.background = this.makeHexString(options.backgroundColor || OBJECT_BACKGROUND);
|
|
this.options.objectColor = options.objectColor || OBJECT_COLOR;
|
|
break;
|
|
}
|
|
|
|
// If object exists, paint color on it.
|
|
this.__object && this.setObjectColor();
|
|
};
|
|
|
|
// Set canvas background color
|
|
Madeleine.prototype.setBackgroundColor = function(code) {
|
|
var code = arguments.length == 3 ? [arguments[0], arguments[1], arguments[2]] : code;
|
|
var color = this.getHexString(code);
|
|
this.__viewer.style.background = this.makeHexString(color);
|
|
};
|
|
|
|
// Set object surface color
|
|
Madeleine.prototype.setObjectColor = function() {
|
|
var color = arguments.length != 0 ? arguments : this.options.objectColor;
|
|
this.__object.material.color.setHex(this.getHexColor(color));
|
|
};
|
|
|
|
// Generate gradation css
|
|
Madeleine.prototype.generateGradation = function(colors) {
|
|
var pos1, pos2, darker, brighter, cssText;
|
|
|
|
cssText = "background: BRIGHT;" +
|
|
"background: -moz-radial-gradient(center, ellipse cover, BRIGHT POS1%, DARK POS2%);" +
|
|
"background: -webkit-gradient(radial, center center, 0px, center center, POS2%, color-stop(POS1%,BRIGHT), color-stop(POS2%,DARK))" +
|
|
"background: -webkit-radial-gradient(center, ellipse cover, BRIGHT POS1%,DARK POS2%);" +
|
|
"background: -o-radial-gradient(center, ellipse cover, BRIGHT POS1%, DARK POS2%);" +
|
|
"background: -ms-radial-gradient(center, ellipse cover, BRIGHT POS1%, DARK POS2%);" +
|
|
"background: radial-gradient(ellipse at center, BRIGHT POS1%, DARK POS2%);" +
|
|
"filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='BRIGHT', endColorstr='DARK',GradientType=1)";
|
|
|
|
if (colors.dark) {
|
|
darker = this.getHexString(colors.dark);
|
|
brighter = this.getHexString(colors.bright ? colors.bright : this.adjustBrightness(darker));
|
|
} else {
|
|
brighter = this.getHexString(colors.bright);
|
|
darker = this.getHexString(this.adjustBrightness(brighter));
|
|
}
|
|
|
|
pos1 = colors.pos1 ? colors.pos1 : 27;
|
|
pos2 = colors.pos2 ? colors.pos2 : 100;
|
|
|
|
return cssText.replace(/BRIGHT/g, brighter).replace(/DARK/g, darker).replace(/POS1/g, pos1).replace(/POS2/g, pos2);
|
|
};
|
|
|
|
// Get Hex color (0xXXXXXX format)
|
|
Madeleine.prototype.getHexColor = function() {
|
|
var code = arguments.length == 3 ? [arguments[0], arguments[1], arguments[2]] : arguments[0];
|
|
var color = this.getHexString(code);
|
|
return parseInt(color.replace(/\#/g, ''), 16);
|
|
};
|
|
|
|
// Get Hex-style string (#XXXXXX format)
|
|
Madeleine.prototype.getHexString = function(code) {
|
|
if (typeof code == "string") return this.makeHexString(code);
|
|
else if (typeof code == "object") return this.rgbToHex(code);
|
|
};
|
|
|
|
// Strip # from Hex-style string
|
|
Madeleine.prototype.cutHexString = function(code) {
|
|
return code.charAt(0) == "#" ? code.substring(1) : code;
|
|
};
|
|
|
|
// Prepend # to hex string
|
|
Madeleine.prototype.makeHexString = function(code) {
|
|
var color = code.length == 3 ? code.replace(/(.)/g, '$1$1') : code;
|
|
return color.charAt(0) != "#" ? "#" + color : color;
|
|
};
|
|
|
|
// Convert RGB to Hex
|
|
Madeleine.prototype.rgbToHex = function(code) {
|
|
var i, color, hex = "#";
|
|
for (i = 0; i < code.length; i++) {
|
|
color = code[i].toString(16);
|
|
hex += (color.length == 1 ? "0" + color : color);
|
|
}
|
|
return hex;
|
|
};
|
|
|
|
// Convert Hex to RGB
|
|
Madeleine.prototype.hexToRgb = function(code) {
|
|
var dec = this.cutHexString(code).toString(16);
|
|
return [parseInt(dec.substring(0, 2), 16),
|
|
parseInt(dec.substring(2, 4), 16),
|
|
parseInt(dec.substring(4, 6), 16)];
|
|
};
|
|
|
|
// Get brighter or darker color from input color
|
|
// Brightness is automatically set according to its intensity.
|
|
Madeleine.prototype.adjustBrightness = function(code) {
|
|
var adjustedR, adjustedG, adjustedB;
|
|
var intensity, color, rgb, r, g, b;
|
|
var darkFactor = 30, brightFactor = 20;
|
|
|
|
// Get color and RGB
|
|
color = this.cutHexString(code);
|
|
rgb = this.hexToRgb(color);
|
|
|
|
r = rgb[0];
|
|
g = rgb[1];
|
|
b = rgb[2];
|
|
|
|
// Get grayscale intensity
|
|
intensity = Math.sqrt(r*r + g*g + b*b) / 255 * 100;
|
|
|
|
// New color
|
|
adjustedR = intensity > 40 ? (0|(1<<8) + r * (1 - darkFactor / 100)) : (0|(1<<8) + r + (256 - r) * brightFactor / 100);
|
|
adjustedG = intensity > 40 ? (0|(1<<8) + g * (1 - darkFactor / 100)) : (0|(1<<8) + g + (256 - g) * brightFactor / 100);
|
|
adjustedB = intensity > 40 ? (0|(1<<8) + b * (1 - darkFactor / 100)) : (0|(1<<8) + b + (256 - b) * brightFactor / 100);
|
|
|
|
return (adjustedR.toString(16)).substr(1) +
|
|
(adjustedG.toString(16)).substr(1) +
|
|
(adjustedB.toString(16)).substr(1);
|
|
};
|
|
|
|
// Add new background worker
|
|
Madeleine.prototype.run = function(path, luggage, onload) {
|
|
var progressBar = document.getElementById("progressBar-"+this.__uniqueID);
|
|
var worker = new WorkerFacade(path);
|
|
var scope = this;
|
|
|
|
worker.postMessage(luggage);
|
|
worker.onmessage = function(event) {
|
|
var result = event.data;
|
|
switch (result.type) {
|
|
case "convert-progress":
|
|
// console.log("MADELEINE[LOG] Background converting progress: " + result.data + "%");
|
|
break;
|
|
case "convert":
|
|
if (CONVERT_TO_BINARY) scope.run(scope.relPath + "lib/MadeleineConverter.js", result.data, function(result) { scope.__converted = result });
|
|
break;
|
|
case "progress":
|
|
progressBar.style.width = (scope.__width * result.data / 100) + "px";
|
|
if (result.data == 100) {
|
|
progressBar.style["-webkit-opacity"] = 0;
|
|
progressBar.style["-moz-opacity"] = 0;
|
|
progressBar.style["opacity"] = 0;
|
|
};
|
|
// console.log("MADELEINE[LOG] Background work progress: " + result.data + "%");
|
|
break;
|
|
case "message":
|
|
console.log("MADELEINE[LOG] Background work message: " + result.data);
|
|
break;
|
|
case "error":
|
|
console.log("MADELEINE[ERR] Background work error: " + result.data);
|
|
break;
|
|
case "info":
|
|
scope.__info[result.prop] = result.data;
|
|
if (result.prop == "size") {
|
|
var infoBox = document.getElementById("model-info-" + scope.__uniqueID);
|
|
infoBox.innerHTML += " (" +result.data + ")";
|
|
}
|
|
break;
|
|
case "data":
|
|
scope["__" + result.prop] = result.data;
|
|
break;
|
|
case "done":
|
|
onload(result.data);
|
|
break;
|
|
default:
|
|
// Do nothing
|
|
break;
|
|
}
|
|
};
|
|
};
|
|
|
|
// Start animation
|
|
Madeleine.prototype.startAnimation = function() {
|
|
if (this.__rotatable) this.__rotating = true;
|
|
this.interact(this);
|
|
};
|
|
|
|
// Stop animation
|
|
Madeleine.prototype.stopAnimation = function() {
|
|
this.__rotating = false;
|
|
};
|
|
|
|
// Start rotating object
|
|
Madeleine.prototype.startRotation = function() {
|
|
this.options.rotateSensitivity = 0.005;
|
|
this.__rotating = true;
|
|
};
|
|
|
|
// Stop rotating object
|
|
Madeleine.prototype.stopRotation = function() {
|
|
this.__rotating = false;
|
|
};
|
|
|
|
// Enable user interaction
|
|
Madeleine.prototype.interact = function(scope) {
|
|
requestAnimationFrame(function(){scope.interact(scope)});
|
|
scope.options.showStatus && scope.__status.update();
|
|
scope.render();
|
|
};
|
|
|
|
// Perform actual rendering object
|
|
Madeleine.prototype.render = function() {
|
|
this.__rotating && this.rotateObjectZ(-1);
|
|
this.__renderer.render(this.__scene, this.__camera);
|
|
};
|
|
|
|
// Move object in xy //IMPROVED
|
|
let oldX = 0, oldY = 0;
|
|
Madeleine.prototype.moveObject = function ($event, delta) {
|
|
if (this.__movable) {
|
|
let directionX = 0, directionY = 0, diffX = 0, diffY = 0;
|
|
let offsetmove = options.MOVE_FACTOR || 3;
|
|
|
|
if ($event.pageX < oldX) {
|
|
directionX = "left"
|
|
diffX = oldX - $event.pageX;
|
|
} else if ($event.pageX > oldX) {
|
|
directionX = "right"
|
|
diffX = $event.pageX - oldX;
|
|
}
|
|
|
|
if ($event.pageY < oldY) {
|
|
directionY = "top"
|
|
diffY = oldY - $event.pageY;
|
|
} else if ($event.pageY > oldY) {
|
|
directionY = "bottom";
|
|
diffY = $event.pageY - oldY;
|
|
}
|
|
|
|
oldX = $event.pageX;
|
|
oldY = $event.pageY;
|
|
|
|
if (directionX == "left") this.__object.position.x -= offsetmove;
|
|
if (directionX == "right") this.__object.position.x += offsetmove;
|
|
|
|
if (directionY == "bottom") this.__object.position.y -= offsetmove;
|
|
if (directionY == "top") this.__object.position.y += offsetmove;
|
|
}
|
|
};
|
|
|
|
// Rotate object in X direction
|
|
Madeleine.prototype.rotateObjectX = function(delta) {
|
|
if (this.__movable) this.__object.rotation.x -= delta * this.options.rotateSensitivity;
|
|
};
|
|
|
|
// Rotate object in Y direction
|
|
Madeleine.prototype.rotateObjectY = function(delta) {
|
|
if (this.__movable) this.__object.rotation.y -= delta * this.options.rotateSensitivity;
|
|
};
|
|
|
|
// Rotate object in Z direction
|
|
Madeleine.prototype.rotateObjectZ = function(delta) {
|
|
if (this.__movable) this.__object.rotation.z -= delta * this.options.rotateSensitivity;
|
|
};
|
|
|
|
// Make animation faster as much as 'delta'
|
|
Madeleine.prototype.animationFaster = function(delta) {
|
|
this.options.rotateSensitivity *= (delta ? delta : 2);
|
|
};
|
|
|
|
// Make animation slower as much as 'delta'
|
|
Madeleine.prototype.animationSlower = function(delta) {
|
|
this.options.rotateSensitivity /= (delta ? delta : 2);
|
|
};
|
|
|
|
// Disable Madeline Viewer to be zoomed by mouse scroll
|
|
Madeleine.prototype.disableZoomAsMouseScroll = function() {
|
|
var target = this.container;
|
|
// remove event handler
|
|
Lily.remove(this.container, "mousewheel", this.scrollHandler);
|
|
Lily.remove(this.container, "DOMMouseScroll", this.scrollHandler);
|
|
Lily.remove(this.container, "gesturechange", this.gestureHandler);
|
|
};
|
|
|
|
// Enable Madeline Viewer to be zoomed by mouse scroll
|
|
Madeleine.prototype.enableZoomAsMouseScroll = function() {
|
|
if (!this.__zoomable) return;
|
|
// attach event handler
|
|
Lily.bind(this.container, "mousewheel", this.scrollHandler);
|
|
Lily.bind(this.container, "DOMMouseScroll", this.scrollHandler);
|
|
Lily.bind(this.container, "gesturechange", this.gestureHandler);
|
|
};
|
|
|
|
// Enable Madeline Viewer to be controlled by mouse movement
|
|
Madeleine.prototype.enableUserInteraction = function() {
|
|
// block right click action
|
|
Lily.bind(this.container, "contextmenu", this.rightClickHandler);
|
|
if (!this.__movable) return;
|
|
// attach event handler
|
|
Lily.bind(this.container, "mousedown", this.mouseDownHandler);
|
|
Lily.bind(this.container, "mousemove", this.mouseMoveHandler);
|
|
Lily.bind(this.container, "mouseup", this.mouseUpHandler);
|
|
// mobile support
|
|
Lily.bind(this.container, "touchstart", this.touchStartHandler);
|
|
Lily.bind(this.container, "touchmove", this.touchMoveHandler);
|
|
Lily.bind(this.container, "touchend", this.touchEndHandler);
|
|
};
|
|
|
|
// Disable Madeline Viewer to be controlled by mouse movement
|
|
Madeleine.prototype.disableUserInteraction = function() {
|
|
if (!this.__movable) return;
|
|
// attach event handler
|
|
Lily.remove(this.container, "mousedown", this.mouseDownHandler);
|
|
Lily.remove(this.container, "mousemove", this.mouseMoveHandler);
|
|
Lily.remove(this.container, "mouseup", this.mouseUpHandler);
|
|
// mobile support
|
|
Lily.remove(this.container, "touchstart", this.touchStartHandler);
|
|
Lily.remove(this.container, "touchmove", this.touchMoveHandler);
|
|
Lily.remove(this.container, "touchend", this.touchEndHandler);
|
|
};
|
|
|
|
// Enable first-person viewer mode
|
|
Madeleine.prototype.enableFirstPersonViewerMode = function() {
|
|
this.disableUserInteraction();
|
|
Lily.bind(document, "keypress", this.firstPersonHandler);
|
|
Lily.bind(document, "keydown", this.firstPersonHandler);
|
|
this.__firstPerson = true;
|
|
this.__rotating = false;
|
|
this.__zoomable = false;
|
|
this.__movable = false;
|
|
};
|
|
|
|
// Disable first-person viewer mode
|
|
Madeleine.prototype.disableFirstPersonViewerMode = function() {
|
|
this.enableUserInteraction();
|
|
this.__firstPerson = false;
|
|
this.__rotating = true;
|
|
this.__zoomable = true;
|
|
this.__movable = true;
|
|
};
|
|
|
|
// Adjust camera zoom in/out
|
|
Madeleine.prototype.cameraZoom = function() {
|
|
if (!this.__zoomable) return;
|
|
else {
|
|
var delta, type;
|
|
if (arguments.length == 1) {
|
|
if (typeof arguments[0] == "string") {
|
|
delta = this.options.zoomSensitivity;
|
|
type = arguments[0];
|
|
} else {
|
|
delta = arguments[0];
|
|
type = null;
|
|
}
|
|
} else if (arguments.length == 2) {
|
|
delta = arguments[0];
|
|
type = arguments[1];
|
|
}
|
|
if (type == "in") this.__camera.position.z += delta;
|
|
else this.__camera.position.z -= delta;
|
|
this.__camera.updateProjectionMatrix();
|
|
}
|
|
};
|
|
|
|
// Show animation status
|
|
Madeleine.prototype.logStatus = function(target) {
|
|
if (!this.options.showStatus) return;
|
|
this.__status = new Stats();
|
|
this.__status.domElement.style.position = 'absolute';
|
|
this.__status.domElement.style.top = '0px';
|
|
this.__viewer.appendChild(this.__status.domElement);
|
|
};
|
|
|
|
// Show animation status
|
|
Madeleine.prototype.stopLogStatus = function(target) {
|
|
this.options.showStatus = false;
|
|
this.__status = null;
|
|
};
|
|
|
|
// Adjust material, camera settings and sensitivities to have proper values
|
|
Madeleine.prototype.adjustUserConfiguration = function() {
|
|
this.adjustRotateSensitivity();
|
|
this.adjustZoomSensitivity();
|
|
this.adjustFocalPoint();
|
|
this.checkMaterial();
|
|
};
|
|
|
|
// Check material
|
|
Madeleine.prototype.checkMaterial = function() {
|
|
if (this.options.material !== "skin" || this.options.material !== "wire") {
|
|
this.options.material !== "skin";
|
|
}
|
|
};
|
|
|
|
// Adjust camera settings to fit into proper range
|
|
Madeleine.prototype.adjustFocalPoint = function() {
|
|
var sight = this.options.camera.sight;
|
|
var near = this.options.camera.near;
|
|
var far = this.options.camera.far;
|
|
|
|
if (sight && typeof sight === "number" && 75 <= sight && sight <= 1000) return;
|
|
else this.options.camera.sight = CAMERA_SIGHT;
|
|
if (near && typeof near === "number" && 0 <= near && near <= 1000) return;
|
|
else this.options.camera.near = CAMERA_NEARFIELD;
|
|
if (far && typeof far === "number" && 5000 <= far && far <= 100000) return;
|
|
else this.options.camera.far = CAMERA_FARFIELD;
|
|
};
|
|
|
|
// Adjust zoom sensitivity to fit into proper range
|
|
Madeleine.prototype.adjustZoomSensitivity = function() {
|
|
var intensity = this.options.zoomSensitivity;
|
|
var visibleField = this.options.camera.far - this.options.camera.near;
|
|
|
|
if (intensity && typeof intensity === "number" && 0 < intensity && intensity <= visibleField/1000) return;
|
|
else this.options.zoomSensitivity = visibleField/1000;
|
|
};
|
|
|
|
// Adjust rotate sensitivity to fit into proper range
|
|
Madeleine.prototype.adjustRotateSensitivity = function(intensity) {
|
|
var intensity = this.options.rotateSensitivity;
|
|
|
|
if (intensity && typeof intensity === "number" && 0 < intensity && intensity < 0.05) return;
|
|
else this.options.rotateSensitivity = USER_ROTATE_SENSITIVITY;
|
|
};
|
|
|
|
// Add directional light
|
|
Madeleine.prototype.addShadowedLight = function(x, y, z, color, intensity) {
|
|
var directionalLight = new THREE.DirectionalLight(color, intensity);
|
|
var d = 1;
|
|
|
|
directionalLight.position.set(x, y, z);
|
|
this.__scene.add(directionalLight);
|
|
|
|
// directionalLight.shadowCameraVisible = true;
|
|
directionalLight.castShadow = true;
|
|
directionalLight.shadowCameraTop = d;
|
|
directionalLight.shadowCameraLeft = -d;
|
|
directionalLight.shadowCameraRight = d;
|
|
directionalLight.shadowCameraBottom = -d;
|
|
|
|
directionalLight.shadowCameraNear = 1;
|
|
directionalLight.shadowCameraFar = 4;
|
|
|
|
directionalLight.shadowMapWidth = 1024;
|
|
directionalLight.shadowMapHeight = 1024;
|
|
|
|
directionalLight.shadowBias = -0.005;
|
|
directionalLight.shadowDarkness = 0.15;
|
|
};
|
|
|
|
//Set position
|
|
Madeleine.prototype.setXY = function (X, Y) {//IMPROVED
|
|
this.__object.position.setY(Y);
|
|
this.__object.position.setX(X);
|
|
|
|
}
|
|
|
|
return new Madeleine(options);
|
|
|
|
};
|
|
|
|
// Lily helps madeleine.
|
|
window.Lily = (function() {
|
|
|
|
// Initialize
|
|
var Lily = function() {
|
|
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
|
this.sisters = [];
|
|
};
|
|
|
|
// Attach Madeleine to file input
|
|
Lily.prototype.ready = function(options) {
|
|
// Check option fields
|
|
if (!options.file || !options.target) {
|
|
console.log("MADELEINE[ERR] Option must contain target and file.");
|
|
return null;
|
|
}
|
|
|
|
var target = document.getElementById(options.file);
|
|
if (!target) {
|
|
console.log("MADELEINE[ERR] Please provide valid input file element.");
|
|
return null;
|
|
}
|
|
// Attach file upload event handler
|
|
if (target.tagName.toLowerCase() == "input" && target.type.toLowerCase() == "file") this.onFileInputChange(target, options);
|
|
|
|
// (Optional) Attach drag-and-drop event handler
|
|
if (options.dropzone) {
|
|
var dragOverHandler = function(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = "copy";
|
|
};
|
|
var fileDropHandler = function(e) {
|
|
var i, files = e.dataTransfer.files;
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
for (i = 0; i < files.length; i++) {
|
|
// create Madeleine for each file
|
|
var _options = window.Lily.extend({}, options, {type: "upload", data: files[i]});
|
|
var madeleine = new Madeleine(_options);
|
|
}
|
|
};
|
|
|
|
// Attach event handler
|
|
target = document.getElementById(options.dropzone);
|
|
this.bind(target, "dragover", dragOverHandler);
|
|
this.bind(target, "drop", fileDropHandler);
|
|
}
|
|
};
|
|
|
|
// Remove attached event handler from element
|
|
Lily.prototype.remove = function(elem, event, doThis) {
|
|
var attach = (elem.removeEventListener ? "removeEventListener" : (elem.detachEvent ? "detachEvent" : ""));
|
|
var onEvent = (elem.removeEventListener ? event : "on" + event);
|
|
|
|
if (attach == "") elem[onEvent] = doThis;
|
|
else elem[attach](onEvent, doThis, false);
|
|
};
|
|
|
|
// Attach new event handler to element
|
|
Lily.prototype.bind = function(elem, event, doThis) {
|
|
var attach = (elem.addEventListener ? "addEventListener" : (elem.attachEvent ? "attachEvent" : ""));
|
|
var onEvent = (elem.addEventListener ? event : "on" + event);
|
|
|
|
if (attach == "") elem[onEvent] = doThis;
|
|
else elem[attach](onEvent, doThis, false);
|
|
};
|
|
|
|
// jQuery source of extend function
|
|
// Reference: https://github.com/jquery/jquery/blob/master/src/core.js
|
|
Lily.prototype.extend = function() {
|
|
var options, name, src, copy, copyIsArray, clone,
|
|
target = arguments[0] || {},
|
|
i = 1,
|
|
length = arguments.length,
|
|
deep = false,
|
|
toString = Object.prototype.toString,
|
|
hasOwn = Object.prototype.hasOwnProperty,
|
|
push = Array.prototype.push,
|
|
slice = Array.prototype.slice,
|
|
trim = String.prototype.trim,
|
|
indexOf = Array.prototype.indexOf,
|
|
class2type = {"[object Boolean]": "boolean","[object Number]": "number","[object String]": "string","[object Function]": "function",
|
|
"[object Array]": "array","[object Date]": "date","[object RegExp]": "regexp","[object Object]": "object"},
|
|
helper = {
|
|
isFunction: function (obj) {return helper.type(obj) === "function"},
|
|
isArray: Array.isArray || function (obj) {return helper.type(obj) === "array"},
|
|
isWindow: function (obj) {return obj != null && obj == obj.window},
|
|
isNumeric: function (obj) {return !isNaN(parseFloat(obj)) && isFinite(obj)},
|
|
type: function (obj) {return obj == null ? String(obj) : class2type[toString.call(obj)] || "object"},
|
|
isPlainObject: function (obj) {if (!obj || helper.type(obj) !== "object" || obj.nodeType) {return false}
|
|
try { if (obj.constructor && !hasOwn.call(obj, "constructor") && !hasOwn.call(obj.constructor.prototype, "isPrototypeOf")) {return false}} catch (e) {return false}
|
|
var key; for (key in obj) {}; return key === undefined || hasOwn.call(obj, key)
|
|
}
|
|
};
|
|
// Handle a deep copy situation
|
|
if ( typeof target === "boolean" ) {
|
|
deep = target;
|
|
// Skip the boolean and the target
|
|
target = arguments[ i ] || {};
|
|
i++;
|
|
}
|
|
// Handle case when target is a string or something (possible in deep copy)
|
|
if ( typeof target !== "object" && !helper.isFunction(target) ) {
|
|
target = {};
|
|
}
|
|
// Extend helper itself if only one argument is passed
|
|
if ( i === length ) {
|
|
target = this;
|
|
i--;
|
|
}
|
|
for ( ; i < length; i++ ) {
|
|
// Only deal with non-null/undefined values
|
|
if ( (options = arguments[ i ]) != null ) {
|
|
// Extend the base object
|
|
for ( name in options ) {
|
|
src = target[ name ];
|
|
copy = options[ name ];
|
|
// Prevent never-ending loop
|
|
if ( target === copy ) { continue; }
|
|
// Recurse if we're merging plain objects or arrays
|
|
if ( deep && copy && ( helper.isPlainObject(copy) ||
|
|
(copyIsArray = helper.isArray(copy)) ) ) {
|
|
if ( copyIsArray ) {
|
|
copyIsArray = false;
|
|
clone = src && helper.isArray(src) ? src : [];
|
|
} else { clone = src && helper.isPlainObject(src) ? src : {}; }
|
|
// Never move original objects, clone them
|
|
target[ name ] = this.extend( deep, clone, copy );
|
|
// Don't bring in undefined values
|
|
} else if ( copy !== undefined ) {
|
|
target[ name ] = copy;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Return the modified object
|
|
return target;
|
|
};
|
|
|
|
// When user uploads files, call Madeleine immediately for each stl file.
|
|
Lily.prototype.onFileInputChange = function(input, options) {
|
|
// event handler
|
|
var fileInputChangeHandler = function() {
|
|
var i, files = this.files;
|
|
if (files.length) {
|
|
for (i = 0; i < files.length; i++) {
|
|
//IMPROVED - Only accepts stl files and invoke callbackerror and throws new error
|
|
if (files[i].type != 'stl' && files[i].name.indexOf("stl") == -1) {
|
|
if (options.callbackerror) options.callbackerror({ code: 1001, msg: "Invalid File" });
|
|
throw new Error("Invalid Format File. Only Accepts STL!");
|
|
}
|
|
// create Madeleine for each file
|
|
var _options = window.Lily.extend({}, options, {type: "upload", data: files[i]});
|
|
var madeleine = new Madeleine(_options);
|
|
// hide file input element
|
|
input.style.display = "none";
|
|
}
|
|
}
|
|
};
|
|
|
|
// attach event handler
|
|
this.bind(input, "change", fileInputChangeHandler);
|
|
};
|
|
|
|
// Put madeleine to madeleine list
|
|
Lily.prototype.push = function(madeleine) {
|
|
this.sisters.push(madeleine);
|
|
return this.sisters.length-1;
|
|
};
|
|
|
|
// Get madeleine of id 'index'
|
|
Lily.prototype.get = function(index) {
|
|
return this.sisters[index];
|
|
};
|
|
|
|
return new Lily();
|
|
|
|
})();
|
|
|
|
})();
|
|
|
|
/* A facade for the Web Worker API that fakes it in case it's missing.
|
|
* Good when web workers aren't supported in the browser, but it's still fast enough,
|
|
* so execution doesn't hang too badly (e.g. Opera 10.5).
|
|
* By Stefan Wehrmeyer, licensed under MIT
|
|
*/
|
|
WorkerFacade = null;
|
|
if(!!window.Worker){
|
|
WorkerFacade = (function(){
|
|
return function(path){
|
|
return new window.Worker(path);
|
|
};
|
|
}());
|
|
} else {
|
|
WorkerFacade = (function(){
|
|
var workers = {}, masters = {}, loaded = false;
|
|
var that = function(path){
|
|
var theworker = {}, loaded = false, callings = [];
|
|
theworker.postToWorkerFunction = function(args){
|
|
try{
|
|
workers[path]({"data":args});
|
|
}catch(err){
|
|
theworker.onerror(err);
|
|
}
|
|
};
|
|
theworker.postMessage = function(params){
|
|
if(!loaded){
|
|
callings.push(params);
|
|
return;
|
|
}
|
|
theworker.postToWorkerFunction(params);
|
|
};
|
|
masters[path] = theworker;
|
|
var scr = document.createElement("SCRIPT");
|
|
scr.src = path;
|
|
scr.type = "text/javascript";
|
|
scr.onload = function(){
|
|
loaded = true;
|
|
while(callings.length > 0){
|
|
theworker.postToWorkerFunction(callings[0]);
|
|
callings.shift();
|
|
}
|
|
};
|
|
document.body.appendChild(scr);
|
|
|
|
var binaryscr = document.createElement("SCRIPT");
|
|
binaryscr.src = thingiurlbase + '/binaryReader.js';
|
|
binaryscr.type = "text/javascript";
|
|
document.body.appendChild(binaryscr);
|
|
|
|
return theworker;
|
|
};
|
|
that.fake = true;
|
|
that.add = function(pth, worker){
|
|
workers[pth] = worker;
|
|
return function(param){
|
|
masters[pth].onmessage({"data": param});
|
|
};
|
|
};
|
|
that.toString = function(){
|
|
return "FakeWorker('"+path+"')";
|
|
};
|
|
return that;
|
|
}());
|
|
};
|