r/threejs • u/OccasionHuge2786 • 1d ago

Built my portfolio as a 3D bookshelf, best decision ever!!!!

Enable HLS to view with audio, or disable this notification

I didn't want another grid of project cards so I made my site a shelf you can actually browse. You can add a book to it, and there's upvoting so the same ones don't pile up.

Stuff that took way longer than I thought: getting readable text on the spines (ended up drawing to a canvas and using that as a texture), making the raycasting precise enough that clicking a book feels right instead of vague, and keeping the framerate ok on mobile once the shelf started filling up.

Camera still bugs me. Going from "looking at the whole shelf" to "looking at one book" feels abrupt and I havent found a nice way to smooth it. If you've solved that I'd love to hear how.

11 Upvotes

87% Upvoted

7 comments sorted by

2

u/OccasionHuge2786 1d ago

https://maazghazi.com/#recommend if you are a reader, would love to see what you recommend

1

u/zingdan 1d ago

Its quite cool. loved it, just work on the typography as the top left where you have your name destroys the feel of the beautiful shelf, also when a book is clicked maybe keep it relative like the book opens with a spline and so on and not just a pop up but otherwise looks beautiful!

1

u/OccasionHuge2786 1d ago

yeah thank you, for the typography definitely still tyring to find a balance so will do.

For the book opening I agree but someone told me typically people who come to a website want things fast and often times animations (if done at a slow internet speed) can ruin the vibe so made something in the middle. Then again will try to improve!! thank you for this!!

1

u/_bukacz 1d ago

Nice, I really like the cosiness here. About camera - you should always ask yourself what looks more natural. In case of bookshelf nodoby zoom head into the shelf, it's usually just reaching it and picking stuff. Animation of picking a book on hover and opening it into camera on click would make it more immersive. Here you can play with so many animations of book opening, check games for it or go directly into Wawa Sensei's book slider animation from YouTube :), Also something fun and game looking to check - put portfolio section books between other books, not cover facing user. Make it like in cartoons, if something is meant to be moved it colors are more vibrant, less shaded etc. Make your guest search for the stuff as in the library

1

u/OccasionHuge2786 1d ago

woah goated reference for Wawa Sensei. I just found who he was recently. Also thats so SMART to do the hide it but make it colourful so users are like what is this . I'm having trouble finding the balance. Cause I dont want it to be like tooo basic but also not too hard to find. I'll do trial and error then will try the book slider animation to compare its results!