THREE.js - Attempting to find the closest point (Vector 3) on an object based on a Vector 3 created from a mouse

As I work on developing a point-and-click test game, I've made significant progress by conducting thorough research and finding answers to various inquiries on Stack Overflow. However, I have encountered an issue that I can't seem to find any existing information about.

My current plan involves integrating PatrolJS into my project for pathfinding purposes. Once I resolve this particular problem, I anticipate that the implementation process should proceed smoothly. In my environment, I already have some NPC characters, and I've set up mouse interaction in 3D space to select and store data about clicked objects. I can successfully move my character to the click positions. The challenge lies in registering these clicks within the pathfinding area.

To better illustrate my query, please refer to this visual representation:

https://i.sstatic.net/SxO13.png

The image showcases my environment in simplified form, along with the navmesh area that I'm currently defining. Players will interact with various elements in the 3D environment/NPCs by clicking on them. While this functionality is functioning as intended, providing me with the intersection point in 3D space where the mouse cursor hovers, I need assistance in determining the closest point on the separate navmesh object to the clicked location on environmental objects.

If, for example, a player clicks on a specific section of a table, I aim to identify the nearest Vector 3 point on the navmesh object. This way, even if interactions occur outside the navigable area, I can establish endpoints and integrate them into PatrolJS effectively.

Answer №1

To determine the nearest point on a mesh made up of n triangles to a point p, you can employ a brute force method that operates in linear time complexity O(n). The step-by-step algorithm is detailed below:

  • Iterate through each triangle t within the mesh
    • Project point p onto the plane defined by triangle t; designate the resulting point as proj
    • If proj falls on t, it is the closest point to p; record the distance from proj to p
    • If proj lies outside the triangle, find the closest point to proj on each of the triangle's 3 sides; store the distances between these points and p
  • The ultimate solution is the point with the minimum distance to p

Explore THREE.js Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use Javascript to conceal a div element if there are no links present

I am working on a website using ModX CMS and I am attempting to hide or remove a div element when it does not contain any anchor tags. How can I achieve this? I have already attempted the following code without success: jQuery(function($) { if ($(".pages ...

Adjusting transparency of uploaded 3D model in Three.js

I've successfully loaded a 3D object model into a three.js scene using the following code: var skull; var loader2 = new THREE.ObjectLoader(); loader2.load( 'skull.json', function(object) { skull = object; scene.ad ...

Here is the code I have written to implement a date-picker event that retrieves specific records based on the selected date

I'm struggling with inserting a question here. Can someone provide assistance? $query = ("SELECT orders.customer_id, customer.name, customer.email, customer.address, customer.phone_number, orders.product_id, orders.total_units, orders.total_price, or ...

Guide to organizing a one-to-one object map within Angular JS ng-repeat

Is there a way to organize a one-to-one object map in angular.js using filters (or any other technique) while working within an ng-repeat loop? This is what I currently have: obj:{ a:3, c:5, d:1, g:15 } Basically, I want to achieve s ...

Maximizing the power of datatables with ajax integration

Exploring pagination with AJAX on datatables.net is something I want to try. I have two input fields where users can enter start and end dates, followed by the table structure below: <table class="table table-hover" id="example"> < ...

Utilizing Angular 6 and JavaScript to invoke two functions within an (ngClick) event in both the Component and JavaScript

I have a requirement to execute two functions in my click event, one for my component and the other for a custom JavaScript function. Here is the code snippet: Angular click event: <button type="button" class="btn btn-primary" (click)="Plans(); " [att ...

Retrieve the ReadStream from Firebase Storage and provide it as input to the Openai API

I am struggling to retrieve an image from firebase storage and transmit it to an openai endpoint Here is my current code snippet: const fileStorage = await getStorageAdmin(uid, "/sample.png"); const file = fileStorage.createReadStream(); co ...

Error: Authorization required to access server-side resource [POST http://localhost:3000/serverSide] - Status

I'm having an issue with sending a username and password from an HTML file to a Javascript file that queries an employee table for authentication. The problem arises when the username and password are set to undefined in my serverSide.js file, prevent ...

Efficient management of jQuery variables

I am currently working on a form and I have been trying to change an input's type using jQuery. Thanks to the helpful resources available on this website, I learned that I need to clone and replace the input in order to change its type. However, I enc ...

Modify how the browser typically processes script tags as its default behavior

Most of us are familiar with the functionality of <script src="/something.js"></script>. This loads the specified file onto the page and executes the script contained within. Is there a way to modify how <script> elements are interpreted ...

What is the best way to manage files in Vue.js?

I am faced with a challenge in storing image files and video files as Blob data. One thing I like is that the uploaded video and image files display instantly, which is pretty cool. I'm not entirely sure if the code below is correct - how can I navi ...

The secondary pass of the EffectComposer effectively "supersedes" the results of the initial pass

I am attempting to display a texture on the background with a 3D scene in the foreground using an effectcomposer. However, I am facing an issue where my first pass (the background) seems to get "overwritten" by the second pass (the scene), resulting in onl ...

The process of extracting data from a form and storing it as global variables

Consider the following example: This is our HTML form <form action="test1" method="GET" name="frm"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <i ...

Is it possible to update the CSS file of an external SVG file in real-time?

Is there a way for an SVG image to reference another CSS file? A webpage contains an SVG file. A button allows users to switch between classic colors and high contrast mode on the entire webpage, including the SVG image. Attempt w.css (white backgrou ...

What could be causing the shadowbox not to display in Internet Explorer?

I am currently working on fixing a shadowbox issue in Internet Explorer. The page where the shadowbox is located can be found at this link: Here is the HTML code: <div class="hero-image"> <a href="m/abc-gardening-australia-caroli ...

I'm currently working on incorporating an edit feature into the create form by utilizing server actions in the latest version of Next.js, version 14

The issue arises when the create form's type (id) parameter is null, which does not align with prisma's (edit info). export function AboutForm({ id }: { id: number }) { const router = useRouter(); const [err, setErr] = useState("&qu ...

Unable to trigger jQuery .click event

Having recently delved into the world of AJAX, jQuery, and JavaScript, I am facing a challenge that I believe is rooted in a simple oversight on my part. Expressing this issue can be quite perplexing, but I'll do my utmost to articulate it clearly. I ...

The functionality of Jade views is disrupted by external CSS files

I am new to node.js and apologize if this question seems too obvious. I have built my app logic with all the routes and views, and it was working fine until I tried to add more styles to my views using Jade in Express. The only change I made was including ...

Angular: Error when TypeScript object returns an array object value

I have encountered a strange issue where the array value returned as [object Set] when I console log it. It's unclear whether this problem is occurring in the component or the service, but the object values are not being displayed. This issue arises ...

Generating an array by iterating through each object within an array of objects

I am working with a JSON structure and I need to separate it into two arrays. The first array should include all the values from the key "employee only" to "Annual OOP max / entire family" from each object in the JSON array. The second array should contain ...