ThreeJS将画布中的文本渲染为纹理,然后应用于平面？

Question

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

我见过要实现这一目标的最有前途的方法是使用CSS在空白画布中渲染文本,将该画布用作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

这是一个简单的代码,用于从画布中添加文本作为纹理:

//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;

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