序

本文主要讲解了Three.js的相关概念，帮助读者对Three.js及相关知识形成完整的理解。

近年来，网络发展迅速。随着HTML5的普及，网页的表达能力越来越强。网页上可以做出很多复杂的动画和精美的效果。然而，人总是贪婪的。那么，除此之外还能做些什么呢？一种是通过WebGL在网页中绘制高性能的3D图形。

OpenGL、WebGL到三. js

OpenGL大概很多人都听说过，是最常用的跨平台图形库。WebGL是基于OpenGL设计的面向Web的图形标准，提供了一系列的JavaScript API。通过这些API的图形渲染将利用图形硬件来实现更高的性能。而Three.js是通过封装和简化WebGL接口而形成的一个易于使用的图形库。

简单来说：WebGL可以看作是浏览器提供的一个接口，这些API可以直接用javascript绘制3D图形；而Three.js帮助我们在这些接口上更好地封装它。

WebGL与三个js的比较

当我们有了WebGL，为什么还需要三个. js？这是因为WebGL门槛相对较高，需要的数学知识相对较多。虽然WebGL提供了面向前端的API，但是WebGL和前端开发本质上是完全不同的方向，几乎没有什么知识的重叠。相关性只是它们都在网络平台上，并且使用javascript。一个前端程序员可能熟悉解析几何，但很少有人熟悉线性代数(比如，试着找一个逆矩阵？)，更重要的是在使用中强调了矩阵运算的物理意义，这也是教学中所欠缺的。所以前端工程师很难在短时间内上手WebGL。因此，Three.js很好地封装了WebGL提供的接口，简化了很多细节，大大降低了学习成本。此外，WebGL的灵活性几乎没有丧失。因此，建议从Three.js开始，这将使您在短暂的学习后能够面对大多数需求场景。

“三个一”的学习问题

开始使用Three.js比较简单，但是当我们真正学习的时候，会发现一个尴尬的问题：相关的学习资料很少。通常这个热门的图书馆都有完善的文档，学习官方文档或者官方入门教程是最好的路线。但三不是。它的文档对初学者来说太简洁了。不过官方提供了丰富的例子，你需要的用法几乎都体现在一个例子中。然而，这些例子并不适合入门，而是适合入门后进一步学习。

这里有一些相对不错的教程：Three.js入门指南这是一个不错的轻量级Three.js入门教程。作者文笔好，基础知识讲解简单轻松。

三. js开发指南(中文第一版)

学习三. js-第二版学习三. js:用于webgl的JavaScript 3d库是三. js为数不多也是最好的入门书籍之一，全面讲解了三. js的各种功能.如果有能力的话，建议阅读2015年出版的第二版英文版，和现在的Three.js有很大的不同中文版是从2012年出版的原版书第一版翻译过来的。大多数概念都适用，但许多细节已经改变。这是一本外国教程的翻译，由六篇文章组成。解释不多，但更多展示了如何使用每个基本功能。比较适合有一些图形基础的同学。

当然，在实际的学习过程中，这些材料肯定是不够的。如果你遇到问题，你应该自己检查材料。不过这里需要提醒的是，Three.js的更新相当频繁，现在是r80版本，这是自2010年4月r1发布以来的第72个版本(中间跳过了部分版本号)。所以网上找到的一些资料可能不适合现在的版本，需要筛选(以上推荐的资料都有一定程度的这样的问题)。

《三人行》中的几个概念

要在屏幕上显示3D图形，一般思路如下：

建立一个称为场景的三维空间，选择一个观测点，确定观察方向/角度等。三被称为照相机。场景中的对象有很多种，包括网格、线、点等。它们都继承自Object3D类，将观察到的场景渲染到屏幕上指定的区域三，并使用Renderer完成这项工作

让我们具体看看《三》中的这些概念。

事件

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

摄像机坐标系

相机是三维世界的观察者。要观察这个世界，我们必须首先描述在空间中的位置。

常用的右手坐标系用于“三”中的定位。

三维投影

三中有两种摄像头，分别是三。正投影照相机和三视角照相机。

正交投影和透视投影的区别如上图所示。左图为正交投影，物体发出的光平行投射在屏幕上，远近方块大小相同；右边的图片是透视投影，近大远小，符合我们平时看东西的感觉。维基百科：三维投影

正交投影照相机

注：图中“视点”对应三中的摄像头。这里我们增加一个视觉体的概念：视觉体是一个几何体，只有视觉体中的物体才会被我们看到，视觉体之外的物体会被切掉。这是为了消除不必要的操作。正交投影相机的视图体是一个长方体，正交相机的构造函数是这样的：正交相机(左、右、上、下、近、远)相机本身可以看作一个点，而左代表左平面与相机在左右方向的距离。其他参数相同。所以这六个参数分别定义了场景的六个面的位置。

可以近似认为，将场景中的物体平行投影到近平面上，然后将近平面上的图像渲染到屏幕上。

透视投影照相机

透视投影相机的场景是一个四棱镜，其构建功能如下：透视相机(FOV、方面、近、远)FOV对应的是画面中的视角，也就是上下两边之间的角度。纵横比是近平面的纵横比。加上近平面距离近和远平面距离，就可以唯一确定这个场景。透视投影相机非常适合我们平时看东西的感觉，所以大多数情况下我们用透视投影相机来展示3D效果。

目标

有了相机，你一定看到了什么。给场景添加一些对象。“三”中有许多要显示的对象，这些对象是从Object3D类继承的。这里我们主要看网格和点。

网状物

众所周知，在计算机世界中，一条弧是由有限个点组成的有限线段连接起来的。当有许多线段时，它看起来像一个平滑的弧线。计算机中的三维模型是相似的，通常的做法是用三角形来描述。我们称这个模型为Mesh模型。

这就是著名的斯坦福兔。它在3D图形中的地位与在数字图像处理领域享有盛名的lena相似。看这只兔子。随着三角形数量的增加，其表面变得更加平滑和精确。

在三中，mesh的构造函数如下：Mesh(几何，材质)几何是它的形状，材质是它的材质。不仅Mesh，而且这两个属性也用于创建许多对象。让我们看看这两个重要的属性。

几何学

几何，形状，相当直观。几何图形通过存储模型中使用的点集和点之间的关系(这些点形成一个三角形)来描述对象形状。三提供了许多基本形状，如立方体(实际上是长方体)、平面(实际上是矩形)、球体、圆形、圆柱体和平截头体。您也可以通过自己定义每个点的位置来构造形状。对于复杂的形状，我们也可以通过外部模型文件导入。

材料

材料，材料，没有形状直观。材质实际上是物体表面除了形状以外的所有视觉属性的集合，比如颜色、纹理、平滑度、透明度、反射率、折射率和光度。这里我们将讨论材质、贴图和纹理之间的关系。上面已经提到了材料，它包括地图和其他。地图其实就是“粘贴”和“图片”，包括图片和图片应该粘贴的位置。质感，其实就是一个‘身材’。三提供多种材质可供选择，并可自由选择漫反射/镜面反射等材质。

点

完成网格后，让我们看看另一个对象——点。其实点就是点的集合，之前很长一段时间都叫粒子系统，r68版本改名为点云，R72版本改名为点。改名主要是因为杜布先生认为粒子系统应该是一个包括粒子的处理和相关物理性质的完整系统，《三分》要简单得多。因此，最终，这个类被命名为点。点数可以用来达到的典型效果是：官方示例

光

上帝说：一定有光！光影效果是丰富画面的重要因素。三提供多种光源，包括环境光、点光源、聚光灯、定向光、半球形光等。只需将所需的光源添加到场景中。

渲染器

场景中有各种各样的物体，还有观察物体的灯和相机。是时候渲染你在屏幕上看到的东西了。这就是渲染的作用。渲染器绑定画布对象，并可以设置大小和默认背景颜色等属性。调用Renderer的渲染功能，传入场景和相机，就可以将图像渲染到画布上。

让画面移动

既然有了静态图片，我们如何让它移动呢？想法很简单，改变场景中物体的位置、角度和各种属性，然后再次调用render函数进行渲染。那么如何确定重新渲染的时机呢？HTML5为我们提供了requestAnimFrame，它会在每次页面重绘之前自动调用传入的函数。如果我们开始这样渲染：

function render(){ renderer . render(场景，相机)；}只需将其更改为：

函数render(){ requestAnimationFrame(render)；object . position . x=1；renderer.render(场景、摄像机)；}对象可以移动！

给我一个栗子

让我们用一个简单的例子来梳理这个过程。先用Canvas元素写一页。

！doctype html head metharset=' utf-8 ' title cube/title script src=' http:http://sqmg.qq.com/QQ _ product _ operations/MMA/javanli _ test/lib/three . min . js '/script style type=' text/CSS ' html，body { margin : 0；padd : 0；} # three _ canvas { position : absolute；宽度： 100%；高度： 100%；}/style/head body canvas id=' three _ canvas '/canvas/body/html下面要做的部分是Javascript首先初始化Renderer

函数initRenderer(){ width=document . getelementbyid(' three _ canvas ')。clientWidthheight=document . getelementbyid(' three _ canvas ')。clientHeightrenderer=new three . webglrenderer({//将Canvas绑定到renderercanvas : document . getelementbyid(' three _ Canvas ')})；renderer.setSize(宽度、高度)；//将渲染大小设置为与画布相同。renderer . setclearcolor(0x ffffff，1.0)；//设置默认颜色和透明度}初始化场景：

函数initScene() { scene=new THREE。场景()；}初始化相机：

函数initCamera() { //简单的正交投影相机，正对着视口的中心，视口大小与帆布大小相同相机=新的三。正字法（宽/-2,宽/2,高/2,高/-2,1,1000);//设置相机的位置照相机。位置。x=0；相机。位置。y=0；摄像机。位置。z=200//设置相机的上方向照相机。起来。x=0；照相机。起来。y=1；照相机。起来。z=0；//设置相机聚焦的位置（其实就是确定一个方向)camera.lookAt({ x: 0，y: 0，z : 0 })；}要唯一确定一个相机的位置与方向，位置，向上，看三个属性是缺一不可的。这里我们创建了一个正交投影相机，这里我将视景体大小与屏幕分辨率保持一致只是为了方便，这样坐标系中的一个单位长度就对应屏幕的一个像素了。我们将相机放在Z轴上，面向坐标原点，相机的上方向为Y轴方向，注意起来的方向和看的方向必然是垂直的（类比自己的头就知道了)。

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

函数initObject() { //创建一个边长为100的立方体变化几何=新三。立方体几何(100,100,100);对象=新的三.网格（几何，新三. mesnormalmaterial())；scene.add(对象);}注意我们使用了法向材质网状正常材料，这样立方体每个面的颜色与这个面对着的方向是相关的，更便于观察/调试。

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

函数render(){ requestAnimationFrame(渲染)；对象。旋转。x=0.05对象。旋转。y=0.05renderer.render(场景、摄像机);}每次重绘都让这个立方体转动一点点。当页面加载好时，调用前面这些函数就好了

函数trip start(){ initRenderer()；initCamera()；init scene()；initObject()；render()；}窗口。onload=TripStart()；完整的演示是这个样子的：

！DOCTYPE html html head meta charset=' UTF-8 '标题立方体/title脚本src=' http :http://sqimg。QQ。com/QQ _ product _ operations/MMA/javanli _ test/lib/三。量滴js '/脚本样式类型=' text/CSS ' html，正文{ margin : 0；padd : 0；} # three _ canvas { position : absolute；宽度： 100%;高度： 100%;}/style/head dy canvas id=' three _ canvas '/拉票脚本定义变量渲染器、摄像机、场景、灯光、对象；不同宽度、高度；函数initRenderer(){ width=document。getelementbyid(' three _ canvas ').clientWidthheight=文档。getelementbyid(' three _ canvas ').clientHeight渲染器=新的三.WebGLRenderer({ canvas :文档。getelementbyid(' three _ canvas ')})；renderer.setSize(宽度、高度);渲染器。setclearcolor(0xfffffff，1.0)；}函数initCamera() { camera=new THREE .正字法（宽/-2,宽/2,高/2,高/-2,1,1000);照相机。位置。x=0；相机。位置。y=0；摄像机。位置。z=200照相机。起来。x=0；照相机。起来。y=1；照相机。起来。z=0；camera.lookAt({ x: 0，y: 0，z : 0 })；}函数initScene() { scene=new THREE .场景();}函数initObject(){ var几何=new THREE .立方体几何(100,100,100);对象=新的三.网格（几何，新三. mesnormalmaterial())；scene.add(对象);}函数render(){ requestAnimationFrame(渲染)；对象。旋转。x=0.05对象。旋转。y=0.05renderer.render(场景、摄像机);}函数3pstart(){ initRenderer()；initCamera()；init scene()；initObject()；render()；}窗口。onload=TripStart()；/脚本/正文/html保存为超文本标记语言后打开，在屏幕中央会显示这样一个转动的立方体

小结

对三。射流研究…的介绍就到这里了，本文对三中的重要组件基本上都有提到。其实想要总结的东西还有很多，但写在这一篇里可能会显得很累赘，这篇文章的初衷是想要读者读后对三。射流研究…有一个直观的大体上的理解，并不打算牵涉太多细节。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。