Fit camera zoom according to a DOM element

Questions
1

Hi everyone

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.

Context

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 padding-top: 60%

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

My problem

As you can see on the screenshots, the plane geometry has not the exact size of my aspect div (in red) :

enter image description here

enter image description here

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 !

2

/cc

3

Can you please share a codepen or jsfiddle of this? There’s a lot of information here, and even more places where it can go wrong.

4

Hello !
I solved the problem by myself by simply declare the camera like this :

this.camera = new THREE.OrthographicCamera(
  window.innerWidth / -2,
  window.innerWidth / 2,
  window.innerHeight / 2,
  window.innerHeight / -2,
  1,
  1000
)

But I currently encounter another problem when trying to add mesh to the scene by using VueJS, I’ll made another post about that today.

However thank you all for your responses and your reactivity !
ThreeJS is amazing but a little hard on the first hours :sweat_smile: