基于Three.js 3D引擎的三维网页实现与加密

龙源期刊网 https://www.360docs.net/doc/2d11720593.html,

基于Three.js 3D引擎的三维网页实现与加密

作者：王腾飞刘俊男周更新

来源：《企业技术开发·中旬刊》2014年第01期

摘要：随着网络速度的提升和计算机硬件的革新，使得网页的三维实现成为现实。而WebGL库Three.js 3D引擎的出现更为三维网页的开发增添色彩。文章主要研究与探索利用Three.js 3D引擎开发三维网页，以及对其实现代码进行js加密。

关键词：Three.js 3D引擎；三维网页；js加密

中图分类号：TP393 文献标识码：A 文章编号：1006-8937（2014）2-0079-02

近年来，网络速度和计算机硬件得到了迅速的发展，为WEB三维网页的探索与开发提供了基础与条件。在这个背景下Three.js 3D引擎应时而生，其基于WebGL，并且完全采用JavaScript编写而成，因此更适于三维网页的开发。使用Three.js 3D引擎开发三维网页，只需一个Web浏览器（IE尚不直接支持），不需要下载任何插件（IE内核浏览器除外），因此开发使用更加方便。本文主要介绍如何使用Three.js 3D引擎实现三维网页，以及对使用Three.js 3D引擎开发的三维网页做出简单的代码（JavaScript代码）加密。

1 Three.js三维网页概述与实现

Three.js是基于WebGL的一款开发框架，是调用底层OpenGL ES图形库的一个javascript 接口，属于Html5技术的一个分支。WebGL通过网页中的新型标签进行显示。通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型。

1.1 Three.js 3D引擎

在此作一简略介绍：

①首先是加载Three.js 3D引擎的库文件，即引入Three.js文件，基础代码是：。

②创建场景，基础代码是：var scene=new THREE.Scene（）。

③创建摄像机，例如：var camera=new THREE.Perspe-

ctiveCamera（VIEW_ANGLE，ASPECT，NEAR，FAR），当然这里还需要根据实际情况选择不同相机，并可以对相机作出设置。