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.
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.
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’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.
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.
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.
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?
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.
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.
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.
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.
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.
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.
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.
- 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