舒后; 梁琳; 孙昊白
上海财务管理进修学院【期刊名称】《《北京印刷学院学报》》
【年(卷),期】2019(027)010
【总页数】5页(P109-112,125)
【关键词】WebGL; Three.js; 三维网页; 模型展示 电子消毒柜【作 者】舒后; 梁琳; 孙昊白
【作者单位】北京印刷学院; 中国青年报社技术处 北京102600
谱世界
【正文语种】中 文
【中图分类】TP311
随着科技的发展,人们更多习惯利用碎片化时间在手机、平板等智能设备上获取信息,减少了从书本上学习历史文化等知识的时间,而且越来越少的人会抽出时间去博物馆学习文物知识。所以如何将博物馆的文物更好的展现在网页上,具有一定的立体效果,成为WebGL(Web Graphics Library)技术研究的热点。在网上查看实体展馆里文物的三维效果,会为用户带来全新的网站体验,有很强的实用性。 1 WebGL简介
WebGL是一种3D绘图标准,这种绘图技术标准将JavaScript和OpenGLES2.0结合在一起,通过增加OpenGLES2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员便可借助系统显卡在浏览器里流畅地展示3D场景和模型,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准避免了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等[1]。
2 三维网站的设计与分析
全国人大法工委
2.1 需求分析
本文研究的内容是以革命历史博物馆为背景,开发了一个基于WebGL技术的三维网站,主要实现文物的三维模型的整体展示。针对目前网上已有的革命历史博物馆网站,大多数只能给用户提供图片、文字、视频等2D形式的文物浏览效果,形式比较单一,故研究具有三维展示效果的网站就成为相关业界的热点。
网站采用B/S架构,通过浏览器登录网站查看网页信息,该网站主要通过文字、图片、视频、三维模型等方式展示相关博物馆信息,用户通过留言功能实现与管理员的沟通。 2.2 数据设计
网站主要展示方式为文字、图片、视频、模型等,并且在“”模块使用数据库实现用户留言、建议和管理员留言管理等功能。网站的数据设计如图1所示。
图1 数据来源
2.3 数据库设计
设计的数据库较为简单,仅包括一张表即留言板。留言实体的属性如图2所示。
图2 实体属性图
根据留言的实体属性图,创建如下留言表,该表的信息属性如表1所示。
表1 留言表属性列名 数据类型 字段含义ID 自动编号 标识Content 文本 留言内容Username 文本 用户名Posttime 日期/时间 留言时间Wordssort 文本 留言分类
2.4 模型设计
应用3DMAX软件创建一个文物模型要用到多个对象,通过各个对象的组合、变换、制作完成一个文物模型。在完成基本体的组合之后,通过添加材质、贴图等操作得到如图3所示的模型。
图3 模型制作
3 网站的功能设计与实现
3.1 系统的主要功能
根据用户需求网站设计并开发了如下几个模块:
(1)首页 用于展示网站的基本信息,包括菜单、图片展示缩略图等。
(2)红记忆模块主要包括快讯速递、照片记忆和视频记忆。快讯速递主要是国家领导人相关新闻的文字信息展示,照片记忆是革命历史相关的部分照片展示,视频记忆是革命历史相关的视频资料展示。
(3)红珍藏模块主要是文物的展示页面,包含两种展示方式,分别是“模型+文字”和“图片+文字”,重点展示文物的相关信息,也是网站的核心页面。
(4)红旧址模块该模块展示现存的红旧址信息,鼠标碰触图片具有翻页效果,点击LEARN MORE链接到百科页面。
(5)页面主要实现用户与管理员的交流,采用Access数据库技术。用户填写预约和建议内容,管理员实现留言的回复和删除等管理功能。
3.2 功能实现
网站的整体框架如图4所示。
图4 网站的整体框架
3.2.1 模型展示
模型展示页面主要是展示展馆的文物收藏信息,也是网站的核心内容。首先显示整体馆内的图片展示信息,点击相关图片进入具体展品的展示页面,效果如图5所示。
该页面功能实现的主要代码如下:
1)加载外部JS库
〈head〉
〈meta charset="UTF-8"〉
〈script type="text/javascript"src="js/jquery-2.0.3.min.js" 〉〈/script〉
//加载three.js文件
〈script type="text/javascript"src="js/three.js" 〉〈/script〉
//加载鼠标控制.js文件
〈script type="text/javascript"src="js/TrackballControls.js" 〉〈/script〉
//加载导入模型必需的三个js文件
〈script type="text/javascript" src="js/DDSLoader.js" 〉〈/script〉
图5 展品展示效果图
〈script type="text/javascript" src="js/OBJLoader.js" 〉〈/script〉
〈script type="text/javascript"src="js/OBJMTLLoader.js" 〉〈/script〉
〈title〉〈/title〉
〈/head〉
2)创建基本组件
var scene=new THREE.Scene();//场景构建
var camera=new THREE.PerspectiveCamera
(45,window.innerWidth/window.innerHeight,0.1,1000);//相机构建
var renderer=new THREE.WebGLRenderer();//渲染器构建
1yysrenderer.setClearColor(0xEEEEEE); //设置缓冲颜
renderer.setSize(window.innerWidth,window.innerHeight); //渲染器设置
renderer.shadowMapEnabled=true; //激活阴影
3)鼠标控制模型
trackballControls = new THREE.TrackballControls(camera);
Speed=1.2; //用滚轮调整大小(远近)时候的速度
controls.panSpeed=0.8; //按住鼠标右键后的平移速度
Zoom=false;//若设置为 true,则禁用鼠标滚轮调整大小功能
Pan=false; //若设置为 true,则禁用按下鼠标右键平移功能
controls.minDistance=200; //设置滚轮能滚到的最近距离
controls.maxDistance=1000; //设置滚轮能滚到的最远距离
controls.staticMoving=true; //滚轮速度控制
controls.dynamicDampingFactor=0.3;//动态阻尼,
var planeGeometry=new THREE.PlaneGeometry(0,0);
体内藏毒
4)渲染视角camera.position.x=-30;camera.position.y=20;
camera.position.z=30;//相机位置设置
camera.lookAt(scene.position) //相机视角设置
$("#WebGL-output").append(renderer.domElement)//渲染元素
renderScene();//渲染场景
3.2.2 留言页面
页面主要分为用户预约和建议留言,管理员可在后台实现留言管理,包括删除、回复、编辑用户留言等,展示效果如图6所示。
图6 留言页面展示效果图
1)连接数据库
StrSQL="DBQ="+server.mappath("data.mdb")+";DRIVER={Microsoft Access Driver(*.mdb)};" //设计连接方式
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议