A 型框架：如何设置墙壁碰撞器

Question

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

Answer 1

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

请注意在 a 场景元素中添加了物理组件。这就是神奇的地方。

您需要将 aframe-extras 脚本与 aframe 一起包含在内。

Answer 2

kinematic-body.js 已弃用。 Don McCurdy 鼓励使用 teleportation 也看到这个post：

Answer 3

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

导航网格是一个简单的 3d 对象，代表您项目中的可步行区域。

这是您需要的：

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

如何

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

我发现在没有墙的情况下生成更好，所以我先隐藏墙，并确保地板在墙所在的位置结束。此外，将用户不应通过的所有对象保留在最终位置。
在浏览器中，使用ctrl + alt + i打开检查器
在检查器的底部，您可以将 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 添加到导航网格实体），并切换其在 Z 轴上的位置，使其感觉不像更高的平面。

来源

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

完成上述步骤后我的项目如何（我只是让网格再次可见以用于此屏幕截图

Answer 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>

A 型框架：如何设置墙壁碰撞器

A-frame: How to setup wall colliders

aframe

如何

预期结果：

来源

完成上述步骤后我的项目如何（我只是让网格再次可见以用于此屏幕截图