基于Three.js 3D引擎的三维网页实现与加密.docVIP

基于Three.js 3D引擎的三维网页实现与加密 　　摘 要：随着网络速度的提升和计算机硬件的革新，使得网页的三维实现成为现实。而WebGL库Three.js 3D引擎的出现更为三维网页的开发增添色彩。文章主要研究与探索利用Three.js 3D引擎开发三维网页，以及对其实现代码进行js加密。 　　关键词：Three.js 3D引擎；三维网页；js加密 　　中图分类号：TP393 文献标识码：A 文章编号：1006-8937（2014）2-0079-02 　　近年来，网络速度和计算机硬件得到了迅速的发展，为WEB三维网页的探索与开发提供了基础与条件。在这个背景下Three.js 3D引擎应时而生，其基于WebGL，并且完全采用JavaScript编写而成，因此更适于三维网页的开发。使用Three.js 3D引擎开发三维网页，只需一个Web浏览器（IE尚不直接支持），不需要下载任何插件（IE内核浏览器除外），因此开发使用更加方便。本文主要介绍如何使用Three.js 3D引擎实现三维网页，以及对使用Three.js 3D引擎开发的三维网页做出简单的代码（JavaScript代码）加密。 　　1 Three.js三维网页概述与实现 　　Three.js是基于WebGL的一款开发框架，是调用底层OpenGL ES图形库的一个javascript接口，属于Html5技术的一个分支。WebGL通过网页中的新型标签进行显示。通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型。 　　1.1 Three.js 3D引擎 　　在此作一简略介绍： 　　①首先是加载Three.js 3D引擎的库文件，即引入Three.js文件，基础代码是：。 　　②创建场景，基础代码是：var scene=new THREE.Scene（）。 　　③创建摄像机，例如：var camera=new THREE.Perspe- 　　ctiveCamera（VIEW_ANGLE，ASPECT，NEAR，FAR），当然这里还需要根据实际情况选择不同相机，并可以对相机作出设置。 　　④添加渲染器，例如：var renderer=new THREE.Web- 　　GLRenderer（{antialias：true}），如果需要可以设置不同的渲染器，并可以根据情况进行设置。 　　⑤网格模型的构建与导入、材质的添加与灯光效果的添加，完成以上四步后，一个三维网页的骨架就已经搭建成功了，之后我们就可以在其中绘制构建网格模型、添加材质以及灯光等效果了。简单的网格模型可以直接使用代码绘制渲染，当然如果想要引入复杂的模型，比作使用建模工具制作的模型，就需要使用相应的函数进行加载，例如：new THREE.JSONLoader（），当然再添加上材质，并添加上灯光，效果会更好。 　　⑥最后还需要做的是渲染循环：renderer.render（scene， camera），以实现动画效果。 　　1.2 实现方式和流程 　　1.2.1 三维建模 　　利用三维建模工具（3ds max或者maya或者blender等）制作三维模型、添加材质、灯光等特效。然后将模型保存成obj格式的文件，或者直接使用blender保存成js格式的文件。 　　1.2.2 模型转换 　　对于obj格式的文件，Three.js就已经能够加载进网页之中了，这里我们使用的是JSON数据类型的文件。即将obj格式的文件转换成js格式的文件。格式装换过程： 　　先安装Python，在此使用的是Python的2.6.0版本。然后使用命令：D：＼Python26＼python d：＼convert_obj_three.py -i d：＼model.obj -o d：＼model.js生成的JSON数据类型的文件。 　　1.2.3 代码开发 　　建议采用VIM编写代码，使用Chrome浏览器调试。为了能使Chrome能够更好的支持WebGL，我们需要对其作出简单配置，在Chrome桌面快捷方式上点击右键、选择属性，然后将――enable-webgl――ignore-gpu-blacklist――all- 　　ow-file-access-from-files粘贴到“目标”文本框里。 　　2 Three.js三维网页实现代码加密 　　Three.js 3D引擎是完全使用javaScript编写成的，因此基于Three.js 3D引擎的三维网页也继承Three.js 3D引擎的这一特点，使用javaScript编写而成。而目前如