隨著網(wǎng)絡(luò)速度的提升和計(jì)算機(jī)硬件的革新，使得網(wǎng)頁(yè)的三雛實(shí)現(xiàn)成為現(xiàn)實(shí)。而WebGL庫(kù)Three.js 3D引擎的出現(xiàn)更為三維網(wǎng)頁(yè)的開(kāi)發(fā)增添色彩。

一、Three.js三維網(wǎng)頁(yè)概述與實(shí)現(xiàn)

Three.js是基于WebGL的一款開(kāi)發(fā)框架，是調(diào)用底層OpenCL ES圖形庫(kù)的一個(gè)javascript接口，屬于Htm15技術(shù)的一個(gè)分支oWebCL通過(guò)網(wǎng)頁(yè)中的新型標(biāo)簽。

1、Three,js 3D引擎

在此作一簡(jiǎn)略介紹：

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

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

③創(chuàng)建攝像機(jī)，例如：var camera=new THREE.Perspe-ctiveCamera(VIEVV二ANGLE，ASPECT，NEAR，F(xiàn)AR)，當(dāng)然這里還需要根據(jù)實(shí)際情況選擇不同相機(jī)，并可以對(duì)相機(jī)作出設(shè)置。

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

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

⑥最后還需要做的是渲染循環(huán)：renderer.render( scene，camera)，以實(shí)現(xiàn)動(dòng)畫(huà)效果。

2、實(shí)現(xiàn)方式和流程

（1）三維建模

利用三維建模工具(3ds max或者maya或者blender等)制作三維模型、添加材質(zhì)、燈光等特效。然后將模型保存成obj格式的文件，或者直接使用blender保存成js格式的文件。

（2）模型轉(zhuǎn)換

對(duì)于obj格式的文件，Three.js就已經(jīng)能夠加載進(jìn)網(wǎng)頁(yè)之中了，這里我們使用的是JSON數(shù)據(jù)類(lèi)型的文件。即將obj格式的文件轉(zhuǎn)換成js格式的文件。格式裝換過(guò)程：

先安裝Python，在此使用的是Python的2.6.0版本。然后使用命令：D:\Python26\python d:\convert_obj_three.py_d:\model.obj—o d:\model.js生成的JSON數(shù)據(jù)類(lèi)型的文件。

（3）代碼開(kāi)發(fā)

建議采用VIM編寫(xiě)代碼，使用Chrome瀏覽器調(diào)試。為了能使Chrome能夠更好的支持WebGL，我們需要對(duì)其作出簡(jiǎn)單配置，在Chrome桌面快捷方式上點(diǎn)擊右鍵、選擇屬性，然后將-enable-webl;l-ignore-gpu-blacklist-all-ow-file-access-from-files粘貼到“目標(biāo)”文本框里。

二、Three.js三維網(wǎng)頁(yè)實(shí)現(xiàn)代碼加密

Three.js 3D引擎是完全使用javaScript編寫(xiě)成的，因此基于Three.js 3D引擎的三維網(wǎng)頁(yè)也繼承Three.js 3D引擎的這一特點(diǎn)，使用javaScript編寫(xiě)而成。而目前如果對(duì)javaScript不做安全控制的化，代碼完全暴露在網(wǎng)絡(luò)中，因此我么需要對(duì)其代碼做出簡(jiǎn)單加密，以降低其可讀性，同時(shí)提高其安全性。

JavaScriptf弋碼加密的本質(zhì)是降低代碼的可讀性，從而提高解密、閱讀上的難度。因?yàn)槭褂肨hree.js 3D引擎實(shí)現(xiàn)的三維網(wǎng)頁(yè)，其主要代碼是JavaScript，而且代碼量很大，運(yùn)行速度與性能也局限于硬件與網(wǎng)速，因此如果對(duì)代碼做出過(guò)多的操作，極大程度上會(huì)降低代碼的運(yùn)行性能與速度，因此采用將文明定長(zhǎng)字符串逐一加10變換為16進(jìn)制的方式，之后對(duì)其進(jìn)行去除縮進(jìn)、空格、注釋等進(jìn)行簡(jiǎn)單壓縮，然后簡(jiǎn)單使用加密即可。而不必要做出復(fù)雜的代碼混淆，加密。

其中加解密文件'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)∥以每四個(gè)長(zhǎng)度來(lái)分隔

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

newb+=String.fr omCharCode

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

toString(10));}

retum nc.wb;}

admin

收藏 海報(bào)分享