Create a 3D product landing page with ThreeJS and React(richardhaines.dev)
richardhaines.dev
Create a 3D product landing page with ThreeJS and React
https://richardhaines.dev/create-a-3d-product-landing-page-with-threejs-and-react/
23 comments
> 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
Good example is thingverse [i]. The bandwidth they consume is significantly reduced with this.
[i] https://www.thingiverse.com/thing:3302115
For simple 3d models, isn't the model size (in bytes) smaller than an image? I assume that a cube model would only have 8 verticies defined and a few other props, but an image will have 100k-1M RGB pixels.
> 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.
This is over-complicating an already very complicated execution.
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.
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.
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.
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.
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.
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.
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.
It's more of a hacker/MBA community.
For more pure hacker forums, you'd be looking, what, Hackaday? Is that still relevant?
For more pure hacker forums, you'd be looking, what, Hackaday? Is that still relevant?
It's worth remembering that for every dismissive comment, there are thousands of people that tacitly approve.
Create whatever you want but don't call it a 3D product landing page. It's for selling a product.
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.
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.
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?
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?
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.
Avoid experiences like this like the plague.
Update: It has loaded. Not worth it. Great concept, but crappy reality.
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.
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.
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.
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.
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.
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?
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.
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.
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.
When I scrolled the shoe just got smaller and smaller until it disappeared. Gave me a laugh.
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?
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?
Yes. It's even official: https://threejs.org/editor/
I'm working on one: https://polygonjs.com (still in beta)
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.
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/
https://solvespace.com/index.pl
Some examples embedded in a web page here: https://m-labs.hk/software/solvespace/
Although I am familiar with JS, React, WebGL and other concepts, combining all those in a single codebase looks very messy and with a big potential performance impact.
Just to name a few dependencies: Chakra-ui, React, Threejs, Three-js-fiber, MDX, all with their own syntax and methodologies, but somehow combined in a single file, all for showing a 3D sphere that would requier fewer lines of code if it was done natively in WebGL.
Just to name a few dependencies: Chakra-ui, React, Threejs, Three-js-fiber, MDX, all with their own syntax and methodologies, but somehow combined in a single file, all for showing a 3D sphere that would requier fewer lines of code if it was done natively in WebGL.
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.
Those sneakers are awesome, but:
46 requests
70.30 MB
Finish: 41.33 s (fiber) / 6.15 min (in Firefox Regular 3G emulator but I quit when the bar was 60%, so is like 10 minutes)
I get that those 3D sneakers have good textures, several polygons and all that, but it can be lighter than 70MB right?
Also an UX improvement can be apply progressive load, show the text instantly and put a spinner in the shoes, now I got a long progress bar to see all the elements of the page.
Nice to play with the shoes!
46 requests
70.30 MB
Finish: 41.33 s (fiber) / 6.15 min (in Firefox Regular 3G emulator but I quit when the bar was 60%, so is like 10 minutes)
I get that those 3D sneakers have good textures, several polygons and all that, but it can be lighter than 70MB right?
Also an UX improvement can be apply progressive load, show the text instantly and put a spinner in the shoes, now I got a long progress bar to see all the elements of the page.
Nice to play with the shoes!
Using React for a "landing page" does not even sound cool, it sounds absurd technically.
Great post!
I really enjoyed reading through it
PS Dont worry about negative comments here
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.
Buttery smooth on an old windows box using firefox. The load time is not an issue if the product interesting.
The page almost crashed my MacBook, I had to close the tab as I could feel the system freezing...
Really well thought out post, thanks for sharing
- 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