使用边界框减慢帧的碰撞检测

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.js 通过调整自定义模型的框边界来减慢您的网站速度。
我会在您的模型中手动添加一个框实体：

<a-entity collada-model="my model">
      <a-box></a-box>
</a-entity>

并与其中的框进行碰撞检查。如果你想做某种物理学，试试 Don McCurdy 的 Cannon.js implementation，因为没有必要重新发明轮子 :P

更新
如果您只有 .obj 有问题，而 collada 没有引起问题，请尝试将 obj 模型转换为 .dae。
如果您的问题仍然存在，请尝试我的边界覆盖。

Answer 2

方法 THREE.Box3().setFromObject 通过遍历模型中的每个顶点来确定边界框。对于复杂模型 tick 中的每一帧，运行的工作量太大。

您可能需要查看 aframe-extras 球体碰撞器组件以获得高效的近似碰撞

使用边界框减慢帧的碰撞检测

collision detection using bounding boxes slowing aframe down

javascript

three.js

aframe