3D校園全景的網(wǎng)頁交互設計在校園文化建設中的應用研究

張啟靖

【摘要】校園文化是高校文化的重要組成部分，是社會主流價值觀在校園的直觀體現(xiàn)[1]?！盎ヂ?lián)網(wǎng)+”下的校園文化建設更加體現(xiàn)了校園文化新的發(fā)展活力。由于新冠疫情的影響，如何在后疫情時代發(fā)展好校園文化，打造高質(zhì)量的信息化校園、智慧校園更具有研究的必要性。本文通過對當前校園宣傳的熱門技術(shù)3D校園全景進行新的交互功能設計，提出后疫情時代校園文化建設的新構(gòu)想。

【關(guān)鍵詞】校園文化建設;3D校園全景;虛擬校園;智慧校園;后疫情時代

一、科技校園的建設發(fā)展

1.建設現(xiàn)狀

教育的信息化建設經(jīng)過半個世紀的發(fā)展，已經(jīng)從單純的多媒體教學發(fā)展到集人工智能、物聯(lián)網(wǎng)、大數(shù)據(jù)、云計算等現(xiàn)代信息技術(shù)于一身的智慧校園。各國教育行業(yè)也在不斷探索如何使信息技術(shù)與校園發(fā)展建設深度融合。2018年4月13日，教育部印發(fā)的《教育信息化2.0行動計劃》明確強調(diào)“信息技術(shù)對教育的革命性影響已初步顯現(xiàn)，教育信息化是教育現(xiàn)代化的基本內(nèi)涵和顯著特征，是‘教育現(xiàn)代化2035的重點內(nèi)容和重要標志。要充分利用云計算、大數(shù)據(jù)、人工智能等新技術(shù)，提升教育管理、服務的水準”。

在后疫情時代，如何建立線上教育教學體系，保障教學質(zhì)量，提升學校數(shù)字化素質(zhì)，做好校園文化管理和宣傳是需要教師研究的課題。

2.校園信息化、數(shù)字化校園、智慧校園的概念分析

（1）校園信息化。校園信息化是指利用互聯(lián)網(wǎng)技術(shù)，建立起高速安全的校園網(wǎng)絡，并在此基礎上結(jié)合物聯(lián)網(wǎng)、云計算、大數(shù)據(jù)、5G、虛擬現(xiàn)實等不斷涌現(xiàn)的高新技術(shù)，構(gòu)建完整的校園網(wǎng)絡環(huán)境。具體來說，其更著重于校園網(wǎng)絡體系的全面建設，重點主要集中在校園網(wǎng)絡建設、信息系統(tǒng)建設、教育信息化的深度發(fā)展和信息安全等基礎建設。

（2）數(shù)字化校園。數(shù)字化校園是指校園中教育教學、管理生活等利用互聯(lián)網(wǎng)，通過使用手機等終端生活的一種生態(tài)。這是一種校園運行狀態(tài)，如線上學習、線上評職稱、線上訂餐、線上社團管理、線上預約、線上投票等。當前的主要建設方式有云教育平臺、智能監(jiān)管系統(tǒng)、智能教學系統(tǒng)等。

（3）智慧校園。智慧校園是指以物聯(lián)網(wǎng)為核心集智慧化校園學習、生活一體化環(huán)境，實現(xiàn)智慧化服務和管理的校園模式。在校園信息化系統(tǒng)的基礎上，將校內(nèi)“局域網(wǎng)”推進到“互聯(lián)網(wǎng)”，從“本地化”推進到“移動化”，通過信息化手段將教學、教務、生活進行融合，能夠讓師生實現(xiàn)“隨時隨地”學習和辦公，創(chuàng)建更加智能化的沉浸式校園網(wǎng)絡環(huán)境?！爸腔邸眰?cè)重于高水平網(wǎng)絡校園概念的提出。完善的智慧校園系統(tǒng)，可以建立起統(tǒng)一的數(shù)據(jù)庫，完善的平臺，能統(tǒng)一管理不同的教學資源，形成管理系統(tǒng)[2]。

校園信息化建設是一種基礎性常態(tài)化建設，按照當前投入程度不同，呈現(xiàn)不同層次的信息化水平，多數(shù)學校在很長一段時間將會持續(xù)加大校園信息化建設投入。數(shù)字化校園是當前校園的意識形態(tài)和具體表現(xiàn)，是信息化水平在校園生態(tài)中的具體應用。因此，信息化是最先出現(xiàn)的建設性概念，通過信息化的建設，呈現(xiàn)出數(shù)字校園的應用狀態(tài)，通過各個系統(tǒng)的結(jié)合和改善，最終實現(xiàn)智慧化校園的完美形態(tài)。

二、3D校園全景網(wǎng)頁設計方案

1.系統(tǒng)介紹

本文中的3D校園全景系統(tǒng)采用網(wǎng)頁形式開發(fā)，利用以JavaScript為基礎的Three.js庫建立3D校園全景圖，體現(xiàn)校園環(huán)境特色，提供沉浸式校園體驗。同時以校園地圖為平臺，通過空間上的延伸和交互設計，進行校園信息的展示、查詢及管理。并在此基礎上進行校園文化建設和發(fā)展的探索。

2.技術(shù)考量

本文設計的校園全景系統(tǒng)是以web網(wǎng)頁為基礎，JavaScript技術(shù)的Three.js庫做支撐。Three.js是在WebGL標準基礎上封裝的一個輕量級的JS的3D庫。主要用于簡化WebGL開發(fā)復雜度和降低入門難度，直接在瀏覽器上進行渲染。后期易于疊加其他的網(wǎng)頁技術(shù)，進行交互設計的拓展。

3.網(wǎng)頁基礎設計

（1）校園全景頁面的技術(shù)實現(xiàn)。技術(shù)原理是建立一個正方體，并在其表面貼上背景圖，將相機放在正方體的中心，監(jiān)聽鼠標拖動/滾輪移動來改變相機的面向，從而實現(xiàn)全景效果。主要用到Three.js

的Camera（相機），BoxGeometry（正方體），MeshBasicMaterial（材質(zhì)），Mesh/Scene（場景），WebGLRenderer（渲染）等功能。

（2）全景圖拍攝/分割。照片采用大疆無人機御Ⅱ距地15米水平航拍。每間隔15度拍一張，之后進行合并，再切割成4個方位的照片便于代碼使用。另垂直朝上、朝下取天空和地面兩張照片。將圖片貼在立方體盒子另外兩面上，形成3D校園全景的雛形。

4.交互設計

（1）需求分析。校貌展示：實現(xiàn)地圖瀏覽的基本功能，可展示3600全景圖;信息展示：校內(nèi)各類活動，如講座、比賽等的及時展示;提供接口：以校園實景為基礎，提供開發(fā)接口，提升系統(tǒng)的可拓展性。

（2）功能架構(gòu)及詳述

3D校園全景系統(tǒng)功能主要分為3D全景地圖基本功能、信息展示、信息搜索、系統(tǒng)優(yōu)化功能四部分：①3D全景地圖主要執(zhí)行地圖的基本展示，如校園各地建筑部署，地圖本身的縮放及多方位移動;②信息展示作為核心功能在地圖上以浮窗的形式出現(xiàn)，主要提供了校園各類文化活動的展示和宣傳，并為學生提供報名和觀看的入口;③搜索：在搜索框中輸入建筑名稱、職能部門、系部等，可以在地圖上找到相關(guān)的位置，并且有文字輔助展示;④系統(tǒng)優(yōu)化功能：展示與建筑相關(guān)的活動申請和場地預約，給學生提供活動審核和預約活動場地的入口。

（3）交互原型圖

主頁（圖一）

導航欄（圖二）

搜索（圖三）

（4）核心功能流程圖

活動申請和場地預約流程圖（圖四）

5.系統(tǒng)實現(xiàn)

此次校園全景只選取了行政樓以南的部分來制作地圖，實現(xiàn)了地圖基本功能。報考指南、新生報到導引、場地預約和活動申請等交互功能，提升了校園展示效果，提高了學生的參與度。后期會通過版本迭代，逐步完善校園地圖，形成完整體系，并且以場景為單位，進行功能挖掘和信息的層次深度劃分。

本系統(tǒng)核心是在3D全景網(wǎng)頁上做交互功能的研究，探究校園文化發(fā)展構(gòu)想，觀察各職能部門在空間上的聯(lián)系。校園全景圖也可做信息架構(gòu)的整合和更多交互設計的嘗試，發(fā)揮出更大的作用。

三、后疫情時代的校園文化建設研究構(gòu)想

1. 正確理解校園文化的內(nèi)涵是抓好校園文化建設的前提

網(wǎng)絡文化建設是校園文化建設的重要維度，是校園師生活動的重要陣地。高校學生的生活習慣決定了校園文化應用的頻率[3]，因此，在疫情的大背景下，互聯(lián)網(wǎng)不僅要提供各類線上服務，更要建立起線上校園文化體系，讓師生通過良好的交互平臺，改善在校生活方式，也加深師生對校園精神的理解。建設好校園文化，才能充分表現(xiàn)出學校的內(nèi)涵發(fā)展，并通過信息化系統(tǒng)反映出來。

（1）注重對外形象的宣傳?；趙eb的虛擬校園的全景建設是最好的網(wǎng)絡宣傳方式之一。與當前學校的官方網(wǎng)站相結(jié)合，加強宣傳力度，呈現(xiàn)出良好的校園精神風貌。

（2）注重校內(nèi)文化平臺的建立以及交互的功能性。建立校內(nèi)校園文化宣傳平臺，挖掘校內(nèi)有意義的故事、歷史、會議、活動、演出等記錄成視頻和圖片加以展示，建立師生的文化共識，助力社團文化、宿舍文化以及校內(nèi)各項活動的策劃、宣傳、設計等。

2.頂層思想設計

要有信息化的觀念，信息化建設不僅是創(chuàng)建平臺、系統(tǒng)，還要有以下的信息化思維。

（1）平臺的整合，數(shù)據(jù)的梳理。學校的各組織、系部建設平臺先后產(chǎn)生了大量數(shù)據(jù)。要梳理這些數(shù)據(jù)，借助大數(shù)據(jù)的力量，進行整合、深度分析。

（2）注意網(wǎng)絡環(huán)境的安全建設?；ヂ?lián)網(wǎng)的普及，給師生的工作、學習、生活以及學校的正常運轉(zhuǎn)帶來了極大的便捷。同時也帶來不良信息傳播、網(wǎng)絡欺詐等風險。因此要合理引導師生樹立正確的互聯(lián)網(wǎng)觀念，并積極處理技術(shù)故障、信息泄露、惡意攻擊等校園網(wǎng)絡問題。

（3）學生團隊建設。利用“互聯(lián)網(wǎng)+”的思想作指導，將學生力量作為校園文化建設的核心。以學生為中心，要充分考慮到學生的積極性和創(chuàng)造性。當前學校有易班、社聯(lián)等團體，學生經(jīng)過軟件課程的學習，創(chuàng)造“社家”—社團管理網(wǎng)頁。以此思路，將學生活動搬到線上，形成線上社團服務平臺。先從學生活動以及宣傳網(wǎng)頁設計入手，用學生學到的技能反哺學校文化，成為校園文化建設的特色之一。

四、結(jié)語

成功構(gòu)建、實施一套“互聯(lián)網(wǎng)+”的校園智慧系統(tǒng)，會使得高校教學、科研、學習、管理等各類工作變得更加高效、方便和智能。校園的建設在朝著數(shù)字化校園方向發(fā)展。同時，校園文化建設更是發(fā)展當中的重中之重，應當成為引領校園建設的精神所在。

【參考文獻】

[1]樊楊梅.信息化時代高校校園文化建設新媒體路徑探析[J].安徽電氣工程職業(yè)技術(shù)學院學報，2020（2）.

[2]唐艷華.現(xiàn)代信息化技術(shù)在高校校園文化建設中的應用研究[J].科技經(jīng)濟導刊，2020（24）.

[3]文菲斐，楊永貴.基于新冠肺炎疫情防控契機的智慧校園建設推進策略[J].信息技術(shù)與信息化，2020（4）.

[4]劉秀金.解構(gòu)校園全景360的制作以天津科技大學為例[J].音畫制作，2017（05）.