14
入動旅遊頁之虛擬實境旅遊點導覽行程規劃元設 計研究 余仁朋 銘傳大學資訊理學系 [email protected] 朱美珍 銘傳大學資訊理學系 [email protected] 吳曉盈 銘傳大學資訊理學系 [email protected] 研究結 Google Earth APIJavaScriptDHTMLX 圖形化介面技術、XML 技術 ASP.NET 設計入動旅遊頁的虛擬實境旅遊導覽行程規劃元,分別為 3D 點導覽錄元、3D 點導覽播放元旅遊行程規劃導覽元。並開發一個 Web 3D 虛擬實境旅遊點導覽證所設計三個元之能。此供使者依 據其旅遊需求進行自我 3D 旅遊行程導覽作,並利此導覽所供之旅遊行程導 覽能 3D 虛擬實境的式,藉鍵盤或滑鼠之簡操控即 Google Earth 所供 的虛擬界中,彷彿開著飛機、汽車或步行般,遊覽預其旅遊行程;時 也供 3D 視覺化介面的助來進行旅遊行程規劃。此研究所設計之元簡 快速的式入其旅遊資訊站進而幫助旅遊業者將其頁升為 3D 虛擬實境互動旅 遊資訊,進而升其經營績效。 關鍵詞:物導、虛擬實境、Google Earth API

屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

  • Upload
    others

  • View
    7

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

可嵌入動態旅遊網頁之虛擬實境旅遊景點導覽與行程規劃元件設

計研究

余仁朋

銘傳大學資訊管理學系

[email protected]

朱美珍

銘傳大學資訊管理學系

[email protected]

吳曉盈

銘傳大學資訊管理學系

[email protected]

摘要

本研究結合 Google Earth API、JavaScript、DHTMLX 圖形化介面技術、XML 技術

與 ASP.NET 設計可嵌入動態旅遊網頁的虛擬實境旅遊導覽與行程規劃元件,分別為 3D

景點導覽錄製元件、3D 景點導覽播放元件與旅遊行程規劃導覽元件。並開發一個 Web

3D 虛擬實境旅遊景點導覽平台以驗證所設計三個元件之功能。此平台提供使用者可依

據其旅遊需求進行自我 3D 旅遊行程導覽製作,並利用此導覽平台所提供之旅遊行程導

覽功能以 3D 虛擬實境的方式,藉由鍵盤或滑鼠之簡單操控即可在 Google Earth 所提供

的虛擬世界中,彷彿開著飛機、汽車或步行般,在遊覽預先體驗其旅遊行程;平台同時

也提供 3D 視覺化介面的輔助來進行旅遊行程規劃。此外本研究所設計之元件亦可簡單

快速的方式嵌入其旅遊資訊網站進而幫助旅遊業者將其網頁提升為 3D 虛擬實境互動旅

遊資訊網,進而提升其經營績效。

關鍵詞:物件導向、虛擬實境、Google Earth API

Page 2: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

壹、 前言

隨著無遠弗屆的網際網路以及資訊的數位化,現今有不少旅遊業者將旅遊資訊蒐集

並利用網站提供旅客服務,民眾可透過網站得知旅遊景點豐富的文字描述與景點圖片的

介紹,然而靜態文字敘述與圖片呈現對大多數的民眾似乎又缺少了臨場以及互動性如置

身於身歷其境般的吸引力。大多數的旅遊網建置其共通點幾乎是以圖文兼併做行程資訊

呈現,而最能讓使用者了解景點資訊或是旅遊行程的地方,也僅以影音簡介的功能吸引

消費者,此功能雖然在少數旅遊網可看到但卻無法滿足尋找創新與好奇的使用者他們所

期望的互動性與臨場真實感。

網路資訊科技與空間資訊的結合,更提昇了實體地理環境的認知也促使區域導覽

系統的普及化,Google Earth 的問世更讓遍及全世界的使用者坐在家中就能即時掌握全

球地理環境資訊。現今有許多的導覽網站,透過三維的虛擬空間技術建造仿真的虛擬世

界。例如 2010 台北國際花卉博覽會透過展館 3D 虛擬導覽網頁對整個周遭環境進行互動

與導覽,讓參訪之民眾能清楚的了解實際展覽館的真實風貌(花博官方網站 2011),又譬

如 Web 3D 博物館利用科技營造逼真的效果,虛擬人為的環境與物件把真實事物以虛擬

方式呈現得栩栩如生(國立海洋生物博物館 2010)。三維技術的開發也藉由網路頻寬的發

展與電腦運算能力的提升,使得 3D 虛擬技術在網路應用上日漸普及再加上虛擬實境的

導入也讓地理環境資訊更顯貼切真實。綜合上述的討論可知,倘若能與 Google Earth 整

合在旅遊網站上提供 3D 虛擬實境旅遊景點導覽互動式功能,對任何消費者而言將可如

實景般的完成旅遊夢想,而對旅行業者而言更可刺激消費者實際行動的意願進而完成旅

遊團隊成行。

現今在這個多元化與多變的旅遊產業,旅遊網資訊多采多姿,特色景點圖片與文字

的詳細介紹是建置旅遊網所必備的資訊。但使用者只能想像而較難透過文字與圖片了解

更進一步的遊覽過程。現有的旅遊網站,旅遊行程期間介紹與景點呈現方式,如雄獅旅

遊網對於行程規劃與景點導覽方式,則以影片或是影音播放方式為主,使用者能藉著旁

白以及錄像方式了解行程與景點,的確相較於圖文更具活潑性,但明顯地相對使用者而

言則缺乏其互動性與實際臨場感。

本研究結合 Google Earth API、XML、JavaScript、ASP.NET 以及 DHTMLX 建置可

嵌入動態旅遊網頁的虛擬實境旅遊導覽與行程規劃元件之設計可提供傳統之旅遊網站

能以簡單與快速之方式,藉由此動態旅遊網頁的虛擬實境旅遊導覽與行程規劃元件嵌入

網頁,即能將其現有網站功能提升為具有互動性與旅遊資訊 3D 視覺化功能之網站。讓

使用者可透過所提供的使用者介面快速取得行程及景點資訊,並藉由 3D 虛擬實境來導

覽旅遊景點或建立自我行程規劃。使用者亦可依自己的喜好選擇自動導覽或利用鍵盤、

滑鼠操控之手動導覽模式,瀏覽其自行規劃之旅遊行程。嵌入動態旅遊網頁的虛擬實境

旅遊導覽與行程規劃元件之旅遊網頁亦可與其旅遊資訊資料庫整合,相信 3D 視覺化的

呈現與互動功能必可提升其旅遊業績效的成長。

Page 3: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

貳、 文獻探討

本研究結合 DHTMLX 動態網頁技術、XML 檔案式資料管理、JavaScript 網頁語言

與 Google Earth API 相關技術建置此可嵌入動態旅遊網頁之虛擬實境導覽與行程規劃元

件,相關技術文獻分別敘述如下。

一、 虛擬實境技術

虛擬實境(Virtual Reality),簡稱 VR 技術,也稱靈境技術或人工環境,是利用電腦

模擬產生一個三度空間的虛擬世界,提供使用者關於視覺、聽覺、觸覺等感官的模擬,

讓使用者如同身歷其境一般,可以及時、沒有限制地觀察三度空間內的事物。

現在的大部分虛擬現實技術都是視覺體驗,一般是通過電腦螢幕、特殊顯示設備或

立體顯示設備獲得的,不過一些模擬中還包含了其他的感覺處理,比如從音響和耳機中

獲得聲音效果。在一些高級的觸覺系統中還包含了觸覺信息,也叫作力反饋,在醫學和

遊戲領域有這樣的應用(維基百科 2011,周宣光 2000)。

二、 DHTMLX 動態網頁技術

DHTMLX 是一種通過結合 HTML、用戶端腳本語言(Client Side Script)、串接樣式

表(CSS)和文件物件模型(DOM)來創建動態網頁內容的方法,此技術赋予網頁設計

一個全新的風貌。通過此技術,網頁設計師可以直接在 HTML 中運用程序代碼控制網

頁裡的動態效果,而擺脫以往必须通過服務器並使用 Java Applets 去控制動態命令,以

及操作複雜、不易修改等缺點,運用 DHTMLX 可以完整地掌握整個網頁設計。任何動

態效果、絕對坐標及對象属性的設置均可在 HTML 的原始平面文字文件裡完成,不必

依賴服務器並可進而提高整體網路的傳輸效率。其亦可應用在產生互動式表單、

e-learning 互動式在線基礎培訓與創建基於瀏覽器的視頻遊戲(維基百科網站 2011)。

DHTMLX 亦代表控制 HTML文件的文件物件模型(Document Object Model),用 CSS

處理樣式資訊,以及利用客戶端的 JavaScript 指令語言,結合上述技術,可創造出動態

網頁,使其網頁具豐富創意(胡為君 2005)。

三、 XML

XML(Extensible Markup Language)是一套資料儲存工具,以用來建立包含結構化格

式資料的文件,主要用於標示電子文件使其具有結構性,文件中的資料可以是各種不同

型態的資料,如文字、數字、多媒體資料、試算表等可加入供辨識的標籤,而在客戶端

設備或網站伺服器中,依標籤來對該文件中的資料做進一步的處理,可讓應用軟體解析

並讓使用者可透過 XML 的標示了解文件資料中的含意(陳長念、陳勤意 2011)。

XML 所擁有的功用不只是傳遞資料,還可以將資料包含在 XML 文件中,然後利

用延伸樣式表語言(Extensible Style Sheet Language)所寫成的網頁,將 XML 文件中的資

料展現於 Microsoft Internet Explorer 5 中。

四、 JavaScript

Page 4: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

JavaScript 描述語言是一種網頁描述語言 (script language),可在客戶端加強 HTML

的表達能力,亦即提高網頁的互動性。在網頁內容方面,JavaScript 建構在 HTML 文

件之中,多以 <script language=javascript> </script> 與 HTML 標記區隔。由於所有的

JavaScript 程式都是在客戶端電腦執行,當瀏覽器讀取並解譯 HTML 語言時,也必須

同時讀取與解譯 JavaScript 程式。因此,所使用的瀏覽器必須能解譯與執行 JavaScript

程式(柴惠敏程式語言網站 2011,John Resig 2010,朱印宏 2010)。有別於 JavaScript

的 Java 是由昇陽公司所開發的一物件導向程式語言(Object-Oriented Programming

Language),它可以用來撰寫單獨式(Stand-alone)的 Java 應用程式或用來編寫一種名

為 Java applet 的迷你應用程式,是一種跨平台(cross platform)使用的程式語言(林富堯

2011,洪維恩 2009,卜維丰 2008)。

五、 Google Earth

Google Earth 是由 Google 公司開發出來的一款虛擬地球軟體,此軟體是由航拍照片、

衛星照片和 GIS 資料整合在一起,形成一個地球的三維模型。根據地圖資料的儲存格式

不同,可分成向量資料和柵格資料;向量資料以點線面的形式來表示地圖,輔以相應的

屬性資料,查詢分析特別方便。此外,Google Earth 還將向量資料根據其屬性資料類型

不同而分成不同圖層更方便管理。柵格資料則把地表分割成一個一個的儲存格,根據儲

存格覆蓋地表面積大小,構成不同解析度的柵格圖像,資料結構相對比較簡單,資料量

也比較大(宅學習課程網站,2010)。

六、 KML

KML(Keyhole Markup Language),是基於 XML 語法標準的一種標記語言(markup

language),採用標記結構,含有嵌套的元素和屬性。由 Google 旗下的 Keyhole 公司發

展並維護,用來表達地理標記。根據KML語言編寫的文件則為KML文件,應用於Google

地球相關軟體中(Google Earth,Google Map 等),以用於顯示地理數據包括點、線、面、

多邊形,多面體以及模型等(維基百科,2011)。

七、 ASP.NET

ASP.NET 是由微軟在.NET Framework 框架中所提供,開發 Web 應用程式的類別庫,

其封裝於 System.Web.dll 檔案中,並顯露 System.Web 的命名空間,且提供 ASP.NET 網

頁處理、擴充以及 HTTP 通道的應用程式與通訊處理等工作,以及 Web Service 的基礎

架構。ASP.NET 是 ASP 技術的後繼者,但它的發展性要較 ASP 技術多。ASP.NET 可在

安裝了.NET Framework 的 IIS 伺服器上執行,但若是要在非微軟的平台上執行,則需使

用 Mono 平台[1],ASP.NET 在 2.0 版本已經定型,而在.NET Framework 3.5 上新增了許

多功能,如 Microsoft Silverlight、ASP.NET Dynamic Data、ASP.NET MVC Framework 與

ASP.NET AJAX 等。然而大多數的人都把 ASP.NET 視為一種程式語言,但它實際上只

是一個由 .NET Framework 提供的一種開發平台 (Development Platform),而非程式語

言(維基百科 2011,文淵閣工作室 2009)。ASP.NET 可支援 HTML 和 XHTML 兩種網

頁內容,但在 Visual Studio.NET 中,預設是使用 HTML,在 Visual Studio 2005 以後的

版本,則一律都改用 XHTML 格式(維基百科,2011)。

Page 5: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

參、 研究方法與系統設計

本研究利用 DHTMLX、XML、Google Earth API 與 JavaScript 等相關技術所設計之

可嵌入動態旅遊網頁之虛擬實境導覽與行程規劃元件分別為 3D 景點導覽錄製元件、3D

景點導覽播放元件與旅遊行程規劃導覽元件,另外驗證所設計元件之功能亦開發 Web

3D 虛擬實境旅遊景點導覽平台,分別敘述如下。

一、 3D 景點導覽錄製元件設計

3D 景點導覽錄製元件是利用 Google Earth API 與 JavaScript 技術開發,此元件設計

概念主要是透過所設計之鍵盤以及滑鼠事件,藉以操控導覽觀看視角,可自由飛覽、環

繞景點以及穿梭街道,並以距離內差為基礎的相機位置計算功能控制相機位置以等速方

式移動,並進行景點遊覽,且在景點飛覽的過程中設計景點導覽地標功能模組讓使用者

可透過鍵盤控制隨時插入景點地標,同時設計定時器(Timer)記錄相機位置之經度、緯度

與高度等相關地理資訊,以 Google 所提供之 kml 檔格式建立,再透所設計之 XML 載

出/載入器,將景點導覽 kml 檔以 XML 標籤解析並載入,針對熱門旅遊景點,建立其

景點之 3D 遊覽檔資料庫,再以樹狀目錄來呈現旅遊景點之相關資訊,設計概念如圖 1

所示。

圖 1 3D 景點導覽錄製元件設計概念

完成之 3D 景點導覽錄製元件可嵌入一般網頁,圖 2 為驗證其功能所設計的應用程

式介面。於介面中以樹狀結構呈顯景點資料庫(參見圖 2 標示 A 處)以及使用者完成之

景點導覽(參見圖 2 標示 B 處),方便使用者快速尋找熱門景點,並可利用本計畫所設

計之鍵盤以及滑鼠事件以控制導覽景點過程中的方向以及觀看視角,並同時記錄導覽過

程當中每一經緯度、高度、斜度以及視角等相關地理數據資訊,以 Google 所發展之

Page 6: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

KML 文件格式建立,儲存於景點資料庫,使用者亦可勾選樹狀目錄中之新錄製景點導

覽,即時撥放自己所錄製之景點遊覽路徑。景點導覽錄製完成後,使用者可在即時檢視

景點導覽時,利用鍵盤功能如:A 鍵插入地標、Z 鍵提升地標位置、X 鍵降低地標位置

以及 S 鍵儲存地標等,再搭配滑鼠控制移動地標設置位置來完成插入地標。

圖 2 3D 景點導覽錄製系統說明截圖

二、 3D 景點導覽播放元件設計

3D 景點導覽播放元件中設計 XML 載出/載入器以解析所載入之景點資料庫當中

的每個景點導覽 KML 檔,並分析景點導覽之地理資訊,提供使用者可於虛擬世界中進

行遊覽預設之景點遊覽程序,再設計景點導覽撥放器,提供使用者可倒退、前進之功能

以及控制導覽速度控制項。此外,亦整合本研究所設計之鍵盤事件以及相機位置計算功

能,讓使用者可以全手動之模式來自由操控導覽視角與方向,如自行開飛機般完全利用

鍵盤以及滑鼠控制景點導覽過程,並可藉由所設計之標記點導覽功能,透過鍵盤事件,

在遊覽過程中隨意插入標記點,並隨時回到標記處繼續導覽。其設計概念如圖 3 所示。

圖 3 3D 景點導覽播放元件設計概念圖

Page 7: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

3D 景點導覽撥放元件主要提供使用者兩種導覽模式,其一為自動導覽模式:使用者可

勾選景點目錄中欲導覽之景點(參見圖 4 圈起A處),並於右側同步顯示其景點之自動導

覽(參見圖 4 圈起B處)。在導覽的過程當中可利用鍵盤的-按鍵以及+按鍵控制導覽速

度,亦可利用撥放器倒退撥放或前進撥放(參見圖 4 圈起 C 處),並可隨時切換至手動

模式,利用滑鼠控制觀看視角,藉由此功能可幫助使用者 3D 虛擬實境導覽旅遊景點,

透過視覺化功能了解旅遊景點遊覽過程。

圖 4 自動導覽模式功能說明截圖

另一為全手動導覽模式:結合本研究所設計之鍵盤功能以及相機位置計算模組功能,

設計出之全手動導覽模式讓使用者可於介面當中點擊操控項之「執行手動導覽」按鈕,

以執行此景點之全手動導覽功能(參見圖 5 圈起A處),透過鍵盤上、下、左、右與空白

鍵等鍵盤按鍵,控制導覽觀看角度以及飛行方向或暫停與啟動,讓使用者可自由行走並

環視、穿梭建築物與欣賞景點(參見圖 5 圈起B處):熱氣球是為讓使用者增加臨場趣味,

可利用 Ctrl 鍵選擇是否要顯示。除了上述兩種導覽模式本研究亦提供使用者標記點導覽

模式,使用者可在遊覽的過程中在喜歡的風景或事件建築物,點擊鍵盤事件「M」鍵做

插入標記的動作,於樹狀目錄中會顯示其插入標記處之節點,並可再次勾選繼續從標記

A

B C

C

Page 8: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

處繼續導覽如圖 6 所示。

圖 5 全手動導覽模式功能說明截圖

圖 6 標記點導覽模組功能說明截圖

三、 旅遊行程規劃導覽元件設計

旅遊行程規劃導覽元件主要利用 DHTMLX 圖形化介面技術之便利性,以提供使用

者以拖曳的方式,快速的從景點資料庫中拖曳喜愛的景點至行程規劃介面,並依序顯示

出景點與景點之相對位置與路徑,再藉由 3D 視覺化的輔助以及鍵盤滑鼠功能重新規劃

路徑,並設計行程規劃連續導覽功能以提供使用者可選擇撥放全日成或全行程之連續景

點導覽。其設計概念如圖 7 所示。

B

A

Page 9: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

圖 7 旅遊行程規劃導覽元件設計概念圖

旅遊行程規劃導覽元件結合 DHTMLX 動態網頁圖形化介面技術開發,以達到使用

者操作方便快速之目標。使用者可先行拖移自己喜愛之景點至自訂喜好景點介面(參見

圖 8 圈起 A 處),透過 3D 視覺化的呈現,讓使用者可以預先了解景點與景點之間的相對

距離(參見圖 8 圈起 B 處)。並利用滑鼠依序點擊以重新規劃出路徑,再藉由鍵盤功能之

Ctrl 鍵以及 Alt 鍵安排自我旅遊行程(參見圖 9 圈起處)。使用者亦可勾選日程導覽或是全

行程導覽,即可進行即時景點導覽,讓使用者可更加了解自我規畫之旅遊行程遊覽過程

(參見圖 10 所示)。

圖 8 行程規劃 3D 景點視覺化功能說明截圖

A

B

Page 10: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

圖 9 規劃旅遊行程說明截圖

圖 10 旅遊行程規劃即時全行程或全日 3D 導覽功能說明截圖

Page 11: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

四、 Web 3D 虛擬實境旅遊景點導覽平台

本研究利用 DHTMLX 圖形化介面技術所具有之 Tree(樹)功能,將熱門景點資料庫

以樹狀目錄呈現,並整合 3D 景點導覽錄製元件、3D 景點導覽播放元件以及旅遊行程

規劃導覽元件之關鍵性功能,再搭配出讓使用者操作簡易之圖形化介面技術(如:

Layout、Tabbar、Menu 等技術)以建構此 Web 3D 虛擬實境旅遊景點導覽平台,並驗證

其子元件功能,Web 3D 虛擬實境旅遊景點導覽平台架構如圖 11 所示。

圖 11 Web 3D 虛擬實境旅遊景點導覽平台架構圖

五、 3D 虛擬實境旅遊景點導覽元件嵌入旅遊網頁之方法

本研究所設計的三個關鍵性視覺化元件皆可與旅遊業者之網站做整合,可嵌入一般

旅遊網頁。在本研究中以雄獅旅遊網站為例,其處理過程如圖 12 所示。圖 12 顯示使用

者只需在其旅遊網頁加入簡單的指令,即可整合本計畫元件再加入鍵盤事件指令,即可

快速嵌入本計畫所設計之 3D 景點導覽視覺化元件,進而將現金一般的旅遊網頁,提升

為具有 3D 旅遊景點導覽功能之旅遊資訊網,幫助其旅遊業者吸引旅客並提升其瀏覽使

用率。

Page 12: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

圖 12 3D 虛擬實境旅遊景點導覽元件嵌入旅遊網頁說明截圖

肆、 結論

旅遊網站是大部分民眾獲取旅遊資訊來源處,然而現有旅遊網站對旅遊資訊雖然文

字描述詳盡與圖片內容豐富多樣化,但對於旅遊行程介紹頁面幾乎如出一轍,僅以 2D

多媒體方式呈現相關訊息,對一般民眾而言似乎欠缺了臨場感與互動性的樂趣。本研究

結合 Google Earth API、JavaScript、DHTMLX 圖形化介面技術、XML 技術與 ASP.NET

完成一個可嵌入動態旅遊網頁的虛擬實境旅遊導覽與行程規劃元件設計。透過本研究所

設計之元件嵌入將原來只能利用 2D 多媒體方式呈現來獲取旅遊資訊之網站,進而將其

網頁提升為使用簡單且吸引力十足的 3D 虛擬實境互動旅遊網站。對一般旅遊業者而言

Page 13: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

藉由本研究所建置的元件,進行自我推薦之旅遊行程規劃與具有 3D 旅遊景點導覽功能

之旅遊行程規劃。旅遊行程 3D 視覺化的呈現,提供消費者視覺化的享受外更能滿足消

費者的需求與樂趣。隨著本研究的完成將有助於旅行業者的旅遊行程推銷與提升旅遊業

績,同時也滿足一般使用者不用搭飛機也可以環遊世界景點的夢想。

誌謝

本研究承蒙國科會贊助(計畫編號:100-2815-C-130-016-E),特此致謝。

參考文獻

1. 卜維丰,2008,重新認識 JavaScript,松崗圖書公司。

2. 文淵閣工作室,2009,ASP.NET3.5 互動網站百寶箱-使用 C#,碁峰資訊股份有限

公司。

3. 朱印宏,2010,征服 JavaScript,佳魁資訊出版社。

4. 江寬、龔小鵬,2008, Google API 開發詳解 Google Map 與 Google Earth 雙劍合壁,

文魁圖書出版社。

5. 林富堯,2011,JAVASCRIPT 開講-NAVIGATOR 交戰手冊,松岡圖書公司。

6. 周宣光,2000,「虛擬實境系統的開發模式與應用」,技術學刊,第一卷,第十五期:

9-18 頁。

7. 胡為君,2005,DHTMLX 網頁設計師手札-最新 JavaScript 動態網頁範例,上奇資

訊出版社。

8. 洪維恩,2009,Java2 JDK 5.0 教學手冊,博碩文化股份有限公司。

9. 陳長念、陳勤意,2011,XML 入門手冊,知城圖書出版社。

10. John Resig, 2011,Secrets of the Javascript Ninja, Oreilly & Associates Inc company.

11. Google Earth API 網站,http://code.google.com/intl/zh-TW/,2011。

12. 宅學習課程網頁,http://www.w3schools.com/,2011。

13. 艾菲爾鐵塔圖片網站,techblog.dallasnews.com,2011。

14. 花博官方網站,http://beta.2010taipeiexpo.tw/MP_3.html,2011。

15. 柴惠敏程式語言網站,http://www.pt.ntu.tw/hmchai/PTcomputer/hJavaScript/,2010。

16. 國立海洋生物博物館,http://top.nmmba.gov.tw/podcast/show_channel/21,2010。

17. 智慧城市 3D 台北,http://adm3d.taipei.gov.tw/,2011。

18. 雄獅旅遊網,http://www.liontravel.com/ ,2011。

19. 維基百科,

http://zh.wikipedia.org/zh-tw/Wikipedia:%E9%A6%96%E9%A1%B5,2011。

20. 燦星旅行社,http://www.startravel.com.tw/index.html ,2011。

Page 14: 屣酨入動幠旅遊廱頁之虛擬實境旅遊醱點導覽弌行程規劃元峋 ...oplab.im.ntu.edu.tw/csimweb/system/application/views/... · 2012-09-26 · 貳、 尠獻探討

Design of 3D Virtual Reality Scene Touring and Tour Planning

Components for Dynamic Tourism Website

Jen-Perng Yu

Department of Information Management, Ming Chuan University

[email protected]

Mei-Chen Chu

Department of Information Management, Ming Chuan University

[email protected]

Siao-Ying Wu

Department of Information Management Ming Chuan University

[email protected]

Abstract

In this study, the concepts of object-oriented techniques are used in combination with the

application of the Google Earth API, Javascript and dhtmlx API. Three components including

tour maker, tour player and tour planning component are developed. All of them can be

embedded into a webpage to provide 3D tour visualization. To validate the functions of above

mentioned three components, a 3D virtual reality touring system is constructed. The tour

maker component provided a user-friendly interface to let the user create the 3D tour for their

own favorite scenes. The scene information can be embedded in a placemark related to the

scene. When creating the tour, the user can select the flying mode in which the user can

browser the scenes just like he/she is flying a plan, or the user can select the first person

camera mode in which the user can work through the streets. The tour player component also

provides user-friendly interface for the user to play the designed tour. The tour planning

component provides the user to plan their tour in an easy way through the aids of visualization.

The above mentioned components can be easily embedded to the existing travel information

website, so that the travel agent can provide 3D virtual reality touring to their customers. This

will help their customers easily realize the tour planning and then increase the benefits of the

travel agent.

Keyword:Object-oriented, Virtual Reality, Google Earth API