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

Question

我想测试一下3D地图。在最简单的情况下，一个平面窗格，上面画着地图线等，平面(就像我在HTML画布上画的一样)。但我希望这个窗格在3D空间中是可移动的。

我知道我可以非常简单地在three.js中制作一个平面窗格，但是有没有可能实现某种“自定义纹理”，允许我以编程方式在这个窗格上绘制？

Answer 1

它在webGL中称为render-to-texture。

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