THREE.js的SVG路徑（座標）

我從ThreeJs Example獲取了用於生成此City Model的確切代碼。THREE.js的SVG路徑（座標）

我已經從Google地圖生成了一個城市界限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)方法。但沒有運氣。有什麼建議麼？幫助將非常感激。

來源

2016-10-12 Rahul Dess

嘗試從轉換值中刪除單位。 –

仍然無法正常工作。順便說一句，這是正確的做法？我們是否有任何使這些座標更小的在線工具？ –

SVG座標系爲（x，y）x單位向右，y單位向下。

對於（x，y，z）的Three.js座標系是x單位向右，y向上和z單位離你遠。

你需要做某種形式的轉換。

如果我正在爲我的Three.js for 2D模型做一個SVG表示，我使用x軸作爲我的SVG x，y軸，我將使我的SVG模式有一個transform =「translate（width/w，height/2）scale（1，-1）「

這是將（0,0）移動到svg的中間，並使x，y以與三個方向相同的方向移動.js型號

來源

2017-01-02 17:40:00

由於距離相機視圖很遠，所以看不到你的身影。我已經對Threejs示例的代碼做了一些更改。

1）添加了一條線，該線爲包含從SVG路徑中取出的拉伸幾何的網格添加一個名稱。有了您的SVG路徑代碼，我們將得到的只是一個名爲「mesh00」（在addGeoObject功能，線路mesh.name = "mesh" + i + j;）

2）單目當我知道這個數字的名字，我可以找到它

var svgObj = scene.getObjectByName("mesh00",true);

3）和中鋒這

svgObj.geometry.center();

當然，這取決於你如何讓你的相機你的身材可見。例如，您可以將相機移動到數字上或（像我一樣）將相機前面的圖像。在這個例子中，相機的位置非常靠近，所以我將它移動得更遠。

jsfiddle示例

PS。我申請OrbitControls使觀看更舒適。

來源

2017-01-02 19:03:35 prisoner849

THREE.js的SVG路徑（座標）

回答

相關問題