src/core/UIManager.js
/**
	* Initializes the UI manager.
	*
	* @return {UIManager} A reference to this UI manager.
	*/
Initializes the UI manager.
@return {UIManager} A reference to this UI manager.
Initializes the UI manager . @return { UIManager } A reference to this UI manager .
init() {
		this._buildFPSInterface();
		const world = this.world;
		if ( world.debug ) {
			const gui = new DAT.GUI( { width: 300 } );
			const params = this.debugParameter;
			 nav mesh folder
			const folderNavMesh = gui.addFolder( 'Navigation Mesh' );
			folderNavMesh.open();
			folderNavMesh.add( params, 'showRegions' ).name( 'show convex regions' ).onChange( ( value ) => {
				world.helpers.convexRegionHelper.visible = value;
			} );
			folderNavMesh.add( params, 'showSpatialIndex', 1, 30 ).name( 'show spatial index' ).onChange( ( value ) => {
				world.helpers.spatialIndexHelper.visible = value;
			} );
			folderNavMesh.add( params, 'showPaths', 1, 30 ).name( 'show navigation paths' ).onChange( ( value ) => {
				for ( const pathHelper of world.helpers.pathHelpers ) {
					pathHelper.visible = value;
				}
			} );
			folderNavMesh.add( params, 'showGraph' ).name( 'show graph' ).onChange( ( value ) => {
				world.helpers.graphHelper.visible = value;
			} );
			 world folder
			const folderWorld = gui.addFolder( 'World' );
			folderWorld.open();
			folderWorld.add( params, 'showAxes' ).name( 'show axes helper' ).onChange( ( value ) => {
				world.helpers.axesHelper.visible = value;
			} );
			folderWorld.add( params, 'showSpawnPoints' ).name( 'show spawn points' ).onChange( ( value ) => {
				world.helpers.spawnHelpers.visible = value;
			} );
			folderWorld.add( params, 'showItemRadius' ).name( 'show item radius' ).onChange( ( value ) => {
				for ( const itemHelper of world.helpers.itemHelpers ) {
					itemHelper.visible = value;
				}
			} );
			folderWorld.add( params, 'showWireframe' ).name( 'show wireframe' ).onChange( ( value ) => {
				const levelMesh = this.world.scene.getObjectByName( 'level' );
				levelMesh.material.wireframe = value;
			} );
			folderWorld.add( params, 'enableFPSControls' ).name( 'enable FPS controls' );
			 enemy folder
			const folderEnemy = gui.addFolder( 'Enemy' );
			folderEnemy.open();
			folderEnemy.add( params, 'showUUIDHelpers', 1, 30 ).name( 'show UUID helpers' ).onChange( ( value ) => {
				for ( const uuidHelper of world.helpers.uuidHelpers ) {
					uuidHelper.visible = value;
				}
			} );
			folderEnemy.add( params, 'showSkeletons', 1, 30 ).name( 'show skeletons' ).onChange( ( value ) => {
				for ( const skeletonHelper of world.helpers.skeletonHelpers ) {
					skeletonHelper.visible = value;
				}
			} );
			gui.open();
			this.datGui = gui;
		}
		 ensure to completely remove the loading screen from the DOM when it is not visible anymore
		this.html.loadingScreen.addEventListener( 'transitionend', ( event ) => {
			event.target.remove();
			this.html.loadingScreen = null;
		} );
		 start to fade out the loading screen
		this.html.loadingScreen.classList.add( 'fade-out' );
		return this;
	}
init ( ) { this . _buildFPSInterface ( ) ; const world = this . world ; if ( world . debug ) { const gui = new DAT . GUI ( { width : 300 } ) ; const params = this . debugParameter ; const folderNavMesh = gui . addFolder ( 'Navigation Mesh' ) ; folderNavMesh . open ( ) ; folderNavMesh . add ( params , 'showRegions' ) . name ( 'show convex regions' ) . onChange ( ( value ) => { world . helpers . convexRegionHelper . visible = value ; } ) ; folderNavMesh . add ( params , 'showSpatialIndex' , 1 , 30 ) . name ( 'show spatial index' ) . onChange ( ( value ) => { world . helpers . spatialIndexHelper . visible = value ; } ) ; folderNavMesh . add ( params , 'showPaths' , 1 , 30 ) . name ( 'show navigation paths' ) . onChange ( ( value ) => { for ( const pathHelper of world . helpers . pathHelpers ) { pathHelper . visible = value ; } } ) ; folderNavMesh . add ( params , 'showGraph' ) . name ( 'show graph' ) . onChange ( ( value ) => { world . helpers . graphHelper . visible = value ; } ) ; const folderWorld = gui . addFolder ( 'World' ) ; folderWorld . open ( ) ; folderWorld . add ( params , 'showAxes' ) . name ( 'show axes helper' ) . onChange ( ( value ) => { world . helpers . axesHelper . visible = value ; } ) ; folderWorld . add ( params , 'showSpawnPoints' ) . name ( 'show spawn points' ) . onChange ( ( value ) => { world . helpers . spawnHelpers . visible = value ; } ) ; folderWorld . add ( params , 'showItemRadius' ) . name ( 'show item radius' ) . onChange ( ( value ) => { for ( const itemHelper of world . helpers . itemHelpers ) { itemHelper . visible = value ; } } ) ; folderWorld . add ( params , 'showWireframe' ) . name ( 'show wireframe' ) . onChange ( ( value ) => { const levelMesh = this . world . scene . getObjectByName ( 'level' ) ; levelMesh . material . wireframe = value ; } ) ; folderWorld . add ( params , 'enableFPSControls' ) . name ( 'enable FPS controls' ) ; const folderEnemy = gui . addFolder ( 'Enemy' ) ; folderEnemy . open ( ) ; folderEnemy . add ( params , 'showUUIDHelpers' , 1 , 30 ) . name ( 'show UUID helpers' ) . onChange ( ( value ) => { for ( const uuidHelper of world . helpers . uuidHelpers ) { uuidHelper . visible = value ; } } ) ; folderEnemy . add ( params , 'showSkeletons' , 1 , 30 ) . name ( 'show skeletons' ) . onChange ( ( value ) => { for ( const skeletonHelper of world . helpers . skeletonHelpers ) { skeletonHelper . visible = value ; } } ) ; gui . open ( ) ; this . datGui = gui ; } this . html . loadingScreen . addEventListener ( 'transitionend' , ( event ) => { event . target . remove ( ) ; this . html . loadingScreen = null ; } ) ; this . html . loadingScreen . classList . add ( 'fade-out' ) ; return this ; }
Initializes the UI manager.
Initializes the UI manager .
// // nav mesh folder // world folder // enemy folder // ensure to completely remove the loading screen from the DOM when it is not visible anymore // start to fade out the loading screen