一、问题描述

生成字体后，随着整个物体的旋转，字也会转，图转到后面的时候，字也会背面朝前，非常难看。无法读懂。如下图的效果Screen Shot 2021-03-04 at 5.24.38 PM.png

二、问题原因

因为没有规定字的朝向，研究了很多网上的帖子，比如如何让物体相对相机静止，并没有很好的成效。

三、解决方案

  1. 第一次发现有lookAt这个方法，可以是物体始终看向相机，貌似能解决问题， testMesh[i].lookAt(camera.position) ,但是遇到另一个问题，有些在下方，会“抬头”看向相机，右下方的字会向左上方“抬头”，导致字会倾斜，严重影响美观，如图：Screen Shot 2021-03-04 at 5.32.07 PM.png
  2. 为了让字平行，不倾斜，又研究了很久，解决思路就是让字看向新的点，新的点和它自己的坐标关系是，xy都一样，就只有z坐标延长，依然失败了，因为这个逻辑不对，字根本出不来。 ```javascript textMeshes[i].lookAt(textMesh[i].position.add(new THREE.Vector3(0,0,1000))))
  2. 3. 尝试新方案，看向camera位置上z轴方向上无限远的点。
  3. ```javascript
  4. textMeshes[i].lookAt(camera.position.clone().add(new THREE.Vector3(0,0,1000)))

理念就是看向无限远的z轴方向的点，看起来就像在看前面一样，依然失败，因为鼠标拖动这个球的时候，相机的位置在变，一开始是（0，0，40），拖一下相机的位置就可能变成（20，20，39），那这个时候再加上这个（0，0，1000）的三维向量，就不知道是哪里了，根本不对，这也是最后才发现的主要原因，这会导致字不会朝向相机。

  1. 最后解决方案，应该是始终看向相机的位置的远一点的点。。 ```javascript textMeshes[i].lookAt(camera.position.clone().add(new THREE.Vector3(camera.position.x100,camera.position.y100,camera.position.z*100)))

``` 完美解决！
demo1.gif

注意：camera的位置要克隆一下才能用，因为不克隆会更改当前camera的位置，制作过程中还有许多其他小坑，欢迎提问，禁止转载和盗用本文章中的任何图文