文章/答案/技术大牛

发布

社区首页 >问答首页 >A帧中GLTF模型的Ammo.js碰撞检测

问A帧中GLTF模型的Ammo.js碰撞检测
EN

Stack Overflow用户

提问于 2022-03-01 16:30:47

回答 1查看 675关注 0票数 1

如何用gltf模型检测球的碰撞，使球模型在碰撞后从场景中消失。在我的代码中，碰撞检测适用于球间的碰撞，但不适用于gltf模型。

<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
<script src="http://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.1.1/dist/aframe-extras.min.js" ></script>
<script>
   AFRAME.registerComponent('explode', {
       init: function() {
           var el = this.el;
           el.addEventListener("collidestart", function () {
               console.log('collision detected');
               el.parentElement.removeChild(el);
    });
  }
});
</script>
</head>
<body>
 <a-scene physics=" driver: ammo">
   <a-assets>
    <a-asset-item id="human" response-type="arraybuffer" src="human.glb"></a-asset-item>
   </a-assets> 
   <a-camera position="2 5 2" look-controls wasd-controls>
        <a-cursor></a-cursor>
        </a-camera>
  <a-entity explode gltf-model="#human" class="enemy" ammo-body="type:   kinematic; 
     emitCollisionEvents: true;" ammo-shape="type: sphere"
     position="3 5 0" scale="0.1 0.1 0.1" rotation="0 180 0">      
    </a-entity>
  <a-sphere explode ammo-body="type: kinematic; emitCollisionEvents: true;"
    ammo-shape="type: sphere" position="1 5 0" velocity="1 0 0" radius="0.5"
    color="blue"></a-sphere>
  <a-sphere explode ammo-body="type: kinematic; emitCollisionEvents: true;"
    ammo-shape="type: sphere" position="5 5 0" velocity="0 0 0" radius="0.5"
    color="blue"></a-sphere>
 
 </a-scene>
</body>
</html>

javascript

aframe

ammo.js

回答 1

Stack Overflow用户

发布于 2022-03-01 22:11:35

我希望这里发生的事情是，当弹药形状在GLTF模型上初始化时，GLTF模型没有加载。

如果您检查您的控制台，很可能会看到以下错误：

Cannot use FIT.ALL without object3DMap.mesh

弹药形状不能自动适应(还不存在)网格，所以你将结束没有任何形状-因此没有碰撞。

一个简单的解决方法是显式地指定弹药形状的半径：

ammo-shape="type: sphere; fit: manual; sphereRadius:0.5"

如果您真的想避免指定radius，另一个解决方案是编写一个小组件，等待实体上的model-loaded事件，并且只在此时添加ammo-shape和ammo-body (需要同时添加它们)。

像这样的事情应该有效：

AFRAME.registerComponent("autofit-gltf-ammo-sphere", {

  init() {
    this.el.addEventListener("model-loaded", () => {
        this.el.setAttribute("ammo-shape", "type:sphere");
        this.el.setAttribute("ammo-body", "type:kinematic; emitCollisionEvents: true");
    });
  }
});

然后在这样的实体上使用：

<a-entity explode gltf-model="#human" class="enemy" autofit-gltf-ammo-sphere
     position="3 5 0" scale="0.1 0.1 0.1" rotation="0 180 0">      
</a-entity>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71311696

复制

相似问题

问A帧中GLTF模型的Ammo.js碰撞检测
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问A帧中GLTF模型的Ammo.js碰撞检测EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问A帧中GLTF模型的Ammo.js碰撞检测
EN