为我的 VR 项目在 a-frame js 中使用 nav-mesh 时遇到问题

Question

我为 aframe、aframe extras、recast 插件添加了适当的 CDN

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://recast-api.donmccurdy.com/aframe-inspector-plugin-recast.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.0.1/dist/aframe-extras.min.js">/script>

，在

中添加了我的导航网格实体

 <a-entity id="wallmesh" position="0 0.769 0" gltf-model="navmesh/nav3.glb" visible="false"></a-entity>

对于播放器或相机我试过了，

 <a-entity id="player-rig" >
        <a-entity
          id="player"
          networked="template:#avatar-template;attachTemplateToLocal:false;"
          movement-controls="constrainToNavMesh: true"
          camera="active:true;"
          position="-27 2.5 24"
          
          look-controls
          spawn-in-circle="radius:2"
          rotate-with-camera
        >
        <a-entity id="player-body"  networked="template:#body; attachTemplateToLoacal:false;"         position="-.17 -.88 0"></a-entity>
      </a-entity>
      </a-entity>

但我的相机并没有自行移动，而是出现在与预期不同的位置。如果您在这种方法中发现任何错误，请帮助我...

Answer 1

试试把A-Frame的版本降到1.0.4看看能不能用。

Extras 组件最近没有更新，我注意到的第一件事是从上述版本升级时 navmesh 组件损坏了。我相信 Three.js 中的 Geometry 已弃用。

尝试 Ada Rose Cannon 的 XR boiler plate 并获得 simple-navmesh-constraint。

Answer 2

你的相机在错误的位置并且没有移动这一事实表明你可能遇到了这个问题，因此 A-Frame 没有注意到你有一个 user-defined 相机，并添加了一个默认值相机，接管。 https://github.com/aframevr/aframe/issues/3921

在控制台中，输入

document.querySelector('[camera]')

如果它 returns 2 个元素，你几乎肯定有问题。

最简单的解决方法是确保在 a-scene 中的任何 <template> 标签之前声明 user-defined 相机 （您使用的是联网 A-Frame，所以我猜你有一些？）

或者，在您的组件之一中使用类似此代码的代码也可能会解决此问题。

const sceneEl = document.querySelector('a-scene') if (sceneEl.camera.el.id !== 'player') { console.log("Deleting unwanted A-Frame default camera") const wrongCameraEntity = this.el.sceneEl.camera.el; const cameraEntity = document.getElementById('player'); cameraEntity.setAttribute('camera', 'active', true); wrongCameraEntity.parentEl.removeChild(wrongCameraEntity); }

为我的 VR 项目在 a-frame js 中使用 nav-mesh 时遇到问题

Trouble using nav-mesh in a-frame js for my VR project

javascript

aframe

virtual-reality

navmesh