Three.js：如何將物體放到屏幕的頂部，尺寸相同

我是threejs的新手，我不知道這個問題是絕對基本的還是太高級。所以，我想把一些物體放在屏幕的左上角。下一個對象總是進入下一個正確的位置。我需要每個物體看起來像相同的大小。我如何計算他們的3D位置和比例（如果需要的話）Three.js：如何將物體放到屏幕的頂部，尺寸相同

我找到了一個解決方案，這可能對我很好：Three.js: Show world coordinate axes in corner of scene但我認爲第二個畫布太大了 - 它覆蓋了原始畫布。

我認爲創建一個球體，其位置是相機的位置，並且半徑大於屏幕相機距離，並且用raycaster找到相交點，那就是點。這是一個好方法嗎？

我的對象是箭頭（聚和拉伸），它們顯示我的用戶選定的方向。所以這個幫手是一個信息框，但我不想覆蓋原來的場景。例如屏幕頂部的10-12箭頭。它需要相同的尺寸才能成爲美麗。

來源

2016-12-26 sarkiroka

如果你想創建一個平視顯示器（HUD），一種方法是疊加第二個精靈的場景，用正交相機渲染。

編碼模式使用起來就像這樣：

camera = new THREE.PerspectiveCamera(...); 
cameraOrtho = new THREE.OrthographicCamera(...); 

scene = new THREE.Scene(); 
sceneOrtho = new THREE.Scene(); // overlay scene 

renderer = new THREE.WebGLRenderer(); 
renderer.autoClear = false; // to allow overlay

而且，在渲染循環：

renderer.clear(); 
renderer.render(scene, camera); 
renderer.clearDepth(); 
renderer.render(sceneOrtho, cameraOrtho);

見http://threejs.org/examples/webgl_sprites.html。

three.js所r.83

來源

2016-12-26 21:28:33 WestLangley

這聽起來不錯，而且例子是工作正常，但我遇到的第二個場景（原）只出現在我的情況，第一眨眼一點時間（當我調整窗口），然後渲染第二個場景，它將保持沒有第一個場景。我錯了什麼？ – sarkiroka

如示例中所示，您必須設置'renderer.autoClear = false;' – WestLangley

僅供參考，另請參閱http://stackoverflow.com/questions/17558085/three-js-orthographic-camera/17567292#17567292 – WestLangley

Three.js：如何將物體放到屏幕的頂部，尺寸相同

回答

相關問題