欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-07 14:57:11
使用three.js开发全景漫游视角问题全景漫游视角 本全景前期是使用六张图片拼成的一个立方体,天空盒类型的。相机的位置处于0,0,0的位置,外面设置了一个长宽高都为200的立方...

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

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

案例

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

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

解析

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