How to use a BufferGeometry for createConvexRegionHelper?

[pierroo]

Hi,

First I would like to thank you once again for this amazing project Mugen87! The potential is huge and I see so many use case so I finally jumped into it.

However I am facing an issue, since all the examples online use a glb for the navmesh that is then passed into your "createConvexRegionHelper" as a parameter.

But I am creating my terrain through simplex and code, so I get a BufferGeometry out of it. Obviously not what createConvexRegionHelper expects, so I tried the following:

loadNavMesh(bufferGeometry) {
        const navMesh = new NavMesh();
        const positions = bufferGeometry.attributes.position.array;
        const indices = bufferGeometry.index.array;

        if (!positions || !indices) {
          console.error('Invalid geometry: missing positions or indices.');
          return;
        }

        const polygons = [];

        for (let i = 0; i < indices.length; i += 3) {
          const a = indices[i];
          const b = indices[i + 1];
          const c = indices[i + 2];

          const v0 = new Vector3(positions[a * 3], positions[a * 3 + 1], positions[a * 3 + 2]);
          const v1 = new Vector3(positions[b * 3], positions[b * 3 + 1], positions[b * 3 + 2]);
          const v2 = new Vector3(positions[c * 3], positions[c * 3 + 1], positions[c * 3 + 2]);

          const polygon = new Polygon();
          polygon.centroid = new Vector3(); // Required to avoid errors
          polygon.plane = new THREE.Plane(); // Required to avoid errors
          if (!polygon.vertices) polygon.vertices = []
          polygon.vertices.push(v0, v1, v2);

          polygons.push(polygon);
        }

        navMesh.fromPolygons(polygons);

        const { geometry, material } = createConvexRegionHelper(navMesh);
        set({ navMesh });
        set({ level: { geometry, material } });
      }

But I get the error: Uncaught TypeError: Cannot read properties of null (reading 'next') at NavMesh.fromPolygons

polygons doesn't initially have vertices in it so I instanciate it first then try to push all my vertices in it, but still I can't get it to work.

Is there any help online or example that would be using a BufferGeometry for navmesh? (I am using R3F / threejs)

Thank you!

[Mugen87]

polygon.vertices.push(v0, v1, v2);

I'm afraid this is invalid code since Polygon does not have a vertices property. Besides, it should not be required to explicitly define objects for centroid and plane. They exist by default.

If you want to create polygons from triangles, you have to use the Polygon.fromContour() method.

Creates the polygon based on the given array of points in 3D space. The method assumes the contour (the sequence of points) is defined in CCW order.

[pierroo]

Thank you for this suggestion @Mugen87 ,

I tried with the following:

const createNavMeshFromGeometry = (geometry) => {
  const navMesh = new NavMesh();
  const positions = geometry.attributes.position.array;
  const indices = geometry.index.array;

  const polygons = [];

  for (let i = 0; i < indices.length; i += 3) {
    const a = indices[i];
    const b = indices[i + 1];
    const c = indices[i + 2];

    const v0 = new THREE.Vector3(positions[a * 3], positions[a * 3 + 1], positions[a * 3 + 2]);
    const v1 = new THREE.Vector3(positions[b * 3], positions[b * 3 + 1], positions[b * 3 + 2]);
    const v2 = new THREE.Vector3(positions[c * 3], positions[c * 3 + 1], positions[c * 3 + 2]);

    const points = [v0, v1, v2];
    const polygon = new Polygon().fromContour(points);

    polygons.push(polygon);
  }

  navMesh.fromPolygons(polygons);
  return navMesh;
}

but now it's the navMesh.fromPolygons() that returns the error:

TypeError: tail.squaredDistanceTo is not a function
    at HalfEdge.squaredLength (yuka.js?v=e42d8424:9052:19)
    at NavMesh.fromPolygons (

so I am a bit clueless how to go from here?

EDIT:

Here is my final function with the help of chatgpt, although I am starting to think this is actually replacing the NavMeshLoader() since it gives me roughly the same result?

export const createNavMeshFromGeometry = (geometry) => {
  const navMesh = new NavMesh();
  const positions = geometry.attributes.position.array;
  const indices = geometry.index.array;

  if (!positions || !indices) {
    console.error('Invalid geometry: missing positions or indices.');
    return;
  }

  const polygons = [];

  for (let i = 0; i < indices.length; i += 3) {
    const a = indices[i];
    const b = indices[i + 1];
    const c = indices[i + 2];

    const v0 = new Vector3(positions[a * 3], positions[a * 3 + 1], positions[a * 3 + 2]);
    const v1 = new Vector3(positions[b * 3], positions[b * 3 + 1], positions[b * 3 + 2]);
    const v2 = new Vector3(positions[c * 3], positions[c * 3 + 1], positions[c * 3 + 2]);

    const polygon = new Polygon().fromContour([v0, v1, v2]);

    if (!polygon.centroid) {
      polygon.centroid = new Vector3();
    }
    if (!polygon.plane) {
      polygon.plane = new THREE.Plane();
    }
    polygon.computeCentroid();

    polygons.push(polygon);
  }

  navMesh.fromPolygons(polygons);
  return navMesh;
};

this screen is the result of my homemade function to transform my buffergeometry:

and here is the one when I use NavMeshLoader and give it a gltf (by using another function to turn my buffergeomtry into a gltf but it felt overkill)

so I'm not sure how to know if that new method is correct or not, since I'm still at the first step of it all :/ and I'm also a bit surprised at the number of polygons (3500+), since my terrain is just 4500 triangles big?