javascript - 如何使用three.js在对象中添加文本

我已使用文本几何将文本添加到对象(衬衫模型)中。这是我的代码:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.font = 'italic 18px Arial';
ctx.textAlign = 'center';
ctx. textBaseline = 'middle';
ctx.fillStyle = 'red';
ctx.fillText('Your Text', 150, 50);`

我的输出如下所示:



文本不适合衬衫模型。如果我旋转衬衫模型，则意味着文本显示不相关的 View 。我想像这样将文本放入衬衫模型中:



如何使用three.js将动态文本适合衬衫模型。

最佳答案

仅将文本绘制到2D Canvas 上很可能永远不会给您满意的结果。您有三种可能性可以解决此问题。

1)使用加载了textures的 THREE.TextureLoader 。

这里有几个示例:http://threejs.org/examples

教程:http://www.johannes-raida.de/tutorials/three.js/tutorial06/tutorial06.htm

2)使用 THREE.TextGeometry :

示例:http://threejs.org/examples/#webgl_geometry_text

3)使用CSS3D解决方案。

关于这个主题的不错的博客文章:http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/

还请查看THREE.TextGeometry文档页面上的UI示例:

关于javascript - 如何使用three.js在对象中添加文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38074263/