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

Questions
1

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

2

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

3

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
4

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.

1 Like