WebH5 使用 panolens.js 实现360全景地图

JavaScript023

WebH5 使用 panolens.js 实现360全景地图,第1张

panolens.js 是一款很强大的 全景图片查看器,也可播放视频,详情可查看 官网

最近在浏览东西时不小心发现 GitHub 上也有 panolens.js 的 文档和demo 。

大概分为两种模式,模块化引用 和 普通html引用,如下图:

本文章主要分享一下 普通html引入 ,举个栗子:

哇哦竟然实现了,小伙伴们赶快试试吧~~~ 记得点赞哦~~~

全景照片是要把照片拍出来后再用PS放在一起的。

全景照片拍摄技巧如下:

使用三脚架拍摄,可以让拍摄的照片保持清晰,用户常常会遇到在没有三脚架辅助的情况下进行全景拍摄,这个时候要确保用户站在一个地点,当转动身体拍摄每张照片的时候都应该让数码相机靠近身体。

另外在拍摄期间不要从最初的拍摄地点移动,尽量站得平稳一些。这样做的目的就是模仿有三脚架的环境,尽量把照相机端平端稳,绕着一个点旋转。

垂直拍摄,而不是水平拍摄,同一地方多拍几张,照片边缘变形才会更少,全景照片看起来才会更好

相机的白平衡最好设置为阴天,如果设置为自动,那么白平衡在每张照片上都可能出现变化,这样非常不好,

半按快门,设置暴光然后观察取景器,纪录下光圈值 和快门速度,现在把相机设为M挡,调到刚才纪录下的数值,如果不这么做,那就是自动暴光,那样每张照片的暴光就可能会不同。以后在PS里面调暴光会让你疯掉

如果给第一张对焦,那么以后就关掉对焦,那样相机就不用为每一张重新对焦了否则会非常糟糕,

在拍第一张以前,最好用手指在镜头前拍一张,因为,要拍的不是一张照片,而是几张或者无数张,除非对这个景物非常熟悉,否则会不知道从那里开始拍摄的,拍完最后一张也用同样的方法重复这个操作。

每张照片重叠20%--25%.确保第一张照片有1/4出现在第二张照片里/每张至少有20%重叠.那样PS才会很轻松的把它拼接好,这一点很重要。

拓展资料:

全景需要使用类似造景师之类的图像处理软件进行拼合处理,可以将2-8张的鱼眼图像或者是不定张数的普通照片进行拼合,拼合后可以生成球形全景图或者立方体全景图,另外如果想要进行展示,也可以进行发布,可以发布出flash/java/quicktime等多种格式进行浏览,观看的效果就好像身临其境一般。

随着智能手机的发展、普及,手机端的全景软件应运而生。现在很多手机全景软件就能拍摄360°的全景照片甚至是全景视频。

例如:劲爆全景,它是一个基于iPhone附加镜头而开发的,供用户配套使用的免费App应用。

参考资料:全景照片 百度百科

Cocos2d-x3.0

//a static method

Sprite* HelloWorld::maskedSpriteWithSprite(Sprite* textureSprite, Sprite* maskSprite)

{

// 1

RenderTexture * rt = RenderTexture::create( maskSprite->getContentSize().width,

maskSprite->getContentSize().height )

// 2

maskSprite->setPosition(maskSprite->getContentSize().width/2,

maskSprite->getContentSize().height/2)

textureSprite->setPosition(textureSprite->getContentSize().width/2,

textureSprite->getContentSize().height/2)

// 3

maskSprite->setBlendFunc( BlendFunc{GL_ONE, GL_ZERO} )

textureSprite->setBlendFunc( BlendFunc{GL_DST_ALPHA, GL_ZERO} )

// 4

rt->begin()

maskSprite->visit()

textureSprite->visit()

rt->end()

// 5

Sprite *retval = Sprite::createWithTexture(rt->getSprite()->getTexture())

retval->setFlippedY(true)

return retval

}

..