通过threex.dilategeometry.js

时间:2017-03-29 00:09:38

标签: javascript three.js vertices

这是一个非常具体的问题,所以我会尽力阐明和解释这个问题。所以我的目标是创建一个使TextGeometry看起来扩张或 Bloated Text 的效果。我设法找到名为threex.dilategeometry.js的Three.js扩展名,这将允许我扩展对象的几何形状。

  1. 例如,这是我的文字通常看起来的样子:
  2. Normal TextGeometry

    1. 通过包含threex.dilate几何,我应用扩展因子%15,所以文本现在看起来像这样:
    2. threex.dilategeometry effect

      所以你可以看到效果按预期工作。请看下面的代码:

          //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 );
      

      为了使扩展能够工作,它依赖于:

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

      我假设所有顶点/面部计算都使用扩张效应进行平移。由于TextGeometry的效果,我注意到的一件事是,有些部分字母没有很好地翻译,你会看到一些字母上的锯齿状边缘:

      enter image description here enter image description here

      所以我的问题是,是否有可能以某种方式平滑文本几何体的顶点以提供更平滑和更少锯齿状的外观?

      更新30/03/17

      所以我增加了我的拉伸文本几何体的斜角段,这有助于在我应用三倍效果之前更好地将其四舍五入

      bevelsegments increase

      bevelsegments2

1 个答案:

答案 0 :(得分:0)

所以我增加了'Bevelsegments' TextGeometry对象创建更圆的文本。练习的全部目的是我想用下面的对象包住文本:

enter image description here

enter image description here

非常感谢@ 2pha:)