如何使用three.js沿对象添加文本

Question

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

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 将我的动态文本放入衬衫模型中。

Answer 1

仅将文本绘制到 2D 画布上很可能永远不会给您带来满意的结果。你有三种可能来解决这个问题。

1. 使用带有THREE.TextureLoader 的textures。

• 这里有几个例子：http://threejs.org/examples
• 教程：http://www.johannes-raida.de/tutorials/three.js/tutorial06/tutorial06.htm

1. 使用THREE.TextGeometry:

• 一个例子：https://threejs.org/docs/index.html?q=textgeo#api/en/geometries/TextGeometry

1. 使用 CSS3D 解决方案。

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

---

还可以查看THREE.TextGeometry 文档页面上的 UI 示例：

Answer 2

如果您正在搜索“如何在 3D 对象中放置 3D 文本”，我将解释如何做到这一点，让我们从理论开始，

想象一下，如果您的相机从 y 轴（三个 js 轴）观看，那么您将添加一个与函数 sin(2*pi) 完全匹配的文本对吧？

所以，

正如你所看到的，这个想法是试图获得 sin(x) 函数的一些切线，其秘诀在于将文本切割成适合你的文本的切线数量...

对于文本“Montiel Software”，现在将是 ["Mon","tiel","Soft","Ware"]

标志：

function flag(u,v,vector)
{
var x = 10*u;
var y = 10*v;
var z = Math.sin(2*Math.PI*u) ;
vector.set(x,y,z);}

创建几何体：

var geometry_sin = new THREE.ParametricGeometry(flag, 100, 100);
var material_sin = new THREE.MeshPhongMaterial({map:groundTexture,side:THREE.DoubleSide, color:0x000000} );
var flag = new THREE.Mesh( geometry_sin, material_sin );

现在将文本添加到标志（在此处选择切线），然后将标志添加到场景：

var loader = new THREE.FontLoader();
loader.load('js/examples/fonts/helvetiker_regular.typeface.json',function(font){
var geometry = new THREE.TextGeometry( 'Mon', {
        font: font,
        size: 1,
        height: 0.5,
        curveSegments: 12,
        bevelEnabled: false,
        bevelThickness: 0.1,
        bevelSize: 0.1,
        bevelSegments: 0.1
    } );
    var txt_mat = new THREE.MeshPhongMaterial({color:0xffffff});
    var txt_mesh = new THREE.Mesh(geometry, txt_mat);
    txt_mesh.position.z = 0.2;
    txt_mesh.position.y = 5;
    txt_mesh.rotation.y = -Math.PI/8;
    flag.add(txt_mesh);
    var geometry = new THREE.TextGeometry( 'tiel', {
        font: font,
        size: 1,
        height: 0.5,
        curveSegments: 12,
        bevelEnabled: false,
        bevelThickness: 0.1,
        bevelSize: 0.1,
        bevelSegments: 0.1
    } );
    var txt_mat = new THREE.MeshPhongMaterial({color:0xffffff});
    var txt_mesh = new THREE.Mesh(geometry, txt_mat);
    txt_mesh.position.z = 1.2;
    txt_mesh.position.x = 2.5;
    txt_mesh.position.y = 5;
    txt_mesh.rotation.y = Math.PI/12;
    flag.add(txt_mesh);
    var geometry = new THREE.TextGeometry( '$oft', {
        font: font,
        size: 1,
        height: 0.5,
        curveSegments: 12,
        bevelEnabled: false,
        bevelThickness: 0.1,
        bevelSize: 0.1,
        bevelSegments: 0.1
    } );
    var txt_mat = new THREE.MeshPhongMaterial({color:0xffffff});
    var txt_mesh = new THREE.Mesh(geometry, txt_mat);
    txt_mesh.position.z = 0.28;
    txt_mesh.position.x = 4.5;
    txt_mesh.position.y = 5;
    txt_mesh.rotation.y = Math.PI/7;
    flag.add(txt_mesh);
    var geometry = new THREE.TextGeometry( 'Ware', {
        font: font,
        size: 1,
        height: 0.5,
        curveSegments: 12,
        bevelEnabled: false,
        bevelThickness: 0.1,
        bevelSize: 0.1,
        bevelSegments: 0.1
    } );
    var txt_mat = new THREE.MeshPhongMaterial({color:0xffffff});
    var txt_mesh = new THREE.Mesh(geometry, txt_mat);
    txt_mesh.position.z = -1;
    txt_mesh.position.x = 7;
    txt_mesh.position.y = 5;
    txt_mesh.rotation.y = -Math.PI/8;
    flag.add(txt_mesh);

} );
scene.add(flag);

这是我能想象在三个 JS 中执行此操作的唯一方法，如果您只是在搜索制作 3D 对象，我建议您安装 3D builder 并尝试那里的选项，然后将对象加载到三个 js。