Utilizing THREE.js to animate a skinned mesh along a curved path

I am working with a skinned mesh of a 'snake' that I exported from Blender. This snake has bones resembling a spine that I want to animate along a curve called SplineCurve3.

While I can calculate points along the spline and the angles between those points, I am encountering difficulty in setting the rotations of the bones correctly.

The issue lies in the fact that each bone is a child of the previous bone, meaning that rotating one bone also affects the others in the chain.

In the image provided:

The outer shape represents the snake itself.

The pink line illustrates a section of a SplineCurve3.

The blue/green lines represent the bones (THREE.SkeletonHelper).

To rotate each bone, I am using SplineCurve3.getTangentAt function. However, due to the parent bone being rotated as well, the snake curls up instead of following the desired path outlined by the pink line.

My main query is how can I adjust for the rotation of the parent bone(s) when determining the rotation of an individual bone?

Furthermore, although the path shown in the image is flat, my ultimate aim is to move the snake in three dimensions - essentially turning it into a flying snake.

Answer №1

Could you provide a visual representation of the rotations with labeled angles for clarification?

If the entire snake is tilted in relation to the axes, simply subtract that angle from the bone's angle.

However, wouldn't the bone angles be specified relative to the parent bone rather than as absolute angles against the axes? Using absolute angles in comparison to the x-axis as relative angles could explain why the bones appear increasingly rotated.

If we assume that the bone angles should be given relative to the parent bone, the formula should look like this:

childRelativeAngle = childAbsoluteAngle - parentAbsoluteAngle

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 Javascript or Jquery determine the specific event assigned to an object?

Is it possible to retrieve the properties of HTML elements using their name or id? For example: document.getElementById('id').value; //Accessing element property in JavaScript $('#id').attr('class'); // Accessing correspond ...

Using a Javascript array within a Bootstrap carousel allows for dynamic content to

I am looking to incorporate my javascript array into a bootstrap carousel so that the carousel can display all the elements from the array and determine which picture should be shown based on the data. I also want it to display the title, subtitle, and alt ...

The active class in the Bootstrap carousel is not updating when trying to change

I am struggling to make the Twitter Bootstrap carousel function properly. Although the slides automatically change after the default timeout, the indicators do not switch the active class, resulting in my carousel failing to transition between slides. Ini ...

Issue with Bootstrap Table Style When Using window.print();

The color of my Bootstrap table style is not displaying correctly in the print preview using window.print(). Here is a screenshot showing that the table style is not working properly: https://i.stack.imgur.com/eyxjl.jpg Below is the code I am using: < ...

What is the process of incorporating a JS engine into an ASP.NET Core MVC React application?

An error will be displayed by the upcoming service. reference missing services.RegisterJsEngineSwitcher(settings => settings.DefaultEngineName = V8JsEngine.EngineName) .AddV8(); ...

What is the best way to add a background image to a div using react?

My images folder contains 2 images. See the code snippet below from App.js: import "./styles.css"; import nf_logo from "./images/netflix_logo.png"; import nf_bg from "./images/netflix_bg.jpg;; const divStyle = { backgroundImag ...

Automatic panning of JavaScript on a map

Having some issues with the functionality of the pan function. It's working, but not quite how I need it to. Currently, I have a logo overlaying a map and I want to pan away from the logo automatically to show an infowindow (panning left or right). H ...

I'm currently working with ReactJS and attempting to retrieve JSON data from a REST API in JIRA, but I'm facing challenges in achieving this

I've been struggling for hours trying to understand why I am unable to access and transfer data in my array from the JSON data in JIRA using the REST API. Basically, I am attempting to retrieve the JSON data from the JIRA website via URL with Basic Au ...

retrieving tunes from minitune

I am trying to retrieve a list of songs using the tinysong API, which pulls data from Grooveshark. I am making the request through $.ajax and here is what I have so far: $.ajax({ url : 'http://tinysong.com/s/Beethoven?format=json&key=&apos ...

Utilizing only select functions from lodash can be more beneficial than installing the entire library, as it reduces the amount of unnecessary dependencies

While working on my project, I incorporated underscore.js for its functionality. However, I recently discovered the need for Lodash's fill function. The idea of adding Lodash to my project seems excessive due to overlapping features with underscore.js ...

Converting sections of JSON data into boolean values

Is there a way to convert certain parts of a JSON string into booleans? Here is an example of my JSON string: { "file_id": { "width": "560", "height": "270", "esc_button": "1", "overlay_close": "1", "overl ...

What are some strategies for preventing unused setState functions in React? Is it possible to create a React useState without a setter function

Currently working on reducing or eliminating npm warnings related to the React site. Many of these warnings are due to the setState function, which is marked as 'unused' in the code snippet below. const [state, setState] = useState('some st ...

Connecting the mousedown and mouseup events for a selector and the whole document

I'm attempting to achieve the following: $(document).on('mousedown', '.selector', function(){ $(document).on('mouseup', function(){ // perform some actions }); }); This code aims to trigger some actions a ...

What is the reason for not displaying the various li elements on my webpage?

Here is the code snippet export default function DisplaySearchResults({ results }) { var arr = Object.entries(results) console.log(arr) return ( <div> Here are the search results : <ol> {arr.map((va ...

The onClick event's detail property is persisting even after the React component has been replaced

In the onClick event, the value of event.detail indicates the number of clicks, with a double-click having event.detail = 2. It seems that when the React component being clicked is replaced, the event.detail value does not reset. This could be due to Reac ...

Fetching a Wikipedia page using AJAX or the fetch() method

I am currently attempting to dynamically retrieve a Wikipedia webpage within the browser in order to utilize XSLTProcessor for further processing of the XHTML content. Unfortunately, my efforts have been unsuccessful as Wikipedia is not sending the necess ...

Running Docker does not provide a means to access the application

I am currently developing an Express (nodejs) application that is running on port 3000, showcasing a simple hello world, and is hosted on a public github repository. So far, everything is running smoothly and the code itself looks like this: var express ...

What is the AngularJS equivalent of prevAll() and nextAll() functions in jQuery?

Currently, I am working on a project that involves AngularJS and I'm having trouble finding an example that fits my needs... With AngularJS, I know how to apply a class when an element is clicked, but how can I add a class to all previous items and r ...

Escape key does not close the modal dialogue box

I’ve customized the codrops slide & push menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) to create an overlay on a webpage. Although it functions as intended, I’m struggling to implement a way to close it by pressing the escape ...

Issue with FullPage.js scrollOverflow feature not properly accommodating loaded content

I am currently working on a full-page website and have opted to utilize the Fullpage.js plugin. However, I seem to be facing some challenges when it comes to loading content through an AJAX request. The pages are being populated with JSON content, but for ...