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

ThreeJS render text in canvas as texture and then apply to a plane?

本文关键字：纹理 然后 平面 应用于 布中 文本 ThreeJS      更新时间：2023-09-26

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

我见过的实现这一点最有前途的方法是用CSS在空白画布中渲染文本，将该画布用作ThreeJS非常容易制作的纹理，然后将该纹理应用于一个平面，我可以将其放置在三维环境中的任何位置。我试图通过根据自己的需要调整这个例子来实现这一点：http://jsfiddle.net/sSD65/28/

然而，我最终得到了一个完全黑色的页面，表明某个地方出现了错误。这是一个我一生都无法发现和纠正的错误。我有一种感觉，我错过了一些东西，因为我缺乏ThreeJS和Javascript的经验，所以我来这里寻求你的帮助。

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

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

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

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

相关文章：