如何在A-Frame中添加导航路径?
我尝试了各种 A 形框架的方法,但是,我无法找到一个好的方法来制作一条路径,使头像无法走出该路径,也无法穿过场景中存在的墙壁和物体。我尝试使用搅拌机制作自己的导航网格,但也许我错过了一些东西。
所以请帮我解决 A-Frame 中的问题!!
<a-scene
inspector-plugin-recast
renderer="antialias: true;
colorManagement: true;
sortObjects: true;
physicallyCorrectLights: true;
highRefreshRate: true;"
>
<a-assets>
<a-asset-item id="rig" src="./navmesh.gltf"></a-asset-item>
</a-assets>
<a-entity
id="rig"
movement-controls="speed:0.15; constrainToNavMesh: true"
position="0 0 5"
>
<a-entity
camera
position="0 1.6 0"
look-controls="pointerLockEnabled: true"
>
<a-cursor nav-pointer raycaster="objects: [nav-mesh]"></a-cursor>
</a-entity>
</a-entity>
<a-entity gltf-model="#rig" nav-mesh visible="false"></a-entity>
</a-scene>
navmesh.gltf 是为相机提供导航路径,以便相机无法超出此网格。我使用生成的这个 gltf
aframe-inspector-plugin-recast.js。
所以,它可以工作,但是当我制作自己的导航网格并添加它时,要么浏览器没有加载场景,要么我的相机总是在场景之外。
I tried various ways A-Frame but, I can't able to get a good way to make a path so that avatar can't go outside that and also can't pass through walls and objects which are there in the scene. I tried to make my own navmesh using blender but maybe I'm missing something.
So please help me regarding this in A-Frame !!
<a-scene
inspector-plugin-recast
renderer="antialias: true;
colorManagement: true;
sortObjects: true;
physicallyCorrectLights: true;
highRefreshRate: true;"
>
<a-assets>
<a-asset-item id="rig" src="./navmesh.gltf"></a-asset-item>
</a-assets>
<a-entity
id="rig"
movement-controls="speed:0.15; constrainToNavMesh: true"
position="0 0 5"
>
<a-entity
camera
position="0 1.6 0"
look-controls="pointerLockEnabled: true"
>
<a-cursor nav-pointer raycaster="objects: [nav-mesh]"></a-cursor>
</a-entity>
</a-entity>
<a-entity gltf-model="#rig" nav-mesh visible="false"></a-entity>
</a-scene>
navmesh.gltf is to give the navigation path to the camera so that is could not go outside this mesh. This gltf i've generated by using
aframe-inspector-plugin-recast.js.
So, it's working but when I'm making my own navmesh and adding it then, either browser didn't load the scene or my camera always goes outside it.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这是关于 navmesh 概念的很好的教程:
https://www.youtube.com/watch?v=Y52czIft9OU
其他非更简单的创建类似于 navmesh 的系统的方法是使用 Ammo.js 等物理系统,该系统广泛用于 AR/VR 游戏开发。
您基本上会在竞技场周围创建墙壁,以便化身不会超出它。您可以设置 ammo-body 将墙壁设为静态,将头像设为动态。
虽然碰撞逻辑需要一个 collider,但有您可以研究并测试许多不同的方法,找出最适合您的方法。
This is a good tutorial on the concept of navmesh:
https://www.youtube.com/watch?v=Y52czIft9OU
Other non simpler ways to create a system similar to navmesh is by using physics systems like Ammo.js which is used widely for game development in AR/VR.
You would basically create walls around your arena so that the avatar does not go beyond it. You can set the ammo-body for the walls to static and the avatar to dynamic.
While the collision logic would need a collider, there are many different ones you can research and test out what works for you the best.
提问者确实需要一个导航网格。但是,对于那些寻找标题问题(如何使某物沿着预定路径移动)答案的人,请参阅此存储库以及包含的
follow-path
组件:https://github.com/kylebakerio/aframe-curve-component
The question asker really does need a nav mesh. However, for those looking for an answer to the headline question (how to make something move along a predetermined path), see this repo, and the included
follow-path
component:https://github.com/kylebakerio/aframe-curve-component