首页 后端开发 php教程 在网页上制作360度全景图_PHP

在网页上制作360度全景图_PHP

Jun 01, 2016 pm 12:32 PM
制作 图片 场景 网页

轻松制作360度全景网页图片
——使用PixMaker软件制作网页上的360度旋转全景图
一、 软件简介
PixMaker是一个简单方便的360度全景图片制作软件它可以将描写一个环型场景的多个连续图片无缝地接合在一起形成一个360度“场景”图片。可以在网页上播放使你的页面更加生动活泼。PixMaker软件在网页上显示全景图片是靠程序本身提供的一个“Java applet”小程序组件只要网页编辑者将这个组件放到与全景图页面相同的目录下就可以用常用的浏览器在网页上播放全景图片。这与目前流行的“Ulead Cool 360全景制作软件”不同“Ulead Cool 360”制作的网页全景图片需要浏览者首先下载一个“全景图观察器”插件到的浏览器上才可以播放全景图片相比之下PixMaker使用起来感觉更方便自然。PixMaker可以很好地自动处理图片边界的连接看不出任何接缝的痕迹。在你准备好一组连续场景图片的前题下PixMaker只需几个简单的操作步骤就可自动完成全景图片从制作到发行的全过程。如果读者想先看看全景网页的效果请访问这个演示页面http://rubber-ts.51.net/pm360/test.html 。下面我们简单介绍它的使用方法。
二、 软件的使用
制作一组全景图片的步骤和注意的问题。
使照像机平行于地面并最好固定在三角架上。
拍摄每一幅照片时要保持照像机在同一个高度。
以一个固定点为圆心顺时针方向旋转拍摄每一幅照片。
每一幅照片的边界要有30左右的重叠区域。
要注意将移动的物体拍摄在照片的中间不要让移动物体出现的照片相交错的边界上以免对以后照片的边界处理带来不便。
根据你使用的照像设备的不同使用扫描仪等设备将照片处理成JPG格式的图片文件图片的尺寸可根据你自己的需要决定文件名最好按字母顺序排列。

将多张连续的场景图片输入到PXIMAKER处理窗口。
启动PixMaker程序可以看到程序窗口上方有三个大图标分别标记有“1—Snap”抓取图片、“2Stitch”缝合图片、“3Publish”发行一个“场景”下面是“Stitch”缝合图片标签板窗口。见图1
用鼠标点击“1—Snap”(抓取图片)图标在出现的一个指定图片获取位置的对话框中选择“My computer”并按“OK”按钮在打开的文件输入对话框中找到保存文件的目录。本文为方便起见就以PIXMAKER程序的SAMPLE目录下自带的图片文件为例它是一组展览大厅的场景图片文件名为“Sample01—Sample12”。按下“SHIFT”键不放用鼠标选择这一组文件或按下ALT键不放用鼠标选择所需的图片文件然后按“OPEN”打开按钮所选择的图片文件就排列在“Stitch”标签板上方的窗口内见图1上面的窗口并出现一个工具条上边有插入、删除、移动图片、图片类型(Type)、镜头选择(Lens)等操作命令图标在此就不多加叙述了读者可自行熟悉使用。其中图片类型选360度镜头选Auto即可这也是软件启动时给出的默认值。

缝合图片
这一步骤是将前面所抓取的多幅图片无缝地连接在一起形成一个360度全景的“场景”图。操作非常简单只需你点击第二个“Stitch”大图标PixMaker程序会自动地处理图片的边界对齐和连接在一个弹出的处理窗口中可以动态地看到自动处理图片的全过程。完成后的场景图片会显示在下面的窗口内见图1下面窗口。此时你就可以用鼠标指针操纵图片欣赏刚刚生成的360度旋转的全景影像了。横向拖动鼠标可以左右移动图片按住“Shift”键并上下移多鼠标指针可以放大和缩小“场景”的影像。使用场景窗口左下方的工具条也可以操纵场景图片的放大、缩小和使场景自动旋转用鼠标指针点击场景图片内任一位置可停止场景的移动操作方式非常灵活方便。如果你对自动生成场景图片的边界连接效果不满意也可以选择手动方式人为调整图片的边界连接。
在场景内增加热点链接
在场景图片制作完成后点击“HotSpot”标签这时会出现一个提示对话框要求你首先要保存所生成的场景图片对话框内要求你选择图像的质量和图片的尺寸我们在这里选择图像质量为“good”较好一项图片尺寸选择“Optimize for web”按网页使用优化一项按“NEXT”按钮在出现的文件保存对话框中将场景图片保存到指定目录下。接着出现的提示框要求你将目前编辑的工程文件保存到指定的目录下以方便你以后的修改和编辑。完成以上的操作后就出现了热点编辑窗口和一个工具条我们点击第二个命令图标它是在场景图片上增加一个指向网页的链接在出现的对话框内填入链接的页面地址和热点提示的内容按“OK”按钮完成一个热点链接可以在场景上增加多个链接热点每一个热点在场景上显示为一个小图框以提示你点击的位置。
将场景发行到网页上
我们这里讨论的最终目的就是将360度的场景图片显示在网页上。首先点击窗口上方的“Publish”发行大图标在对话框中选择“web page (.html)”一项按“NEXT”按钮任选一种网页模板按“NEXT”按钮在对话框中填入标题和有关的说明文字并在对话框的下面选择网页上显示场景图片的长、宽尺寸按“NEXT”按钮并给文件取名为mypage.html保存生成的网页文件到指定的目录下接着又出现一个对话框它提示你在保存页面文件的目录下程序同时将一些必需的文件也拷贝到此目录因为PixMaker程序在网页上显示图片是靠“Java applet”小程序支持的注意你要认真地记下这些文件名并在以后将页面上传到你的服务器上时一同将这些文件上传到与包含全景图片页面相同的目录下这样才能正常播放“场景”图片。如果你想将“场景”图片插入到你现有的网页中去用一个文本文件编辑工具打开由程序生成的页面文件直接将“applet >……./applet>”标记内所包含的内容粘贴到你自己的页面内适当位置就可以正常使用了。而且这部分语句中有关“applet”小程序的参数如显示宽度width、显示高度height、自动滚动速度autoPanSpeed 等对应的数值都可以直接手工修改。

到此为止我们就完成了在网页上制作一幅全景图片的全过程其中大部分操作都是由“PixMaker”程序自动完成的是不是很简单
它还可以将全景图片生成到一个可执行的“EXE”文件中可单独地播放全景图像将它用E-MAIL发送给你的朋友使他们可以在远方欣赏到你制作的全景图像很酷吧
有关的程序使用的其它细节手工编辑图片的边界连接多种热点链接形式的设置多种镜头焦距的选择等操作本文就不再赘述了。读者可自行熟悉掌握操作方法。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
两个点博物馆:所有展览以及在哪里可以找到它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Edge浏览器怎么将网页用快捷方式发送到桌面? Edge浏览器怎么将网页用快捷方式发送到桌面? Mar 14, 2024 pm 05:22 PM

  Edge浏览器怎么将网页用快捷方式发送到桌面?我们很多用户为了方便直接打开访问页面,想要将经常使用的网页以快捷方式的形式显示在桌面,但是不知道应该如何操作,针对这个问题,本期小编就来和广大用户们分享解决方法,一起来看看今日软件教程分享的内容吧。  Edge浏览器将网页发送到桌面快捷方式方法:  1、打开软件,点击页面中的“...”按钮。  2、在下拉菜单选项中选择“应用”中的“将此站点作为应用安装”。  3、最后在弹出的窗口中将其

小红书发布自动保存图片怎么解决?发布自动保存图片在哪里? 小红书发布自动保存图片怎么解决?发布自动保存图片在哪里? Mar 22, 2024 am 08:06 AM

随着社交媒体的不断发展,小红书已经成为越来越多年轻人分享生活、发现美好事物的平台。许多用户在发布图片时遇到了自动保存的问题,这让他们感到十分困扰。那么,如何解决这个问题呢?一、小红书发布自动保存图片怎么解决?1.清除缓存首先,我们可以尝试清除小红书的缓存数据。步骤如下:(1)打开小红书,点击右下角的“我的”按钮;(2)在个人中心页面,找到“设置”并点击;(3)向下滚动,找到“清除缓存”选项,点击确认。清除缓存后,重新进入小红书,尝试发布图片看是否解决了自动保存的问题。2.更新小红书版本确保你的小

抖音评论里怎么发图片?评论区图片入口在哪里? 抖音评论里怎么发图片?评论区图片入口在哪里? Mar 21, 2024 pm 09:12 PM

随着抖音短视频的火爆,用户们在评论区互动变得更加丰富多彩。有些用户希望在评论中分享图片,以更好地表达自己的观点或情感。那么,抖音评论里怎么发图片呢?本文将为你详细解答这个问题,并为你提供一些相关的技巧和注意事项。一、抖音评论里怎么发图片?1.打开抖音:首先,你需要打开抖音APP,并登录你的账号。2.找到评论区:在浏览或发布短视频时,找到想要评论的地方,点击“评论”按钮。3.输入评论内容:在评论区输入你的评论内容。4.选择发送图片:在输入评论内容的界面,你会看到一个“图片”按钮或者“+”号按钮,点

在 iPhone 上使图片更清晰的 6 种方法 在 iPhone 上使图片更清晰的 6 种方法 Mar 04, 2024 pm 06:25 PM

Apple最近的iPhone可以通过清晰的细节、饱和度和亮度来捕捉回忆。但有时,您可能会遇到一些问题,这些问题可能会导致图像看起来不那么清晰。尽管iPhone相机上的自动对焦已经取得了长足的进步,可以让您快速拍照,但相机在某些情况下可能会错误地对焦错误的拍摄对象,从而使照片在不需要的区域更加模糊。如果iPhone上的照片看起来失焦或总体上缺乏清晰度,以下帖子应该可以帮助您使它们更清晰。如何在iPhone上使图片更清晰[6种方法]您可以尝试使用本机的“照片”应用来清理照片。如果您需要更多功能和选项

自动驾驶场景中的长尾问题怎么解决? 自动驾驶场景中的长尾问题怎么解决? Jun 02, 2024 pm 02:44 PM

昨天面试被问到了是否做过长尾相关的问题,所以就想着简单总结一下。自动驾驶长尾问题是指自动驾驶汽车中的边缘情况,即发生概率较低的可能场景。感知的长尾问题是当前限制单车智能自动驾驶车辆运行设计域的主要原因之一。自动驾驶的底层架构和大部分技术问题已经被解决,剩下的5%的长尾问题,逐渐成了制约自动驾驶发展的关键。这些问题包括各种零碎的场景、极端的情况和无法预测的人类行为。自动驾驶中的边缘场景"长尾"是指自动驾驶汽车(AV)中的边缘情况,边缘情况是发生概率较低的可能场景。这些罕见的事件

ppt怎么让图片一张一张出来 ppt怎么让图片一张一张出来 Mar 25, 2024 pm 04:00 PM

在PowerPoint中,让图片逐一显示是一种常用的技巧,可以通过设置动画效果来实现。本指南详细介绍了实现这一技巧的步骤,包括基本设置、图片插入、添加动画、调整动画顺序和时间。此外,还提供了高级设置和调整,例如使用触发器、调整动画速度和顺序,以及预览动画效果。通过遵循这些步骤和技巧,用户可以轻松地在PowerPoint中设置图片逐一出现,从而提升演示文稿的视觉效果并吸引观众的注意力。

福昕PDF阅读器如何将pdf文档转成jpg图片-福昕PDF阅读器将pdf文档转成jpg图片的方法 福昕PDF阅读器如何将pdf文档转成jpg图片-福昕PDF阅读器将pdf文档转成jpg图片的方法 Mar 04, 2024 pm 05:49 PM

你们是不是也在使用福昕PDF阅读器软件呢?那么你们知道福昕PDF阅读器如何将pdf文档转成jpg图片吗?下面这篇文章就为大伙带来了福昕PDF阅读器将pdf文档转成jpg图片的方法,感兴趣的小伙伴们快来下文看看吧。先启动福昕PDF阅读器,接着在顶部工具栏找到“特色功能”,然后选择“PDF转其他”功能。在接下来,打开一个名为“福昕pdf在线转换”的网页。在页面上方右侧点击“登录”按钮进行登录,然后打开“PDF转图片”功能。之后点击上传按钮并将想要转换成图片的pdf文件添加进来,添加完毕后点击“开始转

wps文档中两张图片怎么并排 wps文档中两张图片怎么并排 Mar 20, 2024 pm 04:00 PM

在使用wps办公软件时,我们发现不单单只用一种形式,文字里会加入表格和图片,表格里也可以加入图片等等,这些都是兼并使用的,让整个文档的内容看起来更丰富,如果需要在文档中插入两张图片,而且需要并排排列。我们接下来的课程就可以解决这个问题:wps文档中两张图片怎么并排。1、首先需要打开WPS软件,找到你想要调整的图片。左键点击图片会弹出一个菜单栏,选择“页面布局”。2、在文字环绕中选择“紧密型环绕”。3、当需要的图片都确认设定为“紧密型文字环绕”之后,便可以把图片随意拖动到合适的位置,点击第一张图片

See all articles