如何使用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

如果您正在搜索“如何在 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 构建器并在那里尝试选项，然后将对象加载到三个 js。

Answer 2

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

1. 使用加载了THREE.TextureLoader.

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

2. 使用THREE.TextGeometry：

• 一个例子： https: // Threejs.org/examples/#webgl_geometry_text

3. 使用 CSS3D 解决方案。

• 一个例子：https://thirdjs.org/docs/index.html#examples/en/renderers/CSS3DRenderer

另请检查文档页面上的 UI 示例THREE.TextGeometry：