4 ms·
I like the rotating 3D model in the landing page very much. Are they using some sort of pre-baked library which lets you create such an visualization with 30 li
by bflesch 10y ago
I like the rotating 3D model in the landing page very much. Are they using some sort of pre-baked library which lets you create such an visualization with 30 lines of Javascript, or is it 100% custom? Maybe someone can point me to a good resource for such elegant WebGL renderings.
- coloradude 10y agohttps://threejs.org/ https://threejs.org/
- TJSomething 10y agoThey're using Three.js, but it looks like the spinning icosahedron is custom-made with about 300 lines of code. That includes calculating the vertices of the icosahedron, loading the model from a 3D model file, setting up the surface material characteristics, setting up the lights, animation, moving HTML nodes with the labels along with the vertices, and mouse dragging.
- edwinwee 10y agoGlad you like it! We used Three.js (https://threejs.org https://threejs.org) to handle rendering the icosahedron itself. Three.js actually includes an icosahedron as one of its built-in primitives, however we also wanted to add some subtle details to the model such as rounded edges. So, we created a rounded version in Cinema 4D, and then rendered both that model as well as an invisible copy of the object using the Three.js primitive. The primitive gives us easy access to things like the vertex coordinates, that are then used to position the labels, which are plain DIVs and not rendered with WebGL.
- markdog12 10y agoGreat work, result is awesome. Love how it pops in and fits with the page background nicely. I find your web pages and documentation to be pretty much the nicest on the internet.
- King-Aaron 10y agoAgree, awesome work. Probably one of the nicest visual elements I've seen on a tech site for a while.
- anc84 10y agoIt burns CPU like mad. See if limiting the framerate to something sane makes sense, 15-20 might be enough for fluent motion. https://stackoverflow.com/questions/11285065/limiting-framerate-in-three-js-to-increase-performance-requestanimationframe https://stackoverflow.com/questions/11285065/limiting-framer...
- madeofpalk 10y agoStripe's product pages and FE technical excellence are second to none. Maybe Apple, but they tend to over do it sometimes whereas Stripe does a great job of making the perfect amount of 'subtle flashy'.