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

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

摘要随着网络速度的提升和计算机硬件的革新使得网页的三维实现成为现实。而WebGL库Three.js 3D引擎的出现更为三维网页的开发增添色彩。文章主要研究与探索利用Three.js 3D引擎开发三维网页 以及对其实现代码进行js加密。

关键词 Three.js 3D引擎三维网页 js加密

中图分类号 TP393文献标识码 A文章编号 1006-8937 2014 2-0079-02

近年来 网络速度和计算机硬件得到了迅速的发展为WE B三维网页的探索与开发提供了基础与条件。在这个背景下Three.js 3D引擎应时而生其基于WebGL并且完全采用JavaScript编写而成 因此更适于三维网页的开发。使用Three.js 3D引擎开发三维网页只需一个Web浏览器I E尚不直接支持不需要下载任何插件I E内核浏览器除外因此开发使用更加方便。本文主要介绍如何使用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开发人员就可以借助系统显卡来在浏览器里更流畅地展示3 D场景和模型。

1.1 Three.js 3D引擎

在此作一简略介绍

①首先是加载Three.js 3D引擎的库文件 即引入Three.js文件基础代码是 。

②创建场景基础代码是 var sc ene=new THREE.Sc ene  。

③创建摄像机例如 var camera=new THREE.Perspe-ctiveCam era VIEW_ANGLE ASP ECT NEAR FAR 当然这里还需要根据实际情况选择不同相机并可以对相机作出设置。

④添加渲染器例如 var renderer=new THREE.Web-

GL Renderer  {ant ia lias true} 如果需要可以设置不同的渲染器并可以根据情况进行设置。

⑤网格模型的构建与导入、材质的添加与灯光效果的添加完成以上四步后一个三维网页的骨架就已经搭建成功了之后我们就可以在其中绘制构建网格模型、添加材质以及灯光等效果了。简单的网格模型可以直接使用代码绘制渲染当然如果想要引入复杂的模型比作使用建模工具制作的模型 就需要使用相应的函数进行加载 例如 newT HREE.J S ONLoader   当然再添加上材质并添加上灯光效果会更好。

⑥最后还需要做的是渲染循环 renderer.render sc ene c amera 以实现动画效果。

1.2实现方式和流程

1.2.1三维建模

利用三维建模工具3ds max或者maya或者blender等制作三维模型、添加材质、灯光等特效。然后将模型保存成obj格式的文件或者直接使用blend er保存成js格式的文件。

1.2.2模型转换

对于obj格式的文件Three.js就已经能够加载进网页之中了这里我们使用的是J SON数据类型的文件。即将obj格式的文件转换成js格式的文件。格式装换过程

先安装P ython在此使用的是P ython的2.6.0版本。然后使用命令 D P ython26

python d convert_obj_three.py-i d model.obj -o d model.js生成的JSON数据类型的文件。

1.2.3代码开发

建议采用VI M编写代码使用Chr o m e浏览器调试。为了能使Chr o m e能够更好的支持Web GL我们需要对其作出简单配置在Chrome桌面快捷方式上点击右键、选择属性然后将――enable-w ebgl――ignore-gpu-b lac klist――all-ow-file-access-from-files粘贴到“目标”文本框里。

2 Three.js三维网页实现代码加密

Three.js 3D引擎是完全使用javaScript编写成的 因此基于Three.js 3D引擎的三维网页也继承Three.js 3D引擎的这一特点使用javaScript编写而成。而目前如果对javaScript不做安全控制的化代码完全暴露在网络中因此我么需要对其代码做出简单加密以降低其可读性 同时提高其安全性。

JavaScript代码加密的本质是降低代码的可读性从而提高解密、阅读上的难度。因为使用Three.js 3D引擎实现的三维网页其主要代码是JavaScript而且代码量很大运行速度与性能也局限于硬件与网速因此如果对代码做出过多的操作极大程度上会降低代码的运行性能与速度因此采用将文明定长字符串逐一加10变换为16进制的方式之后对其进行去除缩进、空格、注释等进行简单压缩然后简单使用加密即可。而不必要做出复杂的代码混淆加密。其中加解密文件js.min.js代码如下

①加密。

$document.readyfunction  {$”#enc ode”.c lickfunction  {var s=$”#txt 1”.val  var b=““for var i=0 i