Using the Babylon Inspector

Now to implement the inspector we need to change the public/index.html file.

src/index.html

<style>
  #debugLayer {
    position: fixed;
  }
</style>

<div id="debugLayer"></div>

Debug Layer Toggle

We don't always want to use the inspector, so I tend to add a bit of code to the src/Componens/Inspector.ts file to keep it tidy.

And add the Inspector component to the World entity.

src/components/Inspector.ts

import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";

import { Vector3 } from "@babylonjs/core";
import { Component, Entity, World, System } from "~/lib/ECS";

export interface InspectorComponentInput {
  debugLayerId: string;
  triggerKey: string;
}

export class InspectorComponent extends Component {
  public debugLayerId: string;
  public triggerKey: string;

  constructor(data: InspectorComponentInput) {
    super(data);
    const { debugLayerId, triggerKey } = data;
    this.debugLayerId = debugLayerId;
    this.triggerKey = triggerKey;
  }
}

export class InspectorSystem extends System {
  constructor(world: World, componentClasses = [InspectorComponent]) {
    super(world, componentClasses);
  }

Babylon.js Market

Using the Babylon Inspector

Debug Layer Toggle

Continue Reading

Course: Debugging the Invisible Game with Babylon.js/GUI