BufferGeometry应用2-制作变形geometry
- 学习ThreeJS的捷径
- 【仅建议了解不建议深入】点线面操作
-
- 祭奠一下新版本被移除的geometry
- 操作点
- 操作线
- 操作三角面
- 大多数情况下不建议用代码来操作模型变形
- 下一篇预告
学习ThreeJS的捷径
本段内容会写在0篇以外所有的，本人所编写的Threejs教程中
对，学习ThreeJS有捷径
当你有哪个函数不懂的时候，第一时间去翻一翻文档
当你有哪个效果不会做的时候，第一时间去翻一翻所有的案例，也许就能找到你想要的效果
最重要的一点，就是，绝对不要怕问问题，越怕找找别人问题，你的问题就会被拖的越久
如果你确定要走WebGL/ThreeJS的开发者路线的话，以下行为可以让你更快的学习ThreeJS
- 没事就把所有的文档翻一遍，哪怕看不懂，也要留个印象，至少要知道Threejs有什么
- 没事多看看案例效果，当你记忆的案例效果足够多时，下次再遇到相似问题时，你就有可能第一时间来找对应的案例，能更快解决你自己的问题
- 上述案例不只是官网的案例，郭隆邦技术博客，跃焱邵隼，暮志未晚等站点均有不少优质案例，记得一并收藏
http://www.yanhuangxueyuan.com/ 郭隆邦技术博客
https://www.wellyyss.cn/ 跃焱邵隼
http://www.wjceo.com/ 暮志未晚
这三个站点是我最常逛的站点，推荐各位有事没事逛一下，看看他们的案例和写法思路，绝对没坏处
【仅建议了解不建议深入】点线面操作
我们通过之前的学习，学到了如何生成bufferAttribute数据，那么，我们也自然能通过访问bufferAttribute来控制物体的点线面
控制台打印的结果：
如上图所示，我们看到了被掀开了一个角的box
嗯哼，好像发现了一个新世界，那么我们再改的夸张点
不出预料，碎的渣都不剩了
祭奠一下新版本被移除的geometry
关于geometry，我只能说，它曾经的确是一个很好用很实用的类，也是我新手时期入门threejs的一个重要里程碑，如今它已经被移除快一年了，当处理一些需要操作geometry的点线面的问题时，我就总会想到它，下面是关于geometry的几个问题与解答
Q : 什么是geometry
A : geometry是threejs早期版本的一个类，它在126版本被移除
Q : geometry相比bufferGeometry的优点
A : geometry更容易学懂，在做变形这方面要优于bufferGeometry，且如果你的团队想要开发一款以threejs为底层的建模软件的话，那么geometry比起bufferGeometry来说是更好的选择
关于变形操作，使用bufferGeometry时：
使用geometry时：
同样是变形操作，bufferGeoemtry要复杂一点，如果顶点数量更多的情况下，明显geometry更占据优势
同样的点线面操作，bufferGeometry的学习难度方面，要比geometry要难很多，bufferGeometry更抽象
Q：geometry相比于bufferGeometry的缺点
A：geometry在处理完顶点之后，还需要经历一步，将geometry转换为bufferGeometry的过程，threejs开发者认为这将大量的浪费内存和资源，早在笔者最初接触threejs时，作者已经在推荐使用bufferGeometry了，也刻意标明bufferGeometry比geometry难以入门一些
操作点
上述代码已经做了基本的点操作，这里做个总结：
- 从bufferAttribute的position中，获取到三维顶点
- 并区分清楚对应的xyz
- 修改最终需要的x,y,z值
但是有时候多个三角面会共用顶点，此时我们还需要筛查，在数组中，找到数据完全一样的一组数据，所以就需要借助数组和vector3对象，当找到了这些点位后，修改一个点之后，同时要修改所有相同数据的数据，才能保证你的所有三角面都跟随该点位移动
操作线
与操作点相似，找到线相关的两个顶点，对两个顶点同时进行操作即可
操作三角面
与操作点相似，找到三角面相关的3个顶点，对三个顶点同时进行操作即可
大多数情况下不建议用代码来操作模型变形
使用代码操作变形，简单的图形还好，如果是复杂的图形变换，恐怕是有些建模师都望而却步了。。。
笔者目前为止，没有接触过变形相关的需求，所以对于变形geometry也不用过于深入的了解和在意
下一篇预告
材质纹理篇
来源：幻梦往昔
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！