diff --git a/source/engine/import/importer.js b/source/engine/import/importer.js index 2cd1758..4e4833e 100644 --- a/source/engine/import/importer.js +++ b/source/engine/import/importer.js @@ -21,6 +21,7 @@ export class ImportSettings { constructor () { + this.defaultLineColor = new RGBColor (100, 100, 100); this.defaultColor = new RGBColor (200, 200, 200); } } @@ -215,6 +216,9 @@ export class Importer }); importer.Import (mainFile.file.name, mainFile.file.extension, mainFile.file.content, { + getDefaultLineMaterialColor : () => { + return settings.defaultLineColor; + }, getDefaultMaterialColor : () => { return settings.defaultColor; }, diff --git a/source/engine/import/importerbase.js b/source/engine/import/importerbase.js index 58dc987..4e3a41b 100644 --- a/source/engine/import/importerbase.js +++ b/source/engine/import/importerbase.js @@ -58,6 +58,7 @@ export class ImporterBase } FinalizeModel (this.model, { + defaultLineMaterialColor : this.callbacks.getDefaultLineMaterialColor (), defaultMaterialColor : this.callbacks.getDefaultMaterialColor () }); diff --git a/source/engine/main.js b/source/engine/main.js index 4dc7308..066feaf 100644 --- a/source/engine/main.js +++ b/source/engine/main.js @@ -47,14 +47,14 @@ import { TextWriter } from './io/textwriter.js'; import { RGBColor, RGBAColor, ColorComponentFromFloat, ColorComponentToFloat, RGBColorFromFloatComponents, SRGBToLinear, LinearToSRGB, IntegerToHexString, RGBColorToHexString, RGBAColorToHexString, HexStringToRGBColor, HexStringToRGBAColor, ArrayToRGBColor, RGBColorIsEqual } from './model/color.js'; import { GeneratorParams, Generator, GeneratorHelper, GenerateCuboid, GenerateCone, GenerateCylinder, GenerateSphere, GeneratePlatonicSolid } from './model/generator.js'; import { Line } from './model/line.js'; -import { TextureMap, MaterialBase, FaceMaterial, PhongMaterial, PhysicalMaterial, TextureMapIsEqual, TextureIsEqual, MaterialType } from './model/material.js'; +import { TextureMap, MaterialBase, FaceMaterial, PhongMaterial, PhysicalMaterial, TextureMapIsEqual, TextureIsEqual, MaterialType, MaterialSource } from './model/material.js'; import { Mesh } from './model/mesh.js'; import { MeshPrimitiveBuffer, MeshBuffer, ConvertMeshToMeshBuffer } from './model/meshbuffer.js'; import { MeshInstanceId, MeshInstance } from './model/meshinstance.js'; import { IsEmptyMesh, CalculateTriangleNormal, TransformMesh, FlipMeshTrianglesOrientation } from './model/meshutils.js'; import { Model } from './model/model.js'; import { FinalizeModel, CheckModel } from './model/modelfinalization.js'; -import { IsModelEmpty, GetBoundingBox, GetTopology, IsTwoManifold, HasDefaultMaterial, ReplaceDefaultMaterialsColor } from './model/modelutils.js'; +import { IsModelEmpty, GetBoundingBox, GetTopology, IsTwoManifold, GetDefaultMaterials, ReplaceDefaultMaterialsColor } from './model/modelutils.js'; import { Node } from './model/node.js'; import { Object3D, ModelObject3D } from './model/object.js'; import { Property, PropertyGroup, PropertyToString, PropertyType } from './model/property.js'; @@ -236,6 +236,7 @@ export { TextureMapIsEqual, TextureIsEqual, MaterialType, + MaterialSource, Mesh, MeshPrimitiveBuffer, MeshBuffer, @@ -253,7 +254,7 @@ export { GetBoundingBox, GetTopology, IsTwoManifold, - HasDefaultMaterial, + GetDefaultMaterials, ReplaceDefaultMaterialsColor, Node, Object3D, diff --git a/source/engine/model/modelutils.js b/source/engine/model/modelutils.js index 70724b1..b4cad17 100644 --- a/source/engine/model/modelutils.js +++ b/source/engine/model/modelutils.js @@ -96,23 +96,26 @@ export function IsTwoManifold (object3D) } } -export function HasDefaultMaterial (model) +export function GetDefaultMaterials (model) { + let defaultMaterials = []; for (let i = 0; i < model.MaterialCount (); i++) { let material = model.GetMaterial (i); if (material.source !== MaterialSource.Model && !material.vertexColors) { - return true; + defaultMaterials.push (material); } } - return false; + return defaultMaterials; } -export function ReplaceDefaultMaterialsColor (model, color) +export function ReplaceDefaultMaterialsColor (model, color, lineColor) { for (let i = 0; i < model.MaterialCount (); i++) { let material = model.GetMaterial (i); if (material.source === MaterialSource.DefaultFace) { material.color = color; + } else if (material.source === MaterialSource.DefaultLine) { + material.color = lineColor; } } } diff --git a/source/engine/threejs/threemodelloader.js b/source/engine/threejs/threemodelloader.js index bb695cf..94d5bc4 100644 --- a/source/engine/threejs/threemodelloader.js +++ b/source/engine/threejs/threemodelloader.js @@ -92,12 +92,16 @@ export class ThreeModelLoader return this.defaultMaterials; } - ReplaceDefaultMaterialsColor (defaultColor) + ReplaceDefaultMaterialsColor (defaultColor, defaultLineColor) { if (this.defaultMaterials !== null) { for (let defaultMaterial of this.defaultMaterials) { - if (!defaultMaterial.vertexColors && defaultMaterial.userData.source === MaterialSource.DefaultFace) { - defaultMaterial.color = ConvertColorToThreeColor (defaultColor); + if (!defaultMaterial.vertexColors) { + if (defaultMaterial.userData.source === MaterialSource.DefaultFace) { + defaultMaterial.color = ConvertColorToThreeColor (defaultColor); + } else if (defaultMaterial.userData.source === MaterialSource.DefaultLine) { + defaultMaterial.color = ConvertColorToThreeColor (defaultLineColor); + } } } } diff --git a/source/engine/viewer/embeddedviewer.js b/source/engine/viewer/embeddedviewer.js index 6695405..24c3f59 100644 --- a/source/engine/viewer/embeddedviewer.js +++ b/source/engine/viewer/embeddedviewer.js @@ -109,6 +109,7 @@ export class EmbeddedViewer this.viewer.Clear (); let settings = new ImportSettings (); + console.log (this.parameters); if (this.parameters.defaultColor) { settings.defaultColor = this.parameters.defaultColor; } diff --git a/source/website/settings.js b/source/website/settings.js index 5b68552..d024213 100644 --- a/source/website/settings.js +++ b/source/website/settings.js @@ -18,9 +18,11 @@ export class Settings this.backgroundIsEnvMap = false; if (this.themeId === Theme.Light) { this.backgroundColor = new RGBAColor (255, 255, 255, 255); + this.defaultLineColor = new RGBColor (100, 100, 100); this.defaultColor = new RGBColor (200, 200, 200); } else if (this.themeId === Theme.Dark) { this.backgroundColor = new RGBAColor (42, 43, 46, 255); + this.defaultLineColor = new RGBColor (100, 100, 100); this.defaultColor = new RGBColor (200, 200, 200); } this.edgeSettings = new EdgeSettings (false, new RGBColor (0, 0, 0), 1); @@ -32,6 +34,7 @@ export class Settings this.environmentMapName = CookieGetStringVal ('ov_environment_map', 'fishermans_bastion'); this.backgroundIsEnvMap = CookieGetBoolVal ('ov_background_is_envmap', false); this.backgroundColor = CookieGetRGBAColorVal ('ov_background_color', new RGBAColor (255, 255, 255, 255)); + this.defaultLineColor = CookieGetRGBColorVal ('ov_default_line_color', new RGBColor (100, 100, 100)); this.defaultColor = CookieGetRGBColorVal ('ov_default_color', new RGBColor (200, 200, 200)); this.edgeSettings.showEdges = CookieGetBoolVal ('ov_show_edges', false); this.edgeSettings.edgeColor = CookieGetRGBColorVal ('ov_edge_color', new RGBColor (0, 0, 0)); @@ -44,6 +47,7 @@ export class Settings CookieSetStringVal ('ov_environment_map', this.environmentMapName); CookieSetBoolVal ('ov_background_is_envmap', this.backgroundIsEnvMap); CookieSetRGBAColorVal ('ov_background_color', this.backgroundColor); + CookieSetRGBColorVal ('ov_default_line_color', this.defaultLineColor); CookieSetRGBColorVal ('ov_default_color', this.defaultColor); CookieSetBoolVal ('ov_show_edges', this.edgeSettings.showEdges); CookieSetRGBColorVal ('ov_edge_color', this.edgeSettings.edgeColor); diff --git a/source/website/sidebar.js b/source/website/sidebar.js index be6d595..ea6f051 100644 --- a/source/website/sidebar.js +++ b/source/website/sidebar.js @@ -48,8 +48,8 @@ export class Sidebar getProjectionMode : () => { return this.callbacks.getProjectionMode (); }, - hasDefaultMaterial : () => { - return this.callbacks.hasDefaultMaterial (); + getDefaultMaterials : () => { + return this.callbacks.getDefaultMaterials (); }, onEnvironmentMapChanged : () => { this.callbacks.onEnvironmentMapChanged (); diff --git a/source/website/sidebarsettingspanel.js b/source/website/sidebarsettingspanel.js index 8c51ff7..5ed9008 100644 --- a/source/website/sidebarsettingspanel.js +++ b/source/website/sidebarsettingspanel.js @@ -10,6 +10,7 @@ import { ProjectionMode } from '../engine/viewer/camera.js'; import * as Pickr from '@simonwep/pickr'; import '@simonwep/pickr/dist/themes/monolith.min.css'; +import { MaterialSource } from '../engine/main.js'; function AddColorPicker (parentDiv, opacity, defaultColor, predefinedColors, onChange) { @@ -375,22 +376,35 @@ class SettingsImportParametersSection extends SettingsSection constructor (parentDiv, settings) { super (parentDiv, 'Import Settings', settings); + this.defaultColorPickerDiv = null; + this.defaultLineColorPickerDiv = null; this.defaultColorPicker = null; + this.defaultLineColorPicker = null; } Init (callbacks) { - super.Init (callbacks); + function AddDefaultColorPicker (contentDiv, name, defaultColor, onChange) + { + let colorDiv = AddDiv (contentDiv, 'ov_sidebar_parameter'); + let colorInput = AddDiv (colorDiv, 'ov_color_picker'); + AddDiv (colorDiv, null, name); + let predefinedDefaultColors = ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8']; + let defaultColorStr = '#' + RGBColorToHexString (defaultColor); + return AddColorPicker (colorInput, false, defaultColorStr, predefinedDefaultColors, onChange); + } - let defaultColorDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); - let defaultColorInput = AddDiv (defaultColorDiv, 'ov_color_picker'); - AddDiv (defaultColorDiv, null, 'Default Color'); - let predefinedDefaultColors = ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8']; - let defaultColor = '#' + RGBColorToHexString (this.settings.defaultColor); - this.defaultColorPicker = AddColorPicker (defaultColorInput, false, defaultColor, predefinedDefaultColors, (r, g, b, a) => { + super.Init (callbacks); + this.defaultColorPickerDiv = AddDiv (this.contentDiv); + this.defaultColorPicker = AddDefaultColorPicker (this.defaultColorPickerDiv, 'Default Color', this.settings.defaultColor, (r, g, b, a) => { this.settings.defaultColor = new RGBColor (r, g, b); this.callbacks.onDefaultColorChanged (); }); + this.defaultLineColorPickerDiv = AddDiv (this.contentDiv); + this.defaultLineColorPicker = AddDefaultColorPicker (this.defaultLineColorPickerDiv, 'Default Line Color', this.settings.defaultLineColor, (r, g, b, a) => { + this.settings.defaultLineColor = new RGBColor (r, g, b); + this.callbacks.onDefaultColorChanged (); + }); } Update () @@ -398,13 +412,26 @@ class SettingsImportParametersSection extends SettingsSection if (this.defaultColorPicker !== null) { this.defaultColorPicker.setColor ('#' + RGBColorToHexString (this.settings.defaultColor)); } + if (this.defaultLineColorPicker !== null) { + this.defaultLineColorPicker.setColor ('#' + RGBColorToHexString (this.settings.defaultLineColor)); + } } UpdateVisibility () { if (this.contentDiv !== null) { - let hasDefaultMaterial = this.callbacks.hasDefaultMaterial (); - ShowDomElement (this.contentDiv, hasDefaultMaterial); + let defaultMaterials = this.callbacks.getDefaultMaterials (); + if (defaultMaterials.length === 0) { + ShowDomElement (this.contentDiv, false); + } else { + let sources = new Set (); + for (let material of defaultMaterials) { + sources.add (material.source); + } + ShowDomElement (this.contentDiv, true); + ShowDomElement (this.defaultColorPickerDiv, sources.has (MaterialSource.DefaultFace)); + ShowDomElement (this.defaultLineColorPickerDiv, sources.has (MaterialSource.DefaultLine)); + } } } @@ -413,6 +440,9 @@ class SettingsImportParametersSection extends SettingsSection if (this.defaultColorPicker !== null) { this.defaultColorPicker.hide (); } + if (this.defaultLineColorPicker !== null) { + this.defaultLineColorPicker.hide (); + } } } @@ -482,8 +512,8 @@ export class SidebarSettingsPanel extends SidebarPanel } }); this.importParametersSection.Init ({ - hasDefaultMaterial : () => { - return this.callbacks.hasDefaultMaterial (); + getDefaultMaterials : () => { + return this.callbacks.getDefaultMaterials (); }, onDefaultColorChanged : () => { this.callbacks.onDefaultColorChanged (); @@ -511,6 +541,7 @@ export class SidebarSettingsPanel extends SidebarPanel this.settings.environmentMapName = defaultSettings.environmentMapName; this.settings.backgroundIsEnvMap = defaultSettings.backgroundIsEnvMap; this.settings.backgroundColor = defaultSettings.backgroundColor; + this.settings.defaultLineColor = defaultSettings.defaultLineColor; this.settings.defaultColor = defaultSettings.defaultColor; this.settings.edgeSettings = defaultSettings.edgeSettings; this.settings.themeId = defaultSettings.themeId; diff --git a/source/website/website.js b/source/website/website.js index 38016bc..8e4729f 100644 --- a/source/website/website.js +++ b/source/website/website.js @@ -19,7 +19,7 @@ import { ShowSnapshotDialog } from './snapshotdialog.js'; import { AddSvgIconElement, GetFilesFromDataTransfer, InstallTooltip, IsSmallWidth } from './utils.js'; import { ShowOpenUrlDialog } from './openurldialog.js'; import { ShowSharingDialog } from './sharingdialog.js'; -import { HasDefaultMaterial, ReplaceDefaultMaterialsColor } from '../engine/model/modelutils.js'; +import { GetDefaultMaterials, ReplaceDefaultMaterialsColor } from '../engine/model/modelutils.js'; import { Direction } from '../engine/geometry/geometry.js'; import { CookieGetBoolVal, CookieSetBoolVal } from './cookiehandler.js'; import { MeasureTool } from './measuretool.js'; @@ -402,6 +402,7 @@ export class Website } TransformFileHostUrls (urls); let importSettings = new ImportSettings (); + importSettings.defaultLineColor = this.settings.defaultLineColor; importSettings.defaultColor = this.settings.defaultColor; let defaultColor = this.hashHandler.GetDefaultColorFromHash (); if (defaultColor !== null) { @@ -480,6 +481,7 @@ export class Website LoadModelFromFileList (files) { let importSettings = new ImportSettings (); + importSettings.defaultLineColor = this.settings.defaultLineColor; importSettings.defaultColor = this.settings.defaultColor; let inputFiles = InputFilesFromFileObjects (files); this.LoadModelFromInputFiles (inputFiles, importSettings); @@ -572,14 +574,15 @@ export class Website if (resetColors) { let defaultSettings = new Settings (this.settings.themeId); this.settings.backgroundColor = defaultSettings.backgroundColor; + this.settings.defaultLineColor = defaultSettings.defaultLineColor; this.settings.defaultColor = defaultSettings.defaultColor; this.sidebar.UpdateControlsStatus (); this.viewer.SetBackgroundColor (this.settings.backgroundColor); let modelLoader = this.modelLoaderUI.GetModelLoader (); if (modelLoader.GetDefaultMaterials () !== null) { - ReplaceDefaultMaterialsColor (this.model, this.settings.defaultColor); - modelLoader.ReplaceDefaultMaterialsColor (this.settings.defaultColor); + ReplaceDefaultMaterialsColor (this.model, this.settings.defaultColor, this.settings.defaultLineColor); + modelLoader.ReplaceDefaultMaterialsColor (this.settings.defaultColor, this.settings.defaultLineColor); } } @@ -794,8 +797,8 @@ export class Website getProjectionMode : () => { return this.viewer.GetProjectionMode (); }, - hasDefaultMaterial : () => { - return HasDefaultMaterial (this.model); + getDefaultMaterials : () => { + return GetDefaultMaterials (this.model); }, onEnvironmentMapChanged : () => { this.settings.SaveToCookies (); @@ -815,8 +818,8 @@ export class Website this.settings.SaveToCookies (); let modelLoader = this.modelLoaderUI.GetModelLoader (); if (modelLoader.GetDefaultMaterials () !== null) { - ReplaceDefaultMaterialsColor (this.model, this.settings.defaultColor); - modelLoader.ReplaceDefaultMaterialsColor (this.settings.defaultColor); + ReplaceDefaultMaterialsColor (this.model, this.settings.defaultColor, this.settings.defaultLineColor); + modelLoader.ReplaceDefaultMaterialsColor (this.settings.defaultColor, this.settings.defaultLineColor); } this.viewer.Render (); }, diff --git a/test/tests/exporter_test.js b/test/tests/exporter_test.js index 1302678..5425add 100644 --- a/test/tests/exporter_test.js +++ b/test/tests/exporter_test.js @@ -219,6 +219,9 @@ describe ('Exporter', function () { let contentBuffer = stlFile.GetBufferContent (); let importer = new OV.ImporterStl (); importer.Import (stlFile.GetName (), 'stl', contentBuffer, { + getDefaultLineMaterialColor () { + return new OV.RGBColor (0, 0, 0); + }, getDefaultMaterialColor () { return new OV.RGBColor (0, 0, 0); }, @@ -316,6 +319,9 @@ describe ('Exporter', function () { let contentBuffer = plyFile.GetBufferContent (); let importer = new OV.ImporterPly (); importer.Import (plyFile.GetName (), 'ply', contentBuffer, { + getDefaultLineMaterialColor () { + return new OV.RGBColor (0, 0, 0); + }, getDefaultMaterialColor () { return new OV.RGBColor (0, 0, 0); }, @@ -347,6 +353,9 @@ describe ('Exporter', function () { let contentBuffer = gltfFile.GetBufferContent (); let importer = new OV.ImporterGltf (); importer.Import (gltfFile.GetName (), 'gltf', contentBuffer, { + getDefaultLineMaterialColor () { + return new OV.RGBColor (0, 0, 0); + }, getDefaultMaterialColor () { return new OV.RGBColor (0, 0, 0); }, @@ -383,6 +392,9 @@ describe ('Exporter', function () { let contentBuffer = glbFile.GetBufferContent (); let importer = new OV.ImporterGltf (); importer.Import (glbFile.GetName (), 'glb', contentBuffer, { + getDefaultLineMaterialColor () { + return new OV.RGBColor (0, 0, 0); + }, getDefaultMaterialColor () { return new OV.RGBColor (0, 0, 0); }, @@ -416,6 +428,9 @@ describe ('Exporter', function () { let contentBuffer = glbFile.GetBufferContent (); let importer = new OV.ImporterGltf (); importer.Import (glbFile.GetName (), 'glb', contentBuffer, { + getDefaultLineMaterialColor () { + return new OV.RGBColor (0, 0, 0); + }, getDefaultMaterialColor () { return new OV.RGBColor (0, 0, 0); }, @@ -451,6 +466,9 @@ describe ('Exporter', function () { let contentBuffer = glbFile.GetBufferContent (); let importer = new OV.ImporterGltf (); importer.Import (glbFile.GetName (), 'glb', contentBuffer, { + getDefaultLineMaterialColor () { + return new OV.RGBColor (0, 0, 0); + }, getDefaultMaterialColor () { return new OV.RGBColor (0, 0, 0); }, @@ -486,6 +504,9 @@ describe ('Exporter', function () { let contentBuffer = glbFile.GetBufferContent (); let importer = new OV.ImporterGltf (); importer.Import (glbFile.GetName (), 'glb', contentBuffer, { + getDefaultLineMaterialColor () { + return new OV.RGBColor (0, 0, 0); + }, getDefaultMaterialColor () { return new OV.RGBColor (0, 0, 0); }, @@ -521,6 +542,9 @@ describe ('Exporter', function () { let contentBuffer = glbFile.GetBufferContent (); let importer = new OV.ImporterGltf (); importer.Import (glbFile.GetName (), 'glb', contentBuffer, { + getDefaultLineMaterialColor () { + return new OV.RGBColor (0, 0, 0); + }, getDefaultMaterialColor () { return new OV.RGBColor (0, 0, 0); }, diff --git a/test/tests/importer_test.js b/test/tests/importer_test.js index 23e7525..eb09dfe 100644 --- a/test/tests/importer_test.js +++ b/test/tests/importer_test.js @@ -277,7 +277,6 @@ describe ('Importer Test', function () { onFileLoadProgress : (current, total) => { }, onImportStart : function () { - }, onImportSuccess : function (importResult) { assert.ok (!OV.IsModelEmpty (importResult.model)); diff --git a/test/utils/testfiles.js b/test/utils/testfiles.js index b9a6a8b..99b4dc9 100644 --- a/test/utils/testfiles.js +++ b/test/utils/testfiles.js @@ -11,6 +11,9 @@ export function ImportFile (importer, folder, fileName, onReady) return fileContent; }); importer.Import (fileName, extension, content, { + getDefaultLineMaterialColor () { + return new OV.RGBColor (0, 0, 0); + }, getDefaultMaterialColor () { return new OV.RGBColor (0, 0, 0); },