diff --git a/source/engine/main.js b/source/engine/main.js index 6d552d4..818fe90 100644 --- a/source/engine/main.js +++ b/source/engine/main.js @@ -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, diff --git a/source/engine/parameters/parameterlist.js b/source/engine/parameters/parameterlist.js index 2f6cfe6..4b1e8e3 100644 --- a/source/engine/parameters/parameterlist.js +++ b/source/engine/parameters/parameterlist.js @@ -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 = diff --git a/source/engine/viewer/camera.js b/source/engine/viewer/camera.js index 2ec3804..ee4c8f3 100644 --- a/source/engine/viewer/camera.js +++ b/source/engine/viewer/camera.js @@ -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) diff --git a/source/engine/viewer/shadingmodel.js b/source/engine/viewer/shadingmodel.js new file mode 100644 index 0000000..34b4a68 --- /dev/null +++ b/source/engine/viewer/shadingmodel.js @@ -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; + } +} diff --git a/source/engine/viewer/viewer.js b/source/engine/viewer/viewer.js index 564500e..a66eeed 100644 --- a/source/engine/viewer/viewer.js +++ b/source/engine/viewer/viewer.js @@ -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 () diff --git a/source/website/sidebarsettingspanel.js b/source/website/sidebarsettingspanel.js index b55543c..18e1f7f 100644 --- a/source/website/sidebarsettingspanel.js +++ b/source/website/sidebarsettingspanel.js @@ -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) { diff --git a/source/website/website.js b/source/website/website.js index a171275..0b83125 100644 --- a/source/website/website.js +++ b/source/website/website.js @@ -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';