首頁 後端開發 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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1242
24
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.選擇傳送圖片:在輸入評論內容的介面,你會看到一個「圖片」按鈕或「+」號按鈕,點

自動駕駛場景中的長尾問題怎麼解決? 自動駕駛場景中的長尾問題怎麼解決? Jun 02, 2024 pm 02:44 PM

昨天面試被問到了是否做過長尾相關的問題,所以就想著簡單總結一下。自動駕駛長尾問題是指自動駕駛汽車中的邊緣情況,即發生機率較低的可能場景。感知的長尾問題是目前限制單車智慧自動駕駛車輛運行設計域的主要原因之一。自動駕駛的底層架構和大部分技術問題已經解決,剩下的5%的長尾問題,逐漸成了限制自動駕駛發展的關鍵。這些問題包括各種零碎的場景、極端的情況和無法預測的人類行為。自動駕駛中的邊緣場景"長尾"是指自動駕駛汽車(AV)中的邊緣情況,邊緣情況是發生機率較低的可能場景。這些罕見的事件

ppt怎麼讓圖片一張一張出來 ppt怎麼讓圖片一張一張出來 Mar 25, 2024 pm 04:00 PM

在PowerPoint中,讓圖片逐一顯示是常用的技巧,可以透過設定動畫效果來實現。本指南詳細介紹了實現此技巧的步驟,包括基本設定、圖片插入、新增動畫、調整動畫順序和時間。此外,還提供了進階設定和調整,例如使用觸發器、調整動畫速度和順序,以及預覽動畫效果。透過遵循這些步驟和技巧,使用者可以輕鬆地在PowerPoint中設定圖片逐一出現,從而提升簡報的視覺效果並吸引觀眾的注意力。

在 iPhone 上讓圖片更清晰的 6 種方法 在 iPhone 上讓圖片更清晰的 6 種方法 Mar 04, 2024 pm 06:25 PM

Apple最近的iPhone可以透過清晰的細節、飽和度和亮度來捕捉回憶。但有時,您可能會遇到一些問題,這些問題可能會導致影像看起來不那麼清晰。儘管iPhone相機上的自動對焦已經取得了長足的進步,可以讓您快速拍照,但相機在某些情況下可能會錯誤地對焦錯誤的拍攝對象,從而使照片在不需要的區域更加模糊。如果iPhone上的照片看起來失焦或整體缺乏清晰度,以下貼文應該可以幫助您使它們更清晰。如何在iPhone上讓圖片更清晰[6種方法]您可以嘗試使用本機的「照片」應用程式來清理照片。如果您需要更多功能和選項

網頁圖片載入不出來怎麼辦? 6種解決辦法 網頁圖片載入不出來怎麼辦? 6種解決辦法 Mar 15, 2024 am 10:30 AM

  有網友發現打開瀏覽器網頁,網頁上的圖片遲遲加載不出來,是怎麼回事?檢查過網路是正常的,那是哪裡出現了問題呢?下面小編就來跟大家介紹一下網頁圖片載入不出來的六種解決方法。網頁圖片載入不出來:  1、網速問題網頁顯示不出圖片有可能是因為電腦的網路速度比較慢,電腦中開啟的軟體比較多,  而我們造訪的圖片比較大,這就可能因為載入逾時,導致圖片顯示不出來,  可以將比較佔網速的軟體將關掉,可以去任務管理器查看一下。  2、造訪人數過多  網頁顯示不出圖片還有可能是因為我們造訪的網頁,在同時段造訪的

wps文檔中兩張圖片怎麼並排 wps文檔中兩張圖片怎麼並排 Mar 20, 2024 pm 04:00 PM

在使用wps辦公室軟體時,我們發現不單單只用一種形式,文字裡會加入表格和圖片,表格裡也可以加入圖片等等,這些都是合併使用的,讓整個文件的內容看起來更豐富,如果需要在文件中插入兩張圖片,而且需要並排排列。我們接下來的課程就可以解決這個問題:wps文件中兩張圖片怎麼並排。 1.首先要開啟WPS軟體,找到你想要調整的圖片。左鍵點擊圖片會彈出一個選單欄,選擇「頁面佈局」。 2、在文字環繞中選擇「緊密型環繞」。 3.當需要的圖片都確認設定為「緊密型文字環繞」之後,便可以把圖片隨意拖動到合適的位置,點擊第一張圖片

See all articles