@shapediver/viewer.rendering-engine.rendering-engine-threejs 3.0.0

package/src/managers/CameraManager.ts

@@ -0,0 +1,178 @@
+import * as THREE from 'three';
+import { IManager } from '@shapediver/viewer.rendering-engine.rendering-engine';
+import { mat4, vec3 } from 'gl-matrix';
+import { RenderingEngine } from '../RenderingEngine';
+import { SDData } from '../objects/SDData';
+import {
+    AbstractCamera,
+    CAMERA_TYPE,
+    OrthographicCamera,
+    PerspectiveCamera,
+} from '@shapediver/viewer.rendering-engine.camera-engine';
+
+export class CameraManager implements IManager {
+    // #region Properties (2)
+
+    #camera: THREE.Camera = new THREE.PerspectiveCamera();
+    #cameraCache: { [key: string]: THREE.Camera } = {};
+
+    // #endregion Properties (2)
+
+    // #region Constructors (1)
+
+    constructor(private readonly _renderingEngine: RenderingEngine) { }
+
+    // #endregion Constructors (1)
+
+    // #region Public Getters And Setters (1)
+
+    public get camera(): THREE.Camera {
+        return this.#camera;
+    }
+
+    // #endregion Public Getters And Setters (1)
+
+    // #region Public Methods (4)
+
+    public adjustCamera(aspect: number): { camera: THREE.Camera, matrix?: mat4 } {
+        let cameraThree: THREE.Camera;
+        let matrix;
+
+        const camera = this._renderingEngine.cameraEngine.camera!;
+        if (camera.useNodeData) {
+            const sdCameraNode = camera.convertedObject[this._renderingEngine.id] as THREE.Object3D;
+            const sdCameraData = sdCameraNode.children[0];
+            cameraThree = <THREE.Camera>sdCameraData.children[0];
+        } else {
+            if (this._renderingEngine.cameraEngine.camera!.type === CAMERA_TYPE.ORTHOGRAPHIC) {
+                const orthographicCameraData = <OrthographicCamera>camera;
+                let orthographicCameraThreeJs = orthographicCameraData.convertedObject[this._renderingEngine.id] as THREE.OrthographicCamera;
+                if (!orthographicCameraThreeJs) this.load(orthographicCameraData);
+                orthographicCameraThreeJs = orthographicCameraData.convertedObject[this._renderingEngine.id] as THREE.OrthographicCamera;
+
+                const distance = vec3.distance(orthographicCameraData.position, orthographicCameraData.target) / 2;
+                orthographicCameraThreeJs.up.set(orthographicCameraData.up[0], orthographicCameraData.up[1], orthographicCameraData.up[2]);
+                orthographicCameraThreeJs.left = orthographicCameraData.left = -distance * aspect;
+                orthographicCameraThreeJs.bottom = orthographicCameraData.bottom = -distance;
+                orthographicCameraThreeJs.right = orthographicCameraData.right = distance * aspect;
+                orthographicCameraThreeJs.top = orthographicCameraData.top = distance;
+                orthographicCameraThreeJs.near = orthographicCameraData.near = 0.01;
+                orthographicCameraThreeJs.far = orthographicCameraData.far = 100 * distance;
+                orthographicCameraThreeJs.position.set(orthographicCameraData.position[0], orthographicCameraData.position[1], orthographicCameraData.position[2]);
+                orthographicCameraThreeJs.lookAt(orthographicCameraData.target[0], orthographicCameraData.target[1], orthographicCameraData.target[2]);
+                orthographicCameraThreeJs.updateProjectionMatrix();
+                
+                if (orthographicCameraData.controls.enableTurntableControls === true) {
+                    matrix = mat4.create();
+                    mat4.rotateZ(matrix, matrix, -orthographicCameraData.sceneRotation[1]);
+                    mat4.translate(matrix, matrix, orthographicCameraData.controls.turntableCenter);
+                } else if (orthographicCameraData.controls.enableObjectControls === true) {
+                    matrix = mat4.create();
+                    mat4.rotateX(matrix, matrix, -orthographicCameraData.sceneRotation[0]);
+                    mat4.rotateZ(matrix, matrix, -orthographicCameraData.sceneRotation[1]);
+                    mat4.translate(matrix, matrix, orthographicCameraData.controls.objectControlsCenter);
+                }
+
+                cameraThree = orthographicCameraThreeJs;
+            } else {
+                const perspectiveCameraData = <PerspectiveCamera>camera;
+                let perspectiveCameraThreeJs = perspectiveCameraData.convertedObject[this._renderingEngine.id] as THREE.PerspectiveCamera;
+                if (!perspectiveCameraThreeJs) this.load(perspectiveCameraData);
+                perspectiveCameraThreeJs = perspectiveCameraData.convertedObject[this._renderingEngine.id] as THREE.PerspectiveCamera;
+
+                perspectiveCameraThreeJs.up.set(0, 0, 1);
+                const fov = (<PerspectiveCamera>this._renderingEngine.cameraEngine.camera).fov;
+                const bs = this._renderingEngine.sceneTreeManager.boundingBox.boundingSphere;
+                const radius = bs.radius > 0 ? bs.radius : 2;
+                perspectiveCameraThreeJs.fov = perspectiveCameraData.fov = fov;
+                perspectiveCameraThreeJs.aspect = perspectiveCameraData.aspect = aspect;
+                perspectiveCameraThreeJs.far = perspectiveCameraData.far = (fov < 10 ? fov * 100.0 * 100 * radius : 100 * radius);
+                perspectiveCameraThreeJs.near = perspectiveCameraData.near = (fov < 10 ? fov * 100.0 * 0.01 * radius : 0.01 * radius);
+                perspectiveCameraThreeJs.position.set(perspectiveCameraData.position[0], perspectiveCameraData.position[1], perspectiveCameraData.position[2]);
+                perspectiveCameraThreeJs.lookAt(perspectiveCameraData.target[0], perspectiveCameraData.target[1], perspectiveCameraData.target[2]);
+                perspectiveCameraThreeJs.updateProjectionMatrix();
+
+                if (perspectiveCameraData.controls.enableTurntableControls === true) {
+                    matrix = mat4.create();
+                    mat4.rotateZ(matrix, matrix, -perspectiveCameraData.sceneRotation[1]);
+                    mat4.translate(matrix, matrix, perspectiveCameraData.controls.turntableCenter);
+                } else if (perspectiveCameraData.controls.enableObjectControls === true) {
+                    matrix = mat4.create();
+                    mat4.rotateX(matrix, matrix, -perspectiveCameraData.sceneRotation[0]);
+                    mat4.rotateZ(matrix, matrix, -perspectiveCameraData.sceneRotation[1]);
+                    mat4.translate(matrix, matrix, perspectiveCameraData.controls.objectControlsCenter);
+                }
+
+                cameraThree = perspectiveCameraThreeJs;
+            }
+        }
+
+        this.#camera = cameraThree;
+        return { camera: cameraThree, matrix };
+    }
+
+    public init(): void { }
+
+    public load(camera: AbstractCamera, dataChild?: SDData) {
+        let threeCamera: THREE.Camera | null = this.#cameraCache[camera.id];
+
+        if (camera instanceof PerspectiveCamera) {
+            if (!threeCamera) {
+                threeCamera = new THREE.PerspectiveCamera();
+                this.#cameraCache[camera.id] = threeCamera;
+                camera.convertedObject[this._renderingEngine.id] = <THREE.PerspectiveCamera>threeCamera;
+                if (dataChild)
+                    dataChild.add(threeCamera);
+            } else {
+                camera.convertedObject[this._renderingEngine.id] = <THREE.PerspectiveCamera>threeCamera;
+                if (dataChild && !dataChild.children.find(t => t === threeCamera))
+                    dataChild.add(threeCamera);
+            }
+            const perspectiveCamera = <PerspectiveCamera>camera;
+            const threePerspectiveCamera = <THREE.PerspectiveCamera>threeCamera;
+
+            threePerspectiveCamera.up.set(0, 0, 1);
+            if (perspectiveCamera.useNodeData) {
+                threePerspectiveCamera.fov = perspectiveCamera.fov;
+                threePerspectiveCamera.aspect = perspectiveCamera.aspect!;
+                threePerspectiveCamera.far = perspectiveCamera.far;
+                threePerspectiveCamera.near = perspectiveCamera.near;
+                threePerspectiveCamera.updateProjectionMatrix();
+            }
+
+        } else {
+            if (!threeCamera) {
+                threeCamera = new THREE.OrthographicCamera(0, 0, 0, 0);
+                this.#cameraCache[camera.id] = threeCamera;
+                camera.convertedObject[this._renderingEngine.id] = <THREE.OrthographicCamera>threeCamera;
+                if (dataChild)
+                    dataChild.add(threeCamera);
+            } else {
+                camera.convertedObject[this._renderingEngine.id] = <THREE.OrthographicCamera>threeCamera;
+                if (dataChild && !dataChild.children.find(t => t === threeCamera))
+                    dataChild.add(threeCamera);
+            }
+            const orthographicCamera = <OrthographicCamera>camera;
+            const threeOrthographicCamera = <THREE.OrthographicCamera>threeCamera;
+
+            threeOrthographicCamera.up.set(orthographicCamera.up[0], orthographicCamera.up[1], orthographicCamera.up[2]);
+            if (orthographicCamera.useNodeData) {
+                threeOrthographicCamera.left = orthographicCamera.left;
+                threeOrthographicCamera.bottom = orthographicCamera.bottom;
+                threeOrthographicCamera.right = orthographicCamera.right;
+                threeOrthographicCamera.top = orthographicCamera.top;
+                threeOrthographicCamera.near = orthographicCamera.near;
+                threeOrthographicCamera.far = orthographicCamera.far;
+                threeOrthographicCamera.updateProjectionMatrix();
+            }
+        }
+    }
+
+    public updateCamera(time: number, aspect: number): boolean {
+        if (this._renderingEngine.cameraEngine.camera?.type === 'perspective')
+            (<PerspectiveCamera>this._renderingEngine.cameraEngine.camera).aspect = aspect;
+        return (<AbstractCamera>this._renderingEngine.cameraEngine.camera)!.update(time);
+    }
+
+    // #endregion Public Methods (4)
+}

package/src/managers/EnvironmentGeometryManager.ts

@@ -0,0 +1,224 @@
+import * as THREE from 'three'
+import { MATERIAL_SIDE, MaterialStandardData, ISceneEvent, MaterialShadowData, Color } from '@shapediver/viewer.shared.types'
+import { vec3 } from 'gl-matrix'
+import { Box, IBox } from '@shapediver/viewer.shared.math'
+import { Converter, EventEngine, EVENTTYPE } from '@shapediver/viewer.shared.services'
+
+import { RenderingEngine } from '..'
+import { SDData } from '../objects/SDData'
+import { SDObject } from '../objects/SDObject'
+import { IManager } from '@shapediver/viewer.rendering-engine.rendering-engine'
+
+export class EnvironmentGeometryManager implements IManager {
+    // #region Properties (5)
+    private readonly _converter: Converter = Converter.instance;
+    private readonly _eventEngine: EventEngine = EventEngine.instance;
+
+    private _environmentGeometryObject!: SDObject;
+    private _grid!: THREE.GridHelper;
+    private _gridObject!: SDData;
+    private _groundPlane!: THREE.Mesh;
+    private _groundPlaneShadow!: THREE.Mesh;
+    private _groundPlaneObject!: SDData;
+    private _groundPlaneShadowObject!: SDData;
+    private _groundPlaneColor: Color = '#d3d3d3ff';
+    private _groundPlaneShadowColor: Color = '#d3d3d3ff';
+    private _gridColor: Color = '#44444426';
+
+    private _initialized: boolean = false;
+
+    // #endregion Properties (5)
+
+    // #region Constructors (1)
+
+    constructor(private readonly _renderingEngine: RenderingEngine) {
+        this._eventEngine.addListener(EVENTTYPE.SCENE.SCENE_BOUNDING_BOX_CHANGE, (e) => {
+            this.updateEnvironmentGeometryPosition();
+        })
+    }
+
+    // #endregion Constructors (1)
+
+    // #region Public Accessors (2)
+
+    public get gridColor(): Color {
+        return this._gridColor;
+    } 
+    
+    public set gridColor(value: Color) {
+        this._gridColor = value;
+        (<THREE.LineBasicMaterial>this._grid.material).opacity = typeof this._gridColor == 'string' && this._gridColor.length <= 8 ? 0.15 : this._converter.toAlpha(this._gridColor);
+        (<THREE.LineBasicMaterial>this._grid.material).transparent = (<THREE.LineBasicMaterial>this._grid.material).opacity !== 1;
+        (<THREE.LineBasicMaterial>this._grid.material).color = this._renderingEngine.createThreeJsColor(this._gridColor);
+        (<THREE.LineBasicMaterial>this._grid.material).needsUpdate = true;
+    }
+
+    public get groundPlaneColor(): Color {
+        return this._groundPlaneColor;
+    } 
+    
+    public set groundPlaneColor(value: Color) {
+        this._groundPlaneColor = value;
+        this.assignGroundPlaneColor(value);
+    }
+
+    public get groundPlaneShadowColor(): Color {
+        return this._groundPlaneShadowColor;
+    } 
+    
+    public set groundPlaneShadowColor(value: Color) {
+        this._groundPlaneShadowColor = value;
+        this.assignGroundPlaneShadowColor(value);
+    }
+
+    public get grid(): THREE.GridHelper {
+        return this._grid;
+    }
+
+    public get groundPlane(): THREE.Mesh {
+        return this._groundPlane;
+    }
+
+    public get groundPlaneShadow(): THREE.Mesh {
+        return this._groundPlaneShadow;
+    }
+
+    // #endregion Public Accessors (2)
+
+    // #region Public Methods (2)
+
+    public assignGroundPlaneColor(color: Color) {
+        (<THREE.MeshPhysicalMaterial>this._groundPlane.material).opacity = this._converter.toAlpha(color);
+        (<THREE.MeshPhysicalMaterial>this._groundPlane.material).transparent = (<THREE.MeshPhysicalMaterial>this._groundPlane.material).opacity !== 1;
+        (<THREE.MeshPhysicalMaterial>this._groundPlane.material).depthWrite = !(<THREE.MeshPhysicalMaterial>this._groundPlane.material).transparent;
+        (<THREE.MeshPhysicalMaterial>this._groundPlane.material).color = this._renderingEngine.createThreeJsColor(color);
+        (<THREE.MeshPhysicalMaterial>this._groundPlane.material).needsUpdate = true;
+    }    
+
+    public assignGroundPlaneShadowColor(color: Color) {
+        (<THREE.ShadowMaterial>this._groundPlaneShadow.material).opacity = this._converter.toAlpha(color);
+        (<THREE.ShadowMaterial>this._groundPlaneShadow.material).color = this._renderingEngine.createThreeJsColor(color);
+        (<THREE.ShadowMaterial>this._groundPlaneShadow.material).needsUpdate = true;
+    } 
+
+    /**
+     * Creates the grid extents and divisios with the specified scene extents.
+     * 
+     * https://shapediver.atlassian.net/browse/SS-2961 evaluate this magic.
+     */
+    private evaluateGridMeasurements(sceneExtents: number) {
+        let divisions = 0.1;
+        let gridExtents = 1.0;
+        if (sceneExtents > 1) {
+            let tmp = Math.floor(sceneExtents).toString();
+            let temp = Math.pow(10, tmp.length - 1);
+            gridExtents = Math.max(Math.ceil(sceneExtents / temp) * temp, 1);
+            temp = temp / 10;
+            divisions = gridExtents / temp;
+        }
+        else if (sceneExtents !== 0) {
+            let zeros = 1 - Math.floor(Math.log(sceneExtents) / Math.log(10)) - 2;
+            let r = sceneExtents.toFixed(zeros + 1);
+            let firstDigit = parseInt(r.substr(r.length - 1)) + 1;
+            let gridExtentsS = '0.';
+            for (let i = 0; i < zeros; ++i)
+                gridExtentsS = gridExtentsS + '0';
+            gridExtents = parseFloat(gridExtentsS + firstDigit);
+            divisions = firstDigit * 10;
+        }
+
+        return { divisions, gridExtents }
+    }
+
+    public changeSceneExtents(bb: IBox) {
+        if (((bb.min[0] === 0 && bb.min[1] === 0 && bb.min[2] === 0) && (bb.max[0] === 0 && bb.max[1] === 0 && bb.max[2] === 0)) || bb.isEmpty()) return;
+
+        this._initialized = true;
+        let sceneExtents = vec3.distance(bb.min, bb.max);
+        const { divisions, gridExtents } = this.evaluateGridMeasurements(sceneExtents);
+
+        this._gridObject.remove(this._grid);
+        this._grid = new THREE.GridHelper(2 * gridExtents, divisions);
+        (<THREE.LineBasicMaterial>this._grid.material).opacity = typeof this._gridColor == 'string' && this._gridColor.length <= 8 ? 0.15 : this._converter.toAlpha(this._gridColor);
+        (<THREE.LineBasicMaterial>this._grid.material).transparent = (<THREE.LineBasicMaterial>this._grid.material).opacity !== 1;
+        (<THREE.LineBasicMaterial>this._grid.material).color = this._renderingEngine.createThreeJsColor(this._gridColor);
+        this._grid.rotateX(Math.PI / 2);
+        this._grid.visible = this._renderingEngine.gridVisibility;
+        this._gridObject.add(this._grid);
+
+        this._groundPlane.geometry = new THREE.PlaneGeometry(2 * gridExtents, 2 * gridExtents, 2, 2);
+        this._groundPlaneShadow.geometry = new THREE.PlaneGeometry(2 * gridExtents, 2 * gridExtents, 2, 2);
+
+        let eps = 0.005;
+        let bs = bb.boundingSphere;
+        this._grid.position.set(bs.center[0], bs.center[1], bb.min[2] - eps);
+        this._groundPlane.position.set(bs.center[0], bs.center[1], bb.min[2] - 2*eps);
+        this._groundPlaneShadow.position.set(bs.center[0], bs.center[1], bb.min[2] - 2*eps);
+    }
+
+    public init(): void {
+        this._environmentGeometryObject = new SDObject('environmentGeometry', '');
+        this._renderingEngine.sceneTreeManager.scene.add(this._environmentGeometryObject);
+        
+        this._gridObject = new SDData('grid', '');
+        this._grid = new THREE.GridHelper();
+        (<THREE.LineBasicMaterial>this._grid.material).opacity = typeof this._gridColor == 'string' && this._gridColor.length <= 8 ? 0.15 : this._converter.toAlpha(this._gridColor);
+        (<THREE.LineBasicMaterial>this._grid.material).transparent = (<THREE.LineBasicMaterial>this._grid.material).opacity !== 1;
+        (<THREE.LineBasicMaterial>this._grid.material).color = this._renderingEngine.createThreeJsColor(this._gridColor);
+        this._grid.rotateX(Math.PI / 2);
+        this._grid.visible = this._renderingEngine.gridVisibility;
+        this._gridObject.add(this._grid);
+        this._environmentGeometryObject.add(this._gridObject);
+
+        this._groundPlaneObject = new SDData('groundPlane', '');
+        let mat = new MaterialStandardData();
+        mat.color = this._groundPlaneColor;
+        mat.side = MATERIAL_SIDE.FRONT;
+        mat.opacity = this._converter.toAlpha(this._groundPlaneColor);        
+        mat.roughness = 1;
+        mat.metalness = 0;
+        this._groundPlane = new THREE.Mesh(new THREE.PlaneGeometry(), this._renderingEngine.materialLoader.load(mat));
+        this._groundPlane.receiveShadow = true;
+        this._groundPlane.visible = this._renderingEngine.groundPlaneVisibility;
+        this._groundPlaneObject.add(this._groundPlane);
+        this._environmentGeometryObject.add(this._groundPlaneObject);
+
+        this._groundPlaneShadowObject = new SDData('groundPlaneShadow', '');
+        let matShadow = new MaterialShadowData();
+        matShadow.color = this._groundPlaneShadowColor;
+        matShadow.opacity = this._converter.toAlpha(this._groundPlaneShadowColor);
+        this._groundPlaneShadow = new THREE.Mesh(new THREE.PlaneGeometry(), this._renderingEngine.materialLoader.load(matShadow));
+        this._groundPlaneShadow.receiveShadow = true;
+        this._groundPlaneShadow.visible = this._renderingEngine.groundPlaneShadowVisibility;
+        this._groundPlaneShadowObject.add(this._groundPlaneShadow);
+        this._groundPlaneShadowObject.userData.ambientOcclusion = false;
+        this._environmentGeometryObject.add(this._groundPlaneShadowObject);
+
+        let eps = 0.005;
+        this._grid.position.set(0, 0, -eps);
+        this._groundPlane.position.set(0, 0, -eps);
+        this._groundPlaneShadow.position.set(0, 0, -eps);
+    }
+
+    public updateEnvironmentGeometryPosition(): void {
+        const bb = new Box(this._renderingEngine.sceneTreeManager.boundingBox.min, this._renderingEngine.sceneTreeManager.boundingBox.max);
+        if (((bb.min[0] === 0 && bb.min[1] === 0 && bb.min[2] === 0) && (bb.max[0] === 0 && bb.max[1] === 0 && bb.max[2] === 0)) || bb.isEmpty()) return;
+
+        if(!this._initialized) {
+            this.changeSceneExtents(bb)
+        } else {
+            let eps = 0.005;
+            let bs = bb.boundingSphere;
+
+            let sceneExtents = vec3.distance(bb.min, bb.max);
+            const { divisions, gridExtents } = this.evaluateGridMeasurements(sceneExtents);
+            this._groundPlaneShadow.geometry = new THREE.PlaneGeometry(2 * gridExtents, 2 * gridExtents, 2, 2);
+
+            if(this._grid) this._grid.position.set(bs.center[0], bs.center[1], bb.min[2] - eps);
+            if(this._groundPlane) this._groundPlane.position.set(bs.center[0], bs.center[1], bb.min[2] - 2*eps);
+            if(this._groundPlaneShadow) this._groundPlaneShadow.position.set(bs.center[0], bs.center[1], bb.min[2] - 2*eps);
+        }
+    }
+
+    // #endregion Public Methods (2)
+}