How to get the dimensions of each image and position them into our 3D Planes, exactly to where the DOM images are?

I have a Grid images I want to assign each image a 3D plane according to the position of the image and then apply image as a texture to each plane.

I’m able to create PlaneGeometry and texture foreach image but I don’t know how to add the plane to the exact same position of the image in the DOM.

Your help will be apprecited. Thank You

Welcome to the forum!
Can you please provide a picture so we can visualize what you are trying to do?

would be very, very hard in vanilla threejs. in 15 years no one has managed to make a re-usable out of this problem. there’s the multiple elements demo but that’s a long way from production.

react-three-fiber has a full re-usable for it drei/View.

demo: https://codesandbox.io/p/sandbox/view-tracking-bp6tmc

each view is directly in your html, linked to a single, shared canvas (you can’t have multiple canvas in threejs, at least not without fearing tab crashes). each view is fully self contained and behaves as if it were a singleton canvas, you can throw controls in there, environments, etc. view containers behave like any other dom element, you can move them relative/absolute or use css transform (like in the demo, they’re moving/scaling because css keyframes).

if you want to try in vanilla, here are some things i’ve learned:

  • this is all based on a single 100vw/100vh canvas that fills the screen
  • you use gl.skissor to cut the rendering into portions
  • canvas and dom need to be under a shared parent from which all events are registered, otherwise canvas will block events for the dom or the other way round
  • javascript scroll is not in sync with requestanimationframe-loops, you need a javascript based scroll solution like lenis, no way around it
  • use this code for reference drei/src/web/View.tsx at 153607d4fa337a3c319c7eb883eebdbbaaf6c8e1 · pmndrs/drei · GitHub

Thank You. I think I will use Curtains.js for now. Although I have found Some Codedrops examples
How to Unroll Images with Three.js | Codrops ,
Creating an Infinite Auto-Scrolling Gallery using WebGL with OGL and GLSL Shaders | Codrops
Which I will explore later.

Thanks again for u r time.