threejs 渲染上百万个三角很卡 该如何优化呢

Question

当我渲染一个 vox 的体素模型时，我使用 threejs 根据每个体素的坐标使用 Vector3 构成正方形再拼接成体素方块， 如下：我用了一万来个三角就渲染出来了

但是如果我想把体素块 渲染成 乐高砖的模样 如下：

我就需要在每一个上方为空的体素块上渲染一个上闭合的圆管，为了使它足够圆滑，我把它切割成 64 份，这样每一个圆柱就需要一个 64 个三角拼接成的封顶圆， 一个 64 * 2 个三角拼接成的圆管， 我一下子需要渲染上百万个三角形， fps 从 60 骤降到 30，若果渲染个大一倍或者两倍的体素模型， 我就需要渲染千万的三角形， fps 变成个位数，浏览器卡爆。 个位走过路过的大腿们，谁能帮帮我，随便一个 3d 游戏人家都不会卡啊，有什么解法没啊。。知识匮乏的弱鸡求教！

Answer 1

这种画大量相似物体的情况太好提升性能了主要在于两点，一是减少drawCall，在three.js里面就是将多个对象合并，一次渲染出来然后就是实例化。你可以在three.js的例子里搜索instance补充一下，要减少drawCall，实际上就是尽量将静态的对象的geometry合并为一个geometry，因为不需要对他们单独进行操作，所以可以作为一个物体来渲染。这样会大幅提升性能