Problem with Gridmaterial Properties

Hi Guys, I’m new to babylon and typescript so please bare with me.

I’m trying to create a ground with grid material from following one of the examples that was NOT in typescript.

In this block of code the material properties for gridRatio, mainColor, lineColor, and opacity ALL say that the property does NOT exist on material property.

        private _ground: BABYLON.Mesh;

        this._ground = BABYLON.MeshBuilder.CreateGround("grid", { width: 20, height: 20 }, this._scene);
        this._ground.material = new BABYLON.GridMaterial("grid", this._scene);
        this._ground.material.backFaceCulling = false;
        this._ground.material.gridRatio = 1;
        this._ground.material.mainColor = new BABYLON.Color3(0.6, 0.6, 0.6);
        this._ground.material.lineColor = new BABYLON.Color3(0.7, 0.7, 0.7);
        this._ground.material.opacity = 0.3;
        this._ground.material.freeze();
        this._ground.position.y = -0.5;
        this._ground.isPickable = false;
        this._ground.doNotSyncBoundingInfo = true;
        this._ground.convertToUnIndexedMesh();
        this._ground.freezeWorldMatrix();
        this._ground.freezeNormals();

I’m thinking _ground needs to be defined as something else, or the gridmaterial is not correct.

Not sure.

Thanks in advance.

1 Like

So this is one of the things I dislike the most as well :slight_smile:

What is happening is ground.material is defined as a Material (the base of all our materials) so it is not specialized and only defines the common materials properties.

Now you are creating a GridMaterial with special extras like gridRatio, colors…

What you should do is

const material = new BABYLON.GridMaterial....
material.gridRatio = 1;
.
this.ground.material = material;

This is a tiny change but at least Typescript will understand you are working with a gridMaterial and not a Material when assigning your values.

2 Likes

Hey there, you can for example cast it like below:

(this._ground.material as BABYLON.GridMaterial).gridRatio = 1;

But it’s easier IMO to just create a separarte variable or property like this:
https://playground.babylonjs.com/#PRA3J0

Edit, LOL you beat me to it this time @sebavan :sweat_smile: :beers:

2 Likes

This finally happened !!!
image

1 Like

you guys are awesome. This change makes total sense to me, also makes it more understandable for me. Thank you

2 Likes