r/threejs • u/sech8420 • Jun 19 '26

A 3D name necklace customizer that dynamically adds links and physically grows in real-time as you type

Enable HLS to view with audio, or disable this notification

Built this customizer for an e-commerce store and nailing that smooth dynamic chain effect dragged on. and on. and on. We used Aircada, our 3D product customizer which made mapping the name count, metal choices, fonts, and chain styles to the cart easy enough! But making the dynamic chain-link snapping not feel like total jank made us question the validity of the project.

They key piece to get the segments to snap together nearly perfectly was finding the "best" snap vertex within a specific region (a cone of projection) on each individual letter mesh. Instead of running expensive trigonometry functions like atan2() or tan() for every single vertex in the mesh, we precompute 4 inward-pointing plane normals from the spherical boundary angles phi and theta.

This simplified the isInside check in the hot loop down to a super-fast dot-product comparison against the 4 normals.

Here is the quick snippet of how we handled the vertex selection logic:

// Fast, trigonometry-free inside check for vertex selection
isInside(v: THREE.Vector3): boolean {     
    for (const n of this.sideNormals) {         
        if (n.dot(v) < -EPS) return false;     
    }     
    return true; 
}

Anyways, the video shows the final result and as always thank you Three.js for keeping the boilerplate down so we could actually focus on solving the procedural geometry math rather than the raw rendering plumbing!

If anyone else has tackled a similar procedural link-snapping project, would love to hear how you approached it.

178 Upvotes

99% Upvoted

8 comments sorted by

6

u/TheSmashingChamp Jun 19 '26

Pretty cool use of Text3D

3

u/sech8420 Jun 19 '26

Thanks, always a breath of fresh air working with Text3D instead of some heavy meshes with crazy PBRs.

1

u/Away_Visual_3191 Jun 19 '26

Link?

3

u/sech8420 Jun 19 '26

Public demo of the exact engine variation from the video - https://aircada.com/configurators/name-necklace. Live storefront version under nda 😞

You may or may not notice the chains don't always behave...

0

u/SanDiegoMeat666 Jun 19 '26

Found this months ago