使用three.js开发全景漫游视角问题全景漫游视角
程序员文章站
2023-11-01 19:05:40
使用three.js开发全景漫游视角问题全景漫游视角
本全景前期是使用六张图片拼成的一个立方体,天空盒类型的。相机的位置处于0,0,0的位置,外面设置了一个长宽高都为200的立方...
使用three.js开发全景漫游视角问题全景漫游视角
本全景前期是使用六张图片拼成的一个立方体,天空盒类型的。相机的位置处于0,0,0的位置,外面设置了一个长宽高都为200的立方体盒子。只要有相应的照片,把视角封闭在一个相对封闭的空间中,我们查看的效果,就达到了全景图的效果。
案例
我写了一个由六个不同颜色的纹理组成的图片拼接出来的盒子,可以清楚的查看出来效果。
解析
当前案例使用的相机是three.perspectivecamera透视相机,设置的fov为90度,相机设置在了原点,也是盒子的中心点。
通过以上的信息我们可以分析出来,相机的视角target如果朝向的是一个面的中心点的话,当前面会整个显示在页面当中。
之前会比较疑惑,由于宽高比会不一样,那样生成的图形在不变形的情况下,会怎么变化。
通过案例,我们会发现,其实相机的高度,显示的是标准的fov为90显示的内容,而宽度会根据高度的比例显示内容,如果宽度小于高度,则按fov的百分比显示,如果宽度大于高度,则会显示一部分具有透视效果很大的内容。