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的百分比显示,如果宽度大于高度,则会显示一部分具有透视效果很大的内容。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值