Change color of LinesMesh

Hello everyone,
I’m using babylon in Angular 9 project and I need to change the color of LinesMesh on click on datatable row. And “color” property does not seem to work. Just nothing happening.

I declare LineMesh like this

          // Line between points
          const reds = [BABYLON.Color4(0.62, 0, 0, 1), BABYLON.Color4(0.62, 0, 0, 1)];
          const path = [];
          path.push(firstSphere.position);
          path.push(lastSphere.position);

          linesMesh = BABYLON.MeshBuilder.CreateLines(
            "lines",
            { points: path, colors: reds },
            scene
          );

I want to change color of existing LinesMesh somehow
e.q:
linesMesh.color = BABYLON.Color4.Blue();

Idk why I have to create LinesMesh with Color4 but edit it with the color with Color3.

hopefully I misunderstood something and there is some easy solution to this problem.

Also I found this pg which works but it doesn not work in my project!

https://www.babylonjs-playground.com/#165IV6#1267

Ok, I guess I found the solution. If u create Line with Color4 you can’t change the color of it. So I made creating new LinesMesh like this

        const path = [];
        path.push(firstSphere.position);
        path.push(lastSphere.position);
        this.linesMesh = BABYLON.MeshBuilder.CreateLines(
          "lines",
          { points: path },
          scene
      );
        this.linesMesh.color = BABYLON.Color3(0.62, 0, 0);

in the last line I change the color which i wanted (I mean - this is default color for lines).

Then I am able to change the color of the LinesMesh on click
e.q.

onClick(){
this.linesMesh=BABYLON.Color3.Blue();
}

“ABYLON” instead of “BABYLON”

Also, the property is defined as Color3. BJS has decided to do as little checking / validation of input as is possible. This is fine given that it is a real time system.

It is, however, source coded in typescript. This means if you coded your application also in typescript, then your errors would have been detected in your editor & then again when you tried to transpile. Unlike that whole Webpack process, which very slow, I am getting 2 second transpile time, max.

Not doing your source in typescript, this is going to happen over-n-over.

1 Like