Three.js 原点或圆圈效果 - 文章教程

Three.js 原点或圆圈效果

发布于 2021-09-01 字数 1417 浏览 956 评论 0

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

想挽留

这个人比较懒,什么都没有填写!

18 文章
3 评论
20002 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0