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