Three.js讲解以及WEBGL实例

比眉伴天荒 2022-09-21 11:40 139阅读 0赞

webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。

自己虽然在去年6月份接触过一段时间，但是一直没有时间研究一下，对webGL了解的也不是很多，近来有些时间，总结一下自己掌握的这些WEBGL的东西，也给大家分享一下。在本篇文章当中，会以一个demo为例，读完这篇文章，你将学会如何在浏览器中绘制一个旋转的立体图形。

![Image 1][]

**准备工作**

在写代码之前，你首先要去下最新的three.js框架包，在你的页面里引入three.js，当然文件包里面也有不少的demo便于大家学习；

chrome是目前支持webGL最好的浏览器，Firefow居其次，国内的遨游、猎豹经测试也可以运行。

**基本的HTML结构**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>webgl-demo</title>
    <style>
     .webgl{ width: 800px;height: 600px;background: #ccf;}
    </style>
    <script src="Three.js" type="text/javascript"></script>
    </head>
    <body>
     <div id="webgl" class='webgl'></div>
    </body>
    </html>

**Three.js的六个基本步骤**

1.设置three.js渲染器

2.设置摄像机camera

3.设置场景scene

4.设置光源light

5.设置物体object

6.书写主函数执行以上五步

接下来针对每个步骤进行解释：

1.设置three.js渲染器

三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染操作的软件叫做渲染器。

先来看代码：

var webgl = document.getElementById('webgl'); var renderer;//定义一个全局变量renderer（含义:渲染）
    function initThree(){ 
     //获取画布的宽高
     width = webgl.clientWidth;
     height = webgl.clientHeight;
     //生成渲染器对象（属性：抗锯齿效果为设置有效）
     renderer = new THREE.WebGLRenderer({ antialias:true});
     //指定渲染器的高宽（和画布框大小一致）
     renderer.setSize(width, height );
     //将创建的canvas元素（此处的canvas元素为three.js创建）添加到html文档当中
     webgl.appendChild(renderer.domElement);
     //设置渲染器的清除色
     renderer.setClearColorHex(0xFFFFFF,1.0);
    }

上面代码中注释所书写的几个步骤就是我们要注意的几个步骤

(1) 声明全局变量（对象）；

(2) 获取画布高宽；

(3) 生成渲染器对象（属性：抗锯齿效果为设置有效）；

(4) 指定渲染器的高宽（和画布框大小一致）；

(5) 追加【canvas】元素到id名为webgl的这个元素中；

(6) 设置渲染器的清除色(clearColor)。

在此对渲染器进行一下介绍：

three.js文档中渲染器的分支如下：

Renderers

CanvasRenderer

DOMRenderer

SVGRenderer

WebGLRenderer

WebGLRenderTarget

WebGLRenderTargetCube

WebGLShaders

可以看到three.js提供了很多的渲染方式，我们选择的当然是WebGLRenderer，但我们这里要将CanvasRenderer与WebGLRenderer两种渲染方式做一个比较。

把WebGL渲染器：

renderer=new THREE.WebGLRenderer();

替换为Canvas渲染器：

renderer=new THREE.CanvasRenderer();

这样canvas就会以2d的方式渲染，以下是效果对比（前者用WebGLRenderer渲染）：

![Image 1][] ![Three.js讲解以及WEBGL实例 - 独行冰海 - 独行冰海][Three.js_WEBGL_ - _ -]

很明显，WebGL在渲染效果上更胜一筹，WebGL的渲染能够最大程度表现你制作精美的场景，如果你的设备支持它，这个渲染器具有比CanvasRenderer更好的性能，相反地，CanvasRenderer则具有更好的兼容性。

在此针对渲染器的参数进行详细介绍：

renderer=new THREE.WebGLRenderer({ 
     antialias:true,//antialias:true/false是否开启反锯齿
     precision:"highp",//precision:highp/mediump/lowp着色精度选择
     alpha:true,//alpha:true/false是否可以设置背景色透明
     premultipliedAlpha:false,//?
     stencil:false,//?
     preserveDrawingBuffer:true,//preserveDrawingBuffer:true/false是否保存绘图缓冲
     maxLights:1//maxLights:最大灯光数
    });

WebGLRenderer()中有一些参数我们可以设置，以下这些参数来自于官方文档：

antialias:

值：true/false

含义：是否开启反锯齿，设置为true开启反锯齿。

precision:

值：highp/mediump/lowp

含义：着色精度选择。

alpha:

值：true/false

含义：是否可以设置背景色透明。

premultipliedAlpha:

值：true/false

含义：？

stencil:

值：true/false

含义：?

preserveDrawingBuffer:

值：true/false

含义：是否保存绘图缓冲，若设为true，则可以提取canvas绘图的缓冲。

maxLights:

值：数值int

含义：最大灯光数，我们的场景中最多能够添加多少个灯光。

接下来，继续讲解第二步：设置相机

OpenGL（WebGL）中、三维空间中的物体投影到二维空间的方式中，存在透视投影和正投影两种相机。 透视投影就是、从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。 正投影就是不管物体和视点距离，都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体，因此这种投影被广泛应用。在 Three.js 也能够指定透视投影和正投影两种方式的相机。 在此 设置透视投影方式。

/*
    *设置相机
    */
    var camera;
    function initCamera() { 
     camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
     //此处为设置透视投影的相机，默认情况下，相机的上方向为Y轴，右方向为X轴，沿着Z轴垂直朝里（视野角：fov； 纵横比：aspect； 相机离视最近的距离：near； 相机离视体积最远距离：far）
     camera.position.x = 400;//设置相机的位置坐标
     camera.position.y = 0;
     camera.position.z = 0;
     //设置相机的上为z轴方向
     camera.up.x = 0;
     camera.up.y = 0;
     camera.up.z = 1;
     //设置视野的中心坐标 camera.lookAt({x:0, y:0, z:0});
    }

基本步骤为：

(1) 声明全局的变量（对象）；

(2) 设置透视投影的相机；

(3) 设置相机的位置坐标；

(4) 设置相机的上为「z」轴方向；

(5) 设置视野的中心坐标。

3.设置场景scene

场景就是一个三维空间。 用 \[Scene\] 类声明一个叫 \[scene\] 的对象。

/*
    *设置场景，所有的元素只有在添加到场景当中之后才能够生效
    */
    var scene;
    function initScene() { 
     scene = new THREE.Scene();
    }

**4.设置光源**

OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。 而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行 \[环境光\] 等设置。 作为对应， Three.js中可以设置 \[点光源(Point Light)\] \[聚光灯(Spot Light)\] \[平行光源(Direction Light)\]，和 \[环境光(Ambient Light)\]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上，都是环境光和其他几种光源进行组合。 如果不设置环境光，那么光线照射不到的面会变得过于黑暗。 首先按照下面的步骤设置平行光源，在这之后还会追加环境光。

(1) 声明全局变量(对象)

(2) 设置平行光源

(3) 设置光源向量

(4) 追加光源到场景

/*
    *设置光源
    */
    var light;
    function initLight() { 
     light = new THREE.DirectionalLight(0x0000FF,1.0,0);//设置平行光DirectionalLight
     light.position.set(50,50,50);//光源向量，即光源的位置 //还可以添加多个光源，多行注释中即为添加2、3号光源
     /*light2 = new THREE.DirectionalLight(0xFF00CC,1.0,0);
     light2.position.set(0,50,0);
     light3 = new THREE.DirectionalLight(0x0000CC,1.0,0);
     light3.position.set(50,0,0);*/
     scene.add(light);//追加光源到场景
     /*scene.add(light2);
     scene.add(light3);*/
    }

5.设置物体object

/*
    *设置物体
    */
    var cube=Array();
    function initObject() { 
     for(var i=0;i<4;i++){ 
     cube[i]=new THREE.Mesh(//mesh是three.js的一个类
     new THREE.CubeGeometry(50,50,50),//形状 (宽 高 深度)
     new THREE.MeshLambertMaterial({ color:0x0000FF})//材质
     );
     scene.add(cube[i]);
     cube[i].position.set(0,-120+80*i,0);
     }
    }

在此绘制了4个立方体

**7.（没有看错，不是6！！！）可以让它旋转起来**

/*
    *旋转
    */
    var t=0;
    function loop(){ 
     t++;
     renderer.clear();
     cube[0].rotation.set(t/100,0,0);
     cube[1].rotation.set(0,t/100,0); 
     cube[2].rotation.set(0,0,t/100);
     /*camera.position.x = 400*Math.cos(t/100);
     camera.position.y = 400*Math.sin(t/200);
     camera.position.z = 50*Math.cos(t/100);*/
     camera.lookAt( { x:0, y:0, z:0 } );
     renderer.render(scene,camera);
     window.requestAnimationFrame(loop);
    }

注释当中表示的是相机的旋转，可以去掉看看效果

**6.（好吧，我们来补一下第六步）将所有上面设置好的函数进行执行**

/*
    *执行
    */
    function threeStart() { 
     initThree();
     initCamera();
     initScene();
     initLight();
     initObject();
     loop();
     renderer.clear();
     renderer.render(scene,camera);
    }

到这里我们就完成了，再看一下效果图吧！

![Image 1][]

本demo的全部代码整合如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>webgl2</title>
    <style>
    #webgl{ 
     background: #ccc;
     width: 800px;
     height: 600px;
    }
    </style>
    <script src="Three.js" type="text/javascript"></script>
    <script type="text/javascript">
     var renderer;//声明一个全局变量
     /*
     *构建基本画布 渲染器
     */
     function initThree() { 
     width = document.getElementById('webgl').clientWidth;
     height = document.getElementById('webgl').clientHeight;
     renderer = new THREE.WebGLRenderer({ antialias:true});//生成渲染器对象，属性：锯齿效果设为true
     renderer.setSize(width,height);//设置渲染器的宽和高，和画布大小一致
     document.getElementById('webgl').appendChild(renderer.domElement);//追加canvas元素到webgl元素当中
     renderer.setClearColorHex(0xFFFFFF,1.0);//设置渲染器的清除色
     }
     /*
     *设置相机
     */
     var camera;
     function initCamera() { 
     camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
     //此处为设置透视投影的相机，默认情况下，相机的上方向为Y轴，右方向为X轴，沿着Z轴垂直朝里（视野角：fov； 纵横比：aspect； 相机离视最近的距离：near； 相机离视体积最远距离：far）
     camera.position.x = 400;//设置相机的位置坐标
     camera.position.y = 0;
     camera.position.z = 0; 
     //设置相机的上为y轴方向
     camera.up.x = 0;
     camera.up.y = 1;
     camera.up.z = 0;
     } 
     /*
     *设置场景，所有的元素只有在添加到场景当中之后才能够生效
     */
     var scene;
     function initScene() { 
     scene = new THREE.Scene();
     }
     /*
     *设置光源
     */
     var light;
     function initLight() { 
     light = new THREE.DirectionalLight(0x0000FF,1.0,0);//设置平行光DirectionalLight
     light.position.set(50,50,50);//光源向量，即光源的位置
     scene.add(light);//追加光源到场景
     }
     
     /*
     *设置物体
     */
     var cube=Array();
     function initObject() { 
     for(var i=0;i<4;i++){ 
     cube[i]=new THREE.Mesh(//mesh是three.js的一个类
     new THREE.CubeGeometry(50,50,50),//形状 （宽 高 深度）
     new THREE.MeshLambertMaterial({ color:0x0000FF})//材质
     );
     scene.add(cube[i]);
     cube[i].position.set(0,-120+80*i,0);
     }
     }
     /*
     *旋转
     */
     var t=0;
     function loop(){ 
     t++;
     renderer.clear();
     cube[0].rotation.set(t/100,0,0);
     cube[1].rotation.set(0,t/100,0); 
     cube[2].rotation.set(0,0,t/100);
     camera.lookAt( { x:0, y:0, z:0 } );
     renderer.render(scene,camera);
     window.requestAnimationFrame(loop);
     }
     /*
     *执行
     */
     function threeStart() { 
     initThree();
     initCamera();
     initScene();
     initLight();
     initObject();
     loop();
     renderer.clear();
     renderer.render(scene,camera);
     }
     /*
     *如果想让立体图形进行循环运动，需要使用到loop
     *首先创建渲染器、相机、场景、光源、物体以及最后的执行
     *只需要添加loop函数
     var t=0;
     function loop(){ 
     t++;
     cube.rotation.set(t/100,0,0);
     renderer.clear();
     renderer.render(scene,camera);
     window.requestAnimationFrame(loop);
     }
     */
    </script>
    </head>
    <body onload="threeStart();">
     <div id="webgl"></div>
    </body>
    </html>

[Image 1]: 
[Three.js_WEBGL_ - _ -]: http://img2.ph.126.net/dCfw4bQIfgPPJUnpH6ZanQ==/6597666801470985372.jpg