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

□ 貴陽(yáng)幼兒師范高等?？茖W(xué)校 張啟靖

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

1.建設(shè)現(xiàn)狀

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

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

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

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

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

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

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

二、3D 校園全景網(wǎng)頁(yè)設(shè)計(jì)方案

1.系統(tǒng)介紹

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

2.技術(shù)考量

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

3.網(wǎng)頁(yè)基礎(chǔ)設(shè)計(jì)

（1）校園全景頁(yè)面的技術(shù)實(shí)現(xiàn)。技術(shù)原理是建立一個(gè)正方體，并在其表面貼上背景圖，將相機(jī)放在正方體的中心，監(jiān)聽鼠標(biāo)拖動(dòng)/滾輪移動(dòng)來改變相機(jī)的面向，從而實(shí)現(xiàn)全景效果。主要用到Three.js的Camera（相機(jī)），BoxGeometry（正方體），MeshBasicMaterial（材質(zhì)），Mesh/Scene（場(chǎng)景），WebGLRenderer（渲染）等功能。

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

4.交互設(shè)計(jì)

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

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

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

（3）交互原型圖

主頁(yè)（圖一）

導(dǎo)航欄（圖二）

搜索（圖三）

(4)核心功能流程圖

活動(dòng)申請(qǐng)和場(chǎng)地預(yù)約流程圖（圖四）

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

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

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

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

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

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

（1）注重對(duì)外形象的宣傳。基于web 的虛擬校園的全景建設(shè)是最好的網(wǎng)絡(luò)宣傳方式之一。與當(dāng)前學(xué)校的官方網(wǎng)站相結(jié)合，加強(qiáng)宣傳力度，呈現(xiàn)出良好的校園精神風(fēng)貌。

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

2.頂層思想設(shè)計(jì)

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

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

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

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

四、結(jié)語

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