Duplicate points in three.js font

穿精又带淫゛_ 提交于 2020-01-01 18:51:12

问题


I've used Facetype.js to convert a ttf font to a js font for three.js however I'm getting a number of duplicate point errors like so:

THREE.Shape: Duplicate point 41.52:10.928 THREE.ShapeUtils: Unable to triangulate polygon! in triangulate()

How do I fix these issues?


回答1:


Either remove the duplicates from your geometry before you do the triangulation or use a different triangulation library for example earcut.js.

Earcut is less sensitive for flaws in your geometry definition (like duplicate points or intersecting edges). You can easily use a different triangulation library using an adapter that I made and shared here on GitHub.

Just download the dependencies and do:

THREE.Triangulation.setLibrary( THREE.Triangulation.libraries.earcut );

With switching to earcut you will (most likely) also get some performance increase.


Note: As long as your geometry looks fine you don't really need to worry about these error messages and you could just decide to ignore them as well.




回答2:


@Wilt, works well. Worth pointing out to anyone using this library that if you are using it with earcut and you have already built your own renderer/environment/lights etc. then all you need to do is include the following:

<!-- include the earcut triangulation library -->
<script type="text/javascript" src="earcut.js"></script>
<script type="text/javascript" src="triangulation.js"></script>
<script type="text/javascript" src="viewers/loader.js"></script>

and then set the library as mentioned at the start of your script.

/* set the triangulation library to earcut */
THREE.Triangulation.setLibrary( THREE.Triangulation.libraries.earcut );


来源:https://stackoverflow.com/questions/36692985/duplicate-points-in-three-js-font

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!