I just begin to learn Three js and I face to a problem when tryng to add a plane geometry based on a img tag on the dom.
Here is my actuel html template :
<figure> <div class="aspect" /> <img class="img" src="@/assets/images/project1.jpg" /> </figure>
The img tag is hidden by css property
display: none and the
.aspect div give the size of the element by receiving
width: 50vw and
I calculate the width - height of the element by using
getBoundingClientRect func and applying it to the plane geometry like that :
const geometry = new THREE.PlaneBufferGeometry(el.width, el.height, 5)
Then I simply apply the texture of my image to it
As you can see on the screenshots, the plane geometry has not the exact size of my aspect div (in red) :
For the moment I manually set the z axis of my camera, but I know it’s not the good solution and just wanted to know if there was an existing solution to acheive this ?
Thank you in advance !