Three.js - 完全适合视口的广告牌

Question

我正在尝试为我的3D场景创建2D叠加层。我想到了三个选择：

1. 从现有的canvas元素中获取2d上下文并在其上绘制。
   • 不幸的是，这将不起作用，因为three.js已经从画布中获得了webgl context。
2. 创建第二个canvas元素并将其放置在原始画布的顶部
   • 我想避免这种解决方案;我不想担心将点击事件从叠加画布传递到原始画布
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