Module grid sharing

Tutorials and tips
1

Hello everyone!

First time on this forum, this morning I made a dynamic grid system, which can be reused easily ( I don’t like to have to randomly change the values in the code and RS my server, I prefer to see in the browser the right values and test them )

  • Adjustable width and height

  • Customizable grid density (gridRatio)

  • Major grid lines frequency control

  • Opacity control

  • Customizable colors for main grid and lines

  • Real-time updates via GUI control panel

I’d like to share the code

gridSystem.js

const gridConfig = {
    width: 10,
    height: 10,
    gridRatio: 1,        
    majorUnit: 5,        
    gridOpacity: 0.5,
    mainColor: "#FFFFFF",
    lineColor: "#808080"
};

class GridSystem {
    constructor(scene) {
        this.scene = scene;
        this.ground = null;
        this.createGrid();
        this.setupGUI();
    }

    createGrid() {
        if (this.ground) {
            this.ground.dispose();
        }

        this.ground = BABYLON.MeshBuilder.CreateGround("ground", {
            width: gridConfig.width,
            height: gridConfig.height,
            subdivisions: 1  
        }, this.scene);

        if (BABYLON.GridMaterial) {
            const gridMaterial = new BABYLON.GridMaterial("gridMaterial", this.scene);
            gridMaterial.opacity = gridConfig.gridOpacity;
            gridMaterial.mainColor = BABYLON.Color3.FromHexString(gridConfig.mainColor);
            gridMaterial.lineColor = BABYLON.Color3.FromHexString(gridConfig.lineColor);
            gridMaterial.gridRatio = gridConfig.gridRatio;
            gridMaterial.majorUnitFrequency = gridConfig.majorUnit;
            gridMaterial.backFaceCulling = false;

            this.ground.material = gridMaterial;
        } else {
            console.error("GridMaterial isn't loaded !");
            const backupMaterial = new BABYLON.StandardMaterial("backupMaterial", this.scene);
            backupMaterial.wireframe = true;
            this.ground.material = backupMaterial;
        }
    }

    updateGridMaterial() {
        if (this.ground && this.ground.material && this.ground.material.getClassName() === "GridMaterial") {
            this.ground.material.opacity = gridConfig.gridOpacity;
            this.ground.material.mainColor = BABYLON.Color3.FromHexString(gridConfig.mainColor);
            this.ground.material.lineColor = BABYLON.Color3.FromHexString(gridConfig.lineColor);
            this.ground.material.gridRatio = gridConfig.gridRatio;
            this.ground.material.majorUnitFrequency = gridConfig.majorUnit;
        }
    }

    setupGUI() {
        const gui = new dat.GUI();
        const gridFolder = gui.addFolder('Grid Settings');
        
        gridFolder.add(gridConfig, 'width', 1, 50).onChange(() => this.createGrid());
        gridFolder.add(gridConfig, 'height', 1, 50).onChange(() => this.createGrid());
        gridFolder.add(gridConfig, 'gridRatio', 0.1, 5).step(0.1).onChange(() => this.updateGridMaterial());
        gridFolder.add(gridConfig, 'majorUnit', 1, 10).step(1).onChange(() => this.updateGridMaterial());
        gridFolder.add(gridConfig, 'gridOpacity', 0, 1).onChange(() => this.updateGridMaterial());
        gridFolder.addColor(gridConfig, 'mainColor').onChange(() => this.updateGridMaterial());
        gridFolder.addColor(gridConfig, 'lineColor').onChange(() => this.updateGridMaterial());
        
        gridFolder.open();
    }
}

then simply call it up in your app.js

    const gridSystem = new GridSystem(scene);

You must also add 2 scripts to your html

babylon.js.materials.min.js and dat-gui

<script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>

Hope it helps people!

2 Likes
2

Hi @Marusha welcome to the forum

This looks like a nice feature. Do you have a Github repo you can share? I’m sure it will interest many people.

1 Like
3

Hi @Cedric !

I’m going to refactor during the afternoon so that it’s in TS rather than JS. I prefer to do my mockups in JS, but TS is more verbal to share with others, and I’ll upload it to github during the evening

1 Like
4

Here’s the clean TS version,

Here’s the clean TS version,

I’ll definitely improve it over time, I think that for scenery construction or gameplay, it’s really important to be able to just drag and drop this function

Drop a house into the scenery ,drop a playable character into the scenery,
see if the size is decent, if the movement speed is decent etc etc,

given that the grid is an absolute in relation to the 3D objects we use, it avoids unnecessary headaches

and personally, it saves me the hassle of typing in values and then RS’ing my terminal to hot reload the server

1 Like
5

I’ve updated to add the Z axis, the vertical grid and up to 4 faces,

I think it’s a good first introduction to the customizable grid, can easily add things like drag and drop to specific places, or use it to force the construction of 3D levels (even if blender will be better on this point)