5

我整天都在寻找一种在程序上生成带有文本的 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

4

1 回答 1

13

这是一个将画布中的文本添加为​​纹理的简单代码：

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

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

于 2012-09-12T07:55:16.840 回答