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

張啟靖

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

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

一、科技校園的建設發展

1.建設現狀

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

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

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

（1）校園信息化。校園信息化是指利用互聯網技術，建立起高速安全的校園網絡，并在此基礎上結合物聯網、云計算、大數據、5G、虛擬現實等不斷涌現的高新技術，構建完整的校園網絡環境。具體來說，其更著重于校園網絡體系的全面建設，重點主要集中在校園網絡建設、信息系統建設、教育信息化的深度發展和信息安全等基礎建設。

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

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

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

二、3D校園全景網頁設計方案

1.系統介紹

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

2.技術考量

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

3.網頁基礎設計

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

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

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

4.交互設計

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

（2）功能架構及詳述

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

（3）交互原型圖

主頁（圖一）

導航欄（圖二）

搜索（圖三）

（4）核心功能流程圖

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

5.系統實現

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

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

三、后疫情時代的校園文化建設研究構想

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

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

（1）注重對外形象的宣傳。基于web的虛擬校園的全景建設是最好的網絡宣傳方式之一。與當前學校的官方網站相結合，加強宣傳力度，呈現出良好的校園精神風貌。

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

2.頂層思想設計

要有信息化的觀念，信息化建設不僅是創建平臺、系統，還要有以下的信息化思維。

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

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

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

四、結語

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

【參考文獻】

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

[2]唐艷華.現代信息化技術在高校校園文化建設中的應用研究[J].科技經濟導刊，2020（24）.

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

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