Scrollable text behind a transparent 3d object

Questions
1

I am trying to create the same effect as when scrolling through the text on this website: SavoirFaire©. Holistic creative studio based in NYC.
Basically, i want to have a 3d glass object in front some text. the user can scroll through the text while the object remains at the center of the screen. the text behind the object is refracted/distorted by the object.

so far i rendered a glass torus at the center of the page and i rendered text behind the torus using the tag within the canvas (the desired effect is achieved). However, I would like to render more text as a div. but this doesnt work with the Text tag. I tried using drei’s Html tag but it makes the text appear in front of the glass torus.

How can i render any div behind the glass torus such that the text is refracted by the torus? By the way, should the text be part of the canvas component or should they be placed side by side?

PS: I am using react, react-three/fiber, drei

2

canvas/webgl/threejs cannot “see” html. you can’t have postpro on it.

here: Router transitions - CodeSandbox

that is still using troika but a better solution would be uikit: GitHub - pmndrs/uikit: 🎨 user interfaces for react-three-fiber
uikit is basically HTML for threejs, rendered as instanced meshes and glyphs. it has scroll inbuilt as well.

ps the physics section of it would be quite easy as well: https://codesandbox.io/p/sandbox/text-spheres-zht4pz?file=%2Fsrc%2FApp.jsx%3A10%2C5 give it gravity, add some walls, remove the float-to-center code and it’s done.

2 Likes
3

I think you can use the texture from svg included your html in . You can simply set visibility:hidden for your content, get it’s full width and height, and put it’s outerHTML in <foreignObject> element:

<svg xmlns="http://www.w3.org/2000/svg" width="content.width" height="content.height">
<foreignObject width="content.width" height="content.height">
content.outerHTML
</foreignObject></svg>

Then you have to convert this code to data-url and use it as url for TextureLoader. But your need also include all styles into this html with images also set’s as data-urls.

4

Thanks for the quick replies!

5

Thanks for this! uikit is quite helpful.
I am just a bit confused as to how to access properties of an element using ref.
this does not seem to work: const rect = paragraphRefs.current?.center?.v?.[1]; (returns undefined)
should i use ComponentInternals? I am trying to get the distance from the center of the parent.

6

i don’t know what all this means? what is .center.v[1] ? what is “ComponentInternals” ? if this is about uikit pmndrs discord has a channel for it where bela (the author) is active.

1 Like