使用 JavaScript 物理库与 A-Frame 对象碰撞答案

【问题标题】：Collision with A-Frame objects using JavaScript physics library使用 JavaScript 物理库与 A-Frame 对象碰撞
【发布时间】：2020-03-04 03:08:19
【问题描述】：

所以，我已经被这个问题难住了一段时间了。我需要能够让我的相机实体与 A 帧场景中的形状实体发生碰撞，从而阻止相机穿过它们。本质上，我想使用 A-Frame 物理引擎创建墙壁，可以在这里找到：

https://github.com/donmccurdy/aframe-physics-system

我找遍了，找不到一个简单的例子来说明如何获得这个功能！我已经花了太多时间在网上四处寻找。

我在 A-Frame 中创建了一个简单的场景，其中已经包含了 Don 的物理引擎的基础知识。我创建它是为了在将其添加到我正在处理的更复杂的场景之前尝试测试单个墙功能。

对此的任何帮助将不胜感激！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
    <script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
    <title>Aframe Physics Demo</title>
</head>

<body>
    <a-scene physics="debug: true">

        <a-entity id="camera" position="0 1.6 0">
            <!-- Camera Entity -->
            <a-entity id="camera" acceleration="200w" camera look-controls wasd-controls></a-entity>
        </a-entity>

        <a-box static-body position="0 0 -3" color="#4CC3D9" width="8" height="5" depth="0.5"></a-box>

        <a-plane static-body rotation="-90 0 0" position="0 0 -4" width="10" height="10" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
</body>

</html>

【问题讨论】：

标签： javascript html aframe

【解决方案1】：

如果您想使用物理引擎来检测与相机的碰撞 - 它需要成为物理引擎的一部分。不能是static-body，因为它需要四处移动，也不能是dynamic-body，因为它需要被玩家控制，而不是掉下来（重力）和旋转。

Don McCurdy 创建了一个kinematic-body 组件，其中考虑了相机/播放器。它作为physics extras的一部分提供

所以有一个相机：

<a-entity camera kinematic-body></a-entity>

你可以检测到它碰撞的任何物体：

// inside an a-frame component - this is straight from the docs
this.el.addEventListener('collide', function(e) {
   console.log('Player has collided with ', e.detail.body.el);
   e.detail.target.el; // Original entity (camera).
   e.detail.body.el; // Other entity, which the camera touched.
   e.detail.contact; // Stats about the collision (CANNON.ContactEquation).
   e.detail.contact.ni; // Normal (direction) of the collision (CANNON.Vec3).
});

在下面查看：

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://threejs.org/examples/js/deprecated/Geometry.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.js"></script>
<script src="https://n5ro.github.io/aframe-physics-system/dist/aframe-physics-system.js"></script>

<script>
  AFRAME.registerComponent('foo', {
    init: function() {
      this.el.addEventListener('collide', function(e) {
        console.log('Player has collided with ', e.detail.body.el);
      });
    }
  })
</script>
<a-scene physics="debug: true">
  <a-entity id="rig" movement-controls kinematic-body foo>
    <a-entity id="camera" camera position="0 1.6 0" look-controls></a-entity>
  </a-entity>
  <a-box static-body position="0 0 -3" color="#4CC3D9" width="8" height="5" depth="0.5"></a-box>
  <a-sphere dynamic-body position="0 1 -2" color="#4CC3D9"></a-sphere>
  <a-box scale="20 0.01 20" static-body></a-box>
</a-scene>

如果形状很简单，请考虑使用box collider 或球体对撞机。这个SO answer有一个简单的例子。

【讨论】：

感谢您的及时回复。似乎每当我在更复杂的场景中添加一个新的静态体时，我都会遇到“鬼碰撞”并遇到不可见的物体。当我更改相机开始位置时，这些不可见的物体会改变位置。知道会发生什么吗？
物体是复杂模型吗？碰撞网格是否显示在调试模式下，或者您是否在“无”反弹？
将相机实体嵌套在位置实体中似乎有问题。当我移除相机嵌套在其中的外部实体时，碰撞工作正常，但是一旦相机实体不再嵌套，y 轴位置将不会停留在 1.6 并下降到静态平面位置。我遇到的奇怪问题。
使用movement-controls、like here 的装备更好吗？
@RodrigoDeAlmeidaSiqueira 我添加了一个 sn-p。