three.js 3d三维网页代码加密的实现方法

http://www.jiamisoft.com/blog/17827-three-js-3dsanweiwangyejiami.html

https://www.html5tricks.com/tag/webgl  webgl 精彩示例

three.js 3d三维网页代码加密的实现方法

作者:admin 发布于:2015-09-29 16:18    1,493 浏览数
 

随着网络速度的提升和计算机硬件的革新,使得网页的三雏实现成为现实。而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;i

var 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<str.length;

j+=4)∥以每四个长度来分隔

{var newchar=su-substr(1,4);

newb+=String.fr omCharCode

((parselnt (newchar,1 6)-10).

toString(10));}

retum nc.wb;}

小知识之三维模型

三维模型是物体的多边形表示,通常用计算机或者其它视频设备进行显示。显示的物体是可以是现实世界的实体,也可以是虚构的物体。任何物理自然界存在的东西都可以用三维模型表示。

上一篇:Unity3D 代码加密保护工具


下一篇:【Web技术】399- 浅谈前端代码加密