隨著網絡速度的提升和計算機硬件的革新，使得網頁的三雛實現成為現實。而WebGL庫Three.js 3D引擎的出現更為三維網頁的開發(fā)增添色彩。

一、Three.js三維網頁概述與實現

Three.js是基于WebGL的一款開發(fā)框架，是調用底層OpenCL ES圖形庫的一個javascript接口，屬于Htm15技術的一個分支oWebCL通過網頁中的新型標簽。

1、Three,js 3D引擎

在此作一簡略介紹：

①首先是加載Three.js 3D引擎的庫文件，即引入Three.js文件i，基礎代碼是：。

②創(chuàng)建場景，基礎代碼是：var scene=new THREE.Scene0。

③創(chuàng)建攝像機，例如：var camera=new THREE.Perspe-ctiveCamera(VIEVV二ANGLE，ASPECT，NEAR，FAR)，當然這里還需要根據實際情況選擇不同相機，并可以對相機作出設置。

④添加渲染器，例如：var renderer=new THREE.Web-GLRenderer( {antialias:true))’如果需要可以設置不同的渲染器，并可以根據情況進行設置。

⑤網格模型的構建與導入、材質的添加與燈光效果的添加，完成以上四步后，一個三維網頁的骨架就已經搭建成功了，之后我們就可以在其中繪制構建網格模型、添加材質以及燈光等效果了。簡單的網格模型可以直接使用代碼繪制渲染，當然如果想要引入復雜的模型，比作使用建模工具制作的模型，就需要使用相應的函數進行加載，例如：new THREE.JSONLoader()，當然再添加上材質，并添加上燈光，效果會更好。

⑥最后還需要做的是渲染循環(huán)：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）代碼開發(fā)

建議采用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;}

admin

收藏 海報分享