webgl中文网教程,webgl怎么用

ThreeJS简介

近年来web得到了快速的发展。随着HTML5的普及，网页的表现能力越来越强大。网页上已经可以做出很多复杂的动画，精美的效果。 但是，人总是贪的。那么，在此之上还能做什么呢？其中一种就是通过WebGL在网页中绘制高性能的3D图形。

OpenGL 它是最常用的跨平台图形库。

WebGL 是基于 OpenGL 设计的面向web的图形标准，提供了一系列JavaScript API，通过这些API进行图形渲染将得以利用图形硬件从而获得较高性能。

而 Three.js 是通过对 WebGL 接口的封装与简化而形成的一个易用的图形库。

简单点的说法 threejs=three + js ，three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript 来写3D程序的意思。而javascript的计算能力因为google的V8引 擎得到了迅猛的增强，做3D程序，做服务器都没有问题。

WebGL 门槛相对较高，需要相对较多的数学知识（线性代数、解析几何）。因此，想要短时间上手 WebGL 还是挺有难度的。 Three.js 对 WebGL 提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本。并且，几乎没有损失 WebGL 的灵活性。

因此，从 Three.js入 手是值得推荐的，这可以让你在较短的学习后就能面对大部分需求场景。

Three.js 的入门是相对简单的，但是当我们真的去学的时候，会发现一个很尴尬的问题：相关的学习资料很少。

通常这种流行的库都有很完善的文档，很多时候跟着官方的文档或官方的入门教程学习就是最好的路线。但Three不是的，它的文档对初学者来说太过简明扼要。

不过官方提供了非常丰富的examples，几乎所有你需要的用法都在某个example中有所体现。但这些example不太适合用来入门，倒是适合入门之后的进一步学习。

这里推荐一些相对较好的教程：

当然，实际的学习过程中这些资料肯定是不太够的，遇到问题还是要自己去查资料。不过这里要提醒一下，Three.js的更新是相当频繁的，现在是r80版本，自2010年4月发布r1以来，这已经是第72个版本了(中间有的版本号跳过了)。因此，在网上找到的资料有些可能是不适合当前版本的，需要注意甄别(前面推荐的资料也都或多或少存在这样的问题)。

要在屏幕上展示3D图形，思路大体上都是这样的：

1、构建一个三维空间

Three中称之为场景(Scene)

2、选择一个观察点，并确定观察方向/角度等

Three中称之为相机(Camera)

3、在场景中添加供观察的物体

Three中的物体有很多种，包括Mesh,Line,Points等，它们都继承自Object3D类

4、将观察到的场景渲染到屏幕上的指定区域

Three中使用Renderer完成这一工作

场景是所有物体的容器，也对应着我们创建的三维世界。

Camera是三维世界中的观察者，为了观察这个世界，首先我们要描述空间中的位置。 Three中使用采用常见的右手坐标系定位。

Three中的相机有两种，分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。

这里补充一个视景体的概念：视景体是一个几何体，只有视景体内的物体才会被我们看到，视景体之外的物体将被裁剪掉。这是为了去除不必要的运算。

正交投影相机的视景体是一个长方体，OrthographicCamera的构造函数是这样的：

Camera本身可以看作是一个点，left则表示左平面在左右方向上与Camera的距离。另外几个参数同理。于是六个参数分别定义了视景体六个面的位置。

可以近似地认为，视景体里的物体平行投影到近平面上，然后近平面上的图像被渲染到屏幕上。

2）透视投影相机

fov对应着图中的视角，是上下两面的夹角。aspect是近平面的宽高比。在加上近平面距离near，远平面距离far，就可以唯一确定这个视景体了。

透视投影相机很符合我们通常的看东西的感觉，因此大多数情况下我们都是用透视投影相机展示3D效果。

有了相机，总要看点什么吧？在场景中添加一些物体吧。

Three中供显示的物体有很多，它们都继承自Object3D类，这里我们主要看一下Mesh和Points两种。

1）Mesh

我们都知道，计算机的世界里，一条弧线是由有限个点构成的有限条线段连接得到的。线段很多时，看起来就是一条平滑的弧线了。

计算机中的三维模型也是类似的，普遍的做法是用三角形组成的网格来描述，我们把这种模型称之为Mesh模型。

geometry是它的形状，material是它的材质。

不止是Mesh，创建很多物体都要用到这两个属性。下面我们来看看这两个重要的属性。

2）Geometry

Geometry，形状，相当直观。Geometry通过存储模型用到的点集和点间关系(哪些点构成一个三角形)来达到描述物体形状的目的。

Three提供了立方体(其实是长方体)、平面(其实是长方形)、球体、圆形、圆柱、圆台等许多基本形状；

你也可以通过自己定义每个点的位置来构造形状；

对于比较复杂的形状，我们还可以通过外部的模型文件导入。

3）Material

Material，材质，这就没有形状那么直观了。

材质其实是物体表面除了形状以为所有可视属性的集合，例如色彩、纹理、光滑度、透明度、反射率、折射率、发光度。

这里讲一下材质(Material)、贴图(Map)和纹理(Texture)的关系。

材质上面已经提到了，它包括了贴图以及其它。

贴图其实是‘贴’和‘图’，它包括了图片和图片应当贴到什么位置。

纹理嘛，其实就是‘图’了。

Three提供了多种材质可供选择，能够自由地选择漫反射/镜面反射等材质。

4）Points

讲完了Mesh，我们来看看另一种Object——Points。

Points其实就是一堆点的集合，它在之前很长时间都被称为ParticleSystem(粒子系统)，r68版本时更名为PointCloud,r72版本时才更名为Points。更名主要是因为，Mr.doob认为，粒子系统应当是包括粒子和相关的物理特性的处理的一套完整体系，而Three中的Points简单得多。因此最终这个类被命名为Points。

5）Light

神说：要有光！

光影效果是让画面丰富的重要因素。

Three提供了包括环境光AmbientLight、点光源PointLight、 聚光灯SpotLight、方向光DirectionalLight、半球光HemisphereLight等多种光源。

只要在场景中添加需要的光源就好了。

6）Renderer

在场景中建立了各种物体，也有了光，还有观察物体的相机，是时候把看到的东西渲染到屏幕上了。这就是Render做的事情了。

Renderer绑定一个canvas对象，并可以设置大小，默认背景颜色等属性。

调用Renderer的render函数，传入scene和camera，就可以把图像渲染到canvas中了。

现在，一个静态的画面已经可以得到了，怎么才能让它动起来？

很简单的想法，改变场景中object的位置啊角度啊各种属性，然后重新调用render函数渲染就好了。

那么重新渲染的时机怎么确定？

HTML5为我们提供了requestAnimFrame，它会自动在每次页面重绘前调用传入的函数。

如果我们一开始这样渲染：

只需要改成这样：

object就可以动起来了！

下面我们用一个简单的例子来梳理一下这个过程。

首先写一个有Canvas元素的页面吧。

下面来做Javascript的部分

首先初始化Renderer

初始化场景:

初始化相机：

要唯一确定一个相机的位置与方向，position、up、lookAt三个属性是缺一不可的。

这里我们创建了一个正交投影相机，这里我将视景体大小与屏幕分辨率保持一致只是为了方便，这样坐标系中的一个单位长度就对应屏幕的一个像素了。

我们将相机放在Z轴上，面向坐标原点，相机的上方向为Y轴方向，注意up的方向和lookAt的方向必然是垂直的（类比自己的头就知道了）。

下面添加一个立方体到场景中：

注意我们使用了法向材质 MeshNormalMaterial ，这样立方体每个面的颜色与这个面对着的方向是相关的，更便于观察/调试。

在这个简单的demo里我不打算添加光影效果，而法向材质对光也是没有反应的。 最后来创建一个动画循环吧

每次重绘都让这个立方体转动一点点。 当页面加载好时，调用前面这些函数就好了。

WebGL中文网 强烈推荐!!

WebGL中文教程网

求《webgl入门指南》全文免费下载百度网盘资源,谢谢~

《webgl入门指南》百度网盘pdf最新全集下载:

链接：

?pwd=l6u7 提取码：l6u7

简介：webgl是一项新的web 3d图形标准，也是html5大家庭中的一员。《webgl入门指南》从webgl和3d图形学的基础概念讲起，循序渐进，用多个简单的实例直观地讲解了各个知识点。 ?

webgl如何对模型信息查询，需要怎么做

WEBGL基础知识介绍

1、场景（scene）

场景如其名，即显示3D空间内物体的容器，就好比一个箱子是一个3D场景。

2、坐标系：

webgl使用笛卡尔坐标系（宽度、高度和深度），我们也可以指定使用其它坐标系统。

WEBGL与过去我所使用的flash3D坐标系有一些区别，在flash3d中，屏幕的左上角为坐标系原点，向下为Y轴正方向，向右为X轴正方向，而在webgl中，屏幕的中心点为原点。

但是在3D世界中还有第三个坐标轴即Z轴，它表示场景的深度。

在webgl的世界中我们可以使用左手法则来辅助记忆三个轴的正方向，伸出左手，食指伸直保持水平，中指垂直向下，拇指指向自己，其余手指收起，食指所指方向即x轴的正方向，中指所指方向即y轴正方向，拇指所指的方向即z轴的正方向。

3、投影的概念：

我们在屏幕上所看到的三维空间，并非是一个真实的3D空间，而是用数学算法将模拟的三维空间投射到屏幕上的二维图像而已。投影就是将模拟的三维空间内的物体映射到屏幕上生成一个二维图像的过程。投影分为正交投影和透视投影，这也就是摄像机的实现原理。

4、摄像机：

摄像机是场景内的一个观察者，人通过屏幕看到的画面实际上是3D空间内的物体映射到摄像机内的画面，这个画面很可能并不是完整的，仅仅是摄像机当前可见范围内的。这与摄像机的种类有关。

在three.js中有两种，正交摄像机和透视摄像机。

正交摄像机的视野范围就像一个正方体，正方体内的物体沿着正方体的边缘投影到每个侧面的物体大小都与立方体内的物体大小相同，所以使用正交摄像机投影到屏幕的画面我们是无法分辨物体的远近的，这种摄像机多用于在3D空间绘制2D图形，如医用检查设备，我们不使用。

透视摄像机就如一个顶部被削平的金字塔，金字塔顶部被削平的面可以理解为我们的屏幕，在金字塔内的物体沿着金字塔纵方向进行投影，并投射到顶部，假设有两个大小形状完全相同的物体分别位于金子塔内的不同高度，他们投影到顶部的影子的大小就会不同，这就是透视相机的。使用透视摄像机我们可以在平面内很容易分辨出3D空间内物体的远近。现在把金字塔放倒，将削平的顶端对这你的眼睛，这样就很容易理解在透视相机时计算机是如何渲染物体的了。

5、渲染：

渲染即执行代码在屏幕上绘制图形的过程。渲染是实时执行的，就如一个播放的电影，由许多连续的帧组成，帧就好比一场电影中的一个瞬时的画面。

6、点与向量

点是由三个值组成，x、y和z，每个点可以表示3D空间的一个唯一位置，每个点也可表示一个向量，也叫做三维向量，向量可以理解为指向场景中心的一个线段，我们知道点有三个值，这样的向量叫做单位向量或标量，它仅仅表示向量的方向，不能表示向量的长度，现在我们给一个这个标量再增加一个值，第四个值表示向量的长度，这样我们就有了一个既有长度又有方向的向量了，这样的向量叫做四维向量。

7、面、顶点与三角形：

我们知道要确定一个唯一的平面我们至少需要三个点，将三个点用线连起来就形成了一个三角平面，我们称这三个点为顶点，顶点就是图形突起的部。

8、网格模型：

3D空间内任何形状的物体都称之为模型，无论是立体模型还是平面模型都由至少三个顶点组成，将这些顶点用线连接起来就组成了模型。还需要知道在现在计算机图形学中，所有的模型，无论复杂程度，都是由多个三角形拼接而成的。我们常见的球体看起来很圆滑，其实是由很多个三角形绘制而成，由于密度很高肉眼很难察觉其边缘的顶点。

由于这些模型都是使用线条连接而成，看起来就像一张捕鱼的渔网被扭曲成各种形状，我们称这种没有材质的模型叫做网格模型（它看起来是镂空的）。

9、纹理贴图以及材质

纹理就是一个平面化的图形，它可以是纯色填充的也可以是使用位图填充的。

材质就是使用纹理构建的一种代码环境中的对象，我们将材质对象应用到模型网格上，使其更加逼真形象，达到预期设想的效果。

更加容易理解的方式：纹理好比一颗大树，材质好比是用这颗大树打造的一块木板，我们可以将木板钉在一个立方体网格对象上，这样我们就有了一个木箱。

10、矩阵和模型变换

如果向量是一个数组[x,y,z]，那么矩阵就是一个二维数组即，

矩阵代码

| x x x x |

| |

| y y y y |

| |

| z z z z |

| |

| 0 0 0 1 |

每一列表示一个四维向量，上面我们创建了一个4X4的矩阵，在webgl中我们常用的矩阵为4X4和3X3。

模型变换就是利用矩阵使得模型的大小、位移、旋转等产生变化的过程，通常我们会使用模型的内置矩阵与变换矩阵相乘从而得到变换后的新矩阵并赋予模型。每个模型被创建后都会拥有自己的模型矩阵，我们无需关注模型矩阵是如何产生的，只需要知道对模型进行模型变换需要将模型矩阵与变换矩阵相乘。具体如何操作矩阵自行查询相关资料，这里不做赘述。

11、视图变换

视图变换就是不通过调整模型本身的参数，而是直接控制摄像机、场景的移动而产生的视觉变化，比如我们将摄像机像模型方向拉近，我们就会感觉模型在逐渐变大，我们将场景原点逐渐拉远我们就会感觉模型在渐渐远离我们。

13、着色器语言

1) 顶点着色器：顶点着色器是用来控制光照、颜色、位移等，假如我们要渲染一个三形，顶点着色器就将执行三次，它会为每个顶点都执行一次。注意在顶点着色器执行时我们还没有通过屏幕看到绘制的图形，顶点着色器是为后续的光栅化处理做铺垫，它将为光栅化操作提供必要的资源，顶点着色器是光栅化处理的仓库。

2) 片段着色器：了解片段着色器先要了解光栅化是什么意思，光栅化就是绘制每两个顶点之间的像素并形成线段的过程，就好比我们要画一个栅栏，我们要一根一根的画。

片段着色器就是告诉GPU如何光栅化的语言，就如其名字，将光照、纹理、位移等沿着顶点之间的线段逐个像素的渲染。

14、webgl中最流行的js库three.js介绍：

首先最外层为场景，场景中包含一个或多个摄像机，场景中还可以包含模型、粒子等。

模型、粒子等也可包含在Object3D对象中。

创建一个模型的过程是：

1) 创建模型所需要的顶点

2) 创建一个几何图形对象，并将顶点传递给几何图形对象。

3) 创建模型的纹理对象即材质。

4) 创建网格对象，并将几何图形对象以及纹理对象传递给网格对象。

5) 将网格添加到可容纳网格对象的容器内，如scene、Object3D等。

术语FAQ：

1、场景：Scene

2、位置：Position

3、投影：Projector

4、正交：Orthographic

5、透视：Perspective

6、摄像机：Camera

7、渲染：Render

8、向量：Vector

9、三维向量：Vector3

10、四维向量：Vector4

11、矩阵：Matrix

12、3行3列矩阵：Matrix3

13、4行4列矩阵：Matrix4

14、顶点：Vertex

15、顶点的复数形式：Vertices

16、几何对象：Geometry

17、纹理：Texture

18、材质：Material

19、网格：Mesh

20、变换：Transform

21、视图：View