three,js

标签——>这里的div标签是

代码：

renderer = new THREE.WebGLRenderer({antialias: true});//开启WebGL抗锯齿

width = document.getElementById('canvasframe').clientWidth;

height = document.getElementById('canvasframe').clientHeight;

renderer.setSize(width, height);

document.getElementById('canvasframe').appendChild(renderer.domElement);

你也可以不需要div标签创建渲染器

代码：

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

2.照相机——这块在WebGL中文网讲解得比较详细

three.js提供两类照相机，一类是OrthographicCamera（正交相机），一类是PerspectiveCamera（透视相机）

正交就是高中老师画正方形那种，没有近大远小，透视相机有。我们使用的是透视相机 代码：

camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000);

camera.position.set(lengthX,lengthY, 100);

camera.up = new THREE.Vector3(0,0,1);

THREE.PerspectiveCamera(fov, aspect, near, far)

fov：视角度数，可以理解为眼睛睁开大小，度数越大，你看到的物体越多，物体越小 aspect：是照相机水平方向和竖直方向长度的比值，一般等于width/height

near和far：是相机最近和最远的距离，均为正值，far>>near

camera.position.set(x,y,z);照相机的位置

camera.up = new THREE.Vector3(0,0,1);

cmmera.up哪个轴是向上的，three.js默认是右手坐标轴，即y轴向上，这里我们让z轴向上 camera.position = new THREE.Vector3(0,0,1)和camera.up.set(0,0,1)一样的效果。

3.场景

一般只需要scene = new THREE.Scen();新建场景就可以了

源代码中加入了scene.fog = new THREE.FogExp2(0xcccccc,0.002);使场景产生雾效果

FogExp2(hex,density)

hex,雾的颜色如果设置为黑色，远处的物体将呈现黑色

density：定义雾增长速度如何密集。默认为0.00025。

4.灯光

有几种灯光，常用的有AmbintLight（环境光），directionalLight（平行光），PointLigth（点光源），spotLight（聚光灯），其他的你可以在官方文档里查找使用，初始化都比较简单，以程序里的平行光为例

light = new THREE.DirectionalLight( 0xffffff );

light.position.set( 1, 1, 1 );

scene.add( light );

设置平行光颜色为白色，在坐标（1,1,1）的位置，平行光类似太阳关照，添加到场景中

5.物体

就是放在场景中的物体，

普通的物体有两种属性，一个是它的材质material，一个是它的模型geometry（就是它长什么样子）。

代码： var material = new THREE.MeshLambertMaterial({color:color });

var geometry = new THREE.CylinderGeometry(radius,radius,height,radius*100,0,false);

scene.add(mesh);

黄色高亮是three.js里面产生圆柱体的主要效果，下划线是对物体进行处理

material——材质，three.js有多种材质可选

Lambert材质：Lambert 材质（MeshLambertMaterial）是符合 Lambert 光照模型的材质。大部分物体的漫反射效果都适用的。就是说光的颜色和它本身的颜色是啥，它就照成啥 THREE.MeshLambertMaterial({color:color });

phong材质也比较适合管道：与lambert材质不一样的地方是，它加入了镜面反射的效果，也就是会有光斑

var material = new THREE.MeshPhongMaterial({

color:color,

specular:0xffffff,

shininess:100

});

spcular:光斑的颜色

shininess:光斑大小，值越小，光斑越不明显，不能设为0，30是默认值（0-100）就可。 其他材质的学习可以参照three.js官网和入门指南。（官网在这快有一个很好的例子，你可以尝试一下）

THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)函数创建了一个圆柱体，这个函数默认在原点（0,0,0）坐标创建，中心点也在原点，并且方向方向向y轴，你可以通过position和rotation属性分别改变它的位置和旋转角度，rotation属性要注意的一点是它里面的3个值分别表示弧度。

比如cylinder.rotation=new THREE.Vector3(0.1,0.2,0.3);

圆柱体绕x轴旋转的弧度是0.1，绕y轴旋转的弧度是0.2，绕z轴旋转的弧度是0.3。

radiusTop：顶面半径

radiusBottom：底面半径

height：圆柱高

radiusSegments：半径分段，就是一个圆被分成了多少份（像切蛋糕一样），值越大，圆柱就越平滑

heightSegments：高度分段，因为我们圆柱顶面半径，底面半径都是相同的，所以这个值就没有意义了，所以我们直接设为0。

openEnded 是一个布尔值，表示是否没有顶面和底面，缺省值为 false ，表示有顶面和底面。

<——radiusSegments

heightSegments的分段的效果

mesh = new THREE.Mesh(geometry,material);

scene.add(mesh);

把material材质赋给geometry，在场景中添加这一个物体。

动画渲染效果：

function render(){

和

renderer.render( scene, camera );//把照相机给场景

}

动画的实现是通过在每秒钟多次重绘画面实现的，为了衡量画面切换速度，引入了每秒帧数FPS(Frames Per Second)的概念，是指每秒画面重绘的次数，FPS越大，则动画效果越平滑，当FPS小于20时，一般就能明显感受到卡顿

requestAnimationFrame:不断重绘

three.js里面除了requestAnimationFrame方法，还有setInterval(func,mesc)，可以设置特定的FPS，

func:每过mesc毫秒执行的函数，如果将func定义为重绘画面的函数，就能实现动画效果（入门指南P88）

function animation(){

requestAnimationFrame(animate);// 反复渲染成为3d效果

render();//由于requestAnimationFrame只请求一帧画面，除了在init函数中需要调用，//在被其调用的函数中需要再次调用requestAnimationFrame。

}

二、扩展

1.小工具

开源工具还有其他很有用的小工具

①stats.js——查看web场景中的帧数等，很实用！

fps可以实时的FPS信息，从而更好地监测动画效果 单击后可以显示每一帧的渲染时间

stats = new Stats();

stats.domElement.style.position = 'absolute';

stats.domElement.style.top = '0px';

stats.domElement.style.zIndex = 100;

container.appendChild(stats.domElement);

之后再function animation()函数里面加入stats.update()就可以了

②three.js里面的坐标轴，可以在场景的原点加入一个有色坐标，其中红色是x轴，绿色是y轴，蓝色是z轴，比较实用

var axisHelper = new THREE.AxisHelper( 200 );//轴长200

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

基于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），当然这里还需要根据实际情况选择不同相机，并可以对相机作出设置。

④添加渲染器，例如：var renderer=new THREE.Web-

GLRenderer（{antialias：true}），如果需要可以设置不同的渲染器，并可以根据情况进行设置。

⑤网格模型的构建与导入、材质的添加与灯光效果的添加，完成以上四步后，一个三维网页的骨架就已经搭建成功了，之后我们就可以在其中绘制构建网格模型、添加材质以及灯光等效果了。简单的网格模型可以直接使用代码绘制渲染，当然如果想要引入复杂的模型，比作使用建模工具制作的模型，就需要使用相应的函数进行加载，例如：new THREE.JSONLoader（），当然再添加上材质，并添加上灯光，效果会更好。

⑥最后还需要做的是渲染循环：renderer.render（scene， camera），以实现动画效果。

1.2 实现方式和流程

1.2.1 三维建模

利用三维建模工具（3ds max或者maya或者blender等）制作三维模型、添加材质、灯光等特效。然后将模型保存成obj格式的文件，或者直接使用blender保存成js格式的文件。

1.2.2 模型转换

对于obj格式的文件，Three.js就已经能够加载进网页之中了，这里我们使用的是JSON数据类型的文件。即将obj格式的文件转换成js格式的文件。格式装换过程：

先安装Python，在此使用的是Python的2.6.0版本。然后使用命令：D：＼Python26＼python d：＼convert_obj_three.py -i d：＼model.obj -o d：＼model.js生成的JSON数据类型的文件。

1.2.3 代码开发

建议采用VIM编写代码，使用Chrome浏览器调试。为了能使Chrome能够更好的支持WebGL，我们需要对其作出简单配置，在Chrome桌面快捷方式上点击右键、选择属性，然后将——enable-webgl——ignore-gpu-blacklist——all-

ow-file-access-from-files粘贴到“目标”文本框里。

2 Three.js三维网页实现代码加密

Three.js 3D引擎是完全使用javaScript编写成的，因此基于Three.js 3D引擎的三维网页也继承Three.js 3D引擎的这一特点，使用javaScript编写而成。而目前如果对javaScript不做安

全控制的化，代码完全暴露在网络中，因此我么需要对其代码做出简单加密，以降低其可读性，同时提高其安全性。

JavaScript代码加密的本质是降低代码的可读性，从而提高解密、阅读上的难度。因为使用Three.js 3D引擎实现的三维网页，其主要代码是JavaScript，而且代码量很大，运行速度与性能也局限于硬件与网速，因此如果对代码做出过多的操作，极大程度上会降低代码的运行性能与速度，因此采用将文明定长字符串逐一加10变换为16进制的方式，之后对其进行去除缩进、空格、注释等进行简单压缩，然后简单使用加密即可。而不必要做出复杂的代码混淆，加密。其中加解密文件js.min.js代码如下：

①加密。

$（document）.ready（function（）{$（"#encode"）.click（function（）{var

s=$（"#txt1"）.val（）；var b=""；

for（var i=0；i

var hexs=（ascx+10）.toString（16）；

//alert（hexs.length）；

if（hexs.length==2）{hexs="00"+hexs；}

b+=hexs；}

②解密。

document.getElementById（'txt2'）.value=b；}）； }）；

function fun（str）{var newb=""；for（var i=0；i

{var newchar=str.substr（i，4）；

newb+=String.fromCharCode（（parseInt（newchar，16）-10）.toString（10）） ；} return newb；}

3 结 语

基于Three.js 3D引擎的三维网页的基础搭建很并不算太难，但如果我们想要达到旋转、交互以及碰撞检测，就需要更加深入的学习与研究。

参考文献：

[1] Jos Dirksen.Learning Three.Js： the JavaScript 3D Library for WebGL[M].Packt Publishing Limited，2013.

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

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

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

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

近年来，网络速度和计算机硬件得到了迅速的发展，为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），当然这里还需要根据实际情况选择不同相机，并可以对相机作出设置。

④添加渲染器，例如：var renderer=new THREE.Web-

GLRenderer（{antialias：true}），如果需要可以设置不同的渲染器，并可以根据情况进行设置。

⑤网格模型的构建与导入、材质的添加与灯光效果的添加，完成以上四步后，

一个三维网页的骨架就已经搭建成功了，之后我们就可以在其中绘制构建网格模型、添加材质以及灯光等效果了。简单的网格模型可以直接使用代码绘制渲染，当然如果想要引入复杂的模型，比作使用建模工具制作的模型，就需要使用相应的函数进行加载，例如：new THREE.JSONLoader（），当然再添加上材质，并添加上灯光，效果会更好。

⑥最后还需要做的是渲染循环：renderer.render（scene， camera），以实现动画效果。

1.2 实现方式和流程

1.2.1 三维建模

利用三维建模工具（3ds max或者maya或者blender等）制作三维模型、添加材质、灯光等特效。然后将模型保存成obj格式的文件，或者直接使用blender保存成js格式的文件。

1.2.2 模型转换

对于obj格式的文件，Three.js就已经能够加载进网页之中了，这里我们使用的是JSON数据类型的文件。即将obj格式的文件转换成js格式的文件。格式装换过程：

先安装Python，在此使用的是Python的2.6.0版本。然后使用命令：D：＼Python26＼python d：＼convert_obj_three.py -i d：＼model.obj -o d：＼model.js生成的JSON数据类型的文件。

1.2.3 代码开发

建议采用VIM编写代码，使用Chrome浏览器调试。为了能使Chrome能够更好的支持WebGL，我们需要对其作出简单配置，在Chrome桌面快捷方式上点击右键、选择属性，然后将——enable-webgl——ignore-gpu-blacklist——all-

ow-file-access-from-files粘贴到“目标”文本框里。

2 Three.js三维网页实现代码加密

Three.js 3D引擎是完全使用javaScript编写成的，因此基于Three.js 3D引擎的三维网页也继承Three.js 3D引擎的这一特点，使用javaScript编写而成。而目前如果对javaScript不做安全控制的化，代码完全暴露在网络中，因此我么需要对其代码做出简单加密，以降低其可读性，同时提高其安全性。

JavaScript代码加密的本质是降低代码的可读性，从而提高解密、阅读上的难度。因为使用Three.js 3D引擎实现的三维网页，其主要代码是JavaScript，而

且代码量很大，运行速度与性能也局限于硬件与网速，因此如果对代码做出过多的操作，极大程度上会降低代码的运行性能与速度，因此采用将文明定长字符串逐一加10变换为16进制的方式，之后对其进行去除缩进、空格、注释等进行简单压缩，然后简单使用加密即可。而不必要做出复杂的代码混淆，加密。其中加解密文件js.min.js代码如下：

①加密。

$（document）.ready（function（）{$（”#encode”）.click（function（）{var s=$（”#txt1”）.val（）；var b=““；

for（var i=0；i

var hexs=（ascx+10）.toString（16）；

//alert（hexs.length）；

if（hexs.length==2）{hexs=“00”+hexs；}

b+=hexs；}

②解密。

document.getElementById（’txt2’）.value=b；}）； }）；

function fun（str）{var newb=““；for（var i=0；i

{var newchar=str.substr（i，4）；

newb+=String.fromCharCode（（parseInt（newchar，16）-10）.toString（10）） ；}

return newb；}

3 结 语

基于Three.js 3D引擎的三维网页的基础搭建很并不算太难，但如果我们想要达到旋转、交互以及碰撞检测，就需要更加深入的学习与研究。

参考文献：

[1] Jos Dirksen.Learning Three.Js： the JavaScript 3D Library for WebGL[M].Packt Publishing Limited，2013.

篇五：WebGL纹理贴图

在WebGL入门指南一书中，第2章中2.4节，发现纹理贴图并没有显示。根据网上的一个例子，改编而成的一个能够显示纹理贴图的例子，作者也是初学者，希望能给刚刚接触three.js的同学一点点的帮助，如有问题请联系，892639960（qq）,具体代码如下：

!DOCTYPE html>

minimum-scale=1.0, maximum-scale=1.0">

体裁作文