javascript ThreeJS将画布中的文本渲染为纹理然后应用于平面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12380072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ThreeJS render text in canvas as texture and then apply to a plane?
提问by jctjct3
I've been looking all day for a way to procedurally generate 2d texture with text in them so that I can apply them as a texture to a plane. Basically, I want to be able to change what text shows up in my WebGL page without having to just use texture made in an image editing program. I'm aiming to be able to edit the content of the page just as easily as with a totally 2d page, just edit the code and bam, it's there.
我一整天都在寻找一种方法来程序生成带有文本的 2d 纹理，以便我可以将它们作为纹理应用到平面上。基本上，我希望能够更改 WebGL 页面中显示的文本，而不必仅使用在图像编辑程序中制作的纹理。我的目标是能够像使用完全 2d 的页面一样轻松地编辑页面的内容，只需编辑代码和 bam，它就在那里。
The most promising method I've seen to accomplish this is to render the text in a blank canvas with CSS, use that canvas as a texture which ThreeJS makes very easy, and then apply that texture to a plane that I can place wherever in the 3d environment. I've attempted to accomplish this by adapting this example to my needs: http://jsfiddle.net/sSD65/28/
我见过的最有前途的方法是使用 CSS 在空白画布中渲染文本，使用该画布作为 ThreeJS 非常容易的纹理，然后将该纹理应用到一个平面上，我可以将其放置在3d 环境。我试图通过根据我的需要调整这个例子来实现这一点：http: //jsfiddle.net/sSD65/28/
However, I end up with a totally black page, indicating an error somewhere. An error that I cannot, for the life of me, find and fix. I have a feeling I'm missing something because of my lack of experience with ThreeJS and in fact Javascript in general so I've come here to ask for your help.
但是，我最终得到了一个全黑的页面，表明某处有错误。一个我一生都无法找到并修复的错误。我有一种感觉，因为我缺乏 ThreeJS 和 JavaScript 的经验，所以我来这里寻求你的帮助。
I really appreciate any help I can get here. Here's a link to the page, although I don't think you will be able to view it properly without hosting it locally since I'm loading an image from a folder there, but Python is wonderful for that. Just use Python -m SimpleHTTPServer in the console once you've navigated to that folder and it will host it locally so that you can access it from "http://localhost:8000/homepage.html": https://dl.dropbox.com/u/40043006/WebGLTest.zip
我真的很感激我能在这里得到的任何帮助。这是该页面的链接，虽然我认为如果不将其托管在本地，您将无法正确查看它，因为我正在从那里的文件夹加载图像，但 Python 对此非常有用。导航到该文件夹后，只需在控制台中使用 Python -m SimpleHTTPServer，它将在本地托管它，以便您可以从“http://localhost:8000/homepage.html”访问它：https://dl。 dropbox.com/u/40043006/WebGLTest.zip
回答by EliSherer
This is a simple code to add text from a canvas as a texture:
这是将画布中的文本添加为纹理的简单代码：
//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;
it needs some work... like setting the output text size to the canvas' size.
它需要一些工作......比如将输出文本大小设置为画布的大小。
