Modifying Waypoint properties

[jinumathukutty]

@donmccurdy how can we modify the waypoint properties by ; 1) removing blue dots from waypoint. 2) removing yellow marker from target 3) removing pink marker from source.

Thanks in advance

[donmccurdy]

Hi @jinumathukutty - the three-pathfinding API returns a path, it's an array of THREE.Vector3 positions, with the first being the start position and the last being the end position. See https://github.com/donmccurdy/three-pathfinding?tab=readme-ov-file#findpath.

Whether you want to display those points on screen, or move the character along them, or remove some waypoints, or do something entirely different with the path, is up to you.

[jinumathukutty]

@donmccurdy Ok. since I'm a beginner in Three.js , can you help me to do that. below is my code.

window.addEventListener("click", (event) => { clickMouse.x = (event.clientX / window.innerWidth) 2 - 1; clickMouse.y = -(event.clientY / window.innerHeight) 2 + 1;

  const found = intersect(clickMouse);
  if (found.length > 0) {
    let target = found[0].point;
    const agentpos = agentGroup.position;

    groupID = pathfinding.getGroup(ZONE, agentGroup.position);
    const closest = pathfinding.getClosestNode(agentpos, ZONE, groupID);
    navpath = pathfinding.findPath(closest.centroid, target, ZONE, groupID);

    if (navpath) {
      pathfindinghelper.reset();
      pathfindinghelper.setPlayerPosition(agentpos);
      pathfindinghelper.setTargetPosition(target);
      pathfindinghelper.setPath(navpath);
    }
  }
});

function move(delta) {
  if (!navpath || navpath.length <= 0) return;

  let targetPosition = navpath[0];
  const distance = targetPosition.clone().sub(agentGroup.position);

  if (distance.lengthSq() > 0.05 * 0.05) {
    distance.normalize();
    agentGroup.position.add(distance.multiplyScalar(delta * SPEED));
  } else {
    navpath.shift();
  }
}

function intersect(pos) {
  raycaster.setFromCamera(pos, camera);
  return raycaster.intersectObjects(scene.children);
}

[donmccurdy]

@jinumathukutty Removing the Nth item from the path would look like this:

const path = pathfinding.findPath(closest.centroid, target, ZONE, groupID);
path.splice(n, 1);

Or to edit that same point:

path[n].set(10, 10, 10);

For more help you may want to try three.js communities like https://discourse.threejs.org/. Since the path is an array of THREE.Vector3 objects, how you use it is somewhat independent of the three-pathfinding library.

[jinumathukutty]

Ok . Thank you very much. I'll ping you via discourse . we already had a discussion