The functionality of three.js Raycaster appears to be dependent on the initial key frame of animation in every instance

In my current project, raycasting selection works perfectly fine for static meshes. However, when it comes to animated meshes, the ray selection seems to ignore the movement of the mesh and only recognizes the original position of the mesh.

The issue arises with an animated model that can only capture the state of the pose below the initial frame, resulting in a small red dot being created when detecting the model. This is due to the fact that the bones matrices are computed by the CPU, while the new vertex positions are computed by the GPU. As a result, the CPU only has access to the first pose, making RayCasting ineffective for skinned meshes.

I have considered updating the model position when updating the animation or utilizing GPU calculations to obtain the location, but I am unsure of how to proceed. Any suggestions would be greatly appreciated. Thank you.

Static model

Animated model

View on jsfiddle

Answer №1

At this moment, the raycasting feature in three.js has the ability to work with morph targets, but only for THREE.Geometry, as it duplicates the vertex shader calculations on the CPU.

Although it is possible, in theory, to extend this functionality to support raycasting for skinned meshes using both THREE.Geometry and THREE.BufferGeometry, a more efficient method would involve implementing "GPU picking".

An example showcasing GPU picking can be found in this particular three.js demonstration. While the objects in the example are not in motion, the principle behind GPU picking remains the same.

Version used: three.js r.98

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

Include the array in the 'content' property of the CSS using Jquery

I need help formatting data in CSS. The code I have is as follows: if (ext){ switch (ext.toLowerCase()) { case 'doc': pos = 'doc'; break; case 'bmp': pos = 'bmp'; break; ...

Can you show me how to design a website with an embedded browsing window and a customized right-click menu?

I am looking to develop a website that includes a window or frame where users can browse other websites. Additionally, I am interested in implementing a custom right-click menu within this browsing window. While I know that using iframes can help with th ...

MERN stack: HTML is currently processing while React is failing to compile

I can't seem to figure out why I'm not receiving an error message, but when trying to launch a react app with node, only the Html is being displayed. Am I overlooking something? I've attempted the <script type="text/babel" src=".. ...

What is the process for linking dynamic content to document-ready events?

When it comes to jQuery and JavaScript, I admittedly struggle a bit. I have a specific question but can't seem to find the right search terms to get me there. It involves using either .trigger() or on(), but I'm unsure of the correct implementati ...

Increase the border at the bottom while hovering with React.js and the Material UI library

Can someone help me achieve a hover effect similar to the one in this question on Stack Overflow: Hover effect : expand bottom border I am attempting to create the same effect in React using makeStyles of Material UI. Here is my current code: const useSty ...

Struggling to get a price calculator up and running efficiently

The code I have should be functioning, however, when I insert it into the code module in the Divi theme on WordPress, it doesn't work. Interestingly, when I try it in a notepad, it works perfectly fine but fails to function on the website itself. () ...

Uncover the hidden href link that has been obscured using the code javascript:void(0)

Currently, I am in the process of developing a straightforward PHP script to extract the actual link from a website that conceals the real link/key using the javascript:void(0) approach. Upon inspecting the source code, I noticed that the href link is empt ...

Using Vue to alter data through mutations

Greetings! I am currently in the process of developing a website for storing recipes, but as this is my first project, I am facing a challenge with modifying user input data. My goal is to create a system where each new recipe added by a user generates a u ...

Matching queries precisely in MongoDB

I developed an Express.js API with MongoDB integration that filters products based on a filter property. The issue I am facing is ensuring that the API output exactly matches the filter property criteria. Currently, if Product A has [{name: 'a', ...

The columnFilter plugin in Datatables is failing to initialize

I have a pre-existing table that needs to be customized and initialized properly. <table id="currencies-table" class="table table-striped table-bordered table-hover form-data-table"> <thead> <tr> <th style="width: 10px;" ...

Create a roster of individuals who responded to a particular message

Can a roster be created of individuals who responded to a specific message in Discord? Message ID : '315274607072378891' Channel : '846414975156092979' Reaction : ✅ The following code will run: bot.on("ready", async () = ...

Are promises perpetually in a state of limbo? (incorrect format

As a newcomer to node.js, express, and ES6, I am learning the ropes and trying to write cleaner, more efficient code using ES6 functions and promises. One issue I'm facing is with inherited functions and values, particularly next(). Here's the co ...

What is the best way to update a CSS href using window.open with JavaScript?

I am trying to dynamically change the CSS href by using window.open in JavaScript. <a class="cssButton" id="Launch" target="_blank" data-baseref="Example/index.html?" href="Example/index.html?" >Launch Example</a> I want to transform it into: ...

I am interested in using the split method to separate and then mapping an object in JavaScript

Need assistance on separating an array using the split method. The array contains objects with properties such as name, course1, course2, and course3. Only the courses with text in their content along with a plus sign should be separated into an array usin ...

Updating a document on Firestore based on a query is a straightforward process that involves first identifying

I'm currently working on a web form page that needs to update input fields into a specific firestore document based on certain conditions. Can anyone provide guidance on how this can be achieved? The initial part where I retrieve the query results se ...

Error encountered in Next.js Webviewer during build process: "Reference Error - window is not defined"

Currently, I am in the process of developing a website that includes a PDF viewer within a dynamically imported page. When I run the code locally, everything works without any issues. However, when I execute the "npm run build" command, I encounter the fol ...

Obtain the parameter value from the resolve function in ui-router

Using window.open, I plan to open a URL such as https://localhost:3000/new?HostId=8Ocs_Onuv1wowozxAAAS&_host_Info=excel%7Cweb%7C16.00%7Cen-us%7Cc8b501ce-c51d-b862-701e-5c623e1a70e0%7CisDialog. The site https://localhost:3000 hosts a MEAN stack applica ...

Is it possible to create multiple text input components using the "each" function, and how can I update the state by combining all of them together?

I am looking to create a text-based word game where the length of each word changes with every level. Each letter will be placed in its own box, forming a matrix (e.g. 10 words, length: 10 => 10x10 matrix). How can I generate multiple text input compone ...

Change the content of a selectbox dynamically with the help of jQuery and AJAX

Currently, I am exploring the best approach for a specific challenge: I have various categories, subcategories, sub-subcategories, and so on, that I need to display in separate select boxes. For instance, initially, the options may look like this: <sel ...

Tips for sending multiple forms and having PHP interpret it as a single form using $.ajax

I am working on an email function using $.ajax with 3 different forms that are loaded through an ajax request. When a user clicks on a button, the current form will disappear and a new form will appear. The challenge I am facing is how to send data from al ...