如何使用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 = '斜体 18px Arial';ctx.textAlign = '中心';ctx.textBaseline = '中间';ctx.fillStyle = '红色';ctx.fillText('你的文字', 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: https://threejs.org/docs/index.html?q=textgeo#api/en/geometries/TextGeometry
   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屋！