所以，我已经被这个问题难住了一段时间了。我需要能够让我的相机实体与 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>最佳答案
如果您想使用物理引擎来检测与相机的碰撞 - 它需要成为物理引擎的一部分。它不能是 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5e594d5e525a125a474b4d5e4c7f4909110e110e" rel="noreferrer noopener nofollow">[email protected]</a>/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中有一个简单的例子.
关于javascript - 使用 JavaScript 物理库与 A 型框架对象发生碰撞，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60518510/