Caco的奇幻之旅３- 二元树 Binary Tree in Three.js（上）-58码农网

前言

又过了几个礼拜，Caco我从零基础开始学习Three，我必须承认，头好痛呀!!在2D平面画一条线，到了3D要多複杂有多複杂，如果你跟我一样缺乏建模的知识，那么我只有一个建议，保持耐心。

这次主要在钻研二元树的结构设计，以及怎么把每一个模型正确配置，目前只进展到点、线、还没有面，也算是堪用了，就是...有点丑？不管了，还是先来聊聊实作项目吧！

这两个物件是让我最头痛的，比如以下三者：模型在空间的位置、向量在空间的位置、材质在空间的位置，就很容易搞混，目前这个专案只用简单粗暴的方法区分：

一个点或线的属性由Material设定数个点的集合由Geometry设定

还记得开篇尝试的粒子系统吗？很适合移植过来做测试，于是乎：

我学会做立方体了，那么我就把geometry改成BufferAttribute，就可以了吧，呵呵！好简单。

然而，上面的写法什么都不会有，首先BufferGeometry需要输入一串阵列来表示向量，接着要使用PointsMaterial才会对每一个点做渲染。如下：

一直有个想法，是把2021铁人赛的作品做成一颗树，今天终于实现了！

我会做粒子、也会设定材质了，只要加alpha就可以让材质透明了吧！

结果才发现三个点之间有上下层关係、最底层（第一个点）渲染是不考虑透明的，若离摄影机较近会形成一个方块直接挡住第二、第三个点。

因此一个简单、直接的做法就是让所有粒子共用一个geometry，并且为每一个粒子都建立一个particleMaterial，产生一个独立的模型，用模型本身去调整位置、以及其专属的材质去设定颜色

目前产能不够，没办法花太多精力教学和解释，请多多包涵！大部分精力还在专研学习新东西，上次的WebWorker系列也未能继续拓展，只能说，加油加油！