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

简介

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

案例

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

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

解析

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