问使用Aframe 1.2.0和Ammo.js时冲突不起作用
EN

Stack Overflow用户

提问于 2021-09-24 10:01:37

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

我开始使用CANNON.js 1.2.0和Ammo.js制作游戏，因为AFrame1.2.0和AFrame1.2.0的支持在未来可能会被弃用。

我有一个非常简单的起点--一个静态的方框--一个动态的球体--点击这个球体来射击--它应该是弹离长方体的，但它正好穿过了它。我试着把shoot函数放到一个组件中，但是同样的事情也发生了。

在此出现故障-> https://descriptive-truthful-sneezeweed.glitch.me

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="theme-color" name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-physics-system@4.0.1/dist/aframe-physics-system.min.js"></script>
</head>

<body>
    <a-scene id="mainScene" vr-mode-ui="enabled: false" physics=" driver: ammo; debug: true; debugDrawMode: 1;"
    device-orientation-permission-ui="enabled: false"
    renderer='antialias: true; colorManagement: true; sortObjects: false; precision: high; logarithmicDepthBuffer: false; physicallyCorrectLights: false;'
    raycaster="objects: .clickable"
    cursor="fuse: false; rayOrigin: mouse">

        <a-box id="backboard" position="0 2 -5" width="1" height="1" depth="0.2" ammo-body="type: static; emitCollisionEvents: true;" ammo-shape="type: box" material="color: tomato;"></a-box>
        <a-sphere id="ball" position="0 0 -2" radius="0.15" ammo-shape="type: sphere; fit: manual; sphereRadius: 0.15;" material="color: cyan;"></a-sphere>

    </a-scene>

<script>

$("#ball").addClass("clickable");
ball.addEventListener("click", shoot);
backboard.addEventListener("collidestart", function() {
    console.log("HIT");
});

function shoot() {
    ball.setAttribute("ammo-body","type: dynamic;");
    const force = new Ammo.btVector3(0, 7, -3);
    const pos = new Ammo.btVector3(ball.object3D.position.x, ball.object3D.position.y, ball.object3D.position.z);
    ball.body.applyImpulse(force, pos);
    Ammo.destroy(force);
    Ammo.destroy(pos);
}

</script>
</body>
</html>

game-physics

aframe

ammo.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-24 14:07:13

错误似乎是由于球体只有ammo-shape组件而没有body造成的。如果这两个都在单击时附加，那么它就会按预期工作：

<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="https://cdn.jsdelivr.net/npm/aframe-physics-system@4.0.1/dist/aframe-physics-system.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      // when clicked attach the body and the shape, and apply the impulse
      this.el.addEventListener("click", evt => {
        this.el.setAttribute("ammo-body", {
          type: "dynamic"
        });
        this.el.setAttribute("ammo-shape", {
          type: "sphere",
          fit: "manual",
          sphereRadius: 0.15
        });
        const force = new Ammo.btVector3(0, 7, -3);
        const pos = new Ammo.btVector3(this.el.object3D.position.x, ball.object3D.position.y, ball.object3D.position.z);
        ball.body.applyImpulse(force, pos);
        Ammo.destroy(force);
        Ammo.destroy(pos);
      })
      // check if the events are working by changing a the boxes color
      document.querySelector("#backboard").addEventListener("collidestart", evt => {
        document.querySelector("#backboard").setAttribute("color", "green");
      })
    }
  })
// the rest is like in the scene from the question
</script>
<a-scene id="mainScene" vr-mode-ui="enabled: false" 
          physics=" driver: ammo; debug: true; debugDrawMode: 1;" 
          device-orientation-permission-ui="enabled: false" 
          renderer='antialias: true; colorManagement: true; sortObjects: false; precision: high; logarithmicDepthBuffer: false; physicallyCorrectLights: false;'
          raycaster="objects: .clickable" 
          cursor="rayOrigin: mouse">

  <a-box    id="backboard" position="0 2 -5" width="1" height="1" depth="0.2" 
            ammo-body="type: static; emitCollisionEvents: true;" ammo-shape="type: box"  
            material="color: tomato;"></a-box>
  <a-sphere id="ball" class="clickable" position="0 0 -2" radius="0.15" 
            material="color: cyan;" foo></a-sphere>
</a-scene>

票数 1

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

原文链接：

https://stackoverflow.com/questions/69313151

复制

相似问题

问使用Aframe 1.2.0和Ammo.js时冲突不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Aframe 1.2.0和Ammo.js时冲突不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Aframe 1.2.0和Ammo.js时冲突不起作用
EN