javascript - Three.js - 完美贴合视口(viewport)的广告牌

Question

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

1. 从现有 Canvas 元素获取 2d 上下文并在其上绘图。
   • 不幸的是，这行不通，因为 Three.js 已经获得了 webgl context从 Canvas 上。
2. 创建第二个 Canvas 元素并将其放置在原始 Canvas 的顶部
   • 我想避免使用此解决方案；我不想担心将点击事件从覆盖 Canvas 传递到原始 Canvas
3. 创建一个完全适合视口(viewport)的广告牌(通过粒子)并为其赋予 Canvas 纹理。

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

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

Answer 1

如果您不需要它在 IE9 中工作，第二个选项会更简单(我认为这是正确的，因为您使用 WebGL)。您可以添加 pointer-events:none; 来覆盖 Canvas 的 style 属性，它将传递任何事件。