今天开始我们进入一个新的世界,那就是3D世界。由于我自己也是刚接触到这块内容,所以如果文章中有问题,请尽快在文章最后的留言板中请指出。本教程有配套代码仓库,请点击https://github.com/KaiOrange/three.js-demo。
为什么要使用three.js
要回答为什么要使用three.js?首先我们想想什么是three.js?官方给的简绍很简单:JavaScript 3D library
,就是一个JavaScript的3D库。前端实现3D效果无非这么几种方式:
1.CSS 3D技术;
2.SVG;
3.WebGL技术;
4.Canvas或者图片等来模拟3D。
其中最后一种是用其他技术或方法去模拟3D效果,前3种才是浏览器真正意义上支持的3D技术。而three.js直接支持前3种渲染方式,可以看出three.js的强大。
大多情况下如果是为了展示3D的效果,那么直接用图片就可以了,如果要动起来的话,视频往往可以胜任。但是如果有交互视频就不行了,前端的3D技术弥补了视频的交互部分。而交互中逻辑性比较多,这样的话JavaScript来做会更有优势,所以WebGL技术就脱颖而出,首先我们来看一个WebGL的例子:
1 |
|
这段代码比较长,出来的效果很简单,只是一个小方块(只是一个正方形,还不是正方体)。具体效果如下:
我们来简单的看一下代码吧,代码中通过canvas.getContext("webgl")
来获取到WebGL
的上下文,对于稍微低版本的浏览器可以使用experimental-webgl
来获取,还记得之前canvas吗?当时是通过2d
来获取canvas的上下文对象。上述代码中,核心代码是initShader()
方法,它初始化了着色器,我们这里用到了2个着色器:fragmentShader和vertexShader。正如他们的命名一样,第一个是片元着色器
,第二个是顶点着色器
。上述中还有2段String类型的代码,也就是字符串vertexShaderSource
和字符串fragmentShaderSource
的值,这两段代码是一种被称作GLSL ES
的着色器语言(Shading Language),其实WebGL这一套都是来自于一种叫做OpenGL的技术,完全可以理解为WebGL提供了一层API来调用系统底层的OpenGL。也就是说WebGL把字符串的GLSL ES
代码变成系统可以执行的OpenGL的代码,期间经过compileShader(),shaderSource(),compileShader(),attachShader()linkProgram()
等多个JS方法。
到这里估计你也头大了,什么着色器,什么GLSL ES
,什么Shader,把人搞的痛苦地!!!别急,正因为原生的WebGL这么晦涩难懂,所以才有了我们的主角three.js。现在你可以忘掉上面的内容,因为three.js封装的特别好,根本看不到任何WebGL的影子,你再也不需要去了解什么着色器,更不用写GLSL ES
,我们先来看一个更高级且更简单的three.js的例子。
初识three.js
three.js可以使用模块化引入,当然也可以直接用script标签
来引入。在具体项目中完全可以搭配React和Vue这样的MVVM框架,这里图简单就直接用script标签
来引入。当写这篇文章的时候three.js的最新版本是r111
,你可以在这里查看最新的版本。
我们首先来运行一下官方给的例子,源代码点击这里:
1 |
|
代码非常少,出来的效果却是很惊艳:
我们来分析一下官方例子的代码,首先创建了一个相机(THREE.PerspectiveCamera),它描述了眼睛看的方向;然后创建了一个场景(THREE.Scene);再之后把小物块(THREE.Mesh)放在场景上;最后渲染出来(THREE.WebGLRenderer)的DOM元素(canvas)追加到body上。animate
函数的作用是启动动画,动画的原理就是每次改变一点点,然后重新渲染,这跟Canvas是一模一样的,不了解这块的同学可以看看这篇。
最后我们给出一张图来结束本章,这个就是three.js的基本模式,其中光线我们还没有涉及到: