前言
在学习Three.js之前,我们先来了解WebGL,因为WebGL是Three.js的基础和规范.
那什么是WebGL呢?
WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。
WebGL(图形库是一个JavaScript API)在任何连接的WebGL中渲染图形的API,Web3D和Web3D的图形应用程序,可以单独使用一个WebGL通过引入与OpenGL 2.0一致的浏览器来使用WebGL 2.0
WebGL完美地解决了现有的Web交互式三维动画的两个问题:
第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件的支持;
第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。
WebGL的使用条件
WebGL 使得在支持 HTML 的 canvas 标签的浏览器中
支持 WebGL 的浏览器
支持 WebGL 的浏览器有:Firefox 4+、Google Chrome 9+、Opera 12+、Safari 5.1+ 、 Internet Explorer 11+(当然IE已经退出历史舞台) 和Microsoft Edge build 10240+;然而,WebGL 的一些特性目前也需要用户的硬件设备支持。
WebGL 2 API 引入了对光源的 OpenGL ES 3.0 功能集的支持;它是通过WebGL2RenderingContext界面提供的。
<canvas> 元素也被 Canvas API 用于在网页上进行 2D 图形处理。
举个入门的例子:
准备 3D 渲染
为了使用 WebGL 进行 3D 渲染,你首先需要一个 canvas 元素。下面的 HTML 片段用来建立一个 canvas 元素并设置一个 onload 事件处理程序来初始化我们的 WebGL 上下文 。
#检测浏览器是否支持webGL
<bodyonload="main()"><canvasid="glcanvas"width="640"height="480"> 你的浏览器似乎不支持或者禁用了 HTML5 <code><canvas></code> 元素。 </canvas></body>
如果页面空白没有提示说明你的浏览器支持WebGL
准备 WebGL 上下文
JavaScript 代码中的 main()
函数将会在文档加载完成之后被调用。它的任务是设置 WebGL 上下文并开始渲染内容。
<html><head><title>webgl测试</title></head><bodyonload="main()"><canvasid="glcanvas"width="640"height="480"> 你的浏览器似乎不支持或者禁用了 HTML5 <code><canvas></code> 元素。 </canvas><script>// 从这里开始functionmain() { constcanvas=document.querySelector("#glcanvas"); // 初始化 WebGL 上下文constgl=canvas.getContext("webgl"); // 确认 WebGL 支持性if (!gl) { alert("无法初始化 WebGL,你的浏览器、操作系统或硬件等可能不支持 WebGL。"); return; } // 使用完全不透明的浅黄色清除所有图像gl.clearColor(255, 70.0, 0.0, 1.0); // 用上面指定的颜色清除缓冲区gl.clear(gl.COLOR_BUFFER_BIT); } </script></body></html>
1.获取 canvas 的引用,把它保存在 ‘canvas’ 变量里。
2.获取到 canvas 之后,我们会调用getContext 函数并向它传递"webgl"
参数,来尝试获取WebGLRenderingContext。如果浏览器不支持 webgl,getContext
将会返回null
,我们就可以显示一条消息给用户然后退出。
3.如果 WebGL 上下文成功初始化,变量 ‘gl’ 会用来引用该上下文。在这个例子中,我们用浅黄色清除上下文内已有的元素。(用背景颜色重绘 canvas)。
Three.js入门
使用WebGL原生的API来书写3D程序是一件非常痛苦且艰难的事.调用原生的API需要考虑解决各平台之间的差异产生的兼容问题,这时候很多大佬看到问题所在,封装了THREE.js和BABYLON.js等很多框架封装了 WebGL,提供了各个平台之间的兼容性。使用这些框架而非原生的 WebGL 可以更容易地开发 3D 应用和游戏。
Three.js也是我开发3D场景最常用的一个框架,一般运用于各种动画场景,3D街景展示,3D地图展示等.
创建一个WebGL程序,你基本上需要4个步骤:
- 初始化WebGL绘图上下文
- 初始化着色器程序
- 建立模型和数据缓存
- 完成绘制和动画
这基本是一种过程式编程,而Three.js则不尽相同,其使用面向对象的方式来构建程序,包含3个基本对象: 场景(scene), 相机(camera), 以及一个渲染器(renderer)。 拿电影来类比的话,场景对应于整个布景空间,相机是拍摄镜头,渲染器用来把拍摄好的场景转换成胶卷(对于网页来讲,是电脑屏幕)。 场景和相机代表了3D观察空间和数据模型,渲染器则包含了WebGL绘图上下文和着色器。
我们从一个例子入手:
<html><head><title>我的第一个three.js app</title><style>body { margin: 0; } canvas { width: 100%; height: 100% } </style></head><body><scriptsrc="./three.js"></script><script>varscene=newTHREE.Scene(); varcamera=newTHREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); varrenderer=newTHREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); vargeometry=newTHREE.BoxGeometry(1, 1, 1); varmaterial=newTHREE.MeshBasicMaterial({ color: 0x00ff00 }); varcube=newTHREE.Mesh(geometry, material); scene.add(cube); camera.position.z=5; varanimate=function() { requestAnimationFrame(animate); cube.rotation.x+=0.01; cube.rotation.y+=0.01; renderer.render(scene, camera); }; animate(); </script></body></html>
本段代码渲染效果如下:一个3D旋转的正方体
基本3个步骤:
1.创建场景
2场景中添加展示物体
3.渲染场景(这里如果不使用render渲染场景,页面不会有任何展示)
varscene=newTHREE.Scene(); varcamera=newTHREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); varrenderer=newTHREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
上面的代码构建了scene, camera 和 renderer。Three.js的架构支持多种camera,这里使用最常见的远景相机(PerspectiveCamera),也就是类似于人眼观察的方式。第一个属性75设置的是视角(field of view)。
第二个属性设置的是相机拍摄面的长宽比(aspect ratio)。我们几乎总是会使用元素的宽除以高,否则会出现挤压变形。
接下来的2个属性是近裁剪面(near clipping plane) 和 远裁剪面(far clipping plane)。下面这张图可以帮助你理解:
这几个参数所限定的绿色3D空间被称之为视椎体(View Frustum),用来裁剪视图,在该视锥体以外的物体将不会被渲染。我们暂时可以先不管,但你需要了解这个空间和渲染性能有关。
接下来是渲染器,所有魔法效果都在这里产生。除了我们这里使用的WebGLRenderer,three.js还支持一些其它渲染器,基本上只是用来回退处理那些不支持WebGL的旧式用户浏览器。
除了创建renderer实例,我们还需要设置渲染空间的尺寸,一般就使用目标屏幕的宽高(window.innerWidth和window.innerHeight),也可以给定一个小尺寸。
如果你想保持渲染空间的尺寸,但使用一个较低的分辨率,你可以在调用setSize的时候设置参数updateStyle为false,比如 setSize(window.innerWidth/2, window.innerHeight/2, false) 将使用1/2分辨率来绘制你的应用程序,假定<canvas>为100%的宽高。
最后,我们把 renderer 元素添加到HTML文档中。这里是一个 <canvas> 元素,渲染器用来显示场景。
在场景中添加展示物体
上面的都是准备工作,电影布景都好了,演员还没进场。接下来我们添加“演员”(3D立方体)。
vargeometry=newTHREE.BoxGeometry( 1, 1, 1 ); varmaterial=newTHREE.MeshBasicMaterial( { color: 0x00ff00 } ); varcube=newTHREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z=5;
渲染场景(Rendering the scene)
我们需要一个 渲染循环(render loop)才能让他场景展示
这将创建一个循环,以每秒60次的频率来绘制场景,且使用 cube.rotation为场景中的物体添加动画
varrender=function () { requestAnimationFrame( render ); cube.rotation.x+=0.1; cube.rotation.y+=0.1; renderer.render(scene, camera); };
3D字体制作
需要引入的js库
<scriptsrc="three.js"></script><scriptsrc="GeometryUtils.js"></script><scriptsrc="OrbitControls.js"></script><scriptsrc="stats.min.js"></script><scriptsrc="dat.gui.min.js"></script>
GeometryUtils.js是几何体类库,Geometry类库是api中所有几何要素的类的父类或者基类,构造函数为new THREE.Geometry()。在3D当中,物体都是由网格构成的,而网格的组织规则是通过几何体(Geometry)来定义。在three.js中,有两类几何体,我把它们叫做基本几何体和buffer几何体。基本几何体的顶点位置,缩放,旋转角,颜色,法线信息都是保存在特定的类里面,比如顶点位置使用Vector3,颜色信息使用Color。three.js中基本上是每个基本几何体都有一个buffer几何体与之对应,而且两者的创建方式和参数基本一致.
dat.gui.min.js是three.js调试的利器,该工具类为你调试three.js的各项参数提供可视化操作,你可以声明一个对象,对象内包括所有需要修改的属性,比如:
gui= { lightY:30, //灯光y轴的位置sphereX:0, //球的x轴的位置sphereZ:0, //球的z轴的位置cubeX:25, //立方体的x轴位置cubeZ:-5//立方体的z轴的位置};
接着就可以实例化GUI对象:
vardatGui=newdat.GUI(); //将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值)datGui.add(gui,"lightY",0,100); datGui.add(gui,"sphereX",-30,30); datGui.add(gui,"sphereZ",-30,30); datGui.add(gui,"cubeX",0,60); datGui.add(gui,"cubeZ",-30,30);
按照下面的方式就可以修改控制相关参数的变化
//更新相关位置light.position.y=gui.lightY; sphere.position.x=gui.sphereX; sphere.position.z=gui.sphereZ; cube.position.x=gui.cubeX; cube.position.z=gui.cubeZ;
它最常用的方法就是添加控件add(),监听控件listen()
gui.add(obj, 'key').listen();
stats.min.js是three.js的性能监测插件.我们可以通过stats知道实时的FPS信息,从而更好地监测动画渲染效果,具体的使用在下面例子中展现
OrbitControls是相机控件,通过OrbitControls.js可以对Three.js的三维场景进行缩放、平移、旋转操作,本质上改变的并不是场景,而是相机的参数,相机的位置角度不同,同一个场景的渲染效果是不一样,比如一个相机绕着一个场景旋转,就像场景旋转一样。它的源码在Three.js\examples\js\controls
目录下的OrbitControls.js
文件
了解了相关插件的作用,接下来进入实操:
<htmllang="en"><head><metacharset="UTF-8"><title>ThreeJS的3D文字场景</title><scriptsrc="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script><!--几何体类库--><scriptsrc="https://johnson2heng.github.io/three.js-demo/lib/js/utils/GeometryUtils.js"></script><!--相机控件--><scriptsrc="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script><!--性能控件--><scriptsrc="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script><!--可视化调试--><scriptsrc="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script><styletype="text/css">html, body { margin: 0; height: 100%; } canvas { display: block; } </style></head><bodyonload="draw();"></body><script>varrenderer; functioninitRender() { renderer=newTHREE.WebGLRenderer({antialias: true}); //renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); //设置背景颜色renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } varcamera; functioninitCamera() { camera=newTHREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000); camera.position.set(0, 200, 500); } varscene; functioninitScene() { scene=newTHREE.Scene(); } varlight; functioninitLight() { scene.add(newTHREE.AmbientLight(0x404040)); light=newTHREE.DirectionalLight(0xffffff); light.position.set(1, 1, 1); scene.add(light); } functioninitModel() { //轴辅助 (每一个轴的长度)object=newTHREE.AxesHelper(50); scene.add(object); } //生成模型functioncreateMesh(geom) { //设置当前的模型矩阵沿xy轴偏移,让图片处于显示中心geom.applyMatrix(newTHREE.Matrix4().makeTranslation(-250, -100, 0)); // 创建法向量纹理varmeshMaterial=newTHREE.MeshNormalMaterial({ flatShading: THREE.FlatShading, transparent: true, opacity: 0.9 }); // 创建一个线框纹理varwireFrameMat=newTHREE.MeshBasicMaterial(); wireFrameMat.wireframe=true; // 创建模型varmesh=THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]); returnmesh; } //初始化性能插件varstats; functioninitStats() { stats=newStats(); document.body.appendChild(stats.dom); } //用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放varcontrols; functioninitControls() { controls=newTHREE.OrbitControls(camera, renderer.domElement); // 如果使用animate方法时,将此函数删除//controls.addEventListener( 'change', render );// 使动画循环使用时阻尼或自转 意思是否有惯性controls.enableDamping=true; //动态阻尼系数 就是鼠标拖拽旋转灵敏度//controls.dampingFactor = 0.25;//是否可以缩放controls.enableZoom=true; //是否自动旋转controls.autoRotate=false; //设置相机距离原点的最远距离controls.minDistance=20; //设置相机距离原点的最远距离controls.maxDistance=10000; //是否开启右键拖拽controls.enablePan=true; } //生成gui设置配置项vargui; vartext1,text2; functioninitGui() { //声明一个保存需求修改的相关数据的对象gui= { size: 90, height: 90, bevelThickness: 2, bevelSize: 0.5, bevelEnabled: true, bevelSegments: 3, curveSegments: 12, steps: 1, fontName: "helvetiker", fontWeight:"bold", weight: "normal", font:null, style:"italics", changeFont:function () { //创建loader进行字体加载,供后面的模型使用varloader=newTHREE.FontLoader(); loader.load( './3d/js/Microsoft YaHei_Regular.json', function ( response ) { gui.font=response; gui.asGeom(); } ); }, asGeom: function () { // 删除掉原来的旧模型scene.remove(text1); scene.remove(text2); // 重新创建模型varoptions= { size: gui.size, height: gui.height, weight: gui.weight, font: gui.font, bevelThickness: gui.bevelThickness, bevelSize: gui.bevelSize, bevelSegments: gui.bevelSegments, bevelEnabled: gui.bevelEnabled, curveSegments: gui.curveSegments, steps: gui.steps }; text1=createMesh(newTHREE.TextGeometry("InfoQ 15周年庆!", options)); text1.position.z=-100; text1.position.y=100; scene.add(text1); text2=createMesh(newTHREE.TextGeometry("\n无限生长\n未来可期!", options)); scene.add(text2); } }; vardatGui=newdat.GUI(); //将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值)datGui.add(gui, 'size', 0, 200).onChange(gui.asGeom); datGui.add(gui, 'height', 0, 200).onChange(gui.asGeom); datGui.add(gui, 'fontName', ['gentilis', 'helvetiker', 'optimer']).onChange(gui.changeFont); datGui.add(gui, 'fontWeight', ['regular', 'bold']).onChange(gui.changeFont); datGui.add(gui, 'bevelThickness', 0, 10).onChange(gui.asGeom); datGui.add(gui, 'bevelSize', 0, 10).onChange(gui.asGeom); datGui.add(gui, 'bevelSegments', 0, 30).step(1).onChange(gui.asGeom); datGui.add(gui, 'bevelEnabled').onChange(gui.asGeom); datGui.add(gui, 'curveSegments', 1, 30).step(1).onChange(gui.asGeom); datGui.add(gui, 'steps', 1, 5).step(1).onChange(gui.asGeom); //调用生成一次图形gui.changeFont(); } functionrender() { renderer.render(scene, camera); } //窗口变动触发的函数functiononWindowResize() { camera.aspect=window.innerWidth/window.innerHeight; camera.updateProjectionMatrix(); render(); renderer.setSize(window.innerWidth, window.innerHeight); } functionanimate() { //更新控制器controls.update(); render(); //更新性能插件stats.update(); requestAnimationFrame(animate); } //渲染到页面functiondraw() { initRender(); initScene(); initCamera(); initLight(); initModel(); initControls(); initStats(); initGui(); animate(); window.onresize=onWindowResize; } </script></html>
实例当中所用到的字体可通过http://gero3.github.io/facetype.js/转换
效果如下:
总结
这只是three.js的基本用法,想更好地掌握和运用three.js,创建更多炫酷的3D场景,需要拥有丰富的空间思维和空间想象力.three.js还有更多强大的3D场景待你发掘......