[HN Gopher] My 3D SWE Portfolio - Built with React Three Fiber
___________________________________________________________________
My 3D SWE Portfolio - Built with React Three Fiber
Author : Oia20
Score : 78 points
Date : 2025-01-12 22:41 UTC (4 days ago)
(HTM) web link (dement.dev)
(TXT) w3m dump (dement.dev)
| Oia20 wrote:
| This has been a work and progress for a while now. A few months
| back the site used orbital controls, but I realized the UI/UX
| (Especially for non tech savy users) was unintuitive. Working to
| settle on a middle ground.
| esperent wrote:
| It's a nice scene - a bit busy overall but not bad, if I was
| hiring for an entry level R3F dev this would be a good thing to
| show me.
|
| However, for me (very familiar with orbit controls) the
| controls are now very unintuitive. I think it's better to have
| a combo of orbit controls, perhaps constraining one or more
| axes, and animating the camera to transition between different
| pivot points on click (and maybe change the constraints to suit
| each particular view). Note that Yomotsu's CameraControls
| (available via Drei) give a lot better control for this kind of
| thing than the standard OrbitControls.
|
| If you're going for a 3d interface, no matter the control
| system, some people won't be familiar with it. The best
| solution is to accept this and go with the thing the largest
| number of people will be familiar with (so basically orbit
| controls), not to roll your own interface that now makes it
| unfamiliar to _everyone_.
| satvikpendem wrote:
| Looks good, I was looking into react-three-fiber as well for my
| site.
|
| *work in progress by the way
| Oia20 wrote:
| Also check out the projects/about page by clicking on the old
| mac!
|
| https://jacob.dement.dev
| youssef_samwel wrote:
| just wow can i know how did you build this ? put me on track also
| how long it took you to build ?
| Oia20 wrote:
| I'm glad you like it!
|
| I built the initial version in about a week.
|
| If you're comfortable with react already you can use React
| Three Fiber, and a few libraries associated with it like drei.
| This can also be done with vanilla three.js.
|
| I would say look for some 3D models you like on a site like
| sketchfab, and think of what you could build related to the 3D
| object. Even better, if you have some 3D modeling experience,
| create a model yourself and maybe a fun little website with it!
| youssef_samwel wrote:
| thank you i will go for it
| gus_massa wrote:
| Nice, but I really really really wish to use the arrow keys to
| rotate.
| jarebear6expepj wrote:
| You know it is going to be good when the laptop turbines start
| whistling as soon as you click a link ...
| Oia20 wrote:
| Haha, so true
| nsriv wrote:
| It spun up the fans on my Xeon workstation too lol
| bboygravity wrote:
| It'll do that with any React site, even the 2D boring ones :p
| yieldcrv wrote:
| looks fun! screams "junior developer that thinks they need to
| stand out", peons praise getting a call back to a job application
| as if getting that is a done deal, but in this industry you'll
| still have to pass the technical interview which is the real make
| or break
|
| I've heard about the frictions with getting call backs in the
| entry level part of the market, and I think its just best to
| cosplay as senior developer, as its mostly a mindset. you'll lose
| some roles for your mistakes but there is no passported
| reputation here, just get employed, wait for some of your
| coworkers to leave so they can be your collection of references,
| and keep applying to other jobs.
|
| to get the first jobs, form an LLC and say you work for that, for
| some time if it works better to get to the hiring manager
|
| I mean, you were building some stuff through college after all
| right? so its true, backdate it back to your sophomore year, bam
| 3 years experience. such ambitious, much wow
|
| launder real experience on top of it and replace your resume with
| that professional validation
| Oia20 wrote:
| I don't think I "need to stand out", but I do think standing
| out is a good thing.
| tcfunk wrote:
| Who hurt you?
| 2bit wrote:
| Cool idea, using shapen.com you could quickly generate all the 3d
| models
| bnetd wrote:
| Does anyone remember that mid-2000s, 3D competitor to Flash? i
| think the name started with A like Ankh or something like that
| but I could be wildly off. It had an IDE and basically ran as a
| plugin in the browser. It died a quiet death.
|
| This site kinda sorta reminds me of that.
|
| Forget what it's called - if someone does, please post more info!
| Oia20 wrote:
| Not Adobe shockwave, right?
| bnetd wrote:
| No, this was a completely different, but competing product.
| the IDE was intended for, to some extent, simple 3D
| modeling/importing of 3D models, and you could launch a
| browser instance to see the output.
| neogodless wrote:
| Didn't Microsoft have something like that? Sketchflow?
| noduerme wrote:
| Microsoft had Silverlight, which was a competing platform
| with Flash.
| foota wrote:
| Maybe one of these?
| https://www.gamedev.net/forums/topic/297894-good-3d-browser-...
|
| Your description also made me think of babylon js, but that was
| later.
|
| Also maybe java applets?
| matsemann wrote:
| What about 3D Anarchy, later bought becoming Adobe Atmosphere?
|
| https://en.m.wikipedia.org/wiki/Adobe_Atmosphere
| dieselgate wrote:
| "A frame" was one but likely not what you mean
| meiraleal wrote:
| Wasn't it VRML or maybe some tool that generated VRML? What I
| found with A that generated VRML was 'Avocado'
| porphyra wrote:
| Some feedback:
|
| 1. I spent a while clicking and dragging and not realizing that
| it works by scrolling.
|
| 2. There's no way to tell what's clickable.
|
| At first I just clicked on the guy in the cage which sent me to
| the 2D website and I thought that was it. I didn't realize that
| you can scroll down to see other stuff until much later.
| Oia20 wrote:
| Thanks for the feedback! Planning on adding an indication to
| scroll, and some sort of effect for clickable items. Also
| planning to remove the boat/cage taking you to other page, it
| made sense in a previous version of the site.
| throw14082020 wrote:
| If you have to add that indication then it's unintuitive?
| IMHO you should take the effort to stop making a 3D world
| scrollable. You've designed a 3D world but are sandboxing the
| experience to a typical 2D website.
| wccrawford wrote:
| Yup, I tried everything but scrolling and gave up, since that
| isn't a normal function in 3d space.
| chrysoprace wrote:
| Cool site, as somebody else has pointed out it's not entirely
| clear what to do once you land on the site.
|
| I don't know how easy it is to accomplish with React Three Fiber,
| but something as simple as having paving `cursor: pointer` on
| links would be great, as well as an indicator that they'll open
| in a new tab (typically conveyed through the little box with an
| arrow going top right).
|
| Fun little project though, I've always wanted to try something
| similar in the browser.
| Oia20 wrote:
| Thanks! Going to work on some features to help with this soon!
| Something like a scroll indicator, pointer is also a great idea
| for clickable item! The arrow indicator idea I also like!
| goodells wrote:
| 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
| com2kid wrote:
| 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.
| tenuousemphasis wrote:
| Same in Firefox on a Pixel 9 Pro.
| fnord77 wrote:
| nice site. one suggestion - it took me too long to realize I
| needed to scroll down to see your stuff. maybe a little ghost
| arrow pointing down might help others
| Oia20 wrote:
| That's a nice spin on using react three fiber!
| normie3000 wrote:
| Sadly for me nothing renders except this:
|
| Unexpected Application Error!
|
| Error creating WebGL context.
|
| BY@https://samuelgoodell.com/assets/index-
| BJD6lt1T.js:3867:2044...
| iPe@https://samuelgoodell.com/assets/index-
| BJD6lt1T.js:5430:2242...
| configure@https://samuelgoodell.com/assets/index-
| BJD6lt1T.js:5430:2368...
| @https://samuelgoodell.com/assets/index-
| BJD6lt1T.js:5430:3434...
| B1@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:24877
| Jc@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:32446
| rw@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:32302
| e2@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:31821
| vA@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:41904
| E0@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:41257
| s2@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:36606
| E@https://samuelgoodell.com/assets/index-BJD6lt1T.js:25:1604
| D@https://samuelgoodell.com/assets/index-BJD6lt1T.js:25:1968
| ayaros wrote:
| 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.
| Oia20 wrote:
| Thanks so much! Going to play with adding in some constrained
| orbital controls, and add some other visual indicators to let
| visitors know how to interact with the site better.
| kelvinjps10 wrote:
| The projects 2d site is slower than the 3d one
| Oia20 wrote:
| 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.
| zorgmonkey wrote:
| 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/
| Oia20 wrote:
| Nice find I'll test this out! Did you make this?
| spookie wrote:
| Khronos has a glb optimizer here btw:
| https://github.com/KhronosGroup/glTF-Compressor
|
| This tool is good too: https://meshoptimizer.org/gltf/
| z3t4 wrote:
| You should make it work in VR to get the full immersion.
| Oia20 wrote:
| That's actually sounds like such a fun feature to build.
| chrisco255 wrote:
| This is fun, cool, interesting. Really love R3F and how easy it
| makes it to add 3D to websites. Make the web fun again.
| dvh wrote:
| There are no shadows or transparent textures and only low poly
| models, yet I only get maybe 2fps. I've built webgl racing game
| that did >50fps on a $50 phone [1]. There's something seriously
| wrong with your tech stack.
|
| [1] https://www.youtube.com/watch?v=okg61OOFUdQ
| gareth_untether wrote:
| No one likes a show off. The website does the job and does it
| well. It got me exploring and clicking to find out more.
| Oia20 wrote:
| Nice work on your racing game! I haven't experienced the low
| frame rate you're mentioning on my site across any of my
| devices (maybe low frame rate on load a few times)
| SomeoneOnTheWeb wrote:
| This may be a compatibility problem. On my phone it seems to
| run at 60fps.
| zipy124 wrote:
| on my laptop with a top of the line cpu, gpu, storage and
| ram, i also only get like maybe 10fps....
|
| It's slightly better in chrome/edge at maybe 15,20 fps but
| still un-pleasant.
| ktxyznvda wrote:
| I like the vibe but damn did my Dell Precision 5680 get loud
___________________________________________________________________
(page generated 2025-01-16 23:01 UTC)