How to create 3D rectangle ? (sorry)

[bws]

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.

[davrous]

Hi,

You need to play with the scaling property. Feel free to read our doc: http://doc.babylonjs.com/generals/A_Babylon.js_Primer#my-new-friends-position-rotation-and-scalingnbsp and/or test our playground

Bye,

David

[Dad72]

var box = BABYLON.Mesh.CreateBox("box", 10.0, scene);box.scaling.x = 30;

and have your rectangle

[Ahiru]

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:

http://playground.babylonjs.com/#JRG4T

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

[JohnK]

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)

[Convergence]

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.

[jerome]

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 ?

[Temechon]

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.

[jerome]

I guess this post will close this topic

[bws]

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.

[mwpowellhtx]

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.

+1 for this one, please.

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...

[adam]

Use MeshBuilder.CreateBox as Jerome pointed to above.

https://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#box

it takes a width, height, depth

 

[jerome]

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

[mwpowellhtx]

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.

[RalphEl]

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

[jerome]

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)

https://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#plane

https://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#ground

https://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#tiled-ground

https://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#disc

[mwpowellhtx]

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...

[jerome]

yep

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

[peej]

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:

http://www.babylonjs-playground.com/#VKBJN#34