donmccurdy / aframe-inspector-plugin-recast Goto Github PK

A-Frame Inspector plugin for creating navigation meshes.

License: MIT License

HTML 1.07% JavaScript 97.69% SCSS 1.24%

aframe-inspector-plugin-recast's Introduction

Hi there 👋

In 2D and 3D graphics ecosystems on the web — like three.js, React Three Fiber, and A-Frame — my work lets developers be more productive, makes engines faster and more powerful, and enables artists to enjoy creative and flexible art workflows. If my work is helpful to you, please consider sponsoring me. For technical support, please see my current availability. Thank you!

aframe-inspector-plugin-recast's People

Contributors

Stargazers

Watchers

Forkers

chrisberno jafetmorales indigos33k3r dluxio sorskoot netanel-m muhammadandikcahyono qepri yogiprsetya w0lramd ciaran-deegan-davra hrithikwins ingmiguelyepezcivil agui0

aframe-inspector-plugin-recast's Issues

Failed to fetch error

This had worked fine until recently.

I now think it is because the file is 7mb.

Building automatically

Hi,

I temporarily put your two FPS style examples here:
https://curious-electric.com/w/experiments/aframe/navmesh/1.html
https://curious-electric.com/w/experiments/aframe/navmesh/2.html
As always, one needs to hit ctrl-alt-i to enter the inspector and build the navmesh first.

A couple of questions/remarks:
a) in example 1 the red cube in the middle doesn't seem to influence the navmesh; why is that?
b) I changed the starting point of the rig in example 2 to x:-11 - hence you start in the hallway and can move in the navmesh all the way up in the dungeon. :-)

and most importantly
c) is there a way to trigger the inspector-plugin (i.e. the mesh build) via JavaScript?

Thanks,
Dirk

doesn't works with a-frame 1.2.0

doesn't works with a-frame 1.2.0, the build button don't have any effect. themesh is not displayed

CORS error / FUNCTION_PAYLOAD_TOO_LARGE for mesh > 5MB

Hi, trying to use this to create a navmesh, but I am hitting a CORS error:

Access to fetch at 'https://recast-api.donmccurdy.com/v1/build/?cellSize=0.3&cellHeight=0.2&agentHeight=1.6&agentRadius=0.2&agentMaxClimb=0.5&agentMaxSlope=30' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This looks very similar to this issue, closed and fixed in January 2020:
#14

Could it be a similar issue again?

Plugin panel remains after exiting inspector

Me again!

Just a heads-up that the Recast plugin panel remains displayed after exiting the inspector:

I'm seeing this in both Firefox and Chrome on Windows 10.

wasd-controls conflict

I do not understand why, but when explicitly adding the wasd-controls controler to the camera rig, then the nav mesh is not working anymore. If remove the component, then it work perfectly.

`
<!doctype html>

<title>Navigation Meshes</title> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v6.1.0/dist/aframe-extras.min.js"></script> <script src="https://recast-api.donmccurdy.com/aframe-inspector-plugin-recast.js"></script>

	<!-- Camera Rig -->
	<a-entity movement-controls="speed: 0.15; constrainToNavMesh: true" position="0 0 2">
		<!-- Camera -->
		<a-entity wasd-controls camera position="0 1.6 0"
				  look-controls="pointerLockEnabled: true">
			<a-cursor></a-cursor>
		</a-entity>
	</a-entity>
	
	<!-- Ground -->
	<a-plane color="#333333" shader="flat" rotation="-90 0 0" scale="8 6 1">
	</a-plane>
	<!-- Navigation Mesh -->
	<a-entity gltf-model="#my-nav-mesh" nav-mesh position="0 -0.1 0" visible="true">
	</a-entity>
</a-scene>

Cannot export navmesh.

Recently, I cannot export the navmesh in the inspector. Strangely I have changed nothing since last working on my project but suddently I keep getting the error below which is preventing me from exporting my build navmesh. Everything was working as desired a few days ago until now. This error occurs every time I press the export button.

aframe-inspector.min.js:25 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at C (aframe-inspector.min.js:25:175584)
    at k (aframe-inspector.min.js:25:178934)
    at S (aframe-inspector.min.js:25:179479)
    at A (aframe-inspector.min.js:25:179632)
    at aframe-inspector.min.js:25:180130
    at THREE.GLTFExporter.parse (aframe-inspector.min.js:25:180232)
    at RecastPlugin.exportGLTF (aframe-inspector-plugin-recast.js:9046:14)
    at HTMLButtonElement.<anonymous> (aframe-inspector-plugin-recast.js:8881:54)

<!doctype html>
<html>
    <head>
        <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
        <script src="https://recast-api.donmccurdy.com/aframe-inspector-plugin-recast.js"></script>
        <script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
    </head>
    
    <body>
        <a-scene background="color: #FFFFFF" inspector-plugin-recast>
        </a-scene>
    </body>
</html>

Assistance would be appreciated thanks.

Got strange Error (see message ) at export. So build works and shows export fails ?

I got Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys ()
at C (aframe-inspector.min.js:25)
at k (aframe-inspector.min.js:25)
at S (aframe-inspector.min.js:25)
at A (aframe-inspector.min.js:25)
at aframe-inspector.min.js:25
at THREE.GLTFExporter.parse (aframe-inspector.min.js:25)
at RecastPlugin.exportGLTF (aframe-inspector-plugin-recast.js:9046)
at HTMLButtonElement. (aframe-inspector-plugin-recast.js:8881)

I use an OS X , google chrome and i am trying to do 20 files for a project 1 file worked so far ... so it is an awesome tool

THREE.Box3: .getBoundingSphere() target is now required

When trying to use the plugin with A-Frame 1.0.3 I get this errors in the console:
THREE.Box3: .getBoundingSphere() target is now required
TypeError: e is undefined

Plugin script is not found/missing

The plugin script below is resulting in Cannot GET /aframe-inspector-plugin-recast.js

https://recast-api.donmccurdy.com/aframe-inspector-plugin-recast.js

404 on the hosted inspector plugin

Trying to load https://recast-api.donmccurdy.com/aframe-inspector-plugin-recast.js but getting Cannot GET /aframe-inspector-plugin-recast.js, maybe run dist wasn't done after an update?

Glitches won't work

Hi,

I came from this thread:
c-frame/aframe-extras#225 (comment)

and tried the examples (like https://cherry-teacher.glitch.me/); they all gave me an
Cannot read property 'groups' of undefinederror once I hit a WASD key.

Thanks,
Dirk

Performance controls

strip normals/uvs
client-side validation against > 50mb meshes
consider using Draco

Common issues

clamp bounds from origin, relative to cell size?
avoid a-sky and the like

Can only produce very vague sloped navmesh

I've been trying to create a very large navmesh that will work with steeply raked stairs and my general findings with this tool are that it simply doesn't produce a mesh with enough detail to cover the stairsteps properly, so I end up with a very blocky bowl shape instead, which usually means that a "player" object in aframe constrained to navmesh isn't following the actual shape of the real geometry very well + gets stuck in all the weird ruts that the tool creates.

I've tried to create decimated meshes of the top surface of my walkable areas manually in Blender and export them (post Blender 2.7 game engine navmesh tool removal) but they seem to be completely ignored by the aframe-extras pathfinding library.

Is there anything special I need to do to create these meshes manually, are there specific geometric rules I need to follow regarding shape, number of triangles etc?

Export failing for basic scene in Chrome 71

Here is the error.

aframe-inspector.min.js:25 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at C (aframe-inspector.min.js:25)
    at k (aframe-inspector.min.js:25)
    at S (aframe-inspector.min.js:25)
    at A (aframe-inspector.min.js:25)
    at aframe-inspector.min.js:25
    at THREE.GLTFExporter.parse (aframe-inspector.min.js:25)
    at RecastPlugin.exportGLTF (aframe-inspector-plugin-recast.js:9280)
    at HTMLButtonElement.exportBtnEl.addEventListener (aframe-inspector-plugin-recast.js:9115)

Here is a video illustrating the issue.

Compare params & performance vs Blender

Navmesh construction seems vastly slower, and slightly more accurate, than results I'm getting in Blender. Both use Recast, so it's worth investigating to see if there's some precision parameter I'm missing. The default setting, at least, should be quick enough to get something on screen promptly and not bog down the service.

Expose configuration settings in attribute

This plugin is wonderful. It makes navmesh creation so easy!

I wonder if it would be possible to expose the configuration settings as values to the inspector-plugin-recast attribute:

<a-scene inspector-plugin-recast="cellSize: 0.1; cellHeight: 0.1; agentRadius: 0.3; agentMaxSlope: 0"></a-scene>

This way, we can override the default values when reloading the page. It would speed up the development of a scene to allow testing it while the models are being actively worked on.

Project is unmaintained

Unfortunately, the lack of a stable and documented build of the Recast library for WASM has become a show-stopper, and I can no longer maintain this project. See #47 for my last attempts to continue supporting it. If a new build of Recast becomes available on NPM, supporting Node.js v14+, and is actively maintained, I may be able to revive this. Until then, I cannot work on the project further.

`inspector-plugin-recast` doesn't work with current A-Frame inspector

I noticed today that inspector-plugin-recast no longer works, likely due to the A-Frame Inspector update.

The interface is present in the inspector, but when I hit "Build", I get the following error:

Nothing is built or able to be exported.

This tool is awesome and much needed, especially considering the direction Blender is taking, so I look forward to being able to use it again with the current inspector.

Thanks for all you do.

A-frame 1.2 version don't support keyboard controlls

Hi guys, just a heads up! When navigating with keyboard controls I noticed it does not constrain to NavMesh unless you move back onto version 1.1.

The debug recaster when clicking does constrain and move within the navmesh, however WASD controls on desktop don't work on version 1.2

Thanks!

CORS error

Hi,

Thx for this very useful aframe component. All was working fine until recently. Now, when a try to make an API call (to the public one), I've got the following CORS error:

Access to fetch at 'https://recast-api.donmccurdy.com/v1/build/?cellSize=0.3&cellHeight=0.2&agentHeight=1.6&agentRadius=0.2&agentMaxClimb=0.5&agentMaxSlope=30' from origin 'https://vr.chabloz.eu' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is the public API still available?

Thx in advance for your answer and your wonderful work on aframe!

Basic vertex/face tweaks

Lightweight edits, if possible.

"Cannot read property 'id' of undefined" error

Hi,

first of all, let me mention that my tests of interior like Blender models were all successful, thanks to your work!

My attempts with a somewhat larger terrain worked out, too, but occasionally throw this error on a specific part of the model:

aframe-extras.min.js:1 Uncaught TypeError: Cannot read property 'id' of undefined
    at e.clampStep (aframe-extras.min.js:1)
    at o.clampStep (aframe-extras.min.js:1)
...
at y (aframe8.2.min.js:100)

Any idea why that is?
I can supply the Blender file plus export, if needed.

Thanks, Dirk

Can't run server on port 3000 locally.

I try to run the server locally. I can access the example page on port 9966, but the server that generates the nav mesh on port 3000 doesn't load (connection refused). Here's the steps I follow:

Use node 10 nvm use 10.
Use Python 2 pyenv global 2.
Install deps npm install.
Install now npm install -g now (This bit is missing from the documentation).
Start the server npm run dev.
Open the example page on http://localhost:9966/.
Open A-Frame inspector.
Push the Build button.

Result:
An Oops something went wrong alert is shown, no navmesh is generated.

Expected:
A navmesh is downloaded from the server and shown in A-Frame inspector.

How can I generate navmesh locally?