Default color handling during embedding and engine usage.

This commit is contained in:
Viktor Kovacs 2021-04-05 10:20:26 +02:00
parent e5e59f3e5d
commit ca4e0ef1d4
7 changed files with 143 additions and 47 deletions

View File

@ -1,5 +1,15 @@
OV.ParameterConverter =
{
IntegerToString (integer)
{
return integer.toString ();
},
StringToInteger (str)
{
return parseInt (str, 10);
},
NumberToString (number)
{
let precision = 5;
@ -11,6 +21,22 @@ OV.ParameterConverter =
return parseFloat (str);
},
ModelUrlsToString : function (urls)
{
if (urls === null) {
return null;
}
return urls.join (',');
},
StringToModelUrls : function (str)
{
if (str === null || str.length === 0) {
return null;
}
return str.split (',');
},
CameraToString : function (camera)
{
if (camera === null) {
@ -24,12 +50,12 @@ OV.ParameterConverter =
return cameraParameters;
},
StringToCamera : function (urlParam)
StringToCamera : function (str)
{
if (urlParam === null || urlParam.length === 0) {
if (str === null || str.length === 0) {
return null;
}
let paramParts = urlParam.split (',');
let paramParts = str.split (',');
if (paramParts.length !== 9) {
return null;
}
@ -41,20 +67,34 @@ OV.ParameterConverter =
return camera;
},
ModelUrlsToString : function (urls)
ColorToString : function (color)
{
if (urls === null) {
if (color === null) {
return null;
}
return urls.join (',');
let colorParameters = [
this.IntegerToString (color.r),
this.IntegerToString (color.g),
this.IntegerToString (color.b)
].join (',');
return colorParameters;
},
StringToModelUrls : function (urlParam)
StringToColor : function (str)
{
if (urlParam === null || urlParam.length === 0) {
if (str === null || str.length === 0) {
return null;
}
return urlParam.split (',');
let paramParts = str.split (',');
if (paramParts.length !== 3) {
return null;
}
let color = new OV.Color (
this.StringToInteger (paramParts[0]),
this.StringToInteger (paramParts[1]),
this.StringToInteger (paramParts[2])
);
return color;
}
};
@ -63,7 +103,7 @@ OV.ParameterListBuilder = class
constructor (separator)
{
this.separator = separator;
this.urlParams = '';
this.paramList = '';
}
AddModelUrls (urls)
@ -78,36 +118,42 @@ OV.ParameterListBuilder = class
return this;
}
AddColor (color)
{
this.AddUrlPart ('color', OV.ParameterConverter.ColorToString (color));
return this;
}
AddUrlPart (keyword, urlPart)
{
if (keyword === null || urlPart === null) {
return;
}
if (this.urlParams.length > 0) {
this.urlParams += this.separator;
if (this.paramList.length > 0) {
this.paramList += this.separator;
}
this.urlParams += keyword + '=' + urlPart;
this.paramList += keyword + '=' + urlPart;
}
GetUrlParams ()
GetParameterList ()
{
return this.urlParams;
return this.paramList;
}
};
OV.ParameterListParser = class
{
constructor (urlParams, separator)
constructor (paramList, separator)
{
this.separator = separator;
this.urlParams = urlParams;
this.paramList = paramList;
}
GetModelUrls ()
{
// detect legacy links
if (this.urlParams.indexOf ('=') === -1) {
return this.urlParams.split (',');
if (this.paramList.indexOf ('=') === -1) {
return this.paramList.split (',');
}
let keywordParams = this.GetKeywordParams ('model');
@ -119,14 +165,20 @@ OV.ParameterListParser = class
let keywordParams = this.GetKeywordParams ('camera');
return OV.ParameterConverter.StringToCamera (keywordParams);
}
GetColor ()
{
let colorParams = this.GetKeywordParams ('color');
return OV.ParameterConverter.StringToColor (colorParams);
}
GetKeywordParams (keyword)
{
if (this.urlParams === null || this.urlParams.length === 0) {
if (this.paramList === null || this.paramList.length === 0) {
return null;
}
let keywordToken = keyword + '=';
let urlParts = this.urlParams.split (this.separator);
let urlParts = this.paramList.split (this.separator);
for (let i = 0; i < urlParts.length; i++) {
let urlPart = urlParts[i];
if (urlPart.startsWith (keywordToken)) {
@ -152,5 +204,5 @@ OV.CreateUrlParameters = function (urls, camera)
let builder = OV.CreateUrlBuilder ();
builder.AddModelUrls (urls);
builder.AddCamera (camera);
return builder.GetUrlParams ();
return builder.GetParameterList ();
};

View File

@ -1,19 +1,5 @@
OV.Init3DViewerElements = function ()
{
function SetCamera (element, viewer, importResult)
{
let camera = null;
let cameraParams = element.getAttribute ('camera');
if (cameraParams) {
camera = OV.ParameterConverter.StringToCamera (cameraParams);
}
if (camera !== null) {
viewer.SetCamera (camera);
} else {
viewer.SetUpVector (importResult.upVector, false);
}
}
function LoadElement (element)
{
let canvas = document.createElement ('canvas');
@ -50,7 +36,16 @@ OV.Init3DViewerElements = function ()
return true;
});
viewer.AdjustClippingPlanes (boundingSphere);
SetCamera (element, viewer, importResult);
let camera = null;
let cameraParams = element.getAttribute ('camera');
if (cameraParams) {
camera = OV.ParameterConverter.StringToCamera (cameraParams);
}
if (camera !== null) {
viewer.SetCamera (camera);
} else {
viewer.SetUpVector (importResult.upVector, false);
}
viewer.FitToWindow (boundingSphere, false);
},
onTextureLoaded : function () {
@ -71,6 +66,14 @@ OV.Init3DViewerElements = function ()
return;
}
let colorParams = element.getAttribute ('color');
if (colorParams) {
let color = OV.ParameterConverter.StringToColor (colorParams);
if (color !== null) {
loader.SetDefaultColor (color);
}
}
loader.LoadFromUrlList (modelUrls);
return {
element: element,

View File

@ -8,12 +8,15 @@ describe ('Parameter List', function () {
new OV.Coord3D (0.0, 0.0, 0.0),
new OV.Coord3D (0.0, 0.0, 1.0)
);
let urlParams1 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).GetUrlParams ();
let urlParams2 = OV.CreateUrlBuilder ().AddCamera (camera).GetUrlParams ();
let urlParams3 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).GetUrlParams ();
let color = new OV.Color (1, 2, 3);
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 ();
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$color=1,2,3');
});
it ('Parameter list parser', function () {
@ -22,22 +25,31 @@ describe ('Parameter List', function () {
new OV.Coord3D (1.0, 1.0, 1.0),
new OV.Coord3D (0.0, 0.0, 0.0),
new OV.Coord3D (0.0, 0.0, 1.0)
);
);
let color = new OV.Color (1, 2, 3);
let urlParamsLegacy = 'a.txt,b.txt';
let urlParams1 = 'model=a.txt,b.txt';
let urlParams2 = 'camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000';
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$color=1,2,3';
let parserLegacy = OV.CreateUrlParser (urlParamsLegacy);
assert.deepStrictEqual (parserLegacy.GetModelUrls (), modelUrls);
assert.deepStrictEqual (parserLegacy.GetCamera (), null);
let parser1 = OV.CreateUrlParser (urlParams1);
assert.deepStrictEqual (parser1.GetModelUrls (), modelUrls);
assert.deepStrictEqual (parser1.GetCamera (), null);
assert.deepStrictEqual (parser1.GetColor (), null);
let parser2 = OV.CreateUrlParser (urlParams2);
assert.deepStrictEqual (parser2.GetModelUrls (), null);
assert.deepStrictEqual (parser2.GetCamera (), camera);
assert.deepStrictEqual (parser2.GetColor (), null);
let parser3 = OV.CreateUrlParser (urlParams3);
assert.deepStrictEqual (parser3.GetModelUrls (), modelUrls);
assert.deepStrictEqual (parser3.GetCamera (), camera);
assert.deepStrictEqual (parser3.GetColor (), null);
let parser4 = OV.CreateUrlParser (urlParams4);
assert.deepStrictEqual (parser4.GetModelUrls (), modelUrls);
assert.deepStrictEqual (parser4.GetCamera (), camera);
assert.deepStrictEqual (parser4.GetColor (), color);
});
});

View File

@ -30,6 +30,16 @@
width=360 height=240
style="border:1px solid #eeeeee;">
</iframe>
<iframe
src="../../website/embed.html#model=../test/testfiles/obj/hundred_cubes.obj"
width=360 height=240
style="border:1px solid #eeeeee;">
</iframe>
<iframe
src="../../website/embed.html#model=../test/testfiles/obj/hundred_cubes.obj$color=200,0,0"
width=360 height=240
style="border:1px solid #eeeeee;">
</iframe>
<iframe
src="../../website/embed.html#model=wrong.3ds"
width=360 height=240

View File

@ -89,6 +89,15 @@
model="../../test/testfiles/obj/hundred_cubes.obj,../../test/testfiles/obj/hundred_cubes.mtl"
camera="1,1,1,0,0,0,0,0,1">
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../test/testfiles/obj/hundred_cubes.obj">
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../test/testfiles/obj/hundred_cubes.obj"
color="200,0,0">
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="wrong.3ds">

View File

@ -72,5 +72,9 @@ OV.Embed = class
obj.viewer.Render ();
}
});
let color = this.hashHandler.GetColorFromHash ();
if (color !== null) {
this.modelLoader.SetDefaultColor (color);
}
}
};

View File

@ -28,12 +28,6 @@ OV.HashHandler = class
this.SetHash ('');
}
GetCameraFromHash ()
{
let parser = OV.CreateUrlParser (this.GetHash ());
return parser.GetCamera ();
}
GetModelFilesFromHash ()
{
let parser = OV.CreateUrlParser (this.GetHash ());
@ -46,6 +40,18 @@ OV.HashHandler = class
this.SetHash (params);
}
GetCameraFromHash ()
{
let parser = OV.CreateUrlParser (this.GetHash ());
return parser.GetCamera ();
}
GetColorFromHash ()
{
let parser = OV.CreateUrlParser (this.GetHash ());
return parser.GetColor ();
}
GetHash ()
{
return window.location.hash.substr (1);