Flat triangle made of ribbon

Questions
1

When I create a penta- or hexagon out of 5 or 6 points as ribbon, the part looks flat (screnshot 1) – I use closeArray:false. With closeArray:true it becomes multicolored (screenshot 2).

But if I create a triangle as ribbon, the part is always multicolored no matter if closeArray is true or false - screenshot 3.

Screenshot 1:
image

Screenshot 2:
image

Screenshot 3:
image

Here you can play with the code, but add some light otherwise all the parts are flat and black no matter what color is.

var p1 = new BABYLON.Vector3(7.30505618280194, 18.1708365211235, 2.92976505719245)

var p2 = new BABYLON.Vector3(7.07131758732614, 18.3167337625741, 2.5864270823458)

var C = new BABYLON.Vector3(6.89096338946149,18.3186183396314,2.9755178700534366666666666667)

var points = [[p1 , p2 , C]];

var m = new BABYLON.StandardMaterial(“terrain”, scene);

m.baseColor = new BABYLON.Color3.FromHexString(“#4C0099”);

r = BABYLON.MeshBuilder.CreateRibbon(“pp”, {pathArray: points, closeArray:true, closePath:false, updatable:false, sideOrientation:BABYLON.Mesh.DOUBLESIDE }, scene);

m.diffuseColor = BABYLON.Color3.FromHexString(“#4C0099”);

r.material = m;

var p1 = new BABYLON.Vector3(-1.59139624065814, -0.0861874801633106, -19.7441652831136)

var p2 = new BABYLON.Vector3(-1.88042876687887, -0.414930951269387, -19.713474352004)

var p3 = new BABYLON.Vector3(-2.31706624493792, -0.332576122967209, -19.6668714737234)

var p4 = new BABYLON.Vector3(-2.46396357215751, 0.0763834489959505, -19.6511763905896)

var p5 = new BABYLON.Vector3(-2.17322734704069, 0.404692534936387, -19.6824634321574)

var p6 = new BABYLON.Vector3(-1.73729749360038, 0.324476434079304, -19.7288494464008)

var points = [[p1, p2, p3], [p6, p5, p4]];

var m = new BABYLON.StandardMaterial(“water”, scene);

m.baseColor = new BABYLON.Color3.FromHexString(“#FF0000”);

r = BABYLON.MeshBuilder.CreateRibbon(“pp”, {pathArray: points, closeArray:true, closePath:false, updatable:false, sideOrientation:BABYLON.Mesh.DOUBLESIDE }, scene);

m.diffuseColor = BABYLON.Color3.FromHexString(“#FF0000”);

r.material = m;

Is there a better way of creating flat parts out of points with specific coordinates?

2

Each method probably deals with normal calculation in a different way, leading to different lighting results.

You can try to use mesh.convertToFlatShadedMesh(); to recompute the normals for flat shading.

4

could you share a Playground?

5

Simply copy-paste the code :relieved:

6

Any RTFM links on mesh.convertToFlatShadedMesh();?

7

You can search for convertToFlatShadedMesh in the documentation repo:

https://doc.babylonjs.com/search?q=convertToFlatShadedMesh

and also in the forum:

https://forum.babylonjs.com/search?q=convertToFlatShadedMesh

8

@riven04 or just do this:

image
image1262×720 78.2 KB

9

` quote

code = legible

10

It worked. Thank you.
r.convertToFlatShadedMesh();

1 Like