Create a boundary on a three-dimensional design that follows the shape of its exterior

I am in the process of developing a tool using Three.js to annotate three-dimensional models. My goal is to enable users to draw lines on a model that accurately follow its surface contours. For instance, when drawing a line on a face model, the line should gracefully go over the nose instead of cutting through it if points are placed on either side.

While I could achieve this by drawing the line on the texture, I would like the line to also be interactive, requiring me to handle hit detection myself. Ideally, I would prefer to create the line as an actual object in Three.js. Is there a straightforward method to identify the faces between two specified points on a model's surface?

Answer №1

Surprisingly, the solution was simpler than expected: I transformed the model into a network of faces, with each face serving as a node connected to neighboring faces by edges. From there, it was just a matter of identifying the clicked face and implementing a shortest-path algorithm (in this case, Dijkstra's) to determine the faces between each node.

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

How Can You Create a Sliding List Animation (Up/Down) Using Angular and Twitter-Bootstrap?

Hey, can you give me a hand with this? :) I'm attempting to create a sleek sliding up and down list in Angular, but I'm struggling to make it work. My CSS skills are not very advanced, so I'm still learning and gave it my best shot: http:// ...

A guide on conducting comparisons within a render in React

Currently, I am placing a component inside another component and the setup is shown below: render() { return ( <MyComponent value={this.state.measurement.Value} unit="kg" /> ); } My objective is to m ...

Comparing strings with if-else statement

I am having trouble comparing strings in this array. For some reason, the strings are never equal. var person = ["Sam", "John", "Mary", "Liz"]; var searchedName = prompt("Enter name"); var resultMessage = ""; for (index in person) { var currentName = ...

NextJs 13 encountered an issue locating the module path and was unable to resolve it

I encountered an error stating 'unable to resolve path to module' while working with NextJs version 13 `{ "extends": [ "next", "airbnb-base",`your text` "eslint:recommended", "plugin: ...

The rendering of a Points geometry in THREE.js is not displaying when points are dynamically added

I am currently utilizing Three.js version r83. My goal is to dynamically incorporate points into a geometry, but for some reason, the scene doesn't update. The following code successfully achieves this: var tmaterial = new THREE.PointsMaterial({ ...

What could be causing the arrows on my card carousel to malfunction?

I'm facing some issues with my card carousel functionality. I'm in the process of learning JavaScript and I believe that's where the problem lies, but I'm unsure how to resolve it. Every time I click on the button/arrow for the carousel ...

Leveraging Parameters from URL in Javascript

I'm facing an issue with my area shape, the href="/kosmetikstudios/deutschland/Bayern" tag seems to be causing a problem. I want to utilize the parameter "Bayern" (which is the last parameter in the URL). I need this to be dynamic. Below is my JavaS ...

Creating a corner ribbon for a Material UI Card: A step-by-step guide

Can anyone provide pointers on incorporating a corner ribbon to a Material-UI card? Currently, I am utilizing makeStyles for styling from Material UI. ...

What is the best way to merge the two scripts for refreshing a div into a single script

I have integrated two dynamic div refreshing scripts: 1) 2) Attempt at combining them: // Customize these settings var seconds = 1; var divid = "timediv"; var divid2 = "points"; var url = "boo.php"; var url2 = "boo2.php"; ...

Refresh Entity with Real-Time Data on Cesium

I have been attempting to showcase an entity moving within Cesium through the use of live/dynamic data. After trying various techniques and consulting past forums, particularly those from 2015-2016, I am still struggling to make it work. Despite my effort ...

Is the Node.js debugger programmed to issue SIGINT/SIGTERM signals upon exiting via Ctrl-C?

During my testing process, I've encountered a situation where a server that I started doesn't close properly when exiting the Node.js debugger. This issue seems to be preventing the debugger from stopping listening on port 5858. debug> (To e ...

Setting up a webpack configuration for js using ng-annotate-loader and babel-loader

I've experimented with two methods for simultaneously using ng-annotate and babel loaders on my *.js files. { //successfully executed test: /\.js?$/, loader: 'ng-annotate!babel?presets[]=es2015' } { //encountered a problem ...

node express/request: handling POST requests by parsing the body

I'm currently looking into sending a request to be handled by a remote server, using the following approach: var destination = sendRequest(url); req.pipe(destination).pipe(res); While this method works smoothly for GET requests, I'm encounterin ...

Discovering all input elements by utilizing nextAll in jQuery

Here is the HTML structure: <div class="field phone"> <input type="text" maxlength="3" /> </div> <div class="field phone number1"> <input type="text" maxlength="3" /> & ...

Encountering a syntax error while attempting to import modules from amCharts

Recently, I have been attempting to incorporate amcharts into my project using npm. After running the command npm install@amcharts/amcharts4, I noticed that all the necessary modules were now present in my node_modules folder and package.json file. Specifi ...

What is the best way to iterate through one level at a time?

Imagine a scenario where the structure below cannot be changed: <xml> <element name="breakfast" type="sandwich" /> <element name="lunch"> <complexType> <element name="meat" type="string" /> <element name="vegetab ...

Visual Latency when Quickly Toggling Between Images in Succession

I have a series of 50 images that need to be displayed sequentially inside a div. The time interval between displaying each image is initially set at 750 milliseconds and decreases with each subsequent image. To ensure all images are loaded before the an ...

Refresh the StripeCardComponent upon successful addition of a new card

Using StripeCardComponent in conjunction with ngx-stripe, I'm encountering the issue of resetting the form after adding the Stripe card. Do you have any insights on how to achieve this? <ngx-stripe-card [options]="cardOptions" [elementsOptions]="e ...

Find and return all duplicated values within an array using Javascript

Currently, I am facing a challenge with sorting out an array and identifying duplicate values. My goal is to pinpoint the occurrences of a specific value, like a date, within the array. Most of my search results have focused on deleting duplicates, but I s ...

Using `b-form-input` to toggle the visibility of the password using `v-bind:type`

Utilizing bootstrap.vue components, specifically "b-form-input", I am trying to implement a feature to hide and show the password by clicking the button attached to the input field. While this functionality works with a regular input field, I am facing cha ...