A-frame：如何设置墙壁对撞机答案

【问题标题】：A-frame: How to setup wall collidersA-frame：如何设置墙壁对撞机
【发布时间】：2017-03-30 06:56:38
【问题描述】：

谁能告诉我如何设置墙壁对撞机？我已经使用 OBJ 文件为墙壁设置了一个房间。非常感谢。

【问题讨论】：

标签： aframe

【解决方案1】：

查看 Don McCurdy 的“Walls”示例的源代码： https://sandbox.donmccurdy.com/vr/walls/

注意在 a-scene 元素中添加的物理组件。这就是神奇的原因。

您需要在 aframe 中包含 aframe-extras 脚本。

【讨论】：

【解决方案2】：

kinematic-body.js 已弃用。 Don McCurdy 鼓励使用teleportation 也看到这个帖子：Move camera in aframe with physics engine

【讨论】：

【解决方案3】：

对于现在正在寻找一个好的解决方案的人来说，到目前为止我发现的最好的方法是使用nav-mesh

nav-mesh 是一个简单的 3d 对象，代表项目中的可步行区域。

这是你需要的：

要生成导航网格，请使用插件https://github.com/donmccurdy/aframe-inspector-plugin-recast
要移动相机，您不会使用 wasd-controls，而是使用 aframe-extras 的 movement-controls

如何

将插件添加到页面后，请执行以下步骤：

我发现没有墙更好，所以我先隐藏墙，并确保地板在墙的位置结束。此外，将用户无法通过的所有对象保留在最终位置。
在浏览器中，使用ctrl + alt + i打开inspector
在检查器的底部，您可以将 cellSize 和 cellHeight 更改为 0.1
导出并保存
在 HTML 中添加一个新资源： <a-asset-item id="my-nav-mesh" src="assets/navmesh.gltf"></a-asset-item>
添加一个指向导航网格的新实体： <a-entity gltf-model="#my-nav-mesh" nav-mesh position="0 -0.1 0" visible="false"></a-entity>
使用constrainToNavMesh: true; 将movement-controls 添加到您的相机装备。这是我的结局：

<a-entity id="rig" movement-controls="constrainToNavMesh: true; speed: 0.8;" position="0 0 26">
   <a-entity id="camera"
      camera position="0 2.6 0"
      look-controls="pointerLockEnabled: true">
   <a-cursor></a-cursor>
</a-entity>

预期结果：

因此，例如，通过添加导航网格并使用移动控件而不是 WASD，您将使您的相机只能在创建的网格上移动。

您还可以使网格不可见（将 visible="false 添加到 nav-mesh 实体），并在 Z 上切换其位置，使其感觉不像更高的平面。

来源

我实际上是从 Danilo Pasquariello 的这个惊人的免费 youtube 视频中获得了这些信息。 https://www.youtube.com/watch?v=Y52czIft9OU

我的项目在完成上述步骤后的样子（我刚刚让这个屏幕截图的网格再次可见

【讨论】：

【解决方案4】：

aframe 检查器插件不适用于我的项目。我做了那个临时的

<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script
    src="https://unpkg.com/aframe-aabb-collider-component@^2.2.1/dist/aframe-aabb-collider-component.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>

<script>
    let isStop = false
    AFRAME.registerComponent("cam", {
        init: function () {
            window.addEventListener('keypress', e => {
                if (isStop) {
                    const camera = document.getElementById('camera')
                    if (e.key === 's' || e.key === 'a' || e.key === 'd') {
                        camera.setAttribute('wasd-controls-enabled', 'true')
                        isStop = false
                    }
                }
            })
            this.el.addEventListener("hitclosest", (e) => {
                console.log('ok');
                isStop = true
                this.el.setAttribute('wasd-controls-enabled', 'false')
            })
            this.el.addEventListener("hitstart", (e) => {
                isStop = true
                this.el.setAttribute('wasd-controls-enabled', 'false')
            })
        }
    })
</script>
<a-scene>
    <a-entity id="rig" position="0 .5 -1">
        <a-camera wasd-controls-enabled="true" cam id="camera" aabb-collider="objects: .collide"
            geometry="primitive: box" aabb-collider="objects: a-box">
            <a-cursor></a-cursor>
        </a-camera>
    </a-entity>
    <a-box color="blue" class="collide" width='1' height='1' position="0 1.6 -5">
    </a-box>
    <a-box color="red" class="collide" width='1' height='1' position="2 1.6 -5">
    </a-box>
    <a-box color="pink" class="collide" width='10' height='1' position="10 1.6 -5">
    </a-box>

</a-scene>

【讨论】：