使用Three.js項目從2D到3D

如何將2D座標投影到3D上？使用Three.js項目從2D到3D

例如，我有一個256像素寬的圖像（表示爲粒子）。如果我假裝這個圖像以2D空間中的原點（0,0）爲中心，那麼正方形的垂直邊位於x = 128和x = -128。所以當這個圖像（粒子）被放置在原點（0,0）的Three.js場景中並且相機距離原點在CamZ距離處時，那麼如何將原始2D座標投影到3D上在tern會告訴我圖像（粒子！）在three.js單位出現在屏幕上的寬度。

來源

2012-06-25 Jamie Fearon

通常處理的方式是除以z值，所以你可以想象通過除以更高和更高的z值，你已經變小的x值。然而，你實際上是通過z值的某個因素來劃分的，而你的視野會影響它。但不知道如何從中推斷出所需的寬度。 –

一個容易理解的方法是創建一個頂點爲-128, 128, 0,128, 128, 0,-128, -128, 0和128, -128, 0的頂點。然後使用Projector來使用相機投影該幾何圖形。它將爲您提供一系列應該從-1到1的投影點。然後，您需要將其與視口尺寸相乘。

來源

2012-06-26 21:01:35 mrdoob

謝謝你的回答。我覺得我一直有點愚蠢。按照您的建議，我用頂點（128，-128），（128，128），（-128,128），（-128,128）建立了一個網格，然後轟擊結果正方形與粒子的大小相同。因此three.js中的粒度就是原始映射圖像的大小*比例:) –

還有另一種方法可以做到這一點。 2D和3D之間的精確轉換可以近似爲啓發式。通常比使用three.js來投影矢量更困難，但通過指數轉換，您可以映射許多2D/3D翻譯。

這裏的想法是使用指數緩動函數來計算翻譯。大多數庫使用的緩動函數（如jQuery UI）是Robert Penner Easing functions。

easeOutExpo函數在逼近2D/3D翻譯時效果出人意料地出色。通常它會是這個樣子：

// easeOutExpo(time, base, change, duration) 
var xPosition3D = xPosition2D * expo(xPosition2D, 0, coefficient, xMax2D);

它需要共同高效，準確的數量將取決於3D相機的縱橫比和焦距。通常，像-.2這樣的東西效果很好。

我知道這是一個不足的解釋，但希望它指出你在正確的方向。

來源

2012-06-27 03:19:59 BishopZ

使用Three.js項目從2D到3D

回答

相關問題