加速 THREE.js 的方法答案

【问题标题】：Ways of speeding up THREE.js加速 THREE.js 的方法
【发布时间】：2015-07-08 13:11:41
【问题描述】：

我正在用 THREE.js 编写一个简单的 minecraft 克隆。

但是，结果非常滞后。

我正在为体素使用盒子几何，但是当它们被破坏时我需要移除块并且需要使用鼠标拾取。

我听说加入几何图形会加快速度，但据我所知，这意味着您无法移除任何体素或使用鼠标拾取。

THREE.js 中还有哪些其他的加速方式？

【问题讨论】：

你应该只渲染可见的块，而其他的在数据存储中（就像在真实的 Minecraft 中所做的那样；只渲染块的外部可见顶点，这就是为什么有一些东西被称为xray 纹理包，看看它，你就会明白我的意思，有可见的洞穴系统，因为有暴露在世界上的块）。
我怀疑使用 THREE.js 几何体的速度不够快，即使在 cpu 帮助下进行可见性剔除也是如此。您需要准备每帧绘制 5K 平面（而不是立方体）之类的东西，并且这些数据可能需要每帧更新。如果您不需要支持无限世界/您的世界是静态的，那么您最好的希望是将您的世界组合成一个大网格（在三个中，我相信那是 BufferGeometry）并想出一种方法来更新该网格的一部分，当您需要改变一个体素。但到那时你还不如直接用 WebGL 来做。
如果您可以在没有 THREE.js 的情况下进行操作，我可以为您提供一些关于如何使用 webGL 进行操作的指示，因为我一直在将体素引擎作为一个副项目工作。

【解决方案1】：

每个体素使用一个框（每个体素进行一次绘制调用）在任何机器上都会太慢，即使您是用汇编语言编写的。

您需要为世界的每个部分构建网格。就像将世界划分为 48x48x48 单位块并构建一个包含该区域中所有体素的网格。当用户编辑框时，您编辑网格（顶点）而不是删除框对象。

【讨论】：