作者：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;}