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）使用加载了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示例：

Answer 2

如果您要搜索“如何在3D对象中适合3D文本”，我将解释如何做到这一点，让我们从理论入手，

想象一下，如果您的摄像头是从y轴（三个js轴）观看的，那么假设有一个标记形式为sin（2 * pi）的标记，那么您将添加一个完全适合函数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中。

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

2 个答案: