threejs利用svg拉伸形成立体图

1.效果

1.svg图片转化成threejs对象

这里我们用到了别人写好的函数transformSVGPathExposed()，这个函数传入的变量是svg图片的路径字符串，输出的是threejs中shape对象。
https://johnson2heng.github.io/three.js-demo/lib/js/libs/d3-threeD.js
我们在vue中引入上述js文件需要做一点小小修改。
原文件如下：

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */
var transformSVGPathExposed;

function d3threeD(exports) {
   

  const DEGS_TO_RADS = Math.PI / 180,
    UNIT_SIZE = 1;

  const DIGIT_0 = 48,
    DIGIT_9 = 57,
    COMMA = 44,
    SPACE = 32,
    PERIOD = 46,
    MINUS = 45;
  function transformSVGPath(pathStr) {
   
    // 函数实现方法
  }

  transformSVGPathExposed = transformSVGPath;

  function applySVGTransform(obj, tstr) {
   
	// 函数实现方法
  }
   applySVGTransformExposed