THREE.jsのSVGパス（座標）

Question

City Modelを生成するための正確なコードをThreeJs Exampleから取得しました。

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)メソッドを使用しようとしました。しかし、運がない。助言がありますか ？ヘルプは本当に感謝しています。

Answer 1

SVG座標系は、（x、y）は右にx単位、下にy単位です。

（x、y、z）の3つの座標系は、右にx単位、yは上に、z単位は離れています。

どちらかの方法で変換を行う必要があります。

SVG x、y軸としてx軸&を使用している2DモデルのThree.jsのSVG表現を行っている場合、私はSVGモードにtransform = "translate（width （0,0）をsvgの中央に移動させ、x、yを3つの方向と同じ方向に移動させるためです。（w、height/2）scale（1、-1） "

これは、 .jsモデル

Answer 2

カメラの視点から離れているため、図が表示されません。私はThreejsの例のコードをいくつか変更しました。

1）SVGパスから取り出した押し出しジオメトリを含むメッシュに名前を追加する行が追加されました。あなたのSVGパスコードで、私たちは、私は数字の名前を知っているとき、私はそれ

見つけることができます名前「mesh00」（ addGeoObject機能では、ラインが mesh.name = "mesh" + i + j;ある）

2）でただ1つのメッシュを取得します

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

3）とセンターももちろん

svgObj.geometry.center(); 

、それはあなたのカメラのためのあなたの姿が見えるようにすることができますどのようにあなた次第です。たとえば、カメラを図形に移動したり、（前と同じように）図形をカメラの前に持ってくることができます。この例ではカメラは非常に近くに配置されていますので、私はそれをさらに遠ざけました。

jsfiddle例

PS。私はより快適に見えるようにOrbitControlsを適用しました。