8 ms·
My 3D SWE Portfolio – Built with React Three Fiber
- Oia20 2y agoThis 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 2y agoIt'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 2y agoLooks good, I was looking into react-three-fiber as well for my site. *work in progress by the way
- Oia20 2y agoAlso check out the projects/about page by clicking on the old mac! https://jacob.dement.dev https://jacob.dement.dev
- youssef_samwel 2y agojust wow can i know how did you build this ? put me on track also how long it took you to build ?
- Oia20 2y agoI’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 2y agothank you i will go for it
- gus_massa 2y agoNice, but I really really really wish to use the arrow keys to rotate.
- jarebear6expepj 2y agoYou know it is going to be good when the laptop turbines start whistling as soon as you click a link ...
- Oia20 2y agoHaha, so true
- nsriv 2y agoIt spun up the fans on my Xeon workstation too lol
- bboygravity 2y agoIt'll do that with any React site, even the 2D boring ones :p
- yieldcrv 2y agolooks 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
- 2bit 2y agoCool idea, using shapen.com you could quickly generate all the 3d models
- bnetd 2y agoDoes 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 2y agoNot Adobe shockwave, right?
- bnetd 2y agoNo, 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 2y agoDidn't Microsoft have something like that? Sketchflow?
- noduerme 2y agoMicrosoft had Silverlight, which was a competing platform with Flash.
- foota 2y agoMaybe one of these? https://www.gamedev.net/forums/topic/297894-good-3d-browser-based-game-engine/ 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 2y agoWhat about 3D Anarchy, later bought becoming Adobe Atmosphere? https://en.m.wikipedia.org/wiki/Adobe_Atmosphere https://en.m.wikipedia.org/wiki/Adobe_Atmosphere
- porphyra 2y agoSome 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.
- deleted 2y ago[deleted]
- Oia20 2y agoThanks 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 2y agoIf 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 2y agoYup, I tried everything but scrolling and gave up, since that isn't a normal function in 3d space.
- chrysoprace 2y agoCool 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.
- deleted 2y ago[deleted]
- Oia20 2y agoThanks! 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 2y agoI 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 https://samuelgoodell.com
- com2kid 2y agoBtw 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 2y agoSame in Firefox on a Pixel 9 Pro.
- fnord77 2y agonice 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 2y agoThat’s a nice spin on using react three fiber!
- normie3000 2y agoSadly for me nothing renders except this: Unexpected Application Error! Error creating WebGL context. BY@https://samuelgoodell.com/assets/index-BJD6lt1T.js:3867:20442 https://samuelgoodell.com/assets/index-BJD6lt1T.js:3867:2044... iPe@https://samuelgoodell.com/assets/index-BJD6lt1T.js:5430:22421 https://samuelgoodell.com/assets/index-BJD6lt1T.js:5430:2242... configure@https://samuelgoodell.com/assets/index-BJD6lt1T.js:5430:23685 https://samuelgoodell.com/assets/index-BJD6lt1T.js:5430:2368... @https://samuelgoodell.com/assets/index-BJD6lt1T.js:5430:34346 https://samuelgoodell.com/assets/index-BJD6lt1T.js:5430:3434... B1@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:24877 https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:24877 Jc@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:32446 https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:32446 rw@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:32302 https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:32302 e2@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:31821 https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:31821 vA@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:41904 https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:41904 E0@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:41257 https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:41257 s2@https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:36606 https://samuelgoodell.com/assets/index-BJD6lt1T.js:40:36606 E@https://samuelgoodell.com/assets/index-BJD6lt1T.js:25:1604 https://samuelgoodell.com/assets/index-BJD6lt1T.js:25:1604 D@https://samuelgoodell.com/assets/index-BJD6lt1T.js:25:1968 https://samuelgoodell.com/assets/index-BJD6lt1T.js:25:1968
- ayaros 2y agoGod 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 2y agoThanks 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 2y agoThe projects 2d site is slower than the 3d one
- Oia20 2y agoInteresting! 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 2y agoThis website was able to optimize your 24MB glb file to 2.4MB and the quality looks the same to me https://glb.babylonpress.org/ https://glb.babylonpress.org/
- z3t4 2y agoYou should make it work in VR to get the full immersion.
- Oia20 2y agoThat’s actually sounds like such a fun feature to build.
- chrisco255 2y agoThis is fun, cool, interesting. Really love R3F and how easy it makes it to add 3D to websites. Make the web fun again.
- dvh 2y agoThere 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 https://www.youtube.com/watch?v=okg61OOFUdQ
- gareth_untether 2y agoNo 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 2y agoNice 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 2y agoThis may be a compatibility problem. On my phone it seems to run at 60fps.
- zipy124 2y agoon 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.
- deleted 2y ago[deleted]
- ktxyznvda 2y agoI like the vibe but damn did my Dell Precision 5680 get loud
- angrydingo 2y agohow did you host the files for the 3d rendering?