How to walk model on obj zone & find nearest path by zones

Questions
1

Hello,

Here i am trying to create Real tracking software using three.js
Here is code what i have done :

https://drive.google.com/file/d/1h_bMI26gSi_B1p5WnShMGOPE3bo5fTFo/view?usp=sharing

Download my all code i have load obj file which contain zones and then load android-animation.js which contain model.

for now model is walking on obj(zones one by one) n its working fine no changes required on it but i want to create suppose model currently stand on zone0 and then data will change n it get zone10 so how can model get nearest path.

Its to complex to explain here may be still i tried my best. if you have any query let me know.

Sorry for bad English, Thank you for help.

2

@looeee, here i have upload files n all thing will you please check

3

I guess what you need is a so called navigation mesh.

Maybe this toolkit will help you further:

4

@Mugen87, i was tried it but its not fit with my code.

5

If you are not familiar with pathfinding algorithms and the corresponding data structures, you should not implement this by yourself. I suggest to change your application code in order to use something like three-pathfinding or PatrolJS. Otherwise you have to take the time to study the respective topics.

6

@Mugen87 did you check my files? pathfinder maybe works with .js file not .obj file. i also tried to convert obj file to js format using python script. but paths not create straight it live zig zag because of zones.

here is to code which i have done:

https://drive.google.com/file/d/1m0R0qjuhBgHS8ZNhI-Vy30gsWUu_WS1C/view?usp=sharing

7

I’ve checked your code and see that you are using three-pathfinding. I can also see the mentioned zig zag lines.
image
Unfortunately, this is not a three.js related issue and i can’t explain to you why this happens. I suggest to open an issue at the github repo of three-pathfinding. Or maybe @donmccurdy can have a look at this here.

8

The file format should not matter, assuming the geometry is intact… unfortunately there seem to be some issues with your navmesh geometry, the triangulation has not happened correctly:

34%20AM
34%20AM685×521 8.56 KB

Each square along the path is a separate mesh, containing 4 triangles, and 2 triangles are stacked on top of the other 2. The navmesh should all be one single mesh, with continuously connected triangles.

If you could share the original file you used to create this navmesh I can help more.

2 Likes
9

Thank @donmccurdy and @Mugen87 for have look and suggestions,

i was created this mesh with https://threejs.org/editor/ and i have already attached full project in google drive and .obj file path is obj/new/model.obj .
if you need any another format let me know i will upload it.

unfortunately i can’t upload file here as i am new user.

Thank you.

10

It looks like you’ve created the model by lining up Box objects and making them very flat. Unfortunately that’s simply not going to give you a valid navigation mesh, because the boxes are not connected in the geometry itself, and there are lots of extra triangles. You’ll need to use software like Blender, SketchUp, or similar to create a single continuous surface if you want to make the navigation mesh by hand. Or you can create a scene in any tool, and then use Blender to generate a navigation mesh from that scene. I’ve written a blog post explaining how to do that here: https://www.donmccurdy.com/2017/08/20/creating-a-nav-mesh-for-a-webvr-scene/

1 Like
11

Thank @donmccurdy,

i am trying to do as mention in blog will get back to you if have any query.

12

@donmccurdy need help,

this is code to load .js mesh

jsonLoader.load( 'meshes/model.js', function( geometry, materials ) {

   level = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
   scene.add(level);

}, null);

jsonLoader.load( 'meshes/model.js', function( geometry, materials ) {

   var zoneNodes = THREE.Pathfinding.createZone(geometry);
   pathfinder.setZoneData('level', zoneNodes);

   var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
	color: 0xd79fd4,
	opacity: 0,
	transparent: true
   }));

   scene.add(mesh);

   // Set the player's navigation mesh group
   playerNavMeshGroup = pathfinder.getGroup('level', player.position);

}, null);

How can i load .obj file instead of .js file as mesh.

13

Have you looked at the three.js examples? There are several examples showing how to load an OBJ file: https://threejs.org/examples/?q=obj#webgl_loader_obj