用3D空間思考的方式

我有一個web開發人員背景，現在我正在用Three.js製作一個簡單的2D側滾動器。即使我製作2D遊戲，我會在3D空間中繪製它，以便在時間感覺正確時轉換爲3D。爲什麼我選擇Three.js？嗯，這是JavaScript，因爲我喜歡爲網絡創建和探索新技術，所以用我已經知道的語言來製作它會很有趣。用3D空間思考的方式

但現在我的問題。這不是一個真正的技術問題，但由於我是3D空間的新手，所以更多的是一種思考方式。我習慣於用像素或百分比（相對）尺寸來思考使用網頁時的尺寸，它始終是2軸（X/Y）或者是寬度/高度。但是3D空間，相機和視角讓我頭疼，因爲我不習慣。

我應該怎麼看我在3D空間中的尺寸問題？相機在800x600的畫布上有45度的視野。最近的是1（近）和1000（遠）。這是否意味着如果物體接近（1）並且尺寸爲800x600，它實際上會填滿畫布？

嗯，正如你所看到的，我對這個和3D空間思維方式都很陌生，這對我來說是一個新的領域。

來源

2013-09-26 musse1

一個好的起點可能是試圖理解[笛卡爾座標空間]（https://en.wikipedia.org/wiki/Cartesian_coordinate_system）（也可以是簡化的：http：//opengl.czweb.org/ch02/023 -026.html）和載體。你使用矢量定義你的對象。然後用x/y/z投影*到2D平面。你的深度是z軸。 – K3N

您需要更多的幾何和三角。例如在奧克利德空間中存在三角形不等式。

來源

2013-09-26 09:04:24 Bytemain

你必須考慮三角。

靠近近平面的物體必須小於靠近遠平面的物體才能填滿畫布。

就你而言，近平面中填充畫布的對象的大小是多少？

請注意，對於45度的視場，相機中頂點的角度以及中心和近平面頂點的終點爲22.5度，對吧？

然後，如果物體與相機的距離爲1（近平面），則填充從畫布中心到頂部的距離的該對象的高度爲：tan（22.5）。所以填充畫布的對象的高度應該是：2 * tan（22.5）。一般來說：

 height = 2 * distance_object_camera * tan(field_of_view/2)

另外請注意，這個結果是獨立的，你正在使用的畫布的大小。

來源

2013-09-26 11:32:17

選擇適合您的項目的比例尺，然後調整相機參數，以便隨時查看您想展示的內容。所以你可以考慮像現實世界中的尺寸和位置。。

1單位= 1m是一個非常常見的約定，但只要它是一致的，它可以是任何你喜歡的東西。如果你主要處理微觀事物，可能認爲1mm作爲基本單位更合適。 Three.js不需要知道或關心你的單位系統是什麼。但是，例如，試圖用1mm單位對整個行星進行建模將導致如此巨大的值，以至於您可能會遇到與浮點數如何工作相關的問題。

與位圖圖形不同，屏幕分辨率和此處沒有太多相關性。如果你真的需要與顯示器相關的像素完美定位（例如調整對象大小或設置相機，以使對象填滿屏幕或以特定像素大小顯示），但它可能但通常涉及相當多的數學。

很難給出數學部分的明確答案，有很多不同的用例，問題和對這些特定情況的答案。

您也可以考慮使用OrtographicCamera對3D場景進行嚴格的2D（無透視）視圖。這也將使像素定位/屏幕位置和尺寸計算更容易。

來源

2013-09-27 01:32:52 yaku

用3D空間思考的方式

回答

相關問題