基于合乘模式下的智能出租匹配系统设计

1、基于合乘形式下的智能出租匹配系统设计摘 要： 应用WebGL技术的Three.js框架为三维网页的开发提供了很好的技术解决方案。Three.js框架的应用可以免去网页3D展示所需要下载渲染插件的费事，Three.js框架还可以把三维模型的OBJ格式很方便的加d到网页中来展示。文章讨论了Three.js框架技术，并对网页上展示三维模型进展了分析。关键词： 无插件； 三维模型； Three.js； 3D展示中图分类号：TP311 文献标志码：A 文章编号：1006-8228202103-18-03Research on plug-in less 3D model demonstration bas

2、ed on Three.jsHe Dongqin， Wang Conghua， Gong XiaoXizang Minzu University， Xianyang， Shannxi 712082， ChinaAbstract： The Three.js framework with WebGL technology provides a good technical solution for the development of 3D web pages. The application of the Three.js framework can avoid the trouble of d

3、ownloading the rendering plug-ins during 3D web page displaying. The Three.js framework can also easily load the OBJ format of 3D model into the web page to display. This paper discusses the Three.js framework technology and analyzes the 3D model displaying on the web page.Key words： plug-in less； 3

4、D model； Three.js； 3D display0 引言在互联网的各个领域中，Web应用的开展和变化是最快的，它已经成为当今网络技术研究的重点。随着网页制作技术的不断开展，网页技术在PC端和挪动端也越来越成熟。近年来HTML5标准的逐步落地和WebGL等技术的成熟，通过更加合理的网页技术实现3D网页成为可能。为了使博物馆、文物馆等藏品拥有一个良好的展示交互平台，游客可以方便地在线观看展品的三维立体效果，实现资源高度共享。目前很多博物馆都建立了三维的网上博物馆，很多博物馆的内部也有专门的设备三维的展示藏品。基于Web3D的虚拟三维模型近年来得到广泛的应用，但之前的三维模型展示方式需要在

5、客户端阅读器安装一个专门的渲染插件，且编程接口特别复杂。如今使用较多的虚拟现实软件VRP，Virtools，Unity3D等都需要安装相应的渲染插件1。1 基于Web3D无插件研究Three.js是一款基于WebGL的开发框架。它封装了WebGL底层的图形接口，这是调用底层0penGLES图形库的一个JavaScript接口，从而降低了使用WebGL的难度2。Three.js属于HTML5技术的一个分支。它提供了可以直接访问的JavaScript API，允许在未安装任何插件的阅读器端下进展2D/3D硬件加速渲染。它可以很容易地用来创立各种三维场景包括摄像机、光影、材质等各种对象。WebGL是

6、通过网页中的新型标签对三维模型进展显示。通过增加OpenGL ES2.0的一个JavaScript绑定，WebGL可以提供HTML5 Canvas的硬件3D加速渲染，以便Web开发人员就可以借助系统显卡来2。在阅读器里更流畅地展示模型和3D场景。Three.js是一个轻量级的用于在阅读器中创立3D计算机图形图像应用程序的JavaScript库。Three.js封装了底层的图形接口，使得程序员可以在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染3。2 基于Three.js三维模型显示Three.js是依托网页创立三维物体并显示，three.js可以将二维数据以三维方式呈现出

7、来，三维场景遨游将成为Web的主要内容，这对Web的影响是革命性的4。在网上展示3D物体，主要包含以下几个方面。 创立三维场景：放置所有物体的空间容器，对应现实的三维空间，其中后续添加的所有物体都是添加到场景中去，它相当于一个大容器。 摄像机设置：在Three.js中，摄像机可以通过两种方式将三维空间中的对象投影到二维空间：透视投影和正投投影。 光源设置：为了更好地展示三维模型中的场景，根据详细的场景模型添加一个适宜的光源，衬托出场景主体的美感。 添加渲染：渲染器是3D引擎的核心部分，它完成绘制3D物体到屏幕上的任务。将3D空间中的物体对象映射到二维平面即电脑的显示屏上，这是渲染器的功能，将定

8、义了场景中的物体，设置好相机之后，就可以调用渲染器的渲染函数来渲染整个场景了。 物体模型设置：场景模型可以是Three.js中自带的规那么模型，也可以是通过3D建模工具导出的相应的模型文件。Three.js为不同的文件格式提供了许多相应的.js文件，使用的时候和相机控件一样先引入html文件中。本文主要以3DMAX导出.obj和.mtl文件加载到场景中进展显示。 加载文件：首先是加载Three.js 3D引擎的库文件，即引入Three.js文件。加载.obj三维模型的时候，可以只加载.obj文件，然后借助three.js引擎自定义材质对象Material来加载材质；也可以同时加载obj和mtl

9、文件，此时需要引入OBJLoader.js和MTLLoader.js文件，MTLLoader.js文件封装的构造函数THREE.MTLLoader用来加载.mtl材质文件。 网格模型的构建与导入、材质的添加与灯光效果的添加，完成以上四步后，一个三维网页的骨架就己经搭建成功了，之后我们就可以在其中绘制构建网格模型、添加材质以及灯光等效果了。最终完成的效果如D1所示。图1 OBJ模型最终效果图展示下面是展示模型的关键部分代码：/创立场景Scenevar scene=new THREE.Scene；/添加方向光var light=new THREE. PointLight 0xffffff；ligh

10、t.position.set0， 100， 100；scene.addlight；/创立相机var camera=new THREE.PerspectiveCamera40， 600/400， 1， 500；camera.position.set100，100，100；camera.lookAtscene.position；/创立渲染器var renderer=new THREE.WebGLRenderer；renderer.setSizewindow.innerWidth，window.innerHeight；renderer.setClearColor0xFFFFFF，1；/将渲染器添加到

11、html容器中document.body.appendChildrenderer.domElement；上面我们所做的，不过是静态地往场景里添加元素。假设我们想让元素挪动，就需要实现动画。一个简单实现动画的原理是，不断更新屏幕画面，animate做的就是这个。在animate里调用requireAnimateFrameanimate，就能实现画面的循环更新。function animate /帧动画requestAnimationFrameanimate；/更新屏幕画面render； 上面提到了THREE.TrackballControls，要使它有效，还需要在animate函数里去更新它。我

12、们在render函数里进展改变物体属性的操作。function render renderer.renderscene，camera； 3 性能分析系统运行的环境：CPU为IntelRCoreTMi7-6700CPU 3.4OGHz；内存为16.0GB；显卡：AMD radeontm r5 340x；操作系统：Windows 10 企业版64位操作系统；阅读器：版本 63.0.3239.84正式版本64位。4 完毕语基于当前Web3D技术的快速开展，文中针对渲染过程中需要安装插件的费事，提出一种无插件的渲染方法，采用WebGL技术，三维模型可直接在客户端阅读器绘制，无需安装任何插件。通过Thr

13、ee.js实现了3D导出模型直接在客户端阅读器进展渲染，但此技术也存在一定的局限性，要求客户端阅读器需要支持WebGL，目前chrome、firefox、opera、safri根本上支持，IE11及以后支持展示。为了更好地配置三维场景中各模型的布局，设计了一个三维模型显示平台，可以对场景中所选模型进展挪动、旋转和缩放，使其能被更好的观摩。WebGL技术与HTML5结合实现三维网页已经成为一种趋势，此三维模型展示可应用与网站展示、博物馆、校史馆、文物馆的展示等，具有较强的应用价值。参考文献References：1 王磊，高环，金野，许华虎.基于Web3D无插件的三维模型展示的研究J.计算机技术与开展，2021.4：217-2202王腾飞，刘俊男，周更新.基于Three.js3D引擎的三维网页实现与加密J.企业技术开发，2021.2：79-803 谭文文，丁世勇.基于WebGL和HTML5的网页3D动画的设计与实现J.电脑知识与技术，2021.28：6981-69834 荣艳冬.基于Web GL的3D技术在网页中的运用J.信息安