深入理解three.js对svg的支持（三）：svg转three对象

前言：SVG作为一种优秀的矢量图形格式在Web得到广泛应用，three.js作为知名的WebGL库自然也对其提供了支持。然而，官方文档中对此的说明十分单薄，网上与此相关的资源也不多。经过多次试验之后，在此分享我的一点理解，包括SVGLoader，SVGObject，SVGRenderer，svg和THREE对象的互相转化等内容。

3 svg图像转为THREE对象

难道就没有办法实现如引擎般顺滑地操作svg元素了么！查找和学习相关资源的时间都够自己写出来了——不，作为一个坚定的伸手党，不要退缩，手套会掉，坚决不自己写！我们要注重路上的风景！（一口齁咸的鸡汤下肚）

在第一部分中，载入的svg终究是svg文件，如果能够转为THREE的原生对象该多好啊，任何熟悉的THREE操作都可以用上了。在上一部分中我们见识到了SVGRenderer三维对象转svg的功能，本部分要做的事与它恰恰相反：将svg转为THREE.Shape对象。

3.1 svg到THREE形状

果然有人实现了这个功能1，《ThreeJS开发指南》这本书里也提到过这个，网上也有个人将之进行改进做了案例2，但案例的展示效果太烂，不仔细啥也看不见……

最原始的当然是1中的代码，作者自己写了一个svg到THREE.Shape，进而通过extrude拉伸成体的功能。不过这个代码已经非常obselete，用的很多THREE的API都过时了，但还是值得一看，只是作者实在是……所有的东西全都写得耦合到一起了。

为了更加方便操作，我们当然希望能够输入svg的path，输出THREE.Shape。于是需要对其进行修改（解码相关代码没有修改，不再赘述，有兴趣的阅读d3-threeD源码）：

function d3threeD(exports) {
   
    ...

    exports.transformSVGPath =
    function transformSVGPath