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

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;

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

三个JS在画布中渲染文本作为纹理然后应用于平面？

1 个答案: