I thought we cannot add elements over a mesh and need to use Textures but in Cyd Stumpel’s portfolio website they have elements over a cylinder
it’s webgl, i don’t see any html. they do have a-tag overlays but that’s usually done for a11y, selection, tab-nav and screen-readers. the sr-only class that’s on these elements is tailwinds screenreader support.
btw that hover over effect where the image zooms in, i just made something like that (using drei/image), it scrolls as well. would not be that hard to adapt it into a cylindrical scroll rig.
1 Like
Thank you for explaining. Your code helped a lot. Thank you
To be honest, it looks more like faking positions/sizes/perpectiveness with CSS, rather than placing HTML content over a cylinder’s surface. The reason for this conclusion is the distortion of the images – although very well calculated, they are not consistent with the curvature of a cylinder.
Of course, I might be perfectly wrong.
Did you ask the author of the page?
I wrote a mail but got no response :_(
It does look like they are faking it. They are using 4d Matrix and manipulating it’s value on scroll. They have used three.js and GSAP so I was hoping it was done through three.js only
CSS is largely underestimated. Here is a demo of a text sliding on a cylinder. No Three.js is used. Even no any JS is used. Just pure CSS animation:
https://helderman.github.io/cylindrical-text/html5/cylindrical.html
2 Likes
you can see the canvas instance, if you hide it the view goes away. the odd perspective is probably the orthographic camera. the html overlays like I said are for a11y. this is very common for design agencies, i think they might even be required by law to add this stuff. the visuals though are rendered by threejs.
here’s a first draft implemention: -------------- (see below)
using @prisoner849 's curvedplane impl from Simple curved plane - #10 by prisoner849 all that’s missing is the border radius though for certain it’s being made at the shader level, not geometry since the radius changes on hover. scroll and the banner are implemented as well.
3 Likes
it meant a little churn but we figured out the variable hover border radius thing Cards with border radius - CodeSandbox
3 Likes
Is it better to use CSS in this case tho? With the transforms and effects which would be more performant ?
Thank you soooo much for this, you’re my most favorite person on the internet now 
I would just use textures over curved meshes made of CylinderGeometry. Sometimes keeping it simple is better than managing some highly sophisticated magic.
3 Likes
no magic, just a component. everything is open source here drei/src/core/Image.tsx at 9c5300c243d275d49a39bcf2bf2ea81ac3b84e49 · pmndrs/drei · GitHub you should be able to easily add it to your project.
and docs GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber
drei/image is a mesh with a planegeometry and a shader that implements css fit:cover, so the texture is always in correct aspect ratio no matter how you scale the plane/mesh + zoom + grayscale, and now, thanks to this issue, users can have border radius. : )
A raytracer + mesh scaling + texture scaling should be sufficient for the hover effect.
But, yes, I agree that @drcmda solution looks really nice.
Meanwhile, I asked myself, whether it is possible make short code for curved meshes that react on hover by using an existing library as it is, without any modification for this specific case. And I ended up with this shortie:
(The online demo is temporarily available here)
1 Like