我可以在平坦的three.js脸上绘制2D形状吗？

Question

我想尝试各种各样的3D地图。最简单的是，一个平面窗格，上面绘有地图线等，平坦（好像我正在绘制到HTML画布上）。但我希望该窗格可以在3D空间中移动。

我知道我可以非常简单地在three.js中创建一个平面窗格，但是是否可以实现某种“自定义纹理”，这样可以让我以编程方式绘制到这个窗格上？

Answer 1

在webGL中称为渲染到纹理。

Three.js提供WebGLRenderTarget，可用作进一步纹理的图像源。您将场景渲染到WebGLRenderTarget而不是主WebGL屏幕。然后使用此WebGLRenderTarget作为纹理的图像源。

很多2D后期处理都是这样的。它们将世界渲染为2D纹理，然后使用片段着色器应用每像素后处理代码，如模糊。

例如，请参阅例如http://mrdoob.github.com/three.js/examples/webgl_postprocessing.html

它呈现2D后处理的场景，但理论是相同的。

以下是WebGLRenderTarget设置代码：

https://github.com/mrdoob/three.js/blob/master/examples/js/postprocessing/EffectComposer.js#L14