A帧：限制模型

Question

我遇到了A-Frame的性能问题，我试过的都没有效果。在Best Practices - Performance的A-Frame网站上，提到了以下内容：

  

限制模型上的面和顶点数。

This model有近10万个顶点和30k个面。如何减少面和/或顶点的数量？要求用户可以分别与模型中的每个框进行交互，例如，通过改变其颜色或透明度或位置。有没有办法创建一个网格或其他任何东西，并且仍然可以自己与每个元素进行完全交互？

除此之外，我不知道如何提高性能。场景没有灯光，纹理，碰撞，射线播放器和所有其他重物。这些只是一些盒子......

Answer 1

此场景中的问题不是顶点或面的数量（分别为100k和30k很好），而是场景图的大小和GPU绘制调用的数量。有2400个<a-box/>元素，每个元素都需要单独的绘制调用，这太多了。绘制调用的数量应该尽可能低，理想情况下＆lt; 100。

要保持所有2400个框的交互，您需要（1）创建一个自定义组件，将所有框放入单个THREE.BufferGeometry并更改geometry.attributes.position内的顶点位置和颜色， geometry.attributes.color，或（2）使用类似instancing的技术。两者都需要一些自定义JS，而不仅仅是HTML标记，因为它们不是作为组件构建到A-Frame中。