THREE.js的SVG路径(坐标)

SVG path (coordinates) for THREE.js

本文关键字：坐标 路径 SVG js THREE      更新时间：2023-09-26

我已经从ThreeJs示例中获取了用于生成此城市模型的确切代码。

我已经从谷歌地图生成了一个城市边界SVG路径，并希望使用上述代码生成相同类型的3D对象。我的SVG路径代码在

下面
"M -378463.90230276587 -216828.5204525995 L -378463.90230276587 -216828.5204525995 L -378468.4733200769 -216800.78018946826 L -378457.36255405867 -216726.32967956597 L -378453.2523036701 -216708.13985810167 L -378446.23084408935 -216645.84207578097 L -378446.40886767313 -216640.48042431887 L -378440.04714254953 -216593.4246023558 L -378428.4180137435 -216539.991347306 L -378408.5945640994 -216510.42896043573 L -378385.51956605876 -216467.31060126523 L -378379.14213297196 -216451.9325052259 L -378359.4495830217 -216424.30743382534 L -378348.87288775464 -216401.72985462152 L -378333.6361633847 -216381.90640497737 L -378337.86684149154 -216373.22513727797 L -378341.7990682963 -216369.96835289372 L -378342.2388912678 -216365.88428244408 L -378331.6883759395 -216327.93384318874 L -378324.9287157465 -216311.89601269213 L -378325.3318868038 -216300.2721198738 L -378321.78712309286 -216297.53893426526 L -378317.28940961056 -216296.21946535073 L -378303.3616821797 -216270.99771233014 L -378293.1933939575 -216243.98001550927 L -378293.88454434136 -216242.82286221522 L -378290.4863882877 -216243.61349636634 L -378276.29162548116 -216233.02632912374 L -378253.8973058489 -216247.0954282241 L -378224.3558629296 -216248.45678504065 L -378204.8989324284 -216228.3558280454 L -378170.660808492 -216241.304425766 L -378170.3675931776 -216235.0578923731 L -378170.22622150823 -216232.0943233032 L -378169.26279976114 -216211.52212740996 L -378152.6542465991 -216208.78370581358 L -378105.9858877301 -216201.0815678245 L -378090.63397162955 -216173.3308327178 L -378065.06664341706 -216168.73363546806 L -378045.64636483014 -216185.9233832709 L -378059.37512472627 -216241.5662251538 L -378059.1971011426 -216244.0742632889 L -378057.3906853668 -216269.52639977072 L -378057.05034616264 -216274.34874449397 L -378054.1391369704 -216315.39365251316 L -378045.7615565607 -216328.4836219031 L -377993.89386184997 -216365.8895184318 L -377991.3072838986 -216367.75353007295 L -377955.1789683823 -216371.94232027777 L -377921.14504796837 -216364.08833864375 L -377920.3229978907 -216362.99925319053 L -377915.61584489804 -216367.39224691782 L -377913.6942373916 -216371.958028241 L -377932.8213006642 -216381.0267590344 L -377936.1670968403 -216393.19519457928 L -377929.9310354229 -216427.5799261728 L -377939.4710051143 -216469.85529131463 L -377948.89578307513 -216477.70927294862 L -377959.25780284416 -216480.447694545 L -377976.6465181818 -216485.03965580696 L -377979.7881108354 -216489.22844601178 L -377976.1229194062 -216505.46000805535 L -377983.93501313817 -216532.14783764756 L -377982.971591391 -216552.4215822387 L -378001.82638330036 -216597.61862854837 L -378000.06709141436 -216607.12194632547 L -378003.0044805454 -216615.18013148196 L -377994.6426080991 -216627.98212154533 L -377998.3287434793 -216637.62681099182 L -378000.4283745695 -216641.8679610742 L -378139.4071975765 -216833.3689772615 L -378144.8997487325 -216840.72030407088 L -378258.3531314292 -216996.0772967787 L -378439.5811396393 -216981.68356643748 L -378444.60768788506 -216944.65466102716 L -378449.5399883511 -216925.05112286875 L -378452.2784099475 -216906.3272306534 L -378452.4773774823 -216884.08475466596 L -378456.9332030626 -216867.26676199373 L -378459.5302529896 -216845.6735484881 L -378462.4571701452 -216837.2540801764 L -378463.90230276587 -216828.5204525995 "

如果我将示例中的SVG路径替换为上面提到的，它甚至不会显示出来。作为Three.js和SVG的新手，我不确定我做错了什么。

到目前为止，我的猜测是，我在我的例子中的SVG坐标是非常大的，无法在视窗中看到。为此，我试图使用transform = translate(-378460px, -216828px)方法。但运气不好。有什么建议吗?

SVG坐标系是(x,y)向右x个单位，向下y个单位。

Three.js (x,y,z)的坐标系是向右x个单位，向上y个单位，离你z个单位。

无论哪种方式，您都需要进行某种转换。

如果我正在为2D模型的Three.js做SVG表示，我使用x &z轴作为SVG的x,y轴，我将SVG模式设为transform="translate(width/w, height/2) scale(1，-1)"

将(0,0)移动到svg的中间，并使x,y与three.js模型的方向相同

你看不到你的身材，因为它离你的相机视野很远。我对Threejs示例的代码做了一些修改。

1)添加了一条线，将名称添加到包含从SVG路径提取的挤压几何形状的网格中。使用SVG路径代码，我们将获得名称为"mesh00"的单个网格(在addGeoObject函数中，行是mesh.name = "mesh" + i + j;)

当我知道这个数字的名字时，我就能找到它 
var svgObj = scene.getObjectByName("mesh00",true);


svgObj.geometry.center();

当然，这取决于你如何让你的身材在你的相机上可见。例如，你可以把相机移到人物身上，或者(像我一样)把人物带到镜头前。在这个例子中，相机的位置很近，所以我把它移得更远。

jsfiddle例子

p。我使用OrbitControls使观看更舒适。

相关文章：