Javascript ThreeJS：根据DOM元素调整相机缩放

我刚开始学习三个js，当我尝试在dom上添加基于img标记的平面几何体时，我遇到了一个问题

上下文

以下是我的actuel html模板：

<figure>
  <div class="aspect" />
  <img class="img" src="@/assets/images/project1.jpg" />
</figure>

然后我简单地将图像的纹理应用到它

我的问题

正如您在屏幕截图上看到的，平面几何体的大小与我的aspect div（红色）的大小不同：

目前，我手动设置相机的z轴，但我知道这不是一个好的解决方案，只是想知道是否有一个现有的解决方案来实现这一点

---

提前谢谢你

使用正交摄影机解决

文件在此：

---

使用正交摄影机解决

文件在此：

---

欢迎链接到某个解决方案，但请确保您的答案在没有它的情况下是有用的：这样您的其他用户就会知道它是什么以及它为什么在那里，然后引用您链接到的页面最相关的部分，以防目标页面不可用。欢迎链接到某个解决方案，但请确保您的答案在没有它的情况下是有用的：这样您的其他用户就会知道它是什么以及为什么存在，然后引用您链接到的页面的最相关部分，以防目标页面不可用。

const geometry = new THREE.PlaneBufferGeometry(el.width, el.height, 5)