Create class for environment settings.

This commit is contained in:
kovacsv 2023-01-03 21:58:36 +01:00
parent 6c66557884
commit f3e79a74c2
10 changed files with 67 additions and 44 deletions

View File

@ -37,8 +37,8 @@
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
environmentSettings : {
environmentMap : [
environmentSettings : new OV.EnvironmentSettings (
[
'../website/assets/envmaps/fishermans_bastion/posx.jpg',
'../website/assets/envmaps/fishermans_bastion/negx.jpg',
'../website/assets/envmaps/fishermans_bastion/posy.jpg',
@ -46,8 +46,8 @@
'../website/assets/envmaps/fishermans_bastion/posz.jpg',
'../website/assets/envmaps/fishermans_bastion/negz.jpg'
],
backgroundIsEnvMap : true
},
true
),
onModelLoaded : () => {
OnModelLoaded (viewer.GetModel ());
}

View File

@ -29,8 +29,8 @@
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
environmentSettings : {
environmentMap : [
environmentSettings : new OV.EnvironmentSettings (
[
'../website/assets/envmaps/fishermans_bastion/posx.jpg',
'../website/assets/envmaps/fishermans_bastion/negx.jpg',
'../website/assets/envmaps/fishermans_bastion/posy.jpg',
@ -38,8 +38,8 @@
'../website/assets/envmaps/fishermans_bastion/posz.jpg',
'../website/assets/envmaps/fishermans_bastion/negz.jpg'
],
backgroundIsEnvMap : false
}
false
)
});
// load a model selected by file input

View File

@ -35,8 +35,8 @@
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
environmentSettings : {
environmentMap : [
environmentSettings : new OV.EnvironmentSettings (
[
'../website/assets/envmaps/fishermans_bastion/posx.jpg',
'../website/assets/envmaps/fishermans_bastion/negx.jpg',
'../website/assets/envmaps/fishermans_bastion/posy.jpg',
@ -44,8 +44,8 @@
'../website/assets/envmaps/fishermans_bastion/posz.jpg',
'../website/assets/envmaps/fishermans_bastion/negz.jpg'
],
backgroundIsEnvMap : false
}
false
)
});
// load a model providing model urls

View File

@ -36,8 +36,8 @@
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
environmentSettings : {
environmentMap : [
environmentSettings : new OV.EnvironmentSettings (
[
'../website/assets/envmaps/fishermans_bastion/posx.jpg',
'../website/assets/envmaps/fishermans_bastion/negx.jpg',
'../website/assets/envmaps/fishermans_bastion/posy.jpg',
@ -45,8 +45,8 @@
'../website/assets/envmaps/fishermans_bastion/posz.jpg',
'../website/assets/envmaps/fishermans_bastion/negz.jpg'
],
backgroundIsEnvMap : false
}
false
)
});
// load a model providing model urls

View File

@ -68,7 +68,7 @@ import { Camera, CameraIsEqual3D, CameraMode } from './viewer/camera.js';
import { GetIntegerFromStyle, GetDomElementExternalWidth, GetDomElementExternalHeight, GetDomElementInnerDimensions, GetDomElementClientCoordinates, CreateDomElement, AddDomElement, AddDiv, ClearDomElement, InsertDomElementBefore, InsertDomElementAfter, ShowDomElement, IsDomElementVisible, SetDomElementWidth, SetDomElementHeight, GetDomElementOuterWidth, GetDomElementOuterHeight, SetDomElementOuterWidth, SetDomElementOuterHeight, CreateDiv } from './viewer/domutils.js';
import { EmbeddedViewer, Init3DViewerElement, Init3DViewerElements } from './viewer/embeddedviewer.js';
import { MouseInteraction, TouchInteraction, ClickDetector, Navigation, NavigationType } from './viewer/navigation.js';
import { ShadingModel } from './viewer/shadingmodel.js';
import { EnvironmentSettings, ShadingModel } from './viewer/shadingmodel.js';
import { CameraValidator, UpVector, Viewer, GetDefaultCamera, TraverseThreeObject, GetShadingTypeOfObject } from './viewer/viewer.js';
import { ViewerModel, EdgeSettings, ViewerMainModel, SetThreeMeshPolygonOffset } from './viewer/viewermodel.js';
@ -319,6 +319,7 @@ export {
ClickDetector,
Navigation,
NavigationType,
EnvironmentSettings,
ShadingModel,
CameraValidator,
UpVector,

View File

@ -6,6 +6,7 @@ import { TransformFileHostUrls } from '../io/fileutils.js';
import { ParameterConverter } from '../parameters/parameterlist.js';
import { ThreeModelLoader } from '../threejs/threemodelloader.js';
import { Viewer } from './viewer.js';
import { EnvironmentSettings } from './shadingmodel.js';
export class EmbeddedViewer
{
@ -40,9 +41,7 @@ export class EmbeddedViewer
}
if (this.parameters.environmentSettings) {
let environmentMap = this.parameters.environmentSettings.environmentMap;
let backgroundIsEnvMap = this.parameters.environmentSettings.backgroundIsEnvMap;
this.viewer.SetEnvironmentMapSettings (environmentMap, backgroundIsEnvMap);
this.viewer.SetEnvironmentMapSettings (this.parameters.environmentSettings);
}
this.model = null;
@ -213,10 +212,7 @@ export function Init3DViewerElements (onReady)
if (backgroundIsEnvMapParam && backgroundIsEnvMapParam === 'true') {
backgroundIsEnvMap = true;
}
environmentSettings = {
environmentMap : environmentMapParts,
backgroundIsEnvMap : backgroundIsEnvMap
};
environmentSettings = new EnvironmentSettings (environmentMapParts, backgroundIsEnvMap);
}
}

View File

@ -4,6 +4,27 @@ import { ShadingType } from '../threejs/threeutils.js';
import * as THREE from 'three';
export class EnvironmentSettings
{
constructor (textureNames, backgroundIsEnvMap)
{
this.textureNames = textureNames;
this.backgroundIsEnvMap = backgroundIsEnvMap;
}
Clone ()
{
let textureNames = null;
if (this.textureNames !== null) {
textureNames = [];
for (let textureName of this.textureNames) {
textureNames.push (textureName);
}
}
return new EnvironmentSettings (textureNames, this.backgroundIsEnvMap);
}
}
export class ShadingModel
{
constructor (scene)
@ -14,8 +35,8 @@ export class ShadingModel
this.cameraMode = CameraMode.Perspective;
this.ambientLight = new THREE.AmbientLight (0x888888);
this.directionalLight = new THREE.DirectionalLight (0x888888);
this.environmentSettings = new EnvironmentSettings (null, false);
this.environment = null;
this.backgroundIsEnvMap = false;
this.scene.add (this.ambientLight);
this.scene.add (this.directionalLight);
@ -44,20 +65,20 @@ export class ShadingModel
this.directionalLight.color.set (0x555555);
this.scene.environment = this.environment;
}
if (this.backgroundIsEnvMap && this.cameraMode === CameraMode.Perspective) {
if (this.environmentSettings.backgroundIsEnvMap && this.cameraMode === CameraMode.Perspective) {
this.scene.background = this.environment;
} else {
this.scene.background = null;
}
}
SetEnvironment (textures, useAsBackground, onLoaded)
SetEnvironmentMapSettings (environmentSettings, onLoaded)
{
let loader = new THREE.CubeTextureLoader ();
this.environment = loader.load (textures, () => {
this.environment = loader.load (environmentSettings.textureNames, () => {
onLoaded ();
});
this.backgroundIsEnvMap = useAsBackground;
this.environmentSettings = environmentSettings;
}
UpdateByCamera (camera)

View File

@ -217,9 +217,17 @@ export class Viewer
this.navigation.SetContextMenuHandler (onContext);
}
SetEnvironmentMapSettings (textures, useAsBackground)
SetEdgeSettings (edgeSettings)
{
this.shadingModel.SetEnvironment (textures, useAsBackground, () => {
let newEdgeSettings = edgeSettings.Clone ();
this.mainModel.SetEdgeSettings (newEdgeSettings);
this.Render ();
}
SetEnvironmentMapSettings (environmentSettings)
{
let newEnvironmentSettings = environmentSettings.Clone ();
this.shadingModel.SetEnvironmentMapSettings (newEnvironmentSettings, () => {
this.Render ();
});
this.shadingModel.UpdateShading ();
@ -238,13 +246,6 @@ export class Viewer
this.Render ();
}
SetEdgeSettings (edgeSettings)
{
let newEdgeSettings = edgeSettings.Clone ();
this.mainModel.SetEdgeSettings (newEdgeSettings);
this.Render ();
}
GetCanvas ()
{
return this.canvas;

View File

@ -7,6 +7,7 @@ import { HashHandler } from './hashhandler.js';
import { ThreeModelLoaderUI } from './threemodelloaderui.js';
import { Direction } from '../engine/geometry/geometry.js';
import { InputFilesFromUrls } from '../engine/import/importerfiles.js';
import { EnvironmentSettings } from '../engine/viewer/shadingmodel.js';
export class Embed
{
@ -33,10 +34,10 @@ export class Embed
let envMapName = 'fishermans_bastion';
let bgIsEnvMap = false;
let environmentSettings = this.hashHandler.GetEnvironmentSettingsFromHash ();
if (environmentSettings !== null) {
envMapName = environmentSettings.environmentMapName;
bgIsEnvMap = environmentSettings.backgroundIsEnvMap;
let environmentSettingsObj = this.hashHandler.GetEnvironmentSettingsFromHash ();
if (environmentSettingsObj !== null) {
envMapName = environmentSettingsObj.environmentMapName;
bgIsEnvMap = environmentSettingsObj.backgroundIsEnvMap;
}
let envMapPath = 'assets/envmaps/' + envMapName + '/';
let envMapTextures = [
@ -47,7 +48,8 @@ export class Embed
envMapPath + 'posz.jpg',
envMapPath + 'negz.jpg'
];
this.viewer.SetEnvironmentMapSettings (envMapTextures, bgIsEnvMap);
let environmentSettings = new EnvironmentSettings (envMapTextures, bgIsEnvMap);
this.viewer.SetEnvironmentMapSettings (environmentSettings);
let cameraMode = this.hashHandler.GetCameraModeFromHash ();
if (cameraMode !== null) {

View File

@ -27,6 +27,7 @@ import { CreateVerticalSplitter } from './splitter.js';
import { EnumeratePlugins, PluginType } from './pluginregistry.js';
import * as THREE from 'three';
import { EnvironmentSettings } from '../engine/viewer/shadingmodel.js';
const WebsiteUIState =
{
@ -551,7 +552,8 @@ export class Website
envMapPath + 'posz.jpg',
envMapPath + 'negz.jpg'
];
this.viewer.SetEnvironmentMapSettings (envMapTextures, this.settings.backgroundIsEnvMap);
let environmentSettings = new EnvironmentSettings (envMapTextures, this.settings.backgroundIsEnvMap);
this.viewer.SetEnvironmentMapSettings (environmentSettings);
}
SwitchTheme (newThemeId, resetColors)