# How to create 3D rectangle ? (sorry)

## Recommended Posts

Hi,

I can create a 'cube' that is 10x10x10 by doing:

`var box = BABYLON.Mesh.CreateBox("box", 10.0, scene);`

but how do I create a 3D rectangle that is 10x20x5 ?

I can't see anything in the BABYLON.Mesh,CreateXXX( name, ... ); methods !?!

Thanks,

bws.

##### Share on other sites
`var box = BABYLON.Mesh.CreateBox("box", 10.0, scene);box.scaling.x = 30;`

##### Share on other sites

Hi bws,

At the moment I guess the only possibility is to scale your box like this:

We have a playground where you can test it - it would be the easiest way next time to create your example in it:

`var box = BABYLON.Mesh.CreateBox("box", 10, scene);// box.position = new BABYLON.Vector3(0, 0, 0);box.scaling.y = 2;box.scaling.z = 0.5`

##### Share on other sites

If you want to create a 3D rectangle or cuboid directly without scaling a cube you can use this function

`function  CreateCuboid(name, length, width, height, scene) { //length x, width z, height y        var cuboid = new BABYLON.Mesh(name, scene);        var normalsSource = [            new BABYLON.Vector3(0, 0, 1), //z            new BABYLON.Vector3(0, 0, -1), //z            new BABYLON.Vector3(1, 0, 0), //x            new BABYLON.Vector3(-1, 0, 0), //x            new BABYLON.Vector3(0, 1, 0), //y            new BABYLON.Vector3(0, -1, 0) //y        ];        var indices = [];        var positions = [];        var normals = [];        var uvs = [];        // Create each face in turn.        for (var index = 0; index < normalsSource.length; index++) {            var normal = normalsSource[index];            // Get two vectors perpendicular to the face normal and to each other.            var side1 = new BABYLON.Vector3(normal.y, normal.z, normal.x);            var side2 = BABYLON.Vector3.Cross(normal, side1);            // Six indices (two triangles) per face.            var verticesLength = positions.length / 3;            indices.push(verticesLength);            indices.push(verticesLength + 1);            indices.push(verticesLength + 2);            indices.push(verticesLength);            indices.push(verticesLength + 2);            indices.push(verticesLength + 3);            // Four vertices per face.            var vertex = normal.subtract(side1).subtract(side2);            positions.push(vertex.x*length/2, vertex.y*height/2, vertex.z*width/2);            normals.push(normal.x, normal.y, normal.z);            uvs.push(1.0, 1.0);            vertex = normal.subtract(side1).add(side2);            positions.push(vertex.x*length/2, vertex.y*height/2, vertex.z*width/2);            normals.push(normal.x, normal.y, normal.z);            uvs.push(0.0, 1.0);            vertex = normal.add(side1).add(side2);            positions.push(vertex.x*length/2, vertex.y*height/2, vertex.z*width/2);            normals.push(normal.x, normal.y, normal.z);            uvs.push(0.0, 0.0);            vertex = normal.add(side1).subtract(side2);            positions.push(vertex.x*length/2, vertex.y*height/2, vertex.z*width/2);            normals.push(normal.x, normal.y, normal.z);            uvs.push(1.0, 0.0);                    }        cuboid.setVerticesData(BABYLON.VertexBuffer.PositionKind, positions);        cuboid.setVerticesData(BABYLON.VertexBuffer.NormalKind, normals);        cuboid.setVerticesData(BABYLON.VertexBuffer.UVKind, uvs);        cuboid.setIndices(indices);        return cuboid;           };`

For example

cuboid = CreateCuboid("rect3", 10, 20, 5, scene)

##### Share on other sites

Any chance the above rectangle function could be a standard Primitive in BABYLON? Scaling a prim to achieve a desired size has all kinds of undesirable side effects such as it children's transformations acting unexpectedly, or any other operation which assumes a Mesh's standard scale is Vector3(1,1,1) or at least uniform.

##### Share on other sites

As it is a recurrent request, I think we will do quickly do something in this purpose

Maybe more general and versatile.

We had a PM with DK about the need to improve the future extensibility of the next Mesh.CreateXXX() methods

So maybe something like :

`var boxParams = {};boxParams.width = 5;boxParams.height = 11;boxParams.length = 3;boxParams.stretchTexture = true; // up to come exotic texture param for instancevar box = BABYLON.Mesh.CreateXTBox("box", boxParams, scene);`

Or any more pertinent name than CreateXTBox ... any suggestions, native english speakers ?

##### Share on other sites

Any chance the above rectangle function could be a standard Primitive in BABYLON? Scaling a prim to achieve a desired size has all kinds of undesirable side effects such as it children's transformations acting unexpectedly, or any other operation which assumes a Mesh's standard scale is Vector3(1,1,1) or at least uniform.

You can do something like this:

var box = BABYLON.Mesh.CreateBox("", 1, scene);

box.scaling = new BABYLON.Vector3(2,3,4); // Create a rectangle

box.bakeCurrentTransformIntoVertices(); // See doc here

After this, your box scaling will be reset to (1,1,1), but its width, height and length will be 2,3 and 4.

##### Share on other sites

I guess this post will close this topic

##### Share on other sites
Thanks dad72 and Ahiru. I would need to do it like you suggested as i need to set the Side Orientation parameter on my Meshes.

JohnK - thanks for your detailed answer. I didn't know you could do var cuboid = new BABYLON.Mesh(name, scene); in Babylon. This will also help me in my understanding of scaling with textures (I'm a bit new to 3D!).

Convergence - yes a standard primitive. A benefit that I can think of is to assist with any texture scaling issues. I would like my textures to be of a 'certain' level of quality, thus pixelation could be somewhat managable should I know my size of my cuboid as I can then make my texture scale nicely with the cuboid.

**EDIT** jerome (et.al.) - thanks for this new signature (looks like I may have just tipped this issue over the edge from many previous requests for this feature).

Thanks to all whom replied,

bws.

##### Share on other sites
On 9/6/2015 at 9:41 PM, Convergence said:

Any chance the above rectangle function could be a standard Primitive in BABYLON? Scaling a prim to achieve a desired size has all kinds of undesirable side effects such as it children's transformations acting unexpectedly, or any other operation which assumes a Mesh's standard scale is Vector3(1,1,1) or at least uniform.

As a frame of reference, Helix Toolkit supports a rectangle. The key with that, if memory serves, is that you need to know the perpendicular. After that, you specify height and width as you normally would, in reference the perpendicular. Perpendicular, I believe, is a vector. So if you want a flat "plane", you do something like this new Vector3(0, 0, 1), in the upwards direction. Or new Vector(0, 0, -1), in the downwards direction. And so on.

Edit: Possibly, CreateRibbon might satisfy my requirements, with a three-point closed path. Will need to experiment with it some. It should be able to fill with a material.

Thanks...

##### Share on other sites

Use MeshBuilder.CreateBox as Jerome pointed to above.

it takes a width, height, depth

##### Share on other sites

yep

if a prism is needed, you can desing it either with a cylinder tessellated to 3 : https://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#cylinder-or-cone  (regular prism, all sides will have the same size)

or the right polyhedron : https://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#polyhedron

type = 5

the polyhedron is then sizeable on X, Y and Z like the box

##### Share on other sites

Not a prism. I don't want it 3D; just a box. Picture, painted chalk lines on a field.

Edit: And the, beyond the "basic" options, I want to move its position; possibly even merge a couple of the meshes once they are created; i.e. boundary chalk lines.

##### Share on other sites

JohnK is right ,,, somethimes we need to learn code,,, to extend core functionality of engines for our needs

##### Share on other sites

not sure to understand ... do you want a box or a rectangle ?

if you just need a rectangle (so a planar shape), you can choose a plane, a ground, a tiled ground or even a disc tessellated to 4 (actually here "disc" is a short name for any regular polygon)

##### Share on other sites

Turns out, plane will work. For some reason, which I don't quite understand right at the moment, I also need a PI/2 rotation about the X axis. Perhaps an actual "ground" is better in that case.

Thanks...

##### Share on other sites

yep

a plane mesh is defined in xOy in its local space whereas a ground mesh is defined in xOz

##### Share on other sites

John K's post above really helped me understand how this is working. I had to dig and go step by step to wrap my head around it, because I wanted to build a Trapezoidal Prism. So I built a playground to show the mesh being built at each iteration of the FOR loop on the normals. In the playground, you can see one polyhedra for each of the loops and each vertex that is drawn in that iteration is labeled with A, B, C, D so you can see what's happening.  Anyway, here's the link to the playground: