Three.js - 完美適合視口的廣告牌

Question

我正在嘗試爲我的3D場景創建2D疊加層。我想到了三種選擇：

1. 從現有畫布元素獲取2d上下文並在其上繪製。
   • 不幸的是，這將不起作用因爲three.js已從畫布中獲得webgl context。
2. 創建第二畫布元件並且它在原始畫布的頂部位置
   • 我想避免此溶液;我不想擔心將覆蓋畫布上的點擊事件傳遞到原始畫布
3. 創建一個完美適合視口併爲其提供畫布紋理的廣告牌（來自粒子）。

如何執行第三個選項？我需要選擇調整畫布大小。我已經知道如何使用畫布作爲紋理，這要歸功於this示例。另外，如果第二個選項並不像我想的那麼難，請讓我知道。

Answer 1

如果你不需要它在IE9中工作（我認爲你使用WebGL是真的），第二個選項更簡單。您可以添加pointer-events:none;以覆蓋畫布的樣式屬性，並且會通過任何事件。

Answer 2

使用正交相機進行第二次渲染可能是最佳選擇。

renderer.autoClear = false; // To allow render overlay 

--- 

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

請參閱http://threejs.org/examples/webgl_sprites.html。

three.js r.69