javascript - 使用边界框进行碰撞检测会减慢帧速度

Question

嗨，我最近制作了一个用于原始形状和非原始形状之间的碰撞检测的组件。我使用的是 Three.js 中提供的边界框碰撞......它工作正常，但是当我将它用于自定义对象时，它会减慢整个体验......请查看我的组件并告诉我问题是什么......

AFRAME.registerComponent('manual-body', {
          matchingElements: function(attribute){
            var matchingElements = [];
            var allElements = document.getElementsByTagName('*');
            for (var i = 0, n = allElements.length; i < n; i++){
              if (allElements[i].getAttribute(attribute) !== null){
                // Element exists with attribute. Add to array.
                matchingElements.push(allElements[i]);
              }
            }
            return matchingElements;
          },
          tick: function(){
            var elements=this.matchingElements('manual-body');
            for(var i=0;i<elements.length;i++){
              if(this.el.id==elements[i].id){
                continue;
              }
              firstBB = new THREE.Box3().setFromObject(elements[i].object3D);
              secondBB = new THREE.Box3().setFromObject(this.el.object3D);
              var collision = firstBB.intersectsBox(secondBB);
              if(collision){
                this.el.emit('collision', {elSource: this.el,elTarget:elements[i]});
              }
            }
          }
        });

您认为造成延迟的原因是什么？是tick函数内部的碰撞逻辑还是别的什么......

谢谢

Answer 1

方法 THREE.Box3().setFromObject 的工作原理是循环模型中的每个顶点以确定边界框。对于复杂模型来说，运行 tick 中的每一帧的工作量太大。

您可能想查看aframe-extras用于高效、近似碰撞的球体碰撞器组件