javascript3dthree.jscsg

Substract 3D text to a Geometry in Three.js


I want to transform my 3D text to Geometry so I can use it with CSG (I used a Three.js CSG wrapper also) to substract it from another object like in this question.

My 3D text :

loader.load('optimer_regular.typeface.json', function (font){
    var text = new THREE.TextGeometry('Tayst', {
        font: font,
        size: 4,
        height: 3
    });
    var textMat = new THREE.MeshBasicMaterial({color: 0xffffff});
    var textGeo = new THREE.Mesh(text, textMat);
    textGeo.position.x = -7;
    textGeo.position.z = 6;
    scene.add(textGeo);
});

My substract thing I want to do for the 3D text (but here it's from circles):

var dots = new THREE.Geometry();
    for(var i = 0; i < coordinates.length; i++){
        var coords  = coordinates[i];

        sphereMesh.position.x   = coords[0];
        sphereMesh.position.y   = coords[1];
        sphereMesh.position.z   = coords[2];

        sphereMesh.updateMatrix();
        dots.merge(sphereMesh.geometry, sphereMesh.matrix);
    }

var sphereCsg = THREE.CSG.toCSG(dots);

var resultGeo = THREE.CSG.fromCSG(resultCsg.subtract(sphereCsg));

cube = new THREE.Mesh(resultGeo, material);

But the thing is, I think, I need to convert my text to a real Geometry so I can substract it?


Solution

  • Well i found out using the library I already got, but instead I didn't had to do the "merge" for example.

    Here is the working code (in case someone needs it) :

    var loader = new THREE.FontLoader();
    loader.load('helvetiker_regular.typeface.json', function (font){
        var text = new THREE.TextGeometry('Test', {
            font: font,
            size: 4,
            height: 0.5
        });
        var textGeo = new THREE.Mesh(text);
        textGeo.position.x = -5;
        textGeo.position.z = 7.5;
    
        var txtCsg = THREE.CSG.toCSG(textGeo);
    
        var resultGeo = THREE.CSG.fromCSG(resultCsg.subtract(txtCsg));
    
        cube = new THREE.Mesh(resultGeo, material);
        scene.add(cube);
    });