我是three.js
的新手,我試圖使用這些3D工具設置相當於二維可視化(對於各種分層精靈)。我希望對PerspectiveCamera()
參數和camera.position.set()
參數有一些指導。我已經在從this answer到related question的正確方向上輕推,這表示在camera.position.set(x,y,z)
中設置z
座標等於0
。在Three.js中設置2D視圖
下面是我從stemkoski's three.js examples之一修改的代碼片段。暫時掛我的部分是VIEW_ANGLE
,x
和y
的值。假設我想在平面上有一個平面相機視圖,屏幕的大小應如何分配這些變量?我試過了一系列值,但很難從可視化中知道發生了什麼。提前致謝!
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = ?, ASPECT = SCREEN_WIDTH/SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
var x = ?, y = ?, z = 0;
camera.position.set(x,y,z);
camera.lookAt(scene.position);
更新 - 透視VS正視相機:
感謝@GuyGood,我意識到我需要做出對透視相機相對於正交相機的設計選擇。我現在看到PerspectiveCamera()
即使在這個2D上下文中也會允許使用parallax之類的東西,而OrthographicCamera()
則允許文字渲染大小(不隨距離而減少),無論我的2D元素在哪個圖層上。我傾向於認爲我仍然會使用PerspectiveCamera()
來實現精靈層之間的少量視差效果(所以我猜我的項目不是純粹的2D!)。
似乎主要是讓所有的精靈層與觀看平面平行,並且camera.position.set()
是視野中心的正交觀察線。這對於許多人來說必須是基本的;對我來說這是一個新的世界!
我想我仍然很難在2D可視化中圍繞VIEW_ANGLE
,x
和y
的角色以及相機與遠近視平面之間的距離。使用正交相機這非常不重要 - 您只需要足夠的深度即可包含所需的所有圖層以及適合您精靈的比例尺的查看平面。但是,透視攝像機的深度和場的作用會影響視差的效果,但是還有其他一些考慮因素嗎?
更新2 - 的視角和其他變量:
在追求如何思考視角(視場或FOV)爲相機和繞x多一點的工具之後,y,z參數的相機位置,我遇到了這個有幫助的video summary of the role of Field of View in game design(足夠接近我的2D可視化問題的答案)。隨着這個Field of View tutorial for photographers,我也發現有幫助(如果可能是一個觸摸cheesy;),這兩個資源幫助我瞭解如何爲我的項目選擇一個視場,以及對於非常寬或窄的視場(以360度度數計算)。最好的結果是混合了感覺像人類自然視野的視覺,取決於屏幕或投影與他們臉部的距離,並且也與前景中的事物的相對尺度與背景中的事物的相對尺度密切相關可視化(更寬的視野使背景看起來更小,更窄的視野放大背景 - 類似於雖然不像正交相機的效果那麼明顯)。我希望你覺得這個和我一樣有幫助!
更新3 - 進一步閱讀
對於任何zesting有關在各種用途的攝像頭規格更加詳細,你可能會發現,因爲我有有用的Computer Graphics Principles and Practice第13章解決我的上述問題以及更多。
UPDATE 4 - 在正視相機
z維度的思考正如我繼續我的項目,我決定使用正視相機,這樣我可以增加我的精靈的z維度,以避免z-fighting,但沒有看起來逐步退入距離。相比之下,如果我想讓它看起來像一個精靈正在退縮到距離,我可以簡單地調整它的大小。但是,今天我遇到了一個愚蠢的錯誤,我想指出爲了避免同樣的麻煩。雖然正交相機不會描繪物體距離較遠的後退大小,但請注意,過去仍會有哪些物體將從視圖中剔除。今天,我意外地增加了我的幾個物體的z值,超過了這架飛機,並無法弄清楚他們爲什麼沒有出現在屏幕上。使用正交相機時,可以很容易地忘記關於z座標的這個因素。