Babylon file example, only 3D points and color

Questions
1

Please can anyone help me out with an example of a BabylonJS file.
I have 3D points and the color of 2 polygons.

the first polygon is a random color (red is fine)
the 3D points are [(-1,0,0),(1,0,0),(1,1,0),(0,2,0),(-1,1,0)]

the second polygon is another random color (green is fine)
the 3D points are [(-1,-1,0),(-1,-1,-1),(1,-1,-1),(1,-1,0)]

If I know how to do that, I can convert my (I think beautiful) creations into BabylonJS format.
After writing my converter I shall post some creations on the forum.
Thanks in advance!

2

Not entirely sure what you are converting from to.

These might help

3

Unfortunately after looking into the 3 links you mentioned I did not find an example with 2 polygons with different colors. I can copy the scene and lighting things from those examples.

Can you give me the missing parts to create 2 meshes with different colors and if possible transparancy 0.5?

var positions = [-1,0,0,1,0,0,1,1,0,0,2,0,-1,1,0]
var indices = [0,1,2,3,4]

var positions = [-1,-1,0,-1,-1,-1,1,-1,-1,1,-1,0]
var indices = [0,1,2,3]

4

Now I start to understand it I think:

var positions = [-1,0,0,1,0,0,1,1,0,0,2,0,-1,1,0,-1,-1,0,-1,-1,-1,1,-1,-1,1,-1,0]
var indices = [0,1,2,3,4,5,6,7,8]
var colors = [1,0,0,0,1,0]

is that right?
and how to do transparancy?

5

creation
creation also

this is only a little creation I want to convert to BabylonJS

6
1 Like
7

That doc on creating custom meshes has a section on applying vertex colors which has a relevant PG example. Since your vertex colors have 0.5 alpha values, you’ll need to also set the hasVertexAlpha flag like below. :slight_smile:

customMesh.hasVertexAlpha = true;
8

// this is what I wanted to build. I did not realize that I had to build it with all triangles. Thanks everyone for helping me out.
// I wanted a red 5 angled polygon + a green 4 angled polygon
// put the code below inside the final example posted after this post
var positions = [-1,0,0,1,0,0,0,1,0,1,0,0,1,1,0,0,1,0,1,1,0,0,2,0,0,1,0,0,2,0,-1,1,0,0,1,0,-1,1,0,-1,0,0,0,1,0 ,-1,-1,0,1,-1,0,0,-1,-0.5,1,-1,0,1,-1,-1,0,-1,-0.5,1,-1,-1,-1,-1,-1,0,-1,-0.5,-1,-1,-1,-1,-1,0,0,-1,-0.5]
var indices = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29]
var colors = [1,0,0,0.5,1,0,0,0.5,1,0,0,0.5,1,0,0,0.5,1,0,0,0.5,1,0,0,0.5,1,0,0,0.5,1,0,0,0.5,1,0,0,0.5,1,0,0,0.5,1,0,0,0.5,1,0,0,0.5,1,0,0,0.5,1,0,0,0.5,1,0,0,0.5,0.28,0.65,0.14,1,0.28,0.65,0.14,1,0.28,0.65,0.14,1,0.28,0.65,0.14,1,0.28,0.65,0.14,1,0.28,0.65,0.14,1,0.28,0.65,0.14,1,0.28,0.65,0.14,1,0.28,0.65,0.14,1,0.28,0.65,0.14,1,0.28,0.65,0.14,1,0.28,0.65,0.14,1,0.28,0.65,0.14,1,0.28,0.65,0.14,1,0.28,0.65,0.14,1]
var normals = ;

9

// my first “beautiful” BabylonJS model
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.HemisphericLight(“hemiLight”, new BABYLON.Vector3(-1, 1, 0), scene);
light.intensity = 2
var camera = new BABYLON.ArcRotateCamera(“camera1”, 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
camera.setPosition(new BABYLON.Vector3(0, 5, -30));
camera.attachControl(canvas, true);
var customMesh = new BABYLON.Mesh(“custom”, scene);
let positions = [10.055,3.444,12.101,-4.537,14.747,-0.950,-4.537,-7.859,-0.950,-4.537,-7.859,-0.950,-4.537,14.747,-0.950,10.055,3.444,12.101,6.022,10.430,-9.016,10.055,3.444,12.101,-4.537,-7.859,-0.950,-4.537,-7.859,-0.950,10.055,3.444,12.101,6.022,10.430,-9.016,-11.063,3.444,4.035,10.055,3.444,12.101,6.022,10.430,-9.016,6.022,10.430,-9.016,10.055,3.444,12.101,-11.063,3.444,4.035,8.514,-7.859,4.035,-11.063,3.444,4.035,6.022,10.430,-9.016,6.022,10.430,-9.016,-11.063,3.444,4.035,8.514,-7.859,4.035,8.514,14.747,4.035,-11.063,3.444,4.035,8.514,-7.859,4.035,8.514,-7.859,4.035,-11.063,3.444,4.035,8.514,14.747,4.035,-6.078,3.444,-9.016,8.514,14.747,4.035,8.514,-7.859,4.035,8.514,-7.859,4.035,8.514,14.747,4.035,-6.078,3.444,-9.016,-2.045,-3.541,12.101,8.514,14.747,4.035,-6.078,3.444,-9.016,-6.078,3.444,-9.016,8.514,14.747,4.035,-2.045,-3.541,12.101,6.022,-3.541,-9.016,8.514,14.747,4.035,-2.045,-3.541,12.101,-2.045,-3.541,12.101,8.514,14.747,4.035,6.022,-3.541,-9.016,-4.537,14.747,-0.950,6.022,-3.541,-9.016,-2.045,-3.541,12.101,-2.045,-3.541,12.101,6.022,-3.541,-9.016,-4.537,14.747,-0.950,10.055,3.444,12.101,6.022,-3.541,-9.016,-4.537,14.747,-0.950,-4.537,14.747,-0.950,6.022,-3.541,-9.016,10.055,3.444,12.101,-4.537,-7.859,-0.950,10.055,3.444,12.101,-4.537,14.747,-0.950,-4.537,14.747,-0.950,10.055,3.444,12.101,-4.537,-7.859,-0.950,6.022,10.430,-9.016,10.055,3.444,12.101,-4.537,-7.859,-0.950,-4.537,-7.859,-0.950,10.055,3.444,12.101,6.022,10.430,-9.016,-2.045,10.430,12.101,6.022,10.430,-9.016,-4.537,-7.859,-0.950,-4.537,-7.859,-0.950,6.022,10.430,-9.016,-2.045,10.430,12.101,15.040,3.444,-0.950,-2.045,10.430,12.101,-4.537,-7.859,-0.950,-4.537,-7.859,-0.950,-2.045,10.430,12.101,15.040,3.444,-0.950,-6.078,3.444,-9.016,-2.045,10.430,12.101,15.040,3.444,-0.950,15.040,3.444,-0.950,-2.045,10.430,12.101,-6.078,3.444,-9.016,-2.045,-3.541,12.101,-6.078,3.444,-9.016,15.040,3.444,-0.950,15.040,3.444,-0.950,-6.078,3.444,-9.016,-2.045,-3.541,12.101,8.514,14.747,4.035,-6.078,3.444,-9.016,-2.045,-3.541,12.101,-2.045,-3.541,12.101,-6.078,3.444,-9.016,8.514,14.747,4.035,6.022,-3.541,-9.016,8.514,14.747,4.035,-2.045,-3.541,12.101,-2.045,-3.541,12.101,8.514,14.747,4.035,6.022,-3.541,-9.016,-11.063,3.444,4.035,8.514,14.747,4.035,6.022,-3.541,-9.016,6.022,-3.541,-9.016,8.514,14.747,4.035,-11.063,3.444,4.035,8.514,-7.859,4.035,8.514,14.747,4.035,-11.063,3.444,4.035,-11.063,3.444,4.035,8.514,14.747,4.035,8.514,-7.859,4.035,6.022,10.430,-9.016,8.514,-7.859,4.035,-11.063,3.444,4.035,-11.063,3.444,4.035,8.514,-7.859,4.035,6.022,10.430,-9.016,-2.045,10.430,12.101,8.514,-7.859,4.035,6.022,10.430,-9.016,6.022,10.430,-9.016,8.514,-7.859,4.035,-2.045,10.430,12.101,-4.537,-7.859,-0.950,-2.045,10.430,12.101,6.022,10.430,-9.016,6.022,10.430,-9.016,-2.045,10.430,12.101,-4.537,-7.859,-0.950,15.040,3.444,-0.950,-2.045,10.430,12.101,-4.537,-7.859,-0.950,-4.537,-7.859,-0.950,-2.045,10.430,12.101,15.040,3.444,-0.950,-4.537,14.747,-0.950,15.040,3.444,-0.950,-4.537,-7.859,-0.950,-4.537,-7.859,-0.950,15.040,3.444,-0.950,-4.537,14.747,-0.950],
indices = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149],
colors = [1.000,0.000,0.533,0.1,1.000,0.000,0.533,0.1,1.000,0.000,0.533,0.1,1.000,0.000,0.533,0.1,1.000,0.000,0.533,0.1,1.000,0.000,0.533,0.1,0.000,0.317,1.000,0.1,0.000,0.317,1.000,0.1,0.000,0.317,1.000,0.1,0.000,0.317,1.000,0.1,0.000,0.317,1.000,0.1,0.000,0.317,1.000,0.1,0.050,0.000,1.000,0.1,0.050,0.000,1.000,0.1,0.050,0.000,1.000,0.1,0.050,0.000,1.000,0.1,0.050,0.000,1.000,0.1,0.050,0.000,1.000,0.1,1.000,0.000,0.250,0.1,1.000,0.000,0.250,0.1,1.000,0.000,0.250,0.1,1.000,0.000,0.250,0.1,1.000,0.000,0.250,0.1,1.000,0.000,0.250,0.1,0.500,1.000,0.000,0.1,0.500,1.000,0.000,0.1,0.500,1.000,0.000,0.1,0.500,1.000,0.000,0.1,0.500,1.000,0.000,0.1,0.500,1.000,0.000,0.1,0.000,1.000,0.517,0.1,0.000,1.000,0.517,0.1,0.000,1.000,0.517,0.1,0.000,1.000,0.517,0.1,0.000,1.000,0.517,0.1,0.000,1.000,0.517,0.1,0.150,1.000,0.000,0.1,0.150,1.000,0.000,0.1,0.150,1.000,0.000,0.1,0.150,1.000,0.000,0.1,0.150,1.000,0.000,0.1,0.150,1.000,0.000,0.1,0.000,0.100,1.000,0.1,0.000,0.100,1.000,0.1,0.000,0.100,1.000,0.1,0.000,0.100,1.000,0.1,0.000,0.100,1.000,0.1,0.000,0.100,1.000,0.1,1.000,0.283,0.000,0.1,1.000,0.283,0.000,0.1,1.000,0.283,0.000,0.1,1.000,0.283,0.000,0.1,1.000,0.283,0.000,0.1,1.000,0.283,0.000,0.1,1.000,0.000,0.517,0.1,1.000,0.000,0.517,0.1,1.000,0.000,0.517,0.1,1.000,0.000,0.517,0.1,1.000,0.000,0.517,0.1,1.000,0.000,0.517,0.1,1.000,0.000,0.200,0.1,1.000,0.000,0.200,0.1,1.000,0.000,0.200,0.1,1.000,0.000,0.200,0.1,1.000,0.000,0.200,0.1,1.000,0.000,0.200,0.1,1.000,0.000,0.917,0.1,1.000,0.000,0.917,0.1,1.000,0.000,0.917,0.1,1.000,0.000,0.917,0.1,1.000,0.000,0.917,0.1,1.000,0.000,0.917,0.1,1.000,0.000,0.650,0.1,1.000,0.000,0.650,0.1,1.000,0.000,0.650,0.1,1.000,0.000,0.650,0.1,1.000,0.000,0.650,0.1,1.000,0.000,0.650,0.1,1.000,0.000,0.500,0.1,1.000,0.000,0.500,0.1,1.000,0.000,0.500,0.1,1.000,0.000,0.500,0.1,1.000,0.000,0.500,0.1,1.000,0.000,0.500,0.1,0.000,1.000,0.333,0.1,0.000,1.000,0.333,0.1,0.000,1.000,0.333,0.1,0.000,1.000,0.333,0.1,0.000,1.000,0.333,0.1,0.000,1.000,0.333,0.1,0.150,1.000,0.000,0.1,0.150,1.000,0.000,0.1,0.150,1.000,0.000,0.1,0.150,1.000,0.000,0.1,0.150,1.000,0.000,0.1,0.150,1.000,0.000,0.1,1.000,0.850,0.000,0.1,1.000,0.850,0.000,0.1,1.000,0.850,0.000,0.1,1.000,0.850,0.000,0.1,1.000,0.850,0.000,0.1,1.000,0.850,0.000,0.1,0.000,0.133,1.000,0.1,0.000,0.133,1.000,0.1,0.000,0.133,1.000,0.1,0.000,0.133,1.000,0.1,0.000,0.133,1.000,0.1,0.000,0.133,1.000,0.1,1.000,0.000,0.950,0.1,1.000,0.000,0.950,0.1,1.000,0.000,0.950,0.1,1.000,0.000,0.950,0.1,1.000,0.000,0.950,0.1,1.000,0.000,0.950,0.1,0.333,1.000,0.000,0.1,0.333,1.000,0.000,0.1,0.333,1.000,0.000,0.1,0.333,1.000,0.000,0.1,0.333,1.000,0.000,0.1,0.333,1.000,0.000,0.1,0.850,0.000,1.000,0.1,0.850,0.000,1.000,0.1,0.850,0.000,1.000,0.1,0.850,0.000,1.000,0.1,0.850,0.000,1.000,0.1,0.850,0.000,1.000,0.1,1.000,0.850,0.000,0.1,1.000,0.850,0.000,0.1,1.000,0.850,0.000,0.1,1.000,0.850,0.000,0.1,1.000,0.850,0.000,0.1,1.000,0.850,0.000,0.1,1.000,0.000,0.000,0.1,1.000,0.000,0.000,0.1,1.000,0.000,0.000,0.1,1.000,0.000,0.000,0.1,1.000,0.000,0.000,0.1,1.000,0.000,0.000,0.1,0.017,0.000,1.000,0.1,0.017,0.000,1.000,0.1,0.017,0.000,1.000,0.1,0.017,0.000,1.000,0.1,0.017,0.000,1.000,0.1,0.017,0.000,1.000,0.1,0.050,0.000,1.000,0.1,0.050,0.000,1.000,0.1,0.050,0.000,1.000,0.1,0.050,0.000,1.000,0.1,0.050,0.000,1.000,0.1,0.050,0.000,1.000,0.1],
normals = ;
var vertexData = new BABYLON.VertexData();
BABYLON.VertexData.ComputeNormals(positions, indices, normals);
vertexData.positions = positions;
vertexData.indices = indices;
vertexData.normals = normals;
vertexData.colors = colors;

customMesh.hasVertexAlpha = true;

vertexData.applyToMesh(customMesh); 
return scene;

};