First Project but underestimated learning curve. Creating a beaded doorway

Not sure if this should be posted in the beginners’ area or not. Please let me know if this should be posted in a different category. Was thinking this was going to be a challenging but do able first project to really learn three.js and some physics frameworks but I bit off my then I can chew.

What I Need help On, I think:
Right now, I have two main issues, err three maybe. One is getting the correct camera angle/position correct. I need it to be always centered in the middle of the canvas facing directly forward. Two is getting my tubes/boxes stacked and correctly sized. Three, is trying to figure out the best way to add object detection and gravity physics.

What I’m trying to accomplish:
Basically, an interactive beaded door way. Here is, kind of, what I’m going for - https://codepen.io/soju22/pen/BaNKwpZ But a lot more detailed. I’m trying to make the interactions more like a beaded door way instead of just having lines that don’t interact with each other. So a beaded door way with each bead/section having a bounding box hung in a line(s).

Here is what I have working…not really working but direction I’m trying to move forward with. https://codepen.io/Sum-Dood/pen/ZEgaJdp I know it’s not a lot of code but been working in it for a while and still not able to make progress on the over all goal. It’s like I’m missing something. In my code pen I don’t understand why the CylinderGeometry aren’t stacking on top of each other? Also not pleased with the camara angle, seems like I can’t get it correct for some reason. Maybe a lack of understanding.

Once I get those two issues figured out, I’m going to start working on the bounding box/object detection and physics engine. Seems to me the way I create and stack the CylinderGeomerty will affect how I create my bounding boxes and physics. I’ve created this image to describe two different possibilities for object interactions. There could be better options out but these are two I could think of. https://imgur.com/X9Im8nw

Hopefully I didn’t try and pack too much into one question. Looking for any suggestions on good frameworks or articles that could give me some clue on to do so I don’t have to rewrite the thing three for four times. I’m currently working on a solution using three.js and ammo.js

Thank you for any help and guidance.
JT

The example you’re sharing is using Verlet.js, way lighter[1.5kB] than Ammo.js[299.7kB]. There is also Verlet-system an even lighter[929B] version of verlet.js.

Here’s a cloth simulation demo with Verlet. If you’re still interested in Ammo.js, you can always check the official cloth simulation example.

3 Likes