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）学生团队建设。利用“互联网+”的思想作指导，将学生力量作为校园文化建设的核心。以学生为中心，要充分考虑到学生的积极性和创造性。当前学校有易班、社联等团体，学生经过软件课程的学习，创造“社家”—社团管理网页。以此思路，将学生活动搬到线上，形成线上社团服务平台。先从学生活动以及宣传网页设计入手，用学生学到的技能反哺学校文化，成为校园文化建设的特色之一。

四、结语

成功构建、实施一套“互联网+”的校园智慧系统，会使得高校教学、科研、学习、管理等各类工作变得更加高效、方便和智能。校园的建设在朝着数字化校园方向发展。同时，校园文化建设更是发展当中的重中之重，应当成为引领校园建设的精神所在。