A wall of 3D padlocks stuck to a wall all with unique names written on

Questions
1

Hello,

I’m hoping someone can help give me some guidance and advice about a project I’m starting.

A brief background - I work for an anti-slavery charity and have helped to create a physical installation of something we call the Freedom Wall.

If you follow the link you will have a good visual idea of what I am trying to create. Every lock on the wall represents a life we have changed when working with victims of human trafficking/modern slavery. Trouble is we have run out of space on our physical wall and it’s only accessible in person so I’d love to make it a digital experience.

I have successfully created one lock in Vectary and displayed it on a canvas via a THREE.js obj loader. I have done this by following various tutorials online and as I have some coding knowledge have been able to follow along/figure certain things out.

My worries with this project are around scalability. There are thousands of locks each with a handwritten pseudonym and date. One obj file export was around 2mb.

Since there are only five different shapes of locks I thought it must be possible to cache the geometry of each and render them from that cache as the user moves around the scene? But I’m not sure?

When it comes to the text on each lock I’d love some advice on how I could go about this. I’m happy to sacrifice the authentic handwriting for a handwritten font but after some superficial skimming it looks like lots of text on a scene may also be an issue?

I’m new to THREE so please be nice!

I’m just looking for some resources and help to make this a reality and any help would be greatly appreciated!

2

Yes, what you’re looking for is instancing.

https://threejs.org/examples/?q=instancing#webgl_instancing_modified

it looks like lots of text on a scene may also be an issue?

For sure, if you go the normal route and try to put thousands of different texts on all the locks. There are other ways of displaying text though. Possibly the easiest here is to put the handwriting on a texture map, and only show the map when the camera is close to the lock. When you are far away, you can switch to a generic “blurred text” image.

One obj file export was around 2mb.

That’s likely to be a problem since it probably means the lock is far too detailed. Does that size include textures, or just the .obj file? You’ll need to fix this in a modeling program.

1 Like
3

Thanks for the feedback looeee I will definitely check out instancing.

When you mentioned the texture map for text how would I tell the program to show a certain texture per lock when in view if I am using instancing? Can I still uniquely identify each lock?

Thanks again :slight_smile: