Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add optional edge displaying and settings

Browse Source
This commit is contained in:
X-Ryl669 2021-04-23 17:27:19 +02:00
parent 96cdb07e84
commit 8a5782b8ec
7 changed files with 137 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
source/import/importer.js
View File

@ -184,6 +184,9 @@ OV.ImportSettings = class
constructor ()
{
this.defaultColor = new OV.Color (200, 200, 200);
this.edgesColor = new OV.Color (0, 0, 0);
this.showEdges = false;
this.edgesAngle = 15;
}
};

10
source/viewer/domviewer.js
View File

@ -74,7 +74,17 @@ OV.Init3DViewerElements = function ()
settings.defaultColor = color;
}
}
let edgeColor = element.getAttribute ('edge');
if (edgeColor) {
let color = OV.ParameterConverter.StringToColor (edgeColor);
if (color !== null) {
settings.showEdges = true;
settings.edgesColor = color;
}
}
viewer.UpdateSettings (settings);
loader.LoadFromUrlList (modelUrls, settings);
return {
element: element,

17
source/viewer/viewer.js
View File

@ -86,9 +86,17 @@ OV.Viewer = class
this.navigation = null;
this.upVector = null;
this.settings = {
animationSteps : 40
animationSteps : 40,
showEdges : false,
edgesAngle : 15,
edgesColor : new OV.Color (0, 0, 0),
};
}
UpdateSettings (settings)
{
this.settings = Object.assign ({ animationSteps: 40 }, settings);
}
Init (canvas)
{
@ -236,6 +244,11 @@ OV.Viewer = class
for (let i = 0; i < meshes.length; i++) {
let mesh = meshes[i];
this.scene.add (mesh);
if (this.settings.showEdges) {
let edges = new THREE.EdgesGeometry (mesh.geometry, this.settings.edgesAngle);
let lines = new THREE.LineSegments (edges, new THREE.LineBasicMaterial ( { color: '#' + OV.ColorToHexString (this.settings.edgesColor) }));
this.scene.add (lines);
}
}
this.Render ();
}
@ -351,7 +364,7 @@ OV.Viewer = class
{
for (let i = this.scene.children.length - 1; i >= 0; i--) {
let object = this.scene.children[i];
if (object.isMesh) {
if (object.isMesh || object.type === 'LineSegments') {
object.geometry.dispose ();
this.scene.remove (object);
}

52
website/assets/images/toolbar/settings.svg
View File

@ -1 +1,51 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xml:space="preserve"><path d="m14.5 17.5 3-3m-3-3 3 3m-5.5 3-3-3m3-3-3 3M1.5 3.4v5.7l5 3 5-3V3.4L6.5.5zm5 8.7V6.2m-5-2.8 5 2.8m0 0 5-2.8" fill="none" stroke="#263238" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 18 18"
xml:space="preserve"
version="1.1"
id="svg945"
sodipodi:docname="settings.svg"
inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)"><metadata
id="metadata951"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs949" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1126"
id="namedview947"
showgrid="false"
inkscape:zoom="14.29483"
inkscape:cx="4.3129907"
inkscape:cy="8.94775"
inkscape:window-x="0"
inkscape:window-y="41"
inkscape:window-maximized="1"
inkscape:current-layer="svg945"
inkscape:document-rotation="0" /><g
inkscape:label="Rendered Gears"
transform="matrix(0.51952386,0,0,0.51952386,9.0775891,9.0730541)"
id="g1220"><path
style="fill:none;stroke:#263238;stroke-width:1.92483941;stroke-miterlimit:4;stroke-dasharray:none;stroke-linejoin:round;stroke-linecap:round;stroke-opacity:1"
d="M 11.081632,-2.2249551 12.2936,-2.46829 l 0.1942,-0.01568 3.3769,1.21336 V 1.27061 L 12.4878,2.48397 12.2936,2.46829 11.081632,2.2249551 9.4091818,6.2626205 10.4383,6.94756 10.5866,7.07374 12.1165,10.3196 10.3196,12.1165 7.07374,10.5866 6.94756,10.4383 6.2626205,9.4091818 2.2249551,11.081632 2.46829,12.2936 2.48397,12.4878 1.27061,15.8647 H -1.27061 L -2.48397,12.4878 -2.46829,12.2936 -2.2249551,11.081632 -6.2626205,9.4091818 -6.94756,10.4383 l -0.12618,0.1483 -3.24586,1.5299 -1.7969,-1.7969 1.5299,-3.24586 0.1483,-0.12618 L -9.4091818,6.2626205 -11.081632,2.2249551 -12.2936,2.46829 -12.4878,2.48397 -15.8647,1.27061 v -2.54122 l 3.3769,-1.21336 0.1942,0.01568 1.211968,0.2433349 1.6724502,-4.0376654 -1.0291182,-0.6849395 -0.1483,-0.12618 -1.5299,-3.24586 1.7969,-1.7969 3.24586,1.5299 0.12618,0.1483 0.6849395,1.0291182 4.0376654,-1.6724502 -0.2433349,-1.211968 -0.01568,-0.1942 1.21336,-3.3769 h 2.54122 l 1.21336,3.3769 -0.01568,0.1942 -0.2433349,1.211968 4.0376654,1.6724502 0.6849395,-1.0291182 0.12618,-0.1483 3.24586,-1.5299 1.7969,1.7969 -1.5299,3.24586 -0.1483,0.12618 -1.0291182,0.6849395 z"
id="path1216"
sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc" /><circle
style="fill:none;stroke:#263238;stroke-width:1.92484;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path1218"
cy="0"
cx="0"
r="4.9489861" /></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 B

After

Width:  |  Height:  |  Size: 3.1 KiB

41
website/o3dv/dialogs.js
View File

@ -1,6 +1,7 @@
OV.FeatureSet =
{
SetDefaultColor : false
SetDefaultColor : true,
SetShowEdge : true,
};
OV.ShowMessageDialog = function (title, message, subMessage)
@ -225,7 +226,10 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
OV.ShowSettingsDialog = function (importSettings, onOk)
{
let dialogSettings = {
defaultColor : importSettings.defaultColor
defaultColor : importSettings.defaultColor,
edgesColor : importSettings.edgesColor,
showEdges : importSettings.showEdges,
edgesAngle : importSettings.edgesAngle,
};
let dialog = new OV.ButtonDialog ();
let contentDiv = dialog.Init ('Settings', [
@ -255,6 +259,39 @@ OV.ShowSettingsDialog = function (importSettings, onOk)
let colorStr = colorInput.val ().substr (1);
dialogSettings.defaultColor = OV.HexStringToColor (colorStr);
});
let showEdgeRow = $('<div>').addClass ('ov_dialog_table_row').appendTo (contentDiv);
$('<div>').html ('Show Edges').addClass ('ov_dialog_table_row_name').appendTo (showEdgeRow);
let seValueColumn = $('<div>').addClass ('ov_dialog_table_row_value').appendTo (showEdgeRow);
let showEdgeInput = $('<input>').attr ('type', 'checkbox').addClass ('ov_dialog_checkradio').appendTo (seValueColumn);
$('<span>').addClass ('ov_dialog_table_row_comment').html ('(Overlay edge on model)').appendTo (seValueColumn);
showEdgeInput.attr ('checked', dialogSettings.showEdges);
showEdgeInput.change (function () {
dialogSettings.showEdges = showEdgeInput.prop ('checked');
});
let edgeColorRow = $('<div>').addClass ('ov_dialog_table_row').appendTo (contentDiv);
$('<div>').html ('Edges Color').addClass ('ov_dialog_table_row_name').appendTo (edgeColorRow);
let ecValueColumn = $('<div>').addClass ('ov_dialog_table_row_value').appendTo (edgeColorRow);
let edgeColorInput = $('<input>').attr ('type', 'color').addClass ('ov_dialog_color').appendTo (ecValueColumn);
$('<span>').addClass ('ov_dialog_table_row_comment').html ('(For overlaid edges)').appendTo (ecValueColumn);
edgeColorInput.val ('#' + OV.ColorToHexString (dialogSettings.edgesColor));
edgeColorInput.change (function () {
let colorStr = edgeColorInput.val ().substr (1);
dialogSettings.edgesColor = OV.HexStringToColor (colorStr);
});
let edgeAngleRow = $('<div>').addClass ('ov_dialog_table_row').appendTo (contentDiv);
$('<div>').html ('Edges detection angle').addClass ('ov_dialog_table_row_name').appendTo (edgeAngleRow);
let eaValueColumn = $('<div>').addClass ('ov_dialog_table_row_value').appendTo (edgeAngleRow);
let edgeAngleInput = $('<input>').attr ('type', 'text').addClass ('ov_dialog_inner_title').appendTo (eaValueColumn);
$('<span>').addClass ('ov_dialog_table_row_comment').html ('(Edge detection angle)').appendTo (eaValueColumn);
edgeAngleInput.val (dialogSettings.edgesAngle);
edgeAngleInput.change (function () {
dialogSettings.edgesAngle = edgeAngleInput.val ();
});
dialog.Show ();
return dialog;
};

3
website/o3dv/embed.js
View File

@ -24,7 +24,8 @@ OV.Embed = class
let color = this.hashHandler.GetColorFromHash ();
if (color !== null) {
settings.defaultColor = color;
}
}
this.viewer.UpdateSettings (settings);
this.modelLoader.LoadFromUrlList (urls, settings);
let hashParameters = OV.CreateModelUrlParameters (urls);
let websiteUrl = this.parameters.websiteLinkDiv.attr ('href') + '#' + hashParameters;

22
website/o3dv/website.js
View File

@ -21,6 +21,7 @@ OV.Website = class
{
let canvas = $('<canvas>').appendTo (this.parameters.viewerDiv);
this.viewer.Init (canvas.get (0));
this.viewer.UpdateSettings (this.importSettings);
this.ShowViewer (false);
this.hashHandler.SetEventListener (this.OnHashChange.bind (this));
@ -193,7 +194,7 @@ OV.Website = class
return;
}
let settings = new OV.ImportSettings ();
settings.defaultColor = this.importSettings.defaultColor;
Object.assign(settings, this.importSettings);
let color = this.hashHandler.GetColorFromHash ();
if (color !== null) {
settings.defaultColor = color;
@ -290,16 +291,27 @@ OV.Website = class
AddButton (this.toolbar, 'share', 'Share model', true, function () {
obj.dialog = OV.ShowSharingDialog (importer, obj.importSettings, obj.viewer.GetCamera ());
});
if (OV.FeatureSet.SetDefaultColor) {
if (OV.FeatureSet.SetDefaultColor || OV.FeatureSet.SetShowEdge) {
AddSeparator (this.toolbar, true);
AddButton (this.toolbar, 'settings', 'Settings', true, function () {
obj.dialog = OV.ShowSettingsDialog (obj.importSettings, function (dialogSettings) {
let reload = false;
if (!OV.ColorIsEqual (obj.importSettings.defaultColor, dialogSettings.defaultColor)) {
obj.importSettings.defaultColor = dialogSettings.defaultColor;
reload = true;
for (let key in dialogSettings) {
if (key.indexOf ('Color') !== -1) {
if (!OV.ColorIsEqual (obj.importSettings[key], dialogSettings[key])) {
obj.importSettings[key] = dialogSettings[key];
reload = true;
}
}
else {
if (dialogSettings[key] !== obj.importSettings[key]) {
obj.importSettings[key] = dialogSettings[key];
reload = true;
}
}
}
if (reload) {
obj.viewer.UpdateSettings (obj.importSettings);
obj.ReloadFiles ();
}
});