Utilizing Projector and Ray in three.js to target and select a vertex

I am working on a project where I need to load an .obj file representing a human body. The goal is to allow users to select two vertices and highlight them with flags, followed by finding the index of these vertices in the original .obj file. Subsequently, I aim to run a php script to measure the distance between the two selected vertices.

Despite trying various methods, particularly when selecting the two vertices, I have not been successful so far. My current approach utilizes the obj loader which works seamlessly; however, I encountered issues determining the vertex I clicked on using Projector and Ray, as it consistently returns an empty array.

Here is my code progress until now: I check if the intersects array is not empty, then proceed to identify the nearest vertex from the file, change the object's color, and adjust the face that was clicked on.

<!doctype html>
<html lang="en">
    <head> 
        <!-- Code continues... -->
    </head>

<body>
    <!-- More code... -->

The specific .obj file mentioned can be accessed at this link

If anyone could provide guidance or suggestions to help me solve this issue, your assistance would be greatly valued.

Thank you very much in advance! :)

Answer №1

In order to resolve this issue, I tackled it by generating a mesh from the object retrieved through the obj loader with the following code snippet:

var loader = new THREE.OBJLoader();
loader.load( "img/originalMeanModel.obj", function ( object ) {

object.children[0].geometry.computeFaceNormals();
var geometry = object.children[0].geometry;
console.log(geometry);
THREE.GeometryUtils.center(geometry);
var material = new THREE.MeshLambertMaterial({color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors });
mesh = new THREE.Mesh(geometry, material);
model = mesh; 
scene.add( model );
} );

Subsequently, when executing the intersectObject method, I applied it to the model instead of the entire scene.

var intersects = ray.intersectObject(model);

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

Retrieving information from an external API in response to an express GET request

After reviewing the sample code in the gtfs-realtime-bindings library's documentation, I attempted to implement a similar logic within my router. However, I encountered issues with extracting the result from the request() route.get('/', (req ...

Handling click events for parent and child elements in Angular 5

In Angular5, Below is the code I am working with: <div (click)="abc()"> some content <button (click)="xyz()">Click</button> </div> When I click on the button, both methods are being called. I want only a sin ...

Transmitting an email form using AJAX, Bootstrap, and Jquery

I am attempting to email a form using the code snippet below. This is a modified version of Bootstrap Validator created by 1000hz. $('#form').validator().on('submit', function (e) { if (e.isDefaultPrevented()) { alert("not workin ...

Use JavaScript and AJAX to easily assign multiple variables with unique IDs to an array with just one click

This function is no longer supported Original query : I would greatly appreciate any assistance and guidance. I am attempting to create a function that moves selected products from the Cart to another table so I can reorder them according to customer de ...

Repeating the process of running a function multiple times

export default function MyQuestions() { const router = useRouter(); const [auth, setAuth] = useState(false); const checkAuth = async () => { const loggedInUsername = await getUsername(); if (router.query.username === loggedInUsername) re ...

Seeking the method to obtain the response URL using XMLHttpRequest?

I'm having trouble with a page (url) that I request via XMLHttpRequest. Instead of getting a response from the requested url, the request is being directed to another page. requesting --- > page.php getting response from > directedpage.php ...

Adjustable <a> component

There is this element: <a id="lnkViewEventDetails" class="psevdo calendar-event event" style="height: 126px;" href="/someurl/895?responseType=5" onclick="event.stopPropagation();"> I am trying to make it resizable using JQuery UI: $("#lnkViewEvent ...

Ensure the form is properly validated before initiating the submission process on 2checkout

Attempting to prevent the form from being submitted, I implemented the code below. Typically, this method works perfectly fine. However, when integrating 2checkout js (), it does not function as intended. <form onSubmit="validate(); return false;" meth ...

Retrieve the v-id-xx attribute value for scoped styling in a Vue Single File Component

When using pure JavaScript to add elements in a Vue Single File Component, the added elements are missing the v-id-xx attribute for scoped CSS. Is there a way to retrieve the component's v-id-hash value using only JavaScript? ...

What is the solution to rectifying the issue with graphql codegen?

Upon running the command "yarn graphql-codegen," an error occurred and I am unsure how to resolve it: % yarn graphql-codegen yarn run v1.22.4 warning package.json: No license field $ /Users/xxx/node_modules/.bin/graphql-codegen ✔ Parse Configuration ⚠ ...

Executing NodeJS Functions in a Particular Order

Just starting to learn Node and working on building an app. Currently, in my route file, I am attempting to connect to MySQL and retrieve the major of the user, then use it for other operations. However, when I run the webpage, the console displays that t ...

Utilizing angularjs ng-repeat directive to present JSON data in an HTML table

I've been struggling to showcase the JSON data in my HTML table using AngularJS ng-repeat directive. Here's the code snippet: <thead> <tr> <th ng-repeat="(header, value) in gridheader">{{value}}</th> </tr> </ ...

Navigating the NextJS App Directory: Tips for Sending Middleware Data to a page.tsx File

These are the repositories linked to this question. Client - https://github.com/Phillip-England/plank-steady Server - https://github.com/Phillip-England/squid-tank Firstly, thank you for taking the time. Your help is much appreciated. Here's what I ...

I want to design an attractive expandable mobile menu featuring plus and minus icons. It should look visually appealing and

Can someone please take a look at my code snippet here: http://jsfiddle.net/o2gxgz9r/2287/ Currently, the design shows a plus and minus sign, but I would like to style them using CSS instead of using symbols. Additionally, I need assistance with implement ...

Tips for moving the canvas on a touchscreen device: (three.js)

I have a question that I have not been able to find an answer to through my research. Can you please help me understand how to enable scrolling on the canvas for mobile phones? I am creating a website that includes a section with a canvas tag where I have ...

Using Vue.js's ref within a v-for iteration

When attempting to utilize components within a v-for loop and initialize the ref for future access to their methods from the parent component, I encountered an issue. Below is a simplified version of the code that demonstrates my scenario: <template> ...

The clearQueue function in jQuery doesn't truly empty the queue as expected

Can you help me with this issue I'm experiencing? When the delete button is clicked, an undo button appears for 5 seconds before partially retracting, leaving about a third of the button visible at the top of the page. Hovering over the button expos ...

One set of objects is active in retrieving data, while the other remains inactive

I'm working with an array of objects and here is what it looks like: const default_apps = [ { 'post_title': 'Excel', }, { 'post_title': 'Word', }, { 'post_title': 'SharePoi ...

Receiving "this" as an undefined value within the TypeScript class

Currently developing a rest api using express.js, typescript, and typeorm. Initially thought the issue was with AppDataSource, but it seems to be functioning properly. Below is my controller class: import { RequestWithBody } from '@utils/types/reque ...

What is the method for retrieving a value that is stored in a DIV element?

After reviewing the screenshot below, I am attempting to access the data stored in the highlighted Div with an ID of "category". Unfortunately, my current attempt is resulting in a blank outcome. categorySelected = $('div#category.tag.categorylabel& ...