02 使用three.js开发全景漫游 视角问题

时间:2024-03-30 22:23:31

简介

本全景前期是使用六张图片拼成的一个立方体,天空盒类型的。相机的位置处于0,0,0的位置,外面设置了一个长宽高都为200的立方体盒子。只要有相应的照片,把视角封闭在一个相对封闭的空间中,我们查看的效果,就达到了全景图的效果。

案例

我写了一个由六个不同颜色的纹理组成的图片拼接出来的盒子,可以清楚的查看出来效果。

02 使用three.js开发全景漫游 视角问题

地址:https://johnson2heng.github.io/panorama/examples/02%20cube/index.html

解析

当前案例使用的相机是THREE.PerspectiveCamera透视相机,设置的fov为90度,相机设置在了原点,也是盒子的中心点。
通过以上的信息我们可以分析出来,相机的视角target如果朝向的是一个面的中心点的话,当前面会整个显示在页面当中。
之前会比较疑惑,由于浏览器宽高比会不一样,那样生成的图形在不变形的情况下,会怎么变化。
通过案例,我们会发现,其实相机的高度,显示的是标准的fov为90显示的内容,而宽度会根据高度的比例显示内容,如果宽度小于高度,则按fov的百分比显示,如果宽度大于高度,则会显示一部分具有透视效果很大的内容。