image - Three.js 从图像导入 svg 路径

Question

我正在尝试在 Three.js 中导入从 svg 图像获取的 svg 路径

我找到了this example使用以下格式:

obj.paths = [
    /// Taipei City
    "M366.2182,108.9780 L368.0329,110.3682 L367.5922,112.4411 L369.9258,116.0311 L368.9827,117.3543 " +
    "L371.5686,119.8491 L370.5599,121.7206 L372.9314,124.8009 L368.8889,126.7603 L369.2695,130.7622 " +
    "L366.1499,130.3388 L363.4698,128.1161 L362.9256,125.6018 L360.8153,126.4025 L360.2968,124.3588 " +
    "L361.9519,121.1623 L360.4475,118.7162 L358.1163,117.8678 L358.7094,115.7577 L361.6243,112.4576 Z",
    /// Keelung City
    "M380.2689,113.3850 L383.5604,114.2370 L383.7404,114.2386 L385.4082,115.6247 L384.9725,117.4631 " +
    "L381.6681,117.9439 L383.0209,121.0914 L379.4649,122.7061 L373.4987,118.8487 L372.0980,114.7589 " +
    "L377.9716,112.0707 Z",
    /// Taipei County
    "M359.4486,155.6690 L357.0422,152.7420 L355.1688,148.0173 L357.1186,145.8045 L354.1323,141.2242 " +
    "L351.1807,141.6609 L348.9387,140.5372 L349.5415,137.8396 L347.5174,136.1694 L347.6299,129.2327 " +
    "L351.4192,128.8067 L354.2518,125.3113 L352.5805,121.8038 L349.3190,120.9429 L344.3277,116.7676 " +
    "L350.9772,115.1221 L354.5759,112.5371 L354.5667,110.6949 L357.4098,105.7489 L362.3963,101.8443 " +
    "L364.4415,101.0819 L364.5314,101.0828 L364.6209,101.1230 L364.7698,101.2029 L368.1221,101.5115 " +
    "L371.7216,104.1338 L372.2958,106.7261 L375.5949,109.6971 L377.0415,108.8875 L377.0737,108.6526 " +
    "L377.4037,108.6165 L376.8840,109.7091 L376.7323,109.9037 L377.9416,112.0705 L371.7970,114.8736 " + 
    "L374.0935,119.4031 L380.7848,122.7963 L382.6529,121.9897 L381.5792,117.8256 L385.0339,117.3069 " +
    "L385.4082,115.6247 L388.7014,116.3969 L389.8697,116.6024 L390.0206,116.4860 L391.0396,116.6118 " +
    "L394.6665,116.9929 L394.4694,119.2255 L394.3172,119.4987 L395.3792,121.8977 L395.2728,124.0526 " +
    "L397.2123,125.6350 L401.1709,126.2516 L401.2612,126.2130 L401.4086,126.6060 L400.1992,127.7733 " +
    "L399.7769,128.0446 L399.6247,128.3179 L398.1779,129.0521 L394.2418,129.2969 L388.7324,130.9385 " +
    "L389.2782,134.0003 L383.7237,137.0111 L381.7445,139.9336 L379.7001,139.9546 L376.1539,143.0580 " +
    "L371.3022,144.1094 L368.6009,146.5914 L368.7361,151.1399 L363.6153,154.4980 " +
    /// Taipei County hole.
    "M363.4600,128.3904 L366.6300,130.3829 L369.3732,129.3913 L369.5603,125.6695 L374.3989,125.1677 " +
    "L370.8412,123.6440 L371.0684,118.8252 L369.0431,117.3157 L369.6882,115.7936 L367.8578,112.8749 " +
    "L368.1217,110.4867 L366.5152,109.2554 L361.9554,112.3435 L358.1163,117.8678 L361.7218,120.2192 " +
    "L360.7261,126.3232 L362.8064,125.5221 Z"]; 

我找到了this example使用以下格式:

obj.paths = [
    /// Taipei City
        "M20.4,0.4C12.6,44.5,4.7,88.7,2.6,133.5S4.1,223.7,18.9,266c5.9,1.6,11.6-2.8,16.1-6.9c12.2-11,24.7-22.3,32.3-36.8c5.9-11.4,8.6-24.2,10-36.9c3-26.8,0.8-53.9-1.7-80.8c-1.5-16.6-3.2-33.2-4.9-49.8c-0.9-8.5-1.9-17.4-6.1-24.9c-8.2-14.6-26.3-20.4-43-22.3c-0.4,6.2-0.8,12.4-1.3,18.6",
    /// Keelung City
    "M34.6,172.4c7.6-0.4,15.1-1.4,22.5-3.1c9.7-2.2,20.4-6.6,23.8-16c2.9-7.9-0.6-16.9-6.4-23.1c-5.8-6.1-13.4-10-20.8-14c-4.2-2.3-8.5-4.7-13.2-4.7c-7.8-0.1-14.2,6.1-21.7,8.4c-2.5,0.8-5.2,1.2-7.3,2.7c-1.7,1.2-2.8,3-3.8,4.8c-3.4,6.1-5.8,12.8-6,19.8c-0.1,7,2.3,14.2,7.5,18.8C15.9,172.1,25.7,172.9,34.6,172.4z"];

我尝试从 this svg image 导入 svg 路径( <path d="..." ) 具有以下格式:

obj.paths = [
    "M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03  c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341  c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933  c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991  c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875  c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489  c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309  c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876  c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413  c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566  c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156  c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351  c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247  c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331  z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111  C434.693,207.929,439.613,203.01,445.731,203.01z"];

但是我有一个错误:

Uncaught Error: weird path command

我尝试以这种方式导入它，因为我想导入现有的 svg 图像

Answer 1

这是一条奇怪的路。你的字符串中有两个 svg 路径。看起来在您的原始 codepen 链接中，该库需要一组单个 svg 路径。

最后:

.. 333,65.331  z M445.731,2 ..

z 终止 svg 路径。所以这个语法是不正确的，因为这是两条路径合二为一。我确信如果你修复了这个问题，那么你将发送 2 个 svg 路径的数组，例如

.. 333,65.331z", "M445.731,2 ..

它会起作用的。 Demo