My 3D SWE Portfolio – Built with React Three Fiber

Post by tenuousemphasis » Thu, Jan 16, 2025, 6:13 AM UTC

com2kid wrote: post #26

goodells wrote: post #25

I also built a 3D portfolio website[1] using React and react-three-fiber but I took a different approach design-wise, the HTML content is scrollable like a normal website but the 3D scene subtly matches the perspective of the screen as you scroll. [1] - https://samuelgoodell.com

Btw that site runs horribly in chrome on a pixel 9. The frame rate is low and scrolling has lots of jank. Also the page width is just a little bit wider than my screen width, so there is horizontal scrolling as well.

Post by Oia20 » Thu, Jan 16, 2025, 6:25 AM UTC

goodells wrote: post #25

I also built a 3D portfolio website[1] using React and react-three-fiber but I took a different approach design-wise, the HTML content is scrollable like a normal website but the 3D scene subtly matches the perspective of the screen as you scroll. [1] - https://samuelgoodell.com

Post by kelvinjps10 » Thu, Jan 16, 2025, 7:00 AM UTC

Post by Oia20 » Thu, Jan 16, 2025, 7:05 AM UTC

ayaros wrote: post #34

God bless you and your beautiful site. I salute you. As others have said I do think the controls need work; maybe some form of constrained orbit controls would work well.

Post by Oia20 » Thu, Jan 16, 2025, 7:26 AM UTC

zorgmonkey wrote: post #38

Oia20 wrote: post #36

Earlier quoted context omitted.

Interesting! Likely because the 3D model for the photo on the 2D site is a larger model than any of the models in the 3D scene. But what’s extra interesting about that is the 3D page is a vanilla React project while the 2D site is built with Astro SSG, and has all 90+ lighthouse scores.

This website was able to optimize your 24MB glb file to 2.4MB and the quality looks the same to me https://glb.babylonpress.org/