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

Question

刚开始学习三个js，在dom上尝试添加基于img标签的平面几何时遇到问题。

上下文

这是我的actuel html 模板：

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

img标签被css属性display: none隐藏，.aspect div通过接收width: 50vw和padding-top: 60%给出元素的大小

我使用getBoundingClientRect func 计算元素的宽度 - 高度，并将其应用于平面几何图形：

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

然后我只需将图像的纹理应用到它

我的问题

正如您在屏幕截图中看到的，平面几何与我的方面 div（红色）的大小不完全相同：

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

提前谢谢你！

Answer 1

使用OrthographicCamera

解决

文档在这里： https://threejs.org/docs/#api/en/cameras/OrthographicCamera