示例代码托管在：http://www.github.com/dashnowords/blogs

博客园地址：《大史住在大前端》原创博文目录

华为云社区地址：【你要的前端打怪升级指南】

浮雕模型，简单地说就是在木板上刻字时所形成的效果，如果把字的部分都剔除掉，就得到一个凹浮雕模型，如果把字以外的部分都剔除掉，就得到一个凸浮雕模型。本文分别对利用Three.js在Web环境中生成凹浮雕模型时的几种策略进行讲解。

一. 方案1：ThreeBSP.js或ThreeCSG.js扩展库

在众多技术博客里，提及最多的就是上述两个库，它们声称是Three.js的扩展库，用来对模型进行实体布尔操作。

But！不要用！不要用！不要用！

查看github的仓库就可以发现，这两个库早在N年前已经停止维护，完全是没有保障的。而笔者亲测后发现除了官方提供的示例外，它们连最基本的立方体挖孔都无法做到，按照官方示例的写法最终只得到了下面的模型，而笔者原本的期望是在大立方体上挖出一个小立方体凹槽，字体模型就更不用提了。

二. 方案2：平面镂空模型拉伸

由于期望实现的凹浮雕模型并不算复杂，可以换一种实现思路，先在平面上生成一个矩形，然后从其中去掉字体的形状，最后再将剩余的部分拉伸成几何体，当然如果期望的浮雕模型并没有完全穿过毛坯模型时，还需要使用一个额外的立方体来补全剩余的部分。

字体文件的加载是异步的，当完成加载后，就可以获得字体对象，将它传入下面的函数来生成一个大小为40的M字符，它本质上是一个shape实例，将其作为参数就可以生成拉伸体模型：

所有的shape实例都有holes属性，顾名思义它就是用来在封闭的平面图形上进行挖孔操作的，正好符合凹浮雕模型的制作需求，我们只需要生成一个尺寸略大于字体模型包围盒的矩形，然后将字体模型的数据填入包围盒shape实例的holes数组中，Three.js就可以自动将其识别为孔：

关键代码如下所示（完整示例可在附件或文章开头的github仓库中获取）：

/*在平面上生成镂空字体*/     function calcShape(font) {         fontShape = font.generateShapes('M',40);         boxShape = new THREE.Shape();         boxShape.moveTo(-20,-20);         boxShape.lineTo(50,-20);         boxShape.lineTo(50,50);         boxShape.lineTo(-20,50);         boxShape.lineTo(-20,-20);         boxShape.holes.push(fontShape[0]);         return boxShape; } /*生成拉伸体*/  textGeometry = new THREE.ExtrudeGeometry(calcShape(font), {                     depth:10,                     bevelEnabled: false,                     curveSegments: 4                 }); 

对于更为复杂的模型，这种方式仍然显得不够直观。

三. 方案3：Cinema 4D建模后输出模型文件

Three.js这种基于编程的建模方式并不够直观，面对复杂模型时，通用的解决办法是使用三维建模软件进行模型构建，然后导出