Advice on "infinite zoom" story

Questions
1

Hello! I am planning to work on a site where you keep zooming in on a 3D model. Something like this.

I haven’t started with the creative part yet because first I wanted to check with you if it is feasible. There is no particular issue at the moment .

Each scene is x10 the previous one (I think x20 would be nicer), but I am a bit worried about the scalability of the story in terms of scenes. There is a subtle flickering effect when combining models that are 1e-3 and 1e6. I tried tweaking the near/far values. If I want around 10 scenes, I will have to go from model size 1 to 1e13, which may increase the flickering.

Do you have any suggestions or general advice?

Demo (only PC, sorry): Three.js with OrbitControls, GLTFLoader, and Dynamic Model Scaling
Code (just an index.html): bigbang/index.html at a6dfd833d9817b131aa10ece967e2a7a9625bb79 · enric1994/bigbang · GitHub

Thanks!

2

If I were you, I’d try to fake infinity. For example, if you are at level 0, you could see at most the next two levels. So, I’d try this:

  • all scenes are equally sized
  • initially you are at level 0, scene 0 is shown as it is 100%, scene 1 is scaled 10% , scene 2 is scaled 1%
  • when you zoom, you stay where you are, just zoom out the sizes of the scenes, when you zoom enough for level 0, scene 0 is out of sight, so you can hide it, scene 1 is now at 100%, scene 2 is now 10% … and you show scene 3 at 1%
3 Likes
3

Whitout knowing what kind of geometry you are aiming to use in here, it looks like Portals offers the functionality that would fit your needs. You can inspect the official example or one of the many alternatives like this.

If you are into trying that route, I strongly recommend this discussion.

2 Likes
4

Thanks for the feedback! That’s a very good idea @PavelBoytchev
I implemented that and it works perfectly. Do you have any recommendations regarding the lighting? If I add a light, it will be covered when the model scales.