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

1、1基于 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

2、 3D 引擎应时而生，其基于 WebGL，并且完全采用 JavaScript 编写而成，因此更适于三维网页的开发。使用 Three.js 3D 引擎开发三维网页，只需一个 Web浏览器（IE 尚不直接支持） ，不需要下载任何插件（IE 内核浏览器除外） ，因此开发使用更加方便。本文主要介绍如何使用 Three.js 3D 引擎实现三维网页，以及对使用 Three.js 3D 引擎开发的三维网页做出简单的代码（JavaScript 代码）加密。 1 Three.js 三维网页概述与实现 Three.js 是基于 WebGL 的一款开发框架，是调用底层 OpenGL ES 图形库的一个 javas

3、cript 接口，属于 Html5 技术的一个分支。WebGL 通过网页中的新型标签进行显示。通过增加 OpenGL ES 2.0 的一个2JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型。 1.1 Three.js 3D 引擎 在此作一简略介绍： 首先是加载 Three.js 3D 引擎的库文件，即引入 Three.js 文件，基础代码是：。 创建场景，基础代码是：var scene=new THREE.Scene（） 。 创建摄像机，例如：var camer

4、a=new THREE.Perspe- ctiveCamera（VIEW_ANGLE，ASPECT，NEAR，FAR） ，当然这里还需要根据实际情况选择不同相机，并可以对相机作出设置。 添加渲染器，例如：var renderer=new THREE.Web- GLRenderer（antialias：true） ，如果需要可以设置不同的渲染器，并可以根据情况进行设置。 网格模型的构建与导入、材质的添加与灯光效果的添加，完成以上四步后，一个三维网页的骨架就已经搭建成功了，之后我们就可以在其中绘制构建网格模型、添加材质以及灯光等效果了。简单的网格模型可以直接使用代码绘制渲染，当然如果想要引入复杂的

5、模型，比作使用建模工具制作的模型，就需要使用相应的函数进行加载，例如：new THREE.JSONLoader（） ，当然再添加上材质，并添加上灯光，效果会更好。最后还需要做的是渲染循环：renderer.render（scene， 3camera） ，以实现动画效果。 1.2 实现方式和流程 1.2.1 三维建模 利用三维建模工具（3ds max 或者 maya 或者 blender 等）制作三维模型、添加材质、灯光等特效。然后将模型保存成 obj 格式的文件，或者直接使用 blender 保存成 js 格式的文件。 1.2.2 模型转换 对于 obj 格式的文件，Three.js 就已经能

6、够加载进网页之中了，这里我们使用的是 JSON 数据类型的文件。即将 obj 格式的文件转换成 js格式的文件。格式装换过程： 先安装 Python，在此使用的是 Python 的 2.6.0 版本。然后使用命令：D：Python26python d：convert_obj_three.py -i d：model.obj -o d：model.js 生成的 JSON 数据类型的文件。 1.2.3 代码开发 建议采用 VIM 编写代码，使用 Chrome 浏览器调试。为了能使 Chrome能够更好的支持 WebGL，我们需要对其作出简单配置，在 Chrome 桌面快捷方式上点击右键、选择属性，然

7、后将enable-webglignore-gpu-blacklistall- ow-file-access-from-files 粘贴到“目标”文本框里。 2 Three.js 三维网页实现代码加密 Three.js 3D 引擎是完全使用 javaScript 编写成的，因此基于Three.js 3D 引擎的三维网页也继承 Three.js 3D 引擎的这一特点，使用4javaScript 编写而成。而目前如果对 javaScript 不做安全控制的化，代码完全暴露在网络中，因此我么需要对其代码做出简单加密，以降低其可读性，同时提高其安全性。 JavaScript 代码加密的本质是降低代码的可

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

9、xt1“）.val（） ；var b=“； for（var i=0；is.length；i+）var ascx=s.charCodeAt（i） ； var hexs=（ascx+10）.toString（16） ； /alert（hexs.length） ； if（hexs.length=2）hexs=“00“+hexs； b+=hexs； 解密。 document.getElementById（txt2）.value=b；） ； ） ； function fun（str）var newb=“；for（var 5i=0；istr.length；i+=4）/以每四个长度来分隔 var newchar=str.substr（i，4） ； newb+=String.fromCharCode（parseInt（newchar，16）-10）.toString（10） ） ； return newb； 3 结 语 基于 Three.js 3D 引擎的三维网页的基础搭建很并不算太难，但如果我们想要达到旋转、交互以及碰撞检测，就需要更加深入的学习与研究。 参考文献： 1 Jos Dirksen.Learning Three.Js： the JavaScript 3D Library for WebGLM.Packt Publishing Limited，2013.