Three.js

Question

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

从现有的 canvas 元素获取二维上下文并在其上绘制。
- 不幸的是，这行不通，因为 three.js 已经从 canvas.
创建第二个 canvas 元素并将其放置在原始 canvas 的顶部
- 我想避免使用此解决方案；我不想担心将点击事件从叠加 canvas 传递到原始 canvas
创建一个完全适合视口的广告牌（来自粒子）并赋予它 canvas 纹理。

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

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

Answer 1

如果您不需要在 IE9 中工作，则第二个选项更简单（我认为这是正确的，因为您使用的是 WebGL）。您可以添加 pointer-events:none; 来叠加 canvas 的样式属性，它将传递任何事件。

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

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

Three.js - Billboard that perfectly fits the viewport

javascript

canvas