three.js 3d三维网页代码加密的实现方法作者：admin 发布于：2015-09-29 16:18 随着网络速度的提升和计算机硬件的革新，使得网页的三雏实现成为现实。而WebGL库Three.js 3D引擎的出现更为三维网页的开发增添色彩。一、Three.js三维网页概述与实现Three.js是基于WebGL的一款开发框架，是调用底层OpenCL ES图形库的一个javascript接口，属于Htm15技术的一个分支oWebCL通过网页中的新型标签。1、Three,js 3D引擎在此作一简略介绍：①首先是加载Three.js 3D引擎的库文件，即引入Three.js文件i，基础代码是：。②创建场景，基础代码是：var scene=new THREE.Scene0。③创建摄像机，例如：var camera=new THREE.Perspe-ctiveCamera(VIEVV二ANGLE，ASPECT，NEAR，FAR)，当然这里还需要根据实际情况选择不同相机，并可以对相机作出设置。④添加渲染器，例如：var renderer=new THREE.Web-GLRenderer( {antialias:true))’如果需要可以设置不同的渲染器，并可以根据情况进行设置。⑤网格模型的构建与导入、材质的添加与灯光效果的添加，完成以上四步后，一个三维网页的骨架就已经搭建成功了，之后我们就可以在其中绘制构建网格模型、添加材质以及灯光等效果了。简单的网格模型可以直接使用代码绘制渲染，当然如果想要引入复杂的模型，比作使用建模工具制作的模型，就需要使用相应的函数进行加载，例如：new THREE.JSONLoader()，当然再添加上材质，并添加上灯光，效果会更好。⑥最后还需要做的是渲染循环：renderer.render( scene，camera)，以实现动画效果。2、实现方式和流程（1）三维建模利用三维建模工具(3ds max或者maya或者blender等)制作三维模型、添加材质、灯光等特效。然后将模型保存成obj格式的文件，或者直接使用blender保存成js格式的文件。（2）模型转换对于obj格式的文件，Three.js就已经能够加载进网页之中了，这里我们使用的是JSON数据类型的文件。即将obj格式的文件转换成js格式的文件。格式装换过程：先安装Python，在此使用的是Python的2.6.0版本。然后使用命令：D:\Python26\python d:\convert_obj_three.py_d:\model.obj—o d:\model.js生成的JSON数据类型的文件。（3）代码开发建议采用VIM编写代码，使用Chrome浏览器调试。为了能使Chrome能够更好的支持WebGL，我们需要对其作出简单配置，在Chrome桌面快捷方式上点击右键、选择属性，然后将-enable-webl;l-ignore-gpu-blacklist-all-ow-file-access-from-files粘贴到“目标”文本框里。二、Three.js三维网页实现代码加密Three.js 3D引擎是完全使用javaScript编写成的，因此基于Three.js 3D引擎的三维网页也继承Three.js 3D引擎的这一特点，使用javaScript编写而成。而目前如果对javaScript不做安全控制的化，代码完全暴露在网络中，因此我么需要对其代码做出简单加密，以降低其可读性，同时提高其安全性。JavaScriptf弋码加密的本质是降低代码的可读性，从而提高解密、阅读上的难度。因为使用Three.js 3D引擎实现的三维网页，其主要代码是JavaScript，而且代码量很大，运行速度与性能也局限于硬件与网速，因此如果对代码做出过多的操作，极大程度上会降低代码的运行性能与速度，因此采用将文明定长字符串逐一加10变换为16进制的方式，之后对其进行去除缩进、空格、注释等进行简单压缩，然后简单使用加密即可。而不必要做出复杂的代码混淆，加密。其中加解密文件’js.min.js代码如下：①加密$(document).ready(function0($(”#encode”).click(function(){var s=$C’#txtl“).valO;var b=””;.for(var i=O;ivar hexs=(ascx+lO)toString(16);//al ert(hexs.leng;.h);if(hexs.length==2) {hexs=”OO”+hexs;}b+=hexs;}②解密rlocume.nt.getElementByIdCtxt2’).value=b;}); l);function fun (str){var newb=””;for (var i=O;i