Interactive 3D portfolio gallery for touch input and mouse

Needed a showcase area for my web design projects and thought why not do it in 3D.
I knew a high percentage of my audience will view this page on mobile, so I used a different approach in regards to movement.

There is no WASD, so please hit the info icon on the top left corner to learn how to look around, move and interact with the objects.

This is my first three.js project, so it is not the most optimal but I like the overall results.
It uses directional lighting, which I want to optimize with baked textures (walls, floor, ceiling).
I was able to import the scene into Blender with glTF but I wasn’t really satisfied with the baked results -on such large surfaces - cycles created. However, it could be a good solution for smaller objects. Unfortunately, eevee does not support texture baking so I try to find another solution.

Here is the link:

https://www.avelern.com/3d-portfolio-gallery/

Follow on Facebook for more interesting projects

2 Likes

Hi, congrats for your amazing works, I need to do a gallery in three.js too, I really appreciate all the possibilities offered to the community.
This is the solution to bake with blender, use cycle to bake and make your Atlas UV, after many time of search, finding this clear and great tutorial on YouTube: How to Unwrap and Bake Textures in Blender 2.8? - YouTube keep-up the great work, all the best to you

Thanks. It is a great tutorial. A tried texture backing in cycles. My problem was, that the objects (walls, ceiling) are large, simple in geometry, and quite monotone in texture so noise can be easily spotted compared to a smaller object with complex geometry and texture. Unfortunately, baked results in cycles tend to be noisy unless a large sample size is used. Besides, the objects are large therefore high-resolution texture is required. High-resolution textures with large sample sizes are very slow to bake, but I will give it another try when I have more time.

true, of course it’s a real problem, i have fund this plugin, i think it’s the solution: Blender Addon: Texel Density Checker 3.2.2 and a current tutorial about this amazing tool: Blender 2.8x: Texel Density Pt.1 - YouTube

hope that’s help you, have a great week-end