three.js原点或圆圈效果

three.js原点或圆圈效果

通过Three.js实现一个圆点或圆圈的效果，如果不自定义着色器的代码情况下，一般有两个思路，一个是通过Three.js几何体API绘制任何一种你想要的轮廓，一个是通过背景透明的纹理贴图来实现。

几何体

通过CircleGeometry绘制一个圆形轮廓，RingGeometry可以绘制一个圆环形状，通过ShapeGeometry可以绘制任何轮廓，只要输入轮廓的坐标数据，然后通过几何体创建的轮廓创建一个网格模型即可。

纹理贴图

对于通过几何体创建一个圆点或圆圈形状，一般要使用网格模型Mesh，如果使用纹理贴图的方式，对于点模型Points、精灵模型Sprite和网格模型Mesh都是可以的。

如需要一个点或圈是什么形状，只需要美术出一张背景透明的.png格式图片就可以，把显示的形状，绘制在png图片上即可，就像普通前端中的UI标签图片一样。然后在Three.js代码中加载图片的一个纹理对象Texture，然后赋值给模型对象绑定的材质对象.map属性即可，这时候要注意一定要把材质对象的.transparent属性设置为true，否则png透明区域没用，无法显示一个你想要的轮廓。

至于项目中选择网格模型还是说精灵模型，要根据具体情况来定，不过纹理贴图的设置代码都是一样的。

如果选择网格模型一般需要通过Threejs几何体APIPlaneGeometry来创建一个矩形平面，然后可以给他设置任何你想要的纹理贴图形状。

对于使用纹理贴图，可以实现一个渐变色的光圈相比较通过几何体API创建网格模型的情况也很容易，你只需要让美术把png图片的光圈颜色或透明度进行渐变就可以。

本文转载地址:我的个人技术博客