I just finished my personal website. Referenced from this example:https://demos.littleworkshop.fr/infinitown I really like their infinite effect, so I took some time to figure out how to implement a similar thing.
Here is my website link:
10 Likes
Very good !
1 Like
This is so cool 
1 Like
Grade 10… 
1 Like
Hi! This is how to do infinite left and right movement
this is why you shouldn’t use JPG textures
Also, I would recommend limiting zoom, both min and max. And finally, I’d recommend default camera angle to be slightly top-down, not side-on, because the camera controls are a lot less intuitive side-on. The web-page, or 2d viewport for that matter is a flat space, so you’d expect to be able to move in 2 directions, side-on you mostly lose one of the intuitive navigation directions (2d Y axis in this case). You don’t have any occlusion testing for raycasts either, so if the user accidentally clicks on an interactive element that is behind a building - it’s a jarring experience.
From visual perspective, I’d personally recommend more diffuse surfaces (less shiny) for interactive objects, they are already distinct in the fact that they have some color unlike the background, and it might give a better overall aesthetic.
Other than that - good effort, well done!
3 Likes
Thank you so much for writing such a detailed review and providing many useful suggestions.
I am not sure if png will be a lot bigger compared with jpg. I will test it when next time I rebake the texture. I was kind of rushing to finish this website, so many models didn’t unroll and bake in the right way. I noticed many defects on the white surface.
The controlling part, I had a difficult time figuring out. I tried to write whole controlling first but was not very successful, so I decide directly use orbit control in the library and another interaction manager. So I guess that is why I didn’t notice you can click the interactive element behind the building. I will check how the raycast works in that manager.
For the reflecting surface. I honestly wondered if using meshStanred material will affect performance a lot. For sure, it will give more options on how reflection works. I know the subtly controlled reflection will need more technical manipulation. However, I guess people without the CG background would prefer the overexaggerated reflection to an average diffuse surface because the former is unusual in the real life. Anyway, for me, this decision is about performance and time. I defiantly would like to spend more time tweaking that material setting if I have time later.
Anyway, I am really new to this area, and most time doesn’t know how to find and describe those problems, so very glad to see someone willing to take the time to evaluate my project. Thanks again.
1 Like