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

Add edge color to embedding codes.

Browse Source
This commit is contained in:
kovacsv 2021-12-08 13:13:31 +01:00
parent 65600398b2
commit bb3bef4134
7 changed files with 236 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
sandbox/embed_edges.html Normal file
View File

@ -0,0 +1,124 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Online 3D Viewer</title>
<script type="text/javascript" src="../../libs/three.min.js"></script>
<!-- engine start -->
<script type="text/javascript" src="../source/core/core.js"></script>
<script type="text/javascript" src="../source/core/taskrunner.js"></script>
<script type="text/javascript" src="../source/geometry/geometry.js"></script>
<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
<script type="text/javascript" src="../source/geometry/box3d.js"></script>
<script type="text/javascript" src="../source/geometry/octree.js"></script>
<script type="text/javascript" src="../source/geometry/matrix.js"></script>
<script type="text/javascript" src="../source/geometry/transformation.js"></script>
<script type="text/javascript" src="../source/geometry/tween.js"></script>
<script type="text/javascript" src="../source/io/binaryreader.js"></script>
<script type="text/javascript" src="../source/io/binarywriter.js"></script>
<script type="text/javascript" src="../source/io/textwriter.js"></script>
<script type="text/javascript" src="../source/io/bufferutils.js"></script>
<script type="text/javascript" src="../source/io/fileutils.js"></script>
<script type="text/javascript" src="../source/io/externallibs.js"></script>
<script type="text/javascript" src="../source/model/material.js"></script>
<script type="text/javascript" src="../source/model/triangle.js"></script>
<script type="text/javascript" src="../source/model/property.js"></script>
<script type="text/javascript" src="../source/model/object.js"></script>
<script type="text/javascript" src="../source/model/mesh.js"></script>
<script type="text/javascript" src="../source/model/meshbuffer.js"></script>
<script type="text/javascript" src="../source/model/node.js"></script>
<script type="text/javascript" src="../source/model/meshinstance.js"></script>
<script type="text/javascript" src="../source/model/model.js"></script>
<script type="text/javascript" src="../source/model/topology.js"></script>
<script type="text/javascript" src="../source/model/modelutils.js"></script>
<script type="text/javascript" src="../source/model/modelfinalization.js"></script>
<script type="text/javascript" src="../source/model/quantities.js"></script>
<script type="text/javascript" src="../source/model/generator.js"></script>
<script type="text/javascript" src="../source/import/importerutils.js"></script>
<script type="text/javascript" src="../source/import/importerbase.js"></script>
<script type="text/javascript" src="../source/import/importerobj.js"></script>
<script type="text/javascript" src="../source/import/importerstl.js"></script>
<script type="text/javascript" src="../source/import/importeroff.js"></script>
<script type="text/javascript" src="../source/import/importerply.js"></script>
<script type="text/javascript" src="../source/import/importer3ds.js"></script>
<script type="text/javascript" src="../source/import/importergltf.js"></script>
<script type="text/javascript" src="../source/import/importero3dv.js"></script>
<script type="text/javascript" src="../source/import/importerthree.js"></script>
<script type="text/javascript" src="../source/import/importersvg.js"></script>
<script type="text/javascript" src="../source/import/importer3dm.js"></script>
<script type="text/javascript" src="../source/import/importerifc.js"></script>
<script type="text/javascript" src="../source/import/filelist.js"></script>
<script type="text/javascript" src="../source/import/importer.js"></script>
<script type="text/javascript" src="../source/export/exporterbase.js"></script>
<script type="text/javascript" src="../source/export/exporterobj.js"></script>
<script type="text/javascript" src="../source/export/exporterstl.js"></script>
<script type="text/javascript" src="../source/export/exporterply.js"></script>
<script type="text/javascript" src="../source/export/exporteroff.js"></script>
<script type="text/javascript" src="../source/export/exportergltf.js"></script>
<script type="text/javascript" src="../source/export/exporter3dm.js"></script>
<script type="text/javascript" src="../source/export/exporter.js"></script>
<script type="text/javascript" src="../source/threejs/threeutils.js"></script>
<script type="text/javascript" src="../source/threejs/threeconverter.js"></script>
<script type="text/javascript" src="../source/threejs/threemodelloader.js"></script>
<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>
<script type="text/javascript" src="../source/viewer/domutils.js"></script>
<script type="text/javascript" src="../source/viewer/navigation.js"></script>
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
<!-- engine end -->
<script type='text/javascript'>
OV.Init3DViewerElements ();
</script>
<style>
iframe, div.online_3d_viewer
{
float: left;
border: 1px solid #eeeeee;
margin: 0px 4px 4px 0px;
}
</style>
</head>
<body>
<iframe
src="../../website/embed.html#model=../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl$edgesettings=on,0,0,0,1"
width=360 height=240
style="border:1px solid #eeeeee;">
</iframe>
<iframe
src="../../website/embed.html#model=../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl$edgesettings=on,255,0,0,1"
width=360 height=240
style="border:1px solid #eeeeee;">
</iframe>
<iframe
src="../../website/embed.html#model=../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl$edgesettings=on,0,0,0,80"
width=360 height=240
style="border:1px solid #eeeeee;">
</iframe>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl"
edgesettings="on,0,0,0,1">
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl"
edgesettings="on,255,0,0,1">
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl"
edgesettings="on,0,0,0,80">
</div>
</body>
</html>

54
source/parameters/parameterlist.js
View File

@ -95,6 +95,40 @@ OV.ParameterConverter =
this.StringToInteger (paramParts[2])
);
return color;
},
EdgeSettingsToString : function (edgeSettings)
{
if (edgeSettings === null) {
return null;
}
let edgeSettingsParameters = [
edgeSettings.showEdges ? 'on' : 'off',
this.ColorToString (edgeSettings.edgeColor),
this.IntegerToString (edgeSettings.edgeThreshold),
].join (',');
return edgeSettingsParameters;
},
StringToEdgeSettings : function (str)
{
if (str === null || str.length === 0) {
return null;
}
let paramParts = str.split (',');
if (paramParts.length !== 5) {
return null;
}
let edgeSettings = {
showEdges : paramParts[0] === 'on' ? true : false,
edgeColor : new OV.Color (
this.StringToInteger (paramParts[1]),
this.StringToInteger (paramParts[2]),
this.StringToInteger (paramParts[3])
),
edgeThreshold : this.StringToInteger (paramParts[4])
};
return edgeSettings;
}
};
@ -118,18 +152,24 @@ OV.ParameterListBuilder = class
return this;
}
AddBackground (background)
AddBackgroundColor (background)
{
this.AddUrlPart ('backgroundcolor', OV.ParameterConverter.ColorToString (background));
return this;
}
AddColor (color)
AddDefaultColor (color)
{
this.AddUrlPart ('defaultcolor', OV.ParameterConverter.ColorToString (color));
return this;
}
AddEdgeSettings (edgeSettings)
{
this.AddUrlPart ('edgesettings', OV.ParameterConverter.EdgeSettingsToString (edgeSettings));
return this;
}
AddUrlPart (keyword, urlPart)
{
if (keyword === null || urlPart === null) {
@ -144,7 +184,7 @@ OV.ParameterListBuilder = class
GetParameterList ()
{
return this.paramList;
}
}
};
OV.ParameterListParser = class
@ -183,7 +223,13 @@ OV.ParameterListParser = class
let colorParams = this.GetKeywordParams ('defaultcolor');
return OV.ParameterConverter.StringToColor (colorParams);
}
GetEdgeSettings ()
{
let edgeSettingsParams = this.GetKeywordParams ('edgesettings');
return OV.ParameterConverter.StringToEdgeSettings (edgeSettingsParams);
}
GetKeywordParams (keyword)
{
if (this.paramList === null || this.paramList.length === 0) {

15
source/viewer/domviewer.js
View File

@ -24,6 +24,14 @@ OV.Init3DViewerElement = function (parentDiv, modelUrls, parameters)
viewer.SetBackgroundColor (parameters.backgroundColor);
}
if (parameters.edgeSettings) {
viewer.SetEdgeSettings (
parameters.edgeSettings.showEdges,
parameters.edgeSettings.edgeColor,
parameters.edgeSettings.edgeThreshold
);
}
if (parameters.environmentMap) {
viewer.SetEnvironmentMap (parameters.environmentMap);
}
@ -106,6 +114,12 @@ OV.Init3DViewerElements = function (onReady)
defaultColor = OV.ParameterConverter.StringToColor (defaultColorParams);
}
let edgeSettings = null;
let edgeSettingsParams = element.getAttribute ('edgesettings');
if (edgeSettingsParams) {
edgeSettings = OV.ParameterConverter.StringToEdgeSettings (edgeSettingsParams);
}
let environmentMap = null;
let environmentMapParams = element.getAttribute ('environmentmap');
if (environmentMapParams) {
@ -125,6 +139,7 @@ OV.Init3DViewerElements = function (onReady)
camera,
backgroundColor,
defaultColor,
edgeSettings,
environmentMap
});
}

17
test/tests/parameterlist_test.js
View File

@ -13,13 +13,19 @@ describe ('Parameter List', function () {
let urlParams1 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).GetParameterList ();
let urlParams2 = OV.CreateUrlBuilder ().AddCamera (camera).GetParameterList ();
let urlParams3 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).GetParameterList ();
let urlParams4 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).AddColor (color).GetParameterList ();
let urlParams5 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).AddBackground (background).AddColor (color).GetParameterList ();
let urlParams4 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).AddDefaultColor (color).GetParameterList ();
let urlParams5 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).AddBackgroundColor (background).AddDefaultColor (color).GetParameterList ();
let urlParams6 = OV.CreateUrlBuilder ().AddEdgeSettings ({
showEdges : true,
edgeColor : new OV.Color (1, 2, 3),
edgeThreshold : 15
}).GetParameterList ();
assert.strictEqual (urlParams1, 'model=a.txt,b.txt');
assert.strictEqual (urlParams2, 'camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000');
assert.strictEqual (urlParams3, 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000');
assert.strictEqual (urlParams4, 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$defaultcolor=1,2,3');
assert.strictEqual (urlParams5, 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$backgroundcolor=4,5,6$defaultcolor=1,2,3');
assert.strictEqual (urlParams6, 'edgesettings=on,1,2,3,15');
});
it ('Parameter list parser', function () {
@ -37,6 +43,7 @@ describe ('Parameter List', function () {
let urlParams3 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000';
let urlParams4 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$defaultcolor=1,2,3';
let urlParams5 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$backgroundcolor=4,5,6$defaultcolor=1,2,3';
let urlParams6 = 'edgesettings=on,1,2,3,15';
let parserLegacy = OV.CreateUrlParser (urlParamsLegacy);
assert.deepStrictEqual (parserLegacy.GetModelUrls (), modelUrls);
assert.deepStrictEqual (parserLegacy.GetCamera (), null);
@ -61,5 +68,11 @@ describe ('Parameter List', function () {
assert.deepStrictEqual (parser5.GetCamera (), camera);
assert.deepStrictEqual (parser5.GetDefaultColor (), color);
assert.deepStrictEqual (parser5.GetBackgroundColor (), background);
let parser6 = OV.CreateUrlParser (urlParams6);
assert.deepStrictEqual (parser6.GetEdgeSettings (), {
showEdges : true,
edgeColor : new OV.Color (1, 2, 3),
edgeThreshold : 15
});
});
});

8
website/o3dv/js/embed.js
View File

@ -23,6 +23,14 @@ OV.Embed = class
if (background !== null) {
this.viewer.SetBackgroundColor (background);
}
let edgeSettings = this.hashHandler.GetEdgeSettingsFromHash ();
if (edgeSettings !== null) {
this.viewer.SetEdgeSettings (
edgeSettings.showEdges,
edgeSettings.edgeColor,
edgeSettings.edgeThreshold
);
}
let settings = new OV.ImportSettings ();
let defaultColor = this.hashHandler.GetDefaultColorFromHash ();
if (defaultColor !== null) {

6
website/o3dv/js/hashhandler.js
View File

@ -58,6 +58,12 @@ OV.HashHandler = class
return parser.GetDefaultColor ();
}
GetEdgeSettingsFromHash ()
{
let parser = OV.CreateUrlParser (this.GetHash ());
return parser.GetEdgeSettings ();
}
GetHash ()
{
return window.location.hash.substr (1);

21
website/o3dv/js/sharingdialog.js
View File

@ -28,8 +28,9 @@ OV.ShowSharingDialog = function (importer, settings, camera)
let builder = OV.CreateUrlBuilder ();
builder.AddModelUrls (params.files);
builder.AddCamera (params.camera);
builder.AddBackground (params.backgroundColor);
builder.AddColor (params.defaultColor);
builder.AddBackgroundColor (params.backgroundColor);
builder.AddDefaultColor (params.defaultColor);
builder.AddEdgeSettings (params.edgeSettings);
let hashParameters = builder.GetParameterList ();
let embeddingCode = '';
@ -90,6 +91,15 @@ OV.ShowSharingDialog = function (importer, settings, camera)
embeddingCodeParams.defaultColor = checked ? settings.defaultColor : null;
embeddingCodeInput.value = GetEmbeddingCode (embeddingCodeParams);
});
AddCheckboxLine (optionsSection, 'Use overridden edge display', 'embed_edge_display', (checked) => {
const edgeSettings = {
showEdges : settings.edgeSettings,
edgeColor : settings.edgeColor,
edgeThreshold : settings.edgeThreshold
};
embeddingCodeParams.edgeSettings = checked ? edgeSettings : null;
embeddingCodeInput.value = GetEmbeddingCode (embeddingCodeParams);
});
embeddingCodeInput.value = GetEmbeddingCode (embeddingCodeParams);
}
@ -118,7 +128,12 @@ OV.ShowSharingDialog = function (importer, settings, camera)
files : modelFiles,
camera : camera,
backgroundColor : settings.backgroundColor,
defaultColor : settings.defaultColor
defaultColor : settings.defaultColor,
edgeSettings : {
showEdges : settings.showEdges,
edgeColor : settings.edgeColor,
edgeThreshold : settings.edgeThreshold
}
};
let dialog = new OV.ButtonDialog ();