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球体对撞机组件以获得有效的近似碰撞

Answer 2

我的猜测是，three.js通过调整自定义模型的框边界来减慢您的网站。
我会在您的模型中手动添加一个框实体：

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

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

<强>更新
如果您只有.obj的问题，并且collada不会导致问题，请尝试将obj模型转换为.dae。
如果您的问题仍然存在，请尝试我的边界覆盖。

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

2 个答案: