Caco的奇幻之旅４- BufferGeometry Three.js 资料视觉化-58码农网

前言

上週日出了车祸，左腿缝了两针，花了不少时间跑医院，这次文章会短一点唷～我会早点康复回来继续研究的！

先前跟朋友讨论的时候，承诺了自己要做音乐频谱的分析，于是延续先前的渲染了点、线，这次，要怎么渲染平面呢？

先尝试了sin、cos生成简单的图形，动画请参考

接着着色、迭代计算：

等等，这不就是Sphere嘛!!

发现我画出一颗球的时候也是傻了，赶紧去官方文件查阅，结果人家的Sphere一堆功能，远远超出了这个...不是呀，说到底我也不是要做一颗球，只是研究！研究！

动画请参考

先从这里下手，输入一个高度值y，生成一个高度为y的长方体，八个点要操控，算简单吧？经过一阵大脑风暴，产出的逻辑大概是这样：

好啦其实没那么快，处理了一些Bug，型别上的问题，顺序的安排，稍微花了一点时间，大概一个晚上吧，而且还有关键的问题－－效能。

动画请参考

查了一下BufferArray放新的attribute进去就等同于造一个新的（浪费资源），得在初始化的阶段就先限定好vertices的数量，再做动态更新和渲染，结果...就掉祯拉！

不过最主要应该是我用了太多的...运算子，把上万笔的阵列摊平+合併耗费太多时间了。

其实这几週也不是只弄了这个，花了不少时间研究React，了解了各种Hook，必须说是个酷东西！但我也被提醒，很多时候用原生Js就能解决了不要想得太複杂。

那照这逻辑什么时候使用框架才好呢？
我只是想透过实践React学习呀！（吶喊