虎年了，最近爱上了threejs 框架，看着threejs 示例的老虎头比较帅，研究下，怎么弄的这只高质量老虎。

效果演示

---

• 官网例子链接传送门
• 例子代码文件名称 webgl_loader_svg

 

技术分解

---

这个老虎头是怎么实现的呢，用到了哪些知识，svg 并不陌生了，但是填充变化怎么能做到这样呢？

带着这些问题，分解下技术点，然后逐个击破，再一一分解源码。

整体思路

1. SVG 绘制老虎图像,fill 和 stroke 用标签区分起来
2. SVGLoader加载SVG图片路径
3. 循环遍历路径创建ShapeGeometry几何体和材质，并生成mesh,用group 收集
4. threejs 利用webglRender 渲染group mesh

具体问题

• SVG 如何绘制 标签的含义
• SVGLoader
• 怎么实现stroke和fill

源码分析

带着这些问题看看源码是怎么实现的这个过程，threejs 基本场景的略过，具体可以去看源码。

SVG 老虎路径分析

svg 基础就不说了，具体自行百度

看一下老虎的svg 图片是怎么画的，太长了700多行，无非两种style,一种 stroke 一种 fill

 <g style="stroke:#4c0000; stroke-width:2"><path d="M22.2 63.4C22.2 63.4 6.8 52.4 5.8 51C5.8 51 -1.2 40 -14.2 39.6C-14.2 39.6 -35.6 40.4 -52.8 48.4"/></g><g style="fill: #4c0000"><path d="M-3 42.8C-3 42.8 8.6 48.4 11.2 51.2C13.8 54 27.8 65.4 27.8 65.4C27.8 65.4 22.4 63.4 19.8 61.6C17.2 59.8 6.4 51.6 6.4 51.6C6.4 51.6 2.6 45.6 -3 42.8z"/></g>

g 标签简单的介绍下：

group缩写，svg 形状分组的意思，可以用g 标签划分。 详细传送门。

我们可以利用style 属性划分线条和填充，这样有可以区分开来，一会将这些数据源path 进行单独处理。

SVGLoader加载svg 图片

const loader = new SVGLoader();
loader.load( url, function ( data ) {const paths = data.paths;console.log(paths);
}

打印看看，都加载的什么玩意：

打印内容来看svg 图片路径已经被处理成了一个对象，这个对象是一个嵌套的数，我们可以通过userData 属性拿到style参数。

将路径变成Mesh 渲染

渲染分为stroke 和 fill 两种处理方式，下面代码是 整个过程的核心步骤，详细注释写到代码上！！！

	function loadSVG(url) {//  场景创建scene = new THREE.Scene();scene.background = new THREE.Color(0xb0b0b0);// 格子坐标助手const helper = new THREE.GridHelper(160, 10);helper.rotation.x = Math.PI / 2;scene.add(helper);//SVG 加载器const loader = new SVGLoader();loader.load(url, function (data) {// 加载svg 路径const paths = data.paths;// 创建threejs 组const group = new THREE.Group();group.scale.multiplyScalar(0.25);group.position.x = -70;group.position.y = 70;group.scale.y *= -1;// 遍历加载的所有路径for (let i = 0; i < paths.length; i++) {const path = paths[i];// 获取fillColorconst fillColor = path.userData.style.fill;// 如果选择drawFillShapes 模式，且 有填充色，if (guiData.drawFillShapes &&fillColor !== undefined &&fillColor !== "none") {//创建材质const material = new THREE.MeshBasicMaterial({color: new THREE.Color().setStyle(fillColor).convertSRGBToLinear(),opacity: path.userData.style.fillOpacity,transparent: true,//双面side: THREE.DoubleSide,depthWrite: false,//将几何体渲染为线框。wireframe: guiData.fillShapesWireframe,});//SVGLoader创建形状const shapes = SVGLoader.createShapes(path);for (let j = 0; j < shapes.length; j++) {const shape = shapes[j];//得到形状几何体const geometry = new	 THREE.ShapeGeometry(shape);// 得到物体const mesh = new THREE.Mesh(geometry, material);group.add(mesh);}}const strokeColor = path.userData.style.stroke;if (guiData.drawStrokes &&strokeColor !== undefined &&strokeColor !== "none") {const material = new THREE.MeshBasicMaterial({color: new THREE.Color().setStyle(strokeColor).convertSRGBToLinear(),opacity: path.userData.style.strokeOpacity,transparent: true,side: THREE.DoubleSide,depthWrite: false,wireframe: guiData.strokesWireframe,});for (let j = 0, jl = path.subPaths.length; j < jl; j++) {const subPath = path.subPaths[j];//这里是fill 和 stroke 的区分，几何体是strokeconst geometry = SVGLoader.pointsToStroke(subPath.getPoints(),path.userData.style);if (geometry) {const mesh = new THREE.Mesh(geometry, material);group.add(mesh);}}}}scene.add(group);render();});}

这样我们就可以利用fill 和 stroke 分来进行渲染显示老虎了。

wireframe

还有一个问题就是 wireframe，材质的是干什么的呢？

.wireframe : Boolean
将几何体渲染为线框。默认值为false（即渲染为平面多边形）。

看下基础材质的例子就明白了，传送门

wireframe 设置为false:

wireframe 设置为true:

星宇大前端，一个专注于大前端技术干货的公众号，关注回复前端资源获取大前端全栈礼包。