Three.js - 完美契合视口的广告牌答案

【问题标题】：Three.js - Billboard that perfectly fits the viewportThree.js - 完美契合视口的广告牌
【发布时间】：2015-03-13 00:58:57
【问题描述】：

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

从现有画布元素中获取 2d 上下文并在其上绘图。
- 很遗憾，这行不通，因为three.js 已经从画布中获得了webgl context。
创建第二个画布元素并将其放置在原始画布的顶部
- 我想避免这种解决方案；我不想担心将点击事件从覆盖画布传递到原始画布
创建一个完全适合视口的广告牌（来自粒子）并为其赋予画布纹理。

如何执行第三个选项？我需要调整画布大小的选项。感谢this 示例，我已经知道如何使用画布作为纹理。

另外，如果第二个选项没有我想象的那么难，请告诉我。

【问题讨论】：

标签： javascript canvas three.js

【解决方案1】：

如果你不需要它在 IE9 中工作，第二个选项会更简单（我认为这是真的，因为你使用了 WebGL）。您可以将pointer-events:none; 添加到覆盖画布的样式属性中，它将传递任何事件。

【讨论】：

【解决方案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

【讨论】：