„src/Madeleine.js“ ändern
Adjustments to have full-width rendering within Gitea
This commit is contained in:
Mario Voigt
parent
9386117d77
commit
159553c025
131
src/Madeleine.js
131
src/Madeleine.js
|
|
@ -2,15 +2,15 @@
|
|||
* @author Junho Jin[junho.jin@kaist.ac.kr] | https://github.com/JinJunho
|
||||
* @version 1.0.0
|
||||
*
|
||||
* [Project] Madeleine.js, Pure JavaScript STL Parser & Renderer.
|
||||
* [Project] Madeleine.js, Pure JavaScript STL Parser & Renderer.
|
||||
*
|
||||
* [Description] Madeleine.js constists of three part: DataReader, Madeleine and Lily.
|
||||
* [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
|
||||
* 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
|
||||
* 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!
|
||||
*/
|
||||
|
|
@ -27,8 +27,9 @@
|
|||
|
||||
var OBJECT_MATERIAL = "matt";
|
||||
var OBJECT_STATUS = false;
|
||||
var OBJECT_BACKGROUND = "DADADA";
|
||||
var OBJECT_COLOR = "FF9900";
|
||||
//var OBJECT_BACKGROUND = "DADADA";
|
||||
var OBJECT_BACKGROUND = "2E323E";
|
||||
var OBJECT_COLOR = "00A0E1";
|
||||
|
||||
var CAMERA_SIGHT = 45;
|
||||
var CAMERA_NEARFIELD = 1;
|
||||
|
|
@ -37,14 +38,14 @@
|
|||
var VIEWER_THEME = "default";
|
||||
var VIEWER_PREFIX = "mad-";
|
||||
var VIEWER_CREATE = true;
|
||||
var VIEWER_HEIGHT = 400;
|
||||
var VIEWER_WIDTH = 640;
|
||||
var VIEWER_HEIGHT = 625; //400
|
||||
var VIEWER_WIDTH = 1000; //640
|
||||
|
||||
var USER_ROTATE_SENSITIVITY = 0.005;
|
||||
var USER_ZOOM_SENSITIVITY = 100;
|
||||
var SCROLL_FACTOR = 10;
|
||||
|
||||
// Necessary option check
|
||||
|
||||
// Necessary option check
|
||||
if (!document.getElementById(options.target)) {
|
||||
console.log("MADELEINE[ERR] Target must be a valid DOM Element.");
|
||||
return null;
|
||||
|
|
@ -97,7 +98,7 @@
|
|||
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
|
||||
// User configuration
|
||||
this.options = Lily.extend(true, {}, { // Default option
|
||||
material : OBJECT_MATERIAL,
|
||||
showStatus : OBJECT_STATUS,
|
||||
|
|
@ -148,7 +149,7 @@
|
|||
// 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);
|
||||
|
|
@ -220,19 +221,20 @@
|
|||
|
||||
// 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
|
||||
|
||||
// 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) {
|
||||
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 {
|
||||
|
|
@ -251,7 +253,7 @@
|
|||
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);
|
||||
|
|
@ -280,7 +282,7 @@
|
|||
// Wait until data is fully loaded
|
||||
var queued = (function(scope) {
|
||||
return function() {
|
||||
// When data ready, parse and render it.
|
||||
// When data ready, parse and render it.
|
||||
scope.run(scope.relPath + "lib/MadeleineLoader.js", {
|
||||
arrbuf: scope.__arrayBuffer,
|
||||
rawtext: scope.__rawText
|
||||
|
|
@ -327,12 +329,12 @@
|
|||
|
||||
//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
|
||||
// Check input type and get STL Binary data
|
||||
switch (this.type) {
|
||||
case "upload":
|
||||
this.getDataFromBlob(this.data, queued);break;
|
||||
|
|
@ -376,7 +378,7 @@
|
|||
}
|
||||
};
|
||||
|
||||
// Get arrayBuffer from external file
|
||||
// Get arrayBuffer from external file
|
||||
Madeleine.prototype.getDataFromUrl = function(url, queuedWork, type) {
|
||||
var scope = this;
|
||||
var getArrayBuffer = function() {
|
||||
|
|
@ -495,7 +497,7 @@
|
|||
new THREE.WebGLRenderer({
|
||||
preserveDrawingBuffer: true,
|
||||
alpha: true
|
||||
}) : new THREE.CanvasRenderer();
|
||||
}) : new THREE.CanvasRenderer();
|
||||
// attach canvas to viewer
|
||||
this.__canvas = this.__renderer.domElement;
|
||||
this.__viewer.appendChild(this.__canvas);
|
||||
|
|
@ -517,12 +519,14 @@
|
|||
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.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["max-width"] = "100%";
|
||||
//this.__viewer.style["min-width"] = this.__width+"px";
|
||||
this.__viewer.style["min-width"] = "50%";
|
||||
this.__viewer.style.height = this.__height;
|
||||
this.__viewer.style.width = this.__width;
|
||||
|
||||
|
|
@ -550,7 +554,8 @@
|
|||
// 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.style.cssText += "height:50px;width:"+this.__width+"px;top:0;overflow:hidden;";
|
||||
iconGrid.style.cssText += "height:50px;width:100%;top:0;overflow:hidden;";
|
||||
iconGrid.className += "box";
|
||||
|
||||
var logo = document.createElement("div");
|
||||
|
|
@ -579,7 +584,8 @@
|
|||
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 += "height:50px;width:"+this.__width+"px;top:0;overflow:hidden;";
|
||||
rotator.style.cssText += "height:50px;width:100%;top:0;overflow:hidden;";
|
||||
rotator.style.cssText += "margin-top:"+(this.__height-30)+"px;";
|
||||
|
||||
player.className += "icon-clickable pull-right icon-mad-stop";
|
||||
|
|
@ -596,7 +602,7 @@
|
|||
var left = document.createElement("div");
|
||||
var down = document.createElement("div");
|
||||
var up = document.createElement("div");
|
||||
|
||||
|
||||
iconGrid.appendChild(fullscreen);
|
||||
//iconGrid.appendChild(download);
|
||||
iconGrid.appendChild(capture);
|
||||
|
|
@ -626,7 +632,7 @@
|
|||
// Adapt theme
|
||||
switch (theme) {
|
||||
case "dark":
|
||||
this.__viewer.style.background = "#000000";
|
||||
this.__viewer.style.background = "#000000";
|
||||
this.options.objectColor = "FFD300";
|
||||
break;
|
||||
case "lime":
|
||||
|
|
@ -691,7 +697,7 @@
|
|||
"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)";
|
||||
"filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='BRIGHT', endColorstr='DARK',GradientType=1)";
|
||||
|
||||
if (colors.dark) {
|
||||
darker = this.getHexString(colors.dark);
|
||||
|
|
@ -711,7 +717,7 @@
|
|||
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);
|
||||
return parseInt(color.replace(/\#/g, ''), 16);
|
||||
};
|
||||
|
||||
// Get Hex-style string (#XXXXXX format)
|
||||
|
|
@ -777,7 +783,7 @@
|
|||
(adjustedB.toString(16)).substr(1);
|
||||
};
|
||||
|
||||
// Add new background worker
|
||||
// Add new background worker
|
||||
Madeleine.prototype.run = function(path, luggage, onload) {
|
||||
var progressBar = document.getElementById("progressBar-"+this.__uniqueID);
|
||||
var worker = new WorkerFacade(path);
|
||||
|
|
@ -794,7 +800,8 @@
|
|||
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";
|
||||
//progressBar.style.width = (scope.__width * result.data / 100) + "px";
|
||||
progressBar.style.width = (result.data) + "%";
|
||||
if (result.data == 100) {
|
||||
progressBar.style["-webkit-opacity"] = 0;
|
||||
progressBar.style["-moz-opacity"] = 0;
|
||||
|
|
@ -862,7 +869,7 @@
|
|||
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) {
|
||||
|
|
@ -938,9 +945,9 @@
|
|||
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
|
||||
// Enable Madeline Viewer to be controlled by mouse movement
|
||||
Madeleine.prototype.enableUserInteraction = function() {
|
||||
// block right click action
|
||||
Lily.bind(this.container, "contextmenu", this.rightClickHandler);
|
||||
|
|
@ -953,9 +960,9 @@
|
|||
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
|
||||
// Disable Madeline Viewer to be controlled by mouse movement
|
||||
Madeleine.prototype.disableUserInteraction = function() {
|
||||
if (!this.__movable) return;
|
||||
// attach event handler
|
||||
|
|
@ -966,9 +973,9 @@
|
|||
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
|
||||
// Enable first-person viewer mode
|
||||
Madeleine.prototype.enableFirstPersonViewerMode = function() {
|
||||
this.disableUserInteraction();
|
||||
Lily.bind(document, "keypress", this.firstPersonHandler);
|
||||
|
|
@ -977,18 +984,18 @@
|
|||
this.__rotating = false;
|
||||
this.__zoomable = false;
|
||||
this.__movable = false;
|
||||
};
|
||||
};
|
||||
|
||||
// Disable first-person viewer mode
|
||||
// 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
|
||||
// Adjust camera zoom in/out
|
||||
Madeleine.prototype.cameraZoom = function() {
|
||||
if (!this.__zoomable) return;
|
||||
else {
|
||||
|
|
@ -1026,7 +1033,7 @@
|
|||
this.__status = null;
|
||||
};
|
||||
|
||||
// Adjust material, camera settings and sensitivities to have proper values
|
||||
// Adjust material, camera settings and sensitivities to have proper values
|
||||
Madeleine.prototype.adjustUserConfiguration = function() {
|
||||
this.adjustRotateSensitivity();
|
||||
this.adjustZoomSensitivity();
|
||||
|
|
@ -1034,14 +1041,14 @@
|
|||
this.checkMaterial();
|
||||
};
|
||||
|
||||
// Check material
|
||||
// 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
|
||||
// Adjust camera settings to fit into proper range
|
||||
Madeleine.prototype.adjustFocalPoint = function() {
|
||||
var sight = this.options.camera.sight;
|
||||
var near = this.options.camera.near;
|
||||
|
|
@ -1055,7 +1062,7 @@
|
|||
else this.options.camera.far = CAMERA_FARFIELD;
|
||||
};
|
||||
|
||||
// Adjust zoom sensitivity to fit into proper range
|
||||
// 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;
|
||||
|
|
@ -1064,7 +1071,7 @@
|
|||
else this.options.zoomSensitivity = visibleField/1000;
|
||||
};
|
||||
|
||||
// Adjust rotate sensitivity to fit into proper range
|
||||
// Adjust rotate sensitivity to fit into proper range
|
||||
Madeleine.prototype.adjustRotateSensitivity = function(intensity) {
|
||||
var intensity = this.options.rotateSensitivity;
|
||||
|
||||
|
|
@ -1096,7 +1103,7 @@
|
|||
directionalLight.shadowBias = -0.005;
|
||||
directionalLight.shadowDarkness = 0.15;
|
||||
};
|
||||
|
||||
|
||||
//Set position
|
||||
Madeleine.prototype.setXY = function (X, Y) {//IMPROVED
|
||||
this.__object.position.setY(Y);
|
||||
|
|
@ -1188,7 +1195,7 @@
|
|||
hasOwn = Object.prototype.hasOwnProperty,
|
||||
push = Array.prototype.push,
|
||||
slice = Array.prototype.slice,
|
||||
trim = String.prototype.trim,
|
||||
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"},
|
||||
|
|
@ -1284,13 +1291,13 @@
|
|||
return this.sisters[index];
|
||||
};
|
||||
|
||||
return new Lily();
|
||||
return new Lily();
|
||||
|
||||
})();
|
||||
|
||||
})();
|
||||
|
||||
/* A facade for the Web Worker API that fakes it in case it's missing.
|
||||
/* 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
|
||||
|
|
@ -1333,12 +1340,12 @@ if(!!window.Worker){
|
|||
}
|
||||
};
|
||||
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue