Three.js: Extrude geometry bevel is sinusoidal not elliptical.

[flagstone78]

Description of the problem

I needed the bevel to be eliptical to look nice for my project. I looked through the source code for the extrude geometry and noticed that of the two parameters, bs and z, z steps linearly while bs is a sine function.

So I changed: z = bevelThickness * ( 1 - t );
to: z = bevelThickness * Math.cos( t * Math.PI / 2 );
And that made it work like I expected. (And looks way better)

Is there a reason that it's sinusoidal? I think the default should be eliptical.

Three.js version

• [x] Dev
• [x] r78
• [x] r72

• [ ] ...

  Browser

• [x] All of them

• [ ] Chrome
• [ ] Firefox

• [ ] Internet Explorer

  OS

• [x] All of them

• [ ] Windows
• [ ] Linux
• [ ] Android
• [ ] IOS

[mrdoob]

/ping @zz85

[bhouston]

Why not make this an option and PR it? :)

[zz85]

Hmm, interesting I've never given thought to this. Do you have an example or screenshots of what the difference would look with the different easing functions?

[flagstone78]

@bhouston This is actually only my second time even interacting with github so I am in no way familiar with the process of making a pull request.

@zz85 Here are some screen shots:

As you can see it makes a very noticeable square outline at the end where it doesn't smoothly align.

Where as the new function makes it look nicely rounded.

[zz85]

Thanks @flagstone78 for illustrating it nicely. From the looks of it I think it should be a function of cos function, and I guess should have give more attention to the details when I wrote that 😜

For making a Pull Request, you could either fork the repository to push your git commits, or use the online github editor to make a change.

Let me know if you would like to try that, otherwise I could help with a patch for this :)

[WestLangley]

@flagstone78 This wiki article may also help. Don't worry if you mess up, we will help you. : - )

[flagstone78]

@zz85 I used the online editor and referenced it above.