What is the best way to have multiple meshes traverse various paths at a consistent speed simultaneously?

Scenario

In my game development project, I have a community where multiple characters need to move autonomously and complete tasks. I implemented a method found in this resource for moving objects along a path using Three.js. However, each character moves at a different speed, as shown below, which is not the desired behavior.

https://i.sstatic.net/vFoCP.gif

Query

How can I ensure that all characters move at the same speed? Additionally, if you have an alternative solution for moving objects from one point to another, please share your insights.

Note: I specifically used the "fancy movement" technique mentioned in the linked post.

Answer №1

(If the fiddle disappears, the previous solution proposed using a variable incremented slowly with path.getPointAt(position) to move objects along the path.)

The Curve.getPointAt function accepts a value that represents a percentage along the curve. As a result of this calculation, the spacing between points (for example, 0 and 0.1) will vary depending on the length of the curve.

For instance, if curve1 is 10 units in length, and curve2 is 100 units long, then:

curve1.getPointAt(0.1) // vector 1 unit from the start of curve1
curve2.getPointAt(0.1) // vector 10 units from the start of curve2

If you base your motion on this system, then an object traveling along curve2 will move 10x faster than an object on curve1.

Instead, it is advisable to determine the number of steps an object should take along a path based on a certain "steps/second" or "steps/frame" measure. This aligns more closely to the concept of genuine physical velocity rather than being reliant on the path's length.

For example, let's suppose you intend to travel at a rate of 2 units per frame along both curve1 and curve2. With a fixed rate of movement, all you need to do is divide the rate by the total length to obtain the number of required "steps" (in this case, frames) to reach the path's end.

2 / 10  = 0.2  // point polling percentage for curve 1
2 / 100 = 0.02 // point polling percentage for curve 2

Subsequently, when moving an object along curve1, you would utilize path.getPointAt(0.2), and for curve2, you would employ path.getPointAt(0.02).

In foreseeing potential scenarios where the calculations may not align perfectly, resulting in partial steps towards reaching the end of the curve, the decision on how to handle such cases lies with you. You could opt to dedicate an additional frame to complete the motion, or anticipate a step ahead during the movement computation and decide whether to advance straight to the endpoint.

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 I take a screenshot from the client side and save it on the server side using PHP?

Currently, I am exploring the possibility of screen capturing at the client side. It appears that the "imagegrabscreen()" function can only capture screens on the server side. After some research, I discovered a new function that allows for screen capture ...

tips for loading json data into jqgrid

Utilizing the struts2-jquery-jqgrid plugins, I have created a Grid with a filter-search feature. The Grid includes a drop-down list in the column assigned_user for filtering based on the selected option from the drop-down list. <s:url var="remoteurl" a ...

An error was thrown at line 474 in module.js

After recently installing nodejs on my laptop, I'm struggling to run a js file in the node environment. I attempted using this command: node C:\Program Files\nodejs\file.js, but encountered the following error: module.js:474 thr ...

I am unable to retrieve dynamic data from the database

Storing data in a MySQL database has been successful for me. I've been utilizing PDO in PHP to fetch the data and then converting it to JavaScript using json_encode. However, I keep encountering the output NaN when implementing a specific scenario. It ...

Scrolling to the next wrap class in jQuery is not functioning properly with the chatbox and ScrollTop

I have created a chat box using jQuery. However, I am facing an issue where when I click the button multiple times, the scroll returns to the top. My objective is for the scroll to move to the next wrap class when the button is clicked. Here is a snippet ...

Angular 2 - Error: Regular expression missing forward slash syntax

Recently, I began working on an Angular 2 tutorial app using this repository. While I can successfully launch the app and display static content, I am facing challenges with rendering dynamic content from the component. I have a feeling that the error migh ...

Why is it necessary to call the .call(this) method when extending a THREE.js "class"?

Currently, I am in the process of creating a new object that should inherit from THREE.Object3D(). In my code snippet, you can see how I have set it up: function myNewObject() { THREE.Object3D.call(this); //... } myNewObject.prototype = new THREE.O ...

The art of overriding React class methods

I am attempting to implement a class composition in react: class Entity { constructor(props) { super(props); } renderPartial() { return (<div>Entity</div>) } render() { return (<div>header {this.renderPartial()}< ...

What are the security benefits of using Res.cookie compared to document.cookie?

When it comes to setting cookies to save data of signed in members, I faced a dilemma between two options. On one hand, there's res.cookie which utilizes the Express framework to set/read cookies on the server-side. On the other hand, there's d ...

How can the event listener be utilized with md-autocomplete?

I am currently in the process of developing an angularjs application that incorporates an autocomplete feature. One key aspect of this application is that certain fields cannot be populated until an item has been selected using the autocomplete function. ...

Utilizing the nested combination of map and filter functions

Struggling to grasp the concept of functional programming in JavaScript, my aim is to extract object boxart items with width=150 and height=200. Console.log(arr) the output shows [ [ [ [Object] ], [ [Object] ] ], [ [ [Object] ], [ [Object] ] ] ] I&apos ...

Having difficulty choosing an item from a personalized autocomplete search bar in my Vue.js/Vuetify.js project

NOTE: I have opted not to use v-autocomplete or v-combobox due to their limitations in meeting my specific requirements. I'm facing difficulties while setting up an autocomplete search bar. The search functionality works perfectly except for one mino ...

Arranging JavaScript object by object properties (name)

Can anyone assist me with my training? I am currently learning JavaScript (Js) and TypeScript (Ts) by working with an external public API. After successfully fetching and displaying my data, I now want to implement sorting functionality. My goal is to sor ...

Disregard the significance of radio buttons - iCheck

I have been attempting to retrieve values from radio buttons (using iCheck), but I am consistently only getting the value from the first radio button, while ignoring the rest. Despite following what seems to be correct code theory, the output is not as exp ...

Why isn't my textarea in jQUERY updating as I type?

On my website, I have a comment script that is not functioning correctly in some parts of the jQuery/JavaScript code. Instead of posting an edited comment to PHP, I created a notification window to test if the value passed through is actually changing. W ...

Is it possible to access a service within the config function or access a provider from inside a service?

Need help configuring angular bootstrap tooltip (uibTooltip) to be disabled on mobile devices with angular-bowser for device detection. One possible solution is: isMobile = _bowser.mobile $uibTooltipProvider.options = { trigger: isMobile ? "none" : "mous ...

Can you explain the purpose of the datalayer.push function?

I've been puzzling over this.. It seems like data layer.push is simply updating the second amount. Can someone shed light on what exactly is happening here? function dollarz() { var amount1 = '$156.86'; var amount2 = amount1.replace(&quo ...

SyntaxError: Identifier was not expected

I am currently working on a function that involves a table of rows with edit buttons. Whenever the edit button is clicked, the following function is called and I encounter this error: Uncaught SyntaxError: Unexpected identifier The error seems to be poin ...

Why am I not receiving any results from the communication between JavaScript and PHP using an HTTP GET request?

Currently, I have a small JavaScript program running within an HTML5 canvas and included a HTTP GET request function in my JavaScript code. The function itself is functioning properly as I tested it with multiple examples from the internet, all of which wo ...

Combining Jquery with Append to Dynamically Update PHP Variables

Code Snippet (index.html) <script> $(document).ready(function() { var interval = setInterval(function() { $.get("load_txt.php", { 'var1': 4, 'var2' : 52}, function(data){ $('#msg' ...