Jump to content

How to create 3D rectangle ? (sorry)


bws
 Share

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.

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

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

Link to comment
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 ?

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

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

Link to comment
Share on other sites

  • 6 months later...
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...

Link to comment
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

Link to comment
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

Link to comment
Share on other sites

  • 11 months later...

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...