Search code examples
javascriptthree.jsvertices

Further smooth the vertices of THREE.TextGeometry object via threex.dilategeometry.js


This is quite a specific question so I will do my best to articulate and explain the problem. So my goal is to create an effect that makes my TextGeometry look dilated or Bloated Text. I managed to find a Three.js extension called threex.dilategeometry.js will allows me to dilate the geometry of the object.

  1. For example this is how my text normally looks:

Normal TextGeometry

  1. With the inclusion of the threex.dilategeometry I apply a dilate factor of %15 so the text now looks like this:

threex.dilategeometry effect

So has you can see the effect works as expected. Please take a look at the code for this below:

    //Self made function to create text

    var one = new threeLab.asset.CreateMasterText(this.text,'Lambert');
    this.scene.add(one.wireframe);
    this.scene.add(one.mesh);

    //lets clone it
    var geoclone = one.geometry.clone();

    //need these to make it work
    geoclone.mergeVertices();
    //geoclone.computeCentroids();
    geoclone.computeFaceNormals();
    geoclone.computeVertexNormals();

    //the threex dilate effect
    THREEx.dilateGeometry(geoclone, 0.15);

    //create new material and add to a new mesh to create the halo effect
    var testMat     = new THREE.MeshNormalMaterial({color:0x222222});
    var meshHalo    = new THREE.Mesh(geoclone, testMat );

    this.scene.add( meshHalo );

In order for the extension to work it is reliant on:

    geoclone.mergeVertices();
    geoclone.computeFaceNormals();
    geoclone.computeVertexNormals();

Which I assume does all the vertices/face calculations to translate them with the dilate effect. One thing that I have noticed as a result of the effect with TextGeometry is that there are parts of the letters which have not translated well and you will see jagged edges on some of the letters:

enter image description here enter image description here

So my question being, is it possible to somehow smooth further the vertices of the Text geometry to give a more smooth and less jagged appearance?

UPDATE 30/03/17

So I increased the bevel-segments of my extruded text geometry which helped to round it off better before I applied the threex effect

bevelsegments increase

bevelsegments2


Solution

  • So I increased the 'Bevelsegments' of the TextGeometry object to create a more rounder text. The whole purpose of the exercise is that I wanted to encase text with the object like below:

    enter image description here

    enter image description here

    Many thanks @2pha :)