javascript - ThreeJS 将 Canvas 中的文本渲染为纹理，然后应用于平面？

Question

我整天都在寻找一种方法来程序化生成带有文本的 2d 纹理，以便我可以将它们作为纹理应用到平面上。基本上，我希望能够更改在我的 WebGL 页面中显示的文本，而不必仅使用图像编辑程序中制作的纹理。我的目标是能够像编辑一个完全 2d 的页面一样轻松地编辑页面的内容，只需编辑代码和 bam，它就在那里。

我见过的最有前途的方法是用 CSS 在空白 Canvas 中渲染文本，使用该 Canvas 作为纹理，ThreeJS 非常容易，然后将该纹理应用到我可以放置的平面上在 3d 环境中的任何地方。我试图通过根据我的需要调整此示例来完成此操作:http://jsfiddle.net/sSD65/28/

但是，我最终得到一个全黑的页面，表明某处有错误。一个我一生都无法找到并修复的错误。我有一种感觉，由于我缺乏使用 ThreeJS 的经验，实际上我缺少一些 Javascript 的经验，所以我来这里寻求您的帮助。

我非常感谢能在这里得到的任何帮助。这是该页面的链接，尽管我认为如果不在本地托管它您将无法正确查看它，因为我正在从那里的文件夹中加载图像，但是 Python 非常适合这一点。导航到该文件夹​​后，只需在控制台中使用 Python -m SimpleHTTPServer，它将在本地托管它，以便您可以从“http://localhost:8000/homepage.html”访问它:https://dl.dropbox.com/u/40043006/WebGLTest.zip

Answer 1

这是将 Canvas 中的文本添加为​​纹理的简单代码:

//create image
var bitmap = document.createElement('canvas');
var g = bitmap.getContext('2d');
bitmap.width = 100;
bitmap.height = 100;
g.font = 'Bold 20px Arial';

g.fillStyle = 'white';
g.fillText(text, 0, 20);
g.strokeStyle = 'black';
g.strokeText(text, 0, 20);

// canvas contents will be used for a texture
var texture = new THREE.Texture(bitmap) 
texture.needsUpdate = true;

它需要一些工作...比如将输出文本大小设置为 Canvas 的大小。