Move shading model to a separate file.

This commit is contained in:
kovacsv 2022-12-31 12:36:08 +01:00
parent c39a63bc1c
commit 6c66557884
7 changed files with 107 additions and 100 deletions

View File

@ -64,11 +64,12 @@ import { ParameterListBuilder, ParameterListParser, CreateUrlBuilder, CreateUrlP
import { ModelToThreeConversionParams, ModelToThreeConversionOutput, ThreeConversionStateHandler, ThreeNodeTree, ConvertModelToThreeObject } from './threejs/threeconverter.js';
import { ThreeModelLoader } from './threejs/threemodelloader.js';
import { HasHighpDriverIssue, GetShadingType, ConvertThreeColorToColor, ConvertColorToThreeColor, ConvertThreeGeometryToMesh, DisposeThreeObjects, ShadingType } from './threejs/threeutils.js';
import { Camera, CameraIsEqual3D } from './viewer/camera.js';
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 { CameraValidator, UpVector, ShadingModel, Viewer, GetDefaultCamera, TraverseThreeObject, GetShadingTypeOfObject, CameraMode } from './viewer/viewer.js';
import { 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';
export {
@ -289,6 +290,7 @@ export {
ShadingType,
Camera,
CameraIsEqual3D,
CameraMode,
GetIntegerFromStyle,
GetDomElementExternalWidth,
GetDomElementExternalHeight,
@ -317,14 +319,13 @@ export {
ClickDetector,
Navigation,
NavigationType,
ShadingModel,
CameraValidator,
UpVector,
ShadingModel,
Viewer,
GetDefaultCamera,
TraverseThreeObject,
GetShadingTypeOfObject,
CameraMode,
ViewerModel,
EdgeSettings,
ViewerMainModel,

View File

@ -1,7 +1,6 @@
import { Coord3D } from '../geometry/coord3d.js';
import { RGBAColor, RGBColor } from '../model/color.js';
import { Camera } from '../viewer/camera.js';
import { CameraMode } from '../viewer/viewer.js';
import { Camera, CameraMode } from '../viewer/camera.js';
import { EdgeSettings } from '../viewer/viewermodel.js';
export let ParameterConverter =

View File

@ -1,6 +1,12 @@
import { CoordIsEqual3D } from '../geometry/coord3d.js';
import { IsEqual } from '../geometry/geometry.js';
export const CameraMode =
{
Perspective : 1,
Orthographic : 2
};
export class Camera
{
constructor (eye, center, up, fov)

View File

@ -0,0 +1,90 @@
import { SubCoord3D } from '../geometry/coord3d.js';
import { CameraMode } from '../viewer/camera.js';
import { ShadingType } from '../threejs/threeutils.js';
import * as THREE from 'three';
export class ShadingModel
{
constructor (scene)
{
this.scene = scene;
this.type = ShadingType.Phong;
this.cameraMode = CameraMode.Perspective;
this.ambientLight = new THREE.AmbientLight (0x888888);
this.directionalLight = new THREE.DirectionalLight (0x888888);
this.environment = null;
this.backgroundIsEnvMap = false;
this.scene.add (this.ambientLight);
this.scene.add (this.directionalLight);
}
SetShadingType (type)
{
this.type = type;
this.UpdateShading ();
}
SetCameraMode (cameraMode)
{
this.cameraMode = cameraMode;
this.UpdateShading ();
}
UpdateShading ()
{
if (this.type === ShadingType.Phong) {
this.ambientLight.color.set (0x888888);
this.directionalLight.color.set (0x888888);
this.scene.environment = null;
} else if (this.type === ShadingType.Physical) {
this.ambientLight.color.set (0x000000);
this.directionalLight.color.set (0x555555);
this.scene.environment = this.environment;
}
if (this.backgroundIsEnvMap && this.cameraMode === CameraMode.Perspective) {
this.scene.background = this.environment;
} else {
this.scene.background = null;
}
}
SetEnvironment (textures, useAsBackground, onLoaded)
{
let loader = new THREE.CubeTextureLoader ();
this.environment = loader.load (textures, () => {
onLoaded ();
});
this.backgroundIsEnvMap = useAsBackground;
}
UpdateByCamera (camera)
{
const lightDir = SubCoord3D (camera.eye, camera.center);
this.directionalLight.position.set (lightDir.x, lightDir.y, lightDir.z);
}
CreateHighlightMaterial (highlightColor, withOffset)
{
let material = null;
if (this.type === ShadingType.Phong) {
material = new THREE.MeshPhongMaterial ({
color : highlightColor,
side : THREE.DoubleSide
});
} else if (this.type === ShadingType.Physical) {
material = new THREE.MeshStandardMaterial ({
color : highlightColor,
side : THREE.DoubleSide
});
}
if (material !== null && withOffset) {
material.polygonOffset = true;
material.polygonOffsetUnit = 1;
material.polygonOffsetFactor = 1;
}
return material;
}
}

View File

@ -2,19 +2,14 @@ import { Coord3D, CoordDistance3D, SubCoord3D } from '../geometry/coord3d.js';
import { DegRad, Direction, IsEqual } from '../geometry/geometry.js';
import { ColorComponentToFloat } from '../model/color.js';
import { ShadingType } from '../threejs/threeutils.js';
import { Camera } from './camera.js';
import { Camera, CameraMode } from './camera.js';
import { GetDomElementInnerDimensions } from './domutils.js';
import { Navigation } from './navigation.js';
import { ShadingModel } from './shadingmodel.js';
import { ViewerModel, ViewerMainModel } from './viewermodel.js';
import * as THREE from 'three';
export const CameraMode =
{
Perspective : 1,
Orthographic : 2
};
export function GetDefaultCamera (direction)
{
let fieldOfView = 45.0;
@ -160,91 +155,6 @@ export class UpVector
}
}
export class ShadingModel
{
constructor (scene)
{
this.scene = scene;
this.type = ShadingType.Phong;
this.cameraMode = CameraMode.Perspective;
this.ambientLight = new THREE.AmbientLight (0x888888);
this.directionalLight = new THREE.DirectionalLight (0x888888);
this.environment = null;
this.backgroundIsEnvMap = false;
this.scene.add (this.ambientLight);
this.scene.add (this.directionalLight);
}
SetShadingType (type)
{
this.type = type;
this.UpdateShading ();
}
SetCameraMode (cameraMode)
{
this.cameraMode = cameraMode;
this.UpdateShading ();
}
UpdateShading ()
{
if (this.type === ShadingType.Phong) {
this.ambientLight.color.set (0x888888);
this.directionalLight.color.set (0x888888);
this.scene.environment = null;
} else if (this.type === ShadingType.Physical) {
this.ambientLight.color.set (0x000000);
this.directionalLight.color.set (0x555555);
this.scene.environment = this.environment;
}
if (this.backgroundIsEnvMap && this.cameraMode === CameraMode.Perspective) {
this.scene.background = this.environment;
} else {
this.scene.background = null;
}
}
SetEnvironment (textures, useAsBackground, onLoaded)
{
let loader = new THREE.CubeTextureLoader ();
this.environment = loader.load (textures, () => {
onLoaded ();
});
this.backgroundIsEnvMap = useAsBackground;
}
UpdateByCamera (camera)
{
const lightDir = SubCoord3D (camera.eye, camera.center);
this.directionalLight.position.set (lightDir.x, lightDir.y, lightDir.z);
}
CreateHighlightMaterial (highlightColor, withOffset)
{
let material = null;
if (this.type === ShadingType.Phong) {
material = new THREE.MeshPhongMaterial ({
color : highlightColor,
side : THREE.DoubleSide
});
} else if (this.type === ShadingType.Physical) {
material = new THREE.MeshStandardMaterial ({
color : highlightColor,
side : THREE.DoubleSide
});
}
if (material !== null && withOffset) {
material.polygonOffset = true;
material.polygonOffsetUnit = 1;
material.polygonOffsetFactor = 1;
}
return material;
}
}
export class Viewer
{
constructor ()

View File

@ -6,7 +6,7 @@ import { PopupDialog } from './dialog.js';
import { Settings, Theme } from './settings.js';
import { SidebarPanel } from './sidebarpanel.js';
import { ShadingType } from '../engine/threejs/threeutils.js';
import { CameraMode } from '../engine/viewer/viewer.js';
import { CameraMode } from '../engine/viewer/camera.js';
function AddColorPicker (parentDiv, opacity, defaultColor, predefinedColors, onChange)
{

View File

@ -1,7 +1,8 @@
import { GetFileExtension, TransformFileHostUrls } from '../engine/io/fileutils.js';
import { InputFilesFromFileObjects, InputFilesFromUrls } from '../engine/import/importerfiles.js';
import { ImportErrorCode, ImportSettings } from '../engine/import/importer.js';
import { CameraMode, Viewer } from '../engine/viewer/viewer.js';
import { CameraMode } from '../engine/viewer/camera.js';
import { Viewer } from '../engine/viewer/viewer.js';
import { AddDiv, AddDomElement, ShowDomElement, SetDomElementOuterHeight, CreateDomElement, GetDomElementOuterWidth } from '../engine/viewer/domutils.js';
import { CalculatePopupPositionToScreen, ShowListPopup } from './dialogs.js';
import { HandleEvent } from './eventhandler.js';