[HN Gopher] Create a 3D product landing page with ThreeJS and React
___________________________________________________________________
Create a 3D product landing page with ThreeJS and React
Author : molebox
Score : 61 points
Date : 2021-02-03 17:39 UTC (5 hours ago)
(HTM) web link (richardhaines.dev)
(TXT) w3m dump (richardhaines.dev)
| nickthegreek wrote:
| final product page took over 30 secs to load for me. once loaded,
| it didn't fit in my browser window and scrolling on the right
| side of the page was hijacked. left side white text overran into
| white area below and was unreadable.
| meibo wrote:
| Demo hangs chrome until it gives up with "Page unresponsive" - I
| think there's solutions like this that work by pre-rendering
| images from various angles. Using that as a fallback on devices
| that you just shouldn't force a heavy WebGL renderer onto seems
| like a good idea.
| arcturus17 wrote:
| The page almost crashed my MacBook, I had to close the tab as I
| could feel the system freezing...
| moron4hire wrote:
| IDK what is going on with the loading times on this. I use
| Three.js extensively myself, including a full VR app with
| multiplayer and voice chat, and my stuff loads in a fraction of
| this time.
| mattmar96 wrote:
| Im thinking its some kind of rate limiting from netlify. My
| webgl project also has around 16mb of assets and loads in 1/8
| or so the time this does on the same connection.
| darepublic wrote:
| I don't feel like reactjs adds much here does it? Create
| animation in threejs and then render via "dumb" react component
| that ignores lifecycle?
| rchaud wrote:
| Stuck on loading screen on desktop Firefox (OSX).
|
| Three JS is cool, and probably has more features now than Flash
| did back in 2010. But an article like this makes it clear that 3D
| motion graphics for the web are going to be the domain of
| software developers and not designers or artists.
|
| Is there a GUI-based authoring tool for three JS?
| frading wrote:
| I'm working on one: https://polygonjs.com (still in beta)
| moron4hire wrote:
| Yes. It's even official: https://threejs.org/editor/
| donohoe wrote:
| Its loaded 17MB for the demo and stuck 60% ("0.62%")of the way.
|
| Avoid experiences like this like the plague.
|
| Update: It has loaded. Not worth it. Great concept, but crappy
| reality.
| notjustanymike wrote:
| So my day job is building the UI for online 3D anatomy. Some
| basic suggestions:
|
| - center the axis of rotation so I can zoom in and out properly.
|
| - use lower resolution textures and geometry for faster loading
|
| - start with an image, then allow a switch to 3D model
|
| - provide on screen camera controls. A shocking number of people
| never infer you can interact with the model.
|
| - add labels to the model the user can click on to see features
| (eg fancy laces, waterproof design, etc)
|
| To see a production version of a 3d product page check out Boom
| using Sketchfab: https://boomsupersonic.com/xb-1/model
| canada_dry wrote:
| > start with an image, then allow a switch to 3D model
|
| Good example is thingverse [i]. The bandwidth they consume is
| significantly reduced with this.
|
| [i] https://www.thingiverse.com/thing:3302115
| preommr wrote:
| > add labels to the model the user can click on to see features
| (eg fancy laces, waterproof design, etc)
|
| This is over-complicating an already very complicated
| execution.
| Sirikon wrote:
| Or don't do that so you don't lose 99% of your customers because
| the page didn't load in less than 5 seconds.
| elicash wrote:
| I hate the dismissiveness of this "hacker" community.
|
| Sometimes it's cool to just see what can be done with a
| technology and it's great that this person documented so others
| could learn from it or give useful feedback on improving
| implementation.
| sarakayakomzin wrote:
| this isn't being dismissive... it's valid feedback for poor
| UX.
| fartcannon wrote:
| It's more of a hacker/MBA community.
|
| For more pure hacker forums, you'd be looking, what,
| Hackaday? Is that still relevant?
| eyelidlessness wrote:
| I'm with you 1000%.
|
| I'll also say that I've spent the last few months of my life
| working on a web project that would satisfy the most anti-JS
| zealots around here, but with a DX I prefer (all built in
| TypeScript, with Preact and CSS-in-JS).
|
| This is possible because I selected, contributed to, and
| developed from scratch tooling to improve the product of the
| original tooling (Hyperscript, React, styled-components etc).
|
| But I've poured so much of my heart into the project that I'm
| pretty sure I won't bother sharing it here, even though I'm
| quite proud of the tech aspects, because I can already
| anticipate being inundated with criticism for even preferring
| that DX, even though it has no impact on anyone but me (or
| anyone who elects to use the tools I've used or the many I
| plan to open source after launch).
|
| It's a pretty disappointing feeling nonetheless. HN has
| routinely shown me that there are people who would rather I
| share their priorities than have my own, even if it doesn't
| affect anyone else in any way.
| abeyer wrote:
| Which would be a perspective more people might take if the
| author actually presented it as a technology demo rather than
| as fit for some purpose. Instead they say "We are going to be
| creating a product landing page which will utilize 3D models
| and particle effects to take product showcasing to a whole
| new level." This isn't just dismissiveness, this is a
| response to how the material is presented.
|
| I agree it's an interesting bit of tech, but I also agree
| that it's not a method I'd use or suggest to showcase a real
| product in most cases.
| soneil wrote:
| Especially when the loading bar is broken - It's telling me
| 0.21%. I'm assuming it means 21%, but I'm going to instant-nope
| if you tell me this is only 1/500th of the wait.
| uh2010 wrote:
| This
| ChrisClark wrote:
| It took 5 minutes of loading just to get to 1%. Turns out they
| meant 100%. But still, no one will wait 5 minutes for a page to
| load.
| dylan604 wrote:
| Is this really a thing? I have seen some less techy people that
| will just complain about it being slow, but will still stick
| around because that just how the internet works.
| bastawhiz wrote:
| It took about twenty seconds to load. When it did, there was
| nothing 3d. After about five seconds, the page crashed. I'm not
| sure what was supposed to happen here.
| aldanor wrote:
| It's ironic that crappy performance of this tutorial page serves
| as a good example of why you shouldn't do it, especially on a
| landing page.
| spences10 wrote:
| Really well thought out post, thanks for sharing
| phkahler wrote:
| If you design a 3D CAD model in SolveSpace it can be exported as
| a single HTML file complete with interactive 3D view via 3js. No
| coding required.
|
| https://solvespace.com/index.pl
|
| Some examples embedded in a web page here:
| https://m-labs.hk/software/solvespace/
| BugsJustFindMe wrote:
| Forget about 3D product landing pages that get stuck and never
| load, I'm entirely turned off by the gratuitous animation on this
| blog post with fonts that pop in late, the menubar sliding in
| slowly for no reason, and links being slowly underlined. And
| those js embeds _destroy_ the page performance. Every time I
| scroll to one the scrolling stutters to a complete halt.
|
| I know that doing stuff because you can is cool, but what if we
| also focus on making it work in ways that aren't annoying to use?
| jokethrowaway wrote:
| Looks neat, but it would be better to progressively load the 3d
| model.
|
| Eg. 1. Load the text 2. Load a placeholder image 3. 30s later,
| when the 3d model loaded, swap it with the image
|
| Also it crashed my MacBook (black screen of death, short fan
| burst and then turned off the laptop). Reproducible on both Mac
| and Windows with latest chromium on a Radeon 5300M.
| avery42 wrote:
| Cool demo, but it seems like a bad idea to use this for a landing
| page. Took over 30 seconds to load for me - unless I knew this
| was a demo I would probably just close the page.
| lecarore wrote:
| Just because you can do it doesn't mean you should. I gave up
| loading the demo when i saw the progress going backwards after 10
| sec. A 3D render video could be just as good and work much more
| smoothly. If all your customers only see your website on a gamer
| laptop over fiber then yeah, maybe. Like, i could see a premium
| mechanical keyboard website using such tech.
| gregoriol wrote:
| Using React for a "landing page" does not even sound cool, it
| sounds absurd technically.
| arminluschin wrote:
| While I like the idea, it seems to take a lot of thought and
| attention to detail to pull it off. Thinking about the 3D globe
| from Stripe and GitHub, and corresponding blog posts. First thing
| I checked on your post was the final landing page. It doesn't
| look great on mobile, takes really long to load even on a good
| internet connection, and it's impossible to scroll, once the 3D
| content has been loaded.
| gagege wrote:
| When I scrolled the shoe just got smaller and smaller until it
| disappeared. Gave me a laugh.
___________________________________________________________________
(page generated 2021-02-03 23:01 UTC)