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

Question

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

1. 從現有canvas元素獲取2d上下文並在其上繪制。
   • 不幸的是，因為three.js所已經有了一個這是不行的 WebGL的情況下從畫布。
2. 創建第二個畫布元素，並將其放置在原始畫布的頂部
   • 我想避免這種解決方案 ； 我不想擔心將點擊事件從覆蓋畫布傳遞到原始畫布
3. 創建一個非常適合視口的廣告牌（從粒子），並為其提供畫布紋理。

如何執行第三種選擇？ 我需要選擇調整畫布大小的選項。 由於這個示例，我已經知道如何使用畫布作為紋理。

另外，如果第二個選項沒有我想的那么難，請告訴我。

Answer 1

如果您不需要在IE9中使用第二個選項，則它更簡單（我認為這是事實，因為您使用的是WebGL）。 您可以添加pointer-events:none; 覆蓋畫布的style屬性，它將傳遞任何事件。

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