WebGL教程_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图片的光圈颜色或透明度进行渐变就可以。

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com