光線投射前的疑問

在學習與Three.js的交互作用時，我頭腦中的一些問題光線投射前的疑問

1）請解釋什麼是視口座標？

2）它們與客戶端座標有何不同？

3）我們如何運用這個公式。

var vpx = (eltx/div.offsetWidth) * 2 - 1; 
var vpy = - (elty/div.offsetHeight) * 2 + 1; 
// vp->viewport, eltx->client coords,div->The div where webGL renderer has been appended.

4）爲什麼我們將viewport系統中的第三個座標作爲0.5到1，同時取向？

如果您將詳細解釋這些問題和概念，或者建議我讀一本書，我將不勝感激。如果某些3D圖可用於第一個問題，那麼最好。真的很感恩。

來源

2013-09-30 chetan mehta

Plz answer專家.... @mrdoob –

Plz answer專家.... @WestLangley –

3D場景呈現在畫布容器內。它可以是任何大小，並位於HTML頁面佈局的任何位置。很多時候，WebGL示例和應用程序都是全屏顯示的，因此畫布會填滿整個屏幕，並且實際上與HTML佈局的大小相同。但情況並非總是如此，WebGL場景可以與其他HTML內容一起嵌入，就像圖像一樣。

Three.js通常不關心或瞭解3D畫布如何與整個HTML頁面的座標和大小相關。在WebGL畫布內部使用完全不同的座標系 - 完全獨立於屏幕像素。

當您想要處理3D畫布內的點擊時，不幸的是，瀏覽器只給出HTML頁面左上角（eltx和elty）的像素值。因此，您需要首先將HTML鼠標座標轉換爲WebGL座標（Three.js中可用的矢量）。在WebGL座標中，無論畫布的大小和位置如何，0,0都是畫布的中心，-1，-1是左上角，+ 1，右下角是+1，依此類推。

首先，您需要獲取畫布的位置並從鼠標座標中減去該位置。您的公式沒有考慮到這一點，而是假設webgl容器位於頁面的左上角（畫布位置爲0px 0px）。那好，但如果你的容器被移動或者HTML body有CSS填充的話，它就不再準確了。

其次，您需要轉換絕對鼠標像素位置（在上一步中調整），並將其轉換爲畫布內的相對位置。這就是你的公式所做的。如果鼠標的x位置爲50px，並且您的畫布寬度爲100px，則公式將類似於（50/100）* 2 - 1 = 0，這是畫布視口的屏幕空間中心。

現在，您在Three.js 3D場景中具有合理的座標。

來源

2013-10-01 10:35:55 yaku

好友得到了前三個3個答案。但在我看來，還有一件事是爲什麼webGL有自己的座標系？爲什麼不能在基於像素的座標上工作 –

您可以將3D場景想象成與自己的屏幕和屏幕像素完全分離的世界。然後你有一個攝像頭，將這個世界翻譯成2D表示（即屏幕圖像）。您無法將2D屏幕空間映射到具有透視和全部3D空間的1到1映射。遠處的物體在屏幕上的像素大小與靠近的物體不同，並且全部取決於相機屬性。這就是爲什麼從3D座標到屏幕座標並返回有點複雜。 – yaku

非常感謝。還有一個問題先生問我：http：// stackoverflow。com/questions/19140166/ray-casting-hit-detection-not-working。 Plz也調試它。 –

光線投射前的疑問

回答

相關問題