如何使用three.js沿着对象添加文本 [英] How to add text into along the object using 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）;`
  

看起来像这样：

文字不适合衬衫模型。如果我旋转衬衫模型意味着文本显示不相关的视图。我想像这样将文本适合衬衫模型：

如何使用three.js将我的动态文本粘贴到衬衫模型中。

解决方案

到你的2D画布将很可能永远不会给你一个令人满意的结果。您有三种可能性来解决此问题。

1）使用

I have added text into my object (a shirt model) using a text geometry. Here is my code:

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);`

My output looks like this:

The text does not fit into the shirt model. If I rotate the shirt model means text showing irrelevant view. I want to fit the text into the shirt model like this:

How can I fit my dynamic text into the shirt model using three.js.

解决方案

Simply drawing the text to your 2D canvas will most likely never give you a satisfactory result. You have three possibilities to tackle this issue.

1) Using textures loaded with a THREE.TextureLoader.

• several examples here: http://threejs.org/examples
• tutorial: http://www.johannes-raida.de/tutorials/three.js/tutorial06/tutorial06.htm

2) Using THREE.TextGeometry:

• an example: http://threejs.org/examples/#webgl_geometry_text

3) Using a CSS3D solution.

• a nice blog post on this topic: http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/

---

Check also the UI example on the THREE.TextGeometry documentation page:

这篇关于如何使用three.js沿着对象添加文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！