Three.js基础-WEBGL对比介绍

这是Three.js系列文章的第一篇。
Three.js是一个尽可能简化在网页端获取3D
内容的库。

Three.js经常会和WebGL混淆，
但也并不总是,three.js其实是使用WebGL来绘制三维效果的。
WebGL是一个只能画点、线和三角形的非常底层的系统.
想要用WebGL来做一些实用的东西通常需要大量的代码，
这就是Three.js的用武之地。它帮我们处理了像场景、灯光、阴影、材质、贴图、空间运算、几乎所有你需要自己通过WebGL来实现的东西。

这套教程假设你已经了解了JavaScript,因为大部分内容我们将会
用到ES6的语法。点击这里查看你需要提前掌握的东西。
大部分支持Three.js的浏览器都会自动更新，所以部分用户应该都能运行本套教程的代码。
如果你想在非常老的浏览器上运行此代码，
你需要一个像Babel一样的语法编译器。
当然使用非常老的浏览器的用户可能根本不能运行Three.js。

人们在学习大多数编程语言的时候第一件事就是让电脑打印"Hello World!"。
对于三维来说第一件事往往是创建一个三维的立方体。
所以我们从"Hello Cube!"开始。

首先我们需要一个canvas标签。

<body>
  <canvas id="c"></canvas>
</body>

Three.js将会使用这个canvas标签所以我们要先获取它然后传给three.js。

<script type="module">
import * as THREE from './resources/threejs/r115/build/three.module.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});
  ...
</script>

注意这里有一些细节。如果你没有给three.js传canvas，three.js会自己创建一个
，但是你必须手动把它添加到文档中。在哪里添加可能会不一样这取决你怎么使用，
我发现给three.js传一个canvas会更灵活一些。我可以将canvas放到任何地方，
代码都会找到它，假如我有一段代码是将canvas插入到文档中，那么当需求变化时，
我很可能必须去修改这段代码。

在查找到canvas之后我们创建一个WebGLRenderer。渲染器负责拿到你提供的所有数据，
然后将它渲染到canvas上。之前还有其他渲染器，比如CSSRenderer、CanvasRenderer。
在将来可能还会有WebGL2Renderer 或者 WebGPURenderer。目前的话是 WebGLRenderer使用WebGL将三维渲染到canvas上。

接下来我们需要一个摄像机。

const fov = 75;
const aspect = 2;  // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

fov是field of view的缩写。当前的情况是垂直方向为75度。
注意three.js中大多数的角用弧度表示，但是因为某些原因透视摄像机使用角度表示。

aspect指canvas的显示比例。我们将在别的文章详细讨论，但是在默认情况下
canvas是300×150像素，所以aspect为300/150或者说2.。

near和far代表摄像机前方将要被渲染的空间。
任何在这个范围前面或者后面的物体都将被裁剪(不绘制)。

这四个参数定义了一个"frustum"。一个frustum是指一个像被削去顶部
的金字塔形状。换句话说把"frustum"想象成其他形状比如球体、
立方体、棱柱体、截椎体。

近平面和远平面的高度由fov决定。
两个平面的宽度由fov和aspect决定。

截椎体内部的物体将被绘制，截椎体外的东西将不会被绘制。

摄像机默认指向Z轴负方向，上方向朝向Y轴正方向。我们将会把立方体
放置在坐标原点，所以我们需要往后移动摄像机才能看到物体。

camera.position.z = 2;

下面是我们想要达到的效果。

上面的示意图中我们能看到摄像机的位置在z = 2。它朝向
Z轴负方向。我们的截椎体从摄像机前方的0.1到5。因为这张图是俯视图,
fov会受到aspect的影响。canvas的宽度是高度的两倍，
所以水平视角会比我们设置的垂直视角75要大。

然后我们创建一个Scene(场景)。Scene是three.js最基本的组成.
需要three.js绘制的东西都需要加入到scene中。我们将会
在scene是如何工作的中详细讨论。

const scene = new THREE.Scene();

然后我们创建一个包含盒子信息的BoxGeometry。
几乎所有的希望在three.js中显示的物体都需要一个定义了组成三维物体的顶点的几何体。

const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

然后我们创建一个基本的材质并设置它的颜色. Colors的值可以
用css方式和十六进制来表示。

const material = new THREE.MeshBasicMaterial({color: 0x44aa88});

然后创建一个Mesh. Mesh代表了Geometry(物体的形状)和Material (怎么
绘制物体, 光滑还是平整, 什么颜色, 什么贴图等等)的组合，
以及物体在场景中的位置、朝向、和缩放。

const cube = new THREE.Mesh(geometry, material);

最后我们将mesh添加到场景中。

scene.add(cube);

然后我们通过将scene和camera传递给renderer的render方法
来渲染整个场景。

renderer.render(scene, camera);

这里有一个实例。

点击在新标签页中打开

很难看出来这是一个三维的立方体，因为我们
直视Z轴的负方向并且立方体和坐标轴是对齐的，
所以我们只能看到一个面。

我们来让立方体旋转起来，希望
能看出是三维的。为了让它动起来我们需要在渲染循环函数中使用
requestAnimationFrame.

这是我们的渲染循环函数。

function render(time) {
  time *= 0.001;  // convert time to seconds

  cube.rotation.x = time;
  cube.rotation.y = time;

  renderer.render(scene, camera);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

requestAnimationFrame会告诉浏览器你有那些东西想要做动画。
传入一个函数作为回调函数。我们这里的函数是render。浏览器
会调用你的函数然后如果你更新了跟页面显示有关的东西，
浏览器就会重新渲染页面。我们这里是调用three.js的
renderer.render函数来绘制我们的场景。

requestAnimationFrame 会传入从页面加载到
我们函数的时间. 传入的时间是毫秒数。我发现
用秒会更简单所以我们把它转换成秒。

然后我们把立方体的X轴和Y轴方向的旋转角度设置成当前时间。这些旋转角度
是弧度制。一圈的弧度
为2Π所以我们的立方体在每个方向旋转一周的时间为6.28
秒。

然后渲染我们的场景并且调用另一帧动画来继续我们的循环。

在循环的未免我们调用一次requestAnimationFrame来开始循环渲染.

点击在新标签页中打开

效果好了一些但还是很难看出是三维的。添加灯光会有帮助，
所以我们来添加一盏灯光。three.js中有很多种类型的灯光，
我们将在后期文章中详细讨论。现在我们先创建一盏平行光。

{
  const color = 0xFFFFFF;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
  light.position.set(-1, 2, 4);
  scene.add(light);
}

平行光有一个位置和目标点。默认值都为 0, 0, 0。我们这里
设置灯光的位置为 -1, 2, 4 所以它位于摄像机前面的
稍微左上方一点。目标点还是 0, 0, 0 所以它朝向
坐标原点。

我们还需要改变材质。MeshBasicMaterial材质不会受到灯光的
影响。我们将他改成会受灯光影响的MeshPhongMaterial材质。

-const material = new THREE.MeshBasicMaterial({color: 0x44aa88});  // greenish blue
+const material = new THREE.MeshPhongMaterial({color: 0x44aa88});  // greenish blue

下面开始生效了。

点击在新标签页中打开

现在应该可以很清楚的看出是三维的。

为了更有乐趣我们再添加两个立方体。

每个立方体将会使用同一个几何体但是不同的材质，
这样每个立方体将会是不同的颜色。

首先我们创建一个根据指定的颜色生成新材质的函数。
然后函数会根据指定的几何体生成一个mesh，
最后将他添加进场景并设置X轴的位置。

function makeInstance(geometry, color, x) {
  const material = new THREE.MeshPhongMaterial({color});

  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  cube.position.x = x;

  return cube;
}

然后我们将使用三种不同的颜色和X轴位置调用三次函数，
将生成的网格实例存在一个数组中。

const cubes = [
  makeInstance(geometry, 0x44aa88,  0),
  makeInstance(geometry, 0x8844aa, -2),
  makeInstance(geometry, 0xaa8844,  2),
];

最后我们将在渲染函数中旋转三个立方体。我们
给每个立方体设置了稍微不同的旋转角度。

function render(time) {
  time *= 0.001;  // convert time to seconds

  cubes.forEach((cube, ndx) => {
    const speed = 1 + ndx * .1;
    const rot = time * speed;
    cube.rotation.x = rot;
    cube.rotation.y = rot;
  });

  ...

这里是结果.

点击在新标签页中打开

如果你对比上面的示意图可以看到
效果符合我们的预想。位置为X = -2 和 X = +2
的立方体有一部分在我们的截椎体外面。他们大部分是被
包裹的，因为水平方向的视角非常大。

希望这个简短的介绍能帮助你起步。 Next up we'll cover
making our code responsive so it is adaptable to multiple situations.

WEBGL学习网（WebGLStudy.COM）专注提供WebGL 、ThreeJS、BabylonJS等WEB3D开发案例源码下载。
声明信息：
1. 本站部分资源来源于用户上传和网络，如有侵权请邮件联系站长：1218436398@qq.com！我们将尽快处理。
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源打赏售价用于赞助本站提供的服务支出（包括不限服务器、网络带宽等费用支出）！
7.欢迎加QQ群学习交流：549297468 ，或者搜索微信公众号：WebGL学习网
WEBGL学习网 » Three.js基础-WEBGL对比介绍