Jump to content

Cylinder between two points


GrayFox
 Share

Recommended Posts

Hi Wingnut

But to modify the extrusions every time the user changes the sizes the mesh is never completed. It has to call flat shade after every update.

I'm trying to get a shape like this

      shape = [
                           new BABYLON.Vector3(-50,  -50,0),
                           new BABYLON.Vector3(50,  -50,0),
                           new BABYLON.Vector3(20,  50,0),
                           new BABYLON.Vector3(-20, 50,0)
                    ];

Is there any way of using the ExtrudeShape or similar but keep flat sides?

Thanks

Link to comment
Share on other sites

ExtrudeShape can't add flat sides automatically as this is an expensive process

But you can use shaders to do the work for you :)

https://www.babylonjs-playground.com/#165IV6#166

 

By removing the normals you will force the shaders to compute them and it will do it in flat mode

Link to comment
Share on other sites

Hi Deltakosh

That will probably save a lot of thinking!

I have been going down the PolygonMeshBuilder route as this was making flat sides by default?

I have hacked together this https://www.babylonjs-playground.com/#PTTMVI#21

With a bit of trial and error which seems to let you move one of the original vertex numbers and it modifies the other end of the extrusion.

I need this for resizing the glass that goes between my beams but your method above will work for changing the length of the beams.

Thanks!

Link to comment
Share on other sites

  • 3 weeks later...

Hi I'm still struggling!

I have tried to use the comments in this thread to make a frame with 4 sides but one side is not working.

I tried swapping the start point for that one side as suggested in one comment but that spins the shape around.

There must be a cleaner approach to this?

http://www.babylonjs-playground.com/#1RWE59#117

Thanks

Link to comment
Share on other sites

Hi John

Thanks for your reply. The problem is this frame will get a lot more complex so I wanted to work in angles from the corner points to reduce the amount of code later. It might not be a square, it can have 3 to any number of sides and be any shape.

If I use the cylinder the one side seems in the right position if I don't setPivotMatrix

http://www.babylonjs-playground.com/#1RWE59#121

But if setting setPivotMatrix it goes wrong. I don't get it.

http://www.babylonjs-playground.com/#1RWE59#120

 

Link to comment
Share on other sites

I do not think your problem is with the pivot. I have tapered and coloured your cylinders. The first cylinder is red and they get less green as you create them. You can see that the direction of rotation is not consistent. This is because in two case your v1 and v2 are parallel and do the cross product is zero giving a zero axis and so rotation is indeterminate.

https://www.babylonjs-playground.com/#1RWE59#122

Interestingly I have been working on a different problem but there are similarities. It was about drawing a line with width along given points.

https://www.babylonjs-playground.com/#FA2H7X#1

There is likely to be a way of doing this with an extrusion between points though not sure exactly with what will happen at corners. It might be worth you having a play and I will have a look over the next few days.

Good luck

 

Link to comment
Share on other sites

Someone help me fine the post that I was helping I think @Arte with where we were coming up with functions for making dynamic/parametric cabinets.

I found his demo post, but cant find the discussion we had that lead him to it.

That conversation has all the examples you will need.

Link to comment
Share on other sites

@captainleighwalker Have had a play around and have made a frameMaker function.

The profile of the frame is given as an array of Vector3s with all zs 0, ie give profile in XoY plane.

The path of the frame is given in terms of its outer edge as an array of Vector3s again in the XoY plane.

The leftmost point(s) of the profile will follow the path so the left hand side of the profile forms the outer edge of the frame.

You need to pass the profile and path as options

var frame = frameMaker("frame", {path: path, profile:profilePoints}, scene);

The direction of the path (clockwise or counter-clockwise) determines the orientation of the profile around the frame.

If it turns out you need to flip the profile then reverse the path array before passing to frameMaker.

myPath.reverse();

Hope this is useful https://www.babylonjs-playground.com/#1RWE59#124

Link to comment
Share on other sites

13 minutes ago, captainleighwalker said:

Would you mind adding/explaining how you used the dot and cross of the vectors?

The function was based on work I did last year so whilst at the time I knew exactly what I was doing I cannot remember all the details, for example why I did Math.PI - calculated angle rather than just angle. However the basic idea goes like this.

Given a polygon of lines you need to know the internal angle A between between two lines L and K meeting at a point P. Just using the dot product you do not know if you are getting the internal or external angle at point P. However using a cross product will tell you which.

Just be consistent in moving around the polygon in a clockwise or counter clockwise direction, say K follows L., so always use L before K and find the line normal to L, say N.

As L is in XoY plane one way to find N is to swap the x and y coordinates of L and make one negative (x, y).(y, -x) = xy - xy = 0 so must be perpendicular.

Taking (consistently in order) the cross product of L and N this will give you a vector in the z direction (either positive or negative). Whether it is positive or negative determines whether you have found and internal or external angle.

If P is an outer point of the frame and Q an inner point on the frame with the width between P and Q being we need to project Q onto the line R parallel to L but a distance w from it using angle A.

 

 

Link to comment
Share on other sites

  • 2 months later...

Hey guys, long time no see! I have been pretty busy and didn't have time to have fun with BabylonJS, but I had an idea that I wanted to try out. Therefor I need to connect two points with a cylinder,  just as described in this thread, but for some reason all the playgrounds seem broken. I remember it worked just fine back then but now the cylinder is always off and doesn't connect the sphere (here for example: http://www.babylonjs-playground.com/#1RWE59#12).

Anybody got an idea whats causing the behavior? Is it a bug, a fixed bug or a feature? ;) And even more important: how do I get the desired result nowadays? Hope somebody can help, thanks in advance! :D 

Link to comment
Share on other sites

Dang, somehow I still can't get it to work: https://www.babylonjs-playground.com/#1RWE59#131

It's always off. Any idea what I am doing wrong? :huh:

Edit: happens with the original playground, too, if I change the values: https://www.babylonjs-playground.com/#1RWE59#132

 

Edit 2: Never mind, I think I got it now: https://www.babylonjs-playground.com/#1RWE59#133

Seems like the calculation of the angle was not quite correct. I now use acos of the dot product and then the negative angle. I have no idea if that's really correct, but it passed my tests :D

var angle = Math.acos(BABYLON.Vector3.Dot(v1, v2));
cylinder.rotationQuaternion = BABYLON.Quaternion.RotationAxis(axis, -angle);

I read something about the arc cos here http://www.euclideanspace.com/maths/algebra/vectors/angleBetween/index.htm, and then did the rest by some old fashioned trail and error. Let me know if I did it wrong and just got lucky somehow :P 

Edit 3: that those things look like penises is totally unintended!

Link to comment
Share on other sites

15 hours ago, iiceman said:

Seems like the calculation of the angle was not quite correct. I now use acos of the dot product and then the negative angle.

Looking at a previous example http://playground.babylonjs.com/#191SVM#6 the vstart was at the extremity and vend the centre point which would explain the need to make the angle negative in your case  which is the reverse of this.

Link to comment
Share on other sites

Here the fixed version (setPivotMatrix with the new optional parameter postMultiplyPivotMatrix set to false) of the  example that JohnK mentioned: http://playground.babylonjs.com/#191SVM#12

And here my fixed playground, with no more need for negative angle: https://www.babylonjs-playground.com/#1RWE59#134

@JohnK I compared the two playgrounds and realized I had used the wrong order when calculating the cross product. Thanks for the hint!

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