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

<body onload="main()">
<canvas id="glcanvas" width="640" height="480">
你的浏览器似乎不支持或者禁用了 HTML5 <code><canvas></code> 元素。
</canvas>
</body>

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

准备 WebGL 上下文

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

<html>
<head>
<title>webgl测试</title>
</head>
<body onload="main()">
<canvas id="glcanvas" width="640" height="480">
你的浏览器似乎不支持或者禁用了 HTML5 <code><canvas></code> 元素。
</canvas>
<script>
// 从这里开始
function main() {
const canvas = document.querySelector("#glcanvas");
// 初始化 WebGL 上下文
const gl = 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>

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

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>
<script src="./three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>

本段代码渲染效果如下:一个3D旋转的正方体

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

基本3个步骤:

1.创建场景

2场景中添加展示物体

3.渲染场景(这里如果不使用render渲染场景,页面不会有任何展示)

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.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）。下面这张图可以帮助你理解：

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

这几个参数所限定的绿色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立方体）。

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

渲染场景（Rendering the scene）

我们需要一个 渲染循环（render loop）才能让他场景展示

这将创建一个循环，以每秒60次的频率来绘制场景,且使用 cube.rotation为场景中的物体添加动画

var render = function () {
requestAnimationFrame( render );

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;

renderer.render(scene, camera);
};

3D字体制作

需要引入的js库

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对象:

var datGui = new dat.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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ThreeJS的3D文字场景</title>

<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>

<script src="https://johnson2heng.github.io/three.js-demo/lib/js/utils/GeometryUtils.js"></script>

<script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script>

<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script>

<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script>

<style type="text/css">
html, body {
margin: 0;
height: 100%;
}

canvas {
display: block;
}

</style>
</head>
<body onload="draw();">
</body>

<script>
var renderer;

function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true});
//renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); //设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}

var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 200, 500);
}

var scene;

function initScene() {
scene = new THREE.Scene();
}

var light;

function initLight() {
scene.add(new THREE.AmbientLight(0x404040));

light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
}

function initModel() {

//轴辅助（每一个轴的长度）
object = new THREE.AxesHelper(50);
scene.add(object);
}

//生成模型
function createMesh(geom) {

//设置当前的模型矩阵沿xy轴偏移，让图片处于显示中心
geom.applyMatrix(new THREE.Matrix4().makeTranslation(-250, -100, 0));

// 创建法向量纹理
var meshMaterial = new THREE.MeshNormalMaterial({
flatShading: THREE.FlatShading,
transparent: true,
opacity: 0.9
});

// 创建一个线框纹理
var wireFrameMat = new THREE.MeshBasicMaterial();
wireFrameMat.wireframe = true;

// 创建模型
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

return mesh;
}

//初始化性能插件
var stats;

function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}

//用户交互插件鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;

function initControls() {

controls = new THREE.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设置配置项
var gui;
var text1,text2;
function initGui() {
//声明一个保存需求修改的相关数据的对象
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进行字体加载，供后面的模型使用
var loader = new THREE.FontLoader();
loader.load( './3d/js/Microsoft YaHei_Regular.json', function ( response ) {
gui.font = response;
gui.asGeom();
} );
},
asGeom: function () {
// 删除掉原来的旧模型
scene.remove(text1);
scene.remove(text2);
// 重新创建模型
var options = {
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(new THREE.TextGeometry("InfoQ 15周年庆!", options));
text1.position.z = -100;
text1.position.y = 100;
scene.add(text1);

text2 = createMesh(new THREE.TextGeometry("\n无限生长\n未来可期！", options));
scene.add(text2);
}
};
var datGui = new dat.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();
}

function render() {
renderer.render(scene, camera);
}

//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {
//更新控制器
controls.update();
render();

//更新性能插件
stats.update();
requestAnimationFrame(animate);
}

//渲染到页面
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
initGui();

animate();
window.onresize = onWindowResize;
}
</script>
</html>

实例当中所用到的字体可通过 http://gero3.github.io/facetype.js/转换

效果如下:

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

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

这只是three.js的基本用法,想更好地掌握和运用three.js,创建更多炫酷的3D场景,需要拥有丰富的空间思维和空间想象力.three.js还有更多强大的3D场景待你发掘......

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

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

那什么是WebGL呢?

WebGL的使用条件

支持 WebGL 的浏览器

Three.js入门

我们从一个例子入手:

3D字体制作

Recommend

Three.js 初探 - 微场景制作

网页中这10种字体的运用方式，不会让人觉得Low

酷炫的 HTML5 网页 PPT - Jartto's blog

利用HTML5 Web Audio API给网页JS交互增加声音

中文网页字体设置方案：从 font-family 到 font-display

网页安全字体

HTML5扩展之微数据与丰富网页摘要

HTML5 Canvas在预加载完字体后绘图

html5 javascript 网页响应式设计方案,网页适配方案

如何制作简易的HTML5幻灯片

About Joyk