Hi,
I am trying to display Scene Explorer on right side without Inspection, but I can able to display at the left side only. i don’t want that. Is there any way to do this?.
Thanks.
You can stack the panels on the right:
https://playground.babylonjs.com/#BS320P
Here are all the options available with the inspector:
export interface IInspectorOptions {
/**
* Display in overlay mode (default: false)
*/
overlay?: boolean;
/**
* HTML element to use as root (the parent of the rendering canvas will be used as default value)
*/
globalRoot?: HTMLElement;
/**
* Display the Scene explorer
*/
showExplorer?: boolean;
/**
* Display the property inspector
*/
showInspector?: boolean;
/**
* Display in embed mode (both panes on the right)
*/
embedMode?: boolean;
/**
* let the Inspector handles resize of the canvas when panes are resized (default to true)
*/
handleResize?: boolean;
/**
* Allow the panes to popup (default: true)
*/
enablePopup?: boolean;
/**
* Allow the panes to be closed by users (default: true)
*/
enableClose?: boolean;
/**
* Optional list of extensibility entries
*/
explorerExtensibility?: IExplorerExtensibilityGroup[];
/**
* Optional URL to get the inspector script from (by default it uses the babylonjs CDN).
*/
inspectorURL?: string;
/**
* Optional initial tab (default to DebugLayerTab.Properties)
*/
initialTab?: DebugLayerTab;
}
If you don’t find what you need here, you may try to change the css properties by hand.
I can able to achieve this by changing the css properties. But on navigate to other pages and back to the same page, debugLayer is not visible. How to make it visible?
Can you setup a repro in the Playground?
If you call scene.debugLayer.show(...) it should work.
In Playground, its working fine, in our project, initial page load, its working fine. After click the next page and come back to same page again, only debugLayer is not visible. I can able to see the object. We have spinner. Same issue for the spinner also. Only visible in the first page load.
Below is the code for reference.
import * as BABYLON from ‘@babylonjs/core’;
import ‘@babylonjs/loaders’;
import ‘@babylonjs/inspector’;
private initialize3dOptions() {
let self = this;
if (this.section.is3dView) {
this.threedMappingJson = JSON.parse(this.section.threedMappingJson) as MapMapping;
if (this.threedMappingJson != “”) {
self.loadingService.show() // Show Spinner
var renderCanvas = “renderCanvas_” + this.section.id
// Get the canvas element from the DOM.
self.canvas = document.getElementById(renderCanvas) as HTMLCanvasElement;
// Associate a Babylon Engine to it.
self.engine = new BABYLON.Engine(self.canvas, true);
self.engine.hideLoadingUI();
// Create our first scene.
var scene = new BABYLON.Scene(self.engine);
//scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
// This creates and positions a free camera (non-mesh)
var camera = new BABYLON.ArcRotateCamera(‘Camera’, 0, 0, -100, new BABYLON.Vector3(1, 2, -3), scene);
camera.minZ = 0.01;
var light = new BABYLON.PointLight(“light”, new BABYLON.Vector3(0, 5, -5), scene);
BABYLON.SceneLoader.ShowLoadingScreen = false;
var scn = BABYLON.SceneLoader.Append("/assets/", “RAB.obj”, scene, function (meshes) {
scene.createDefaultCameraOrLight(true, true, true);
scene.activeCamera.attachControl(self.canvas, false);
});
scene.debugLayer.show(
{
embedMode: true, handleResize: true, enableClose: false, enablePopup: false, overlay: true
}
);
self.engine.runRenderLoop(function () {
scene.render();
scene.executeWhenReady(function () { //When everything is done loading
self.set3dHeight(10);
self.loadingService.hide(); // Hide Spinner
});
});
}
}
else {
// 3D not Configured.
}
}Very difficult to debug without a support…
Have you made sure you execute the scene.debugLayer.show code when you come back to the page (with a console.log just before for eg)? If yes, you should inspect the dom elements of the page to see if the debug layer is there and with which css applied.
On initial Load of 3D viewer page, in Console window, I can able to get the length for ("#embed-host"). After visit other page and back to 3D viewer page, in the console window, length for ("#embed-host") is not available. In our Angular project, every time 3D viewer page is loaded, “initialize3dOptions()” method is called, “scene.debugLayer.show” also executed.
I have disabled all new changes in css and tried, still having same issue.
Let’s see if @brianzinn may have an idea as he is the master of react, but without a full repro I’m not sure we will be able to go much further.
I wonder if that JSON is set when you return to your page and a complete different code path is followed. Also, when you switch pages is your canvas element removed?
It’s hard to follow your code sample, because it is missing all page lifecycle methods or hooks. Can you share those as well as what page navigation does?
1 Like
Hi @dineshax100 – So, from the code samples you PM’d me in Angular the ngAfterViewInit is where you call your function. The equivalent in react is onComponentDidMount lifecycle method or a useEffect or useEffectLayout hook with a dependency on the scene object, so that will only be called again if your component unmounts. To simulate that in react you can do a checkbox to hide and force reload or use a router:
export const DefaultPlayground = () => (
<div>
{state.showScene &&
<MyScene />
}
</div>
)
I made an empty code sandbox for you with default playground, so you should be able to reproduce there. Then we can see if it is a lifecycle or state issue. I don’t think at this time that there is an issue in the Scene Explorer, but if so then we should be able to reproduce here easily.
2 Likes