Three.js - Need help creating a custom shape

Question

Hello, I need help creating this 2d shape pictured above in three.js. I'm having trouble figuring out how to create the slight curvature as depicted on the inner left and the outer right of the shape. I'd appreciate it if anyone could provide a code example or general guidance on how to do that. Thanks!

Answer 1

So if I understand well, you need some king of ring portion?

I just browsed through Three.js documentation and find RingGeometry , which allows you to configure a ring geomtry between two angles quite easily.
Thus it seems just fine for your problem if you want to apply the same curve on the left and right sides of your plane.

I played a bit with the visualization provided by three.js and was able to obtain the following shape .

So the geometry would be something like:
var geometry = new THREE.RingGeometry( 9, 16, 32, 32, thetaStart = 2, thetaLength = 1);