HTML5网页3D场景制作之Three.js初体验-制作3D字体-阿里云开发者社区

前言

在学习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>&lt;canvas&gt;</code> 元素。
</canvas></body>

如果页面空白没有提示说明你的浏览器支持WebGL

准备 WebGL 上下文

JavaScript 代码中的 main() 函数将会在文档加载完成之后被调用。它的任务是设置 WebGL 上下文并开始渲染内容。

<html><head><title>webgl测试</title></head><bodyonload="main()"><canvasid="glcanvas"width="640"height="480">    你的浏览器似乎不支持或者禁用了 HTML5 <code>&lt;canvas&gt;</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文件

了解了相关插件的作用,接下来进入实操:

<!DOCTYPE html><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场景待你发掘......

HTML5网页3D场景制作之Three.js初体验-制作3D字体

前言

那什么是WebGL呢?

WebGL的使用条件

支持 WebGL 的浏览器

Three.js入门

我们从一个例子入手:

3D字体制作

总结

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

HTML5网页3D场景制作之Three.js初体验-制作3D字体

前言

那什么是WebGL呢?

WebGL的使用条件

支持 WebGL 的浏览器

Three.js入门

我们从一个例子入手:

3D字体制作

总结

热门文章

最新文章

相关课程

相关电子书