bws

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 this post


Link to post
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:

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

Share this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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.

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

Share this post


Link to post
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 this post


Link to post
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 this post


Link to post
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)

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

Share this post


Link to post
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:

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.