How do I place 2D text over 3D card elements? like i have 10 3D cards every card should have its own over text. .like this site, see here https://www.barlow.agency/ every card going infinity scrolling and hover over for showing text each card
ok thanks for reply, but i am also asking the refarence site Infinity Druging any side like left right top bottom. since i have done the infinity mouse drugging, should i share with you that code, so that anways you can helped to adding the card over 2d text?
It just so happens that I have been working on an aircraft rotation demo (still in very rough form) that uses the three.js 3D fonts to create two-sided labels (by attaching them to thin 3d boxes). I also used those 3D fonts to create animated numbers by preloading the geometries for signed numbers and swapping them as needed.
The demo probably contains far more than you need, but it demonstrates that you can attach 3d text to 3d objects. If this looks helpful, please feel free to download the program and extract what you need. It is designed to run locally.
I think you can only create a line at a time using the three.js 3D fonts. Also I have heard that these geometries can slow things down. I tried to create the most minimal version (no beveling, small size) and saved them as meshes, rather than 3D objects. If you have a lot of labels, you may want to create and discard them as them come into and out of view.
1 Like
Hi1 Thanks for the reply. you see my reference site? you can understood what i want there, there have infinity draging every side with 3d card over text showing by hover
check out troika sdf text for threejs, it does just that. it creates SDF shapes from font glyphs, including google fonts. they look crisp, easy to use, and it’s reasonably fast.
some examples, although i use react + three, but troika is a vanilla lib so everything applies
otherwise css2d/3d is an option, but don’t forget that the text is on top of the canvas, it isn’t affected by shaders, and it isn’t an actual part of the scene.
2 Likes
Tried it with the option from the official CSS2D example, mentioned above 
5 Likes
yeah I need it can you pleas share the source pleas? but i mean here card should be dragging by mouse drag
The title of the topic is very particular about 2D text over 3D objects, not about dragging the tiles.
2 Likes
So are you really asking for help designing a program that works exactly like the example?
From your question, I think we all assumed that you had the “moving cards” part done. To me, that would just be a collection of flat plane meshes with pictures, the meshes would start in defined positions that change horizontally and vertically as you move the mouse.
For the kind of flat text in the example, you could simply put the text on the image. Or, if you want the text to fade in and out: [1] you could use one of the CSS methods described where the text is not attached to the cards but moves in parallel (like prisoner849’s neat example above); or [2] you could load or create a 2d font and attach that font to the cards (I have not done the latter yet). The 3D fonts that I mentioned would probably be too much of a performance hit for what you have in mind.
But it sounds like you are stuck back at the stage where you need to get the moving cards to work.
1 Like
yes, i am asking a design a program that works like the example site, also the cards are coming from script code, and by inspecting it’s showing only a Canva, how can i set the text by before and after? can you pleas do some example,
i understood your point ,can you pleas share your example code on codepen?
do not talk back to your customer 
5 Likes
The example that you are showing is not done it threejs, it is using normal css transforms to position the images.
I actually codded something similar without threejs Infinite Grid Pro
3 Likes
yes. sire you did a good solution for me. but here needs also smooth, should not show any white space,also need some zoom and skew effect
I know I just wanted to show you that it is done via Javascript and HTML is not threejs…
3 Likes
ok can you pleas try by three i need that effect
To code what you need it takes a lot of time and effort I don’t think you will find something done on a plate it is not easy to code that and it seam as a personalized project, you need a good developer that can do that and they are not easy to find 
3 Likes
does not have to be on a plate, a paper box will work. I would like some 
with that, too.
1 Like
Hi see this one here have proper dragging just need here add every 3d card with hover text show https://codepen.io/ReGGae/pen/eYGyLrP