Circular movement in ThreeJS within a specified duration

Question

Circular movement in ThreeJS within a specified duration

I am currently working on creating a circular motion for an object within a set time frame.

This project involves designing a clock with smooth motion.

Instead of simply updating the position to fixed coordinates every time .getSeconds() changes, I aim to use a combination of

(.getSeconds() + (.getMilliseconds()/1000)

to accurately display the movement of the second hand continuously.

In previous projects involving circular motion, I utilized the following pair of functions:


var OrbitCalculationX = function(velocityPartial, orbitalRadius) {
    return (Math.sin(Date.now() / 16000 * velocityPartial) * orbitalRadius);
};
var OrbitCalculationZ = function(velocityPartial, orbitalRadius) {
    return (Math.cos(Date.now() / 16000 * velocityPartial) * orbitalRadius);
};`

The value 16000 in that calculation determined the orbital time, but it was not accurate. Is there a method to control a x-axis sin vs z-axis cos equation pairing with precise time constraints?

If not, is there a way to define an animation path to complete within an exact timeframe using THREEjs?

javascript time three.js trigonometry

Answer 1

Answer №1

Hopefully, my interpretation is accurate...

Consider a minute divided into 60 seconds and 60,000 milliseconds. The initial step involves obtaining values within this range.

var millisInMinute = Date.now() % 60000;

Next, we must standardize the value to a 0 to 1 scale:

var millisInMinuteNormalized = millisInMinute / 60000;

To create a full circular motion using sine and cosine functions with our variable ranging between 0 and 1, we multiply it by 2*PI see plot here

The remaining calculation involving the radius follows similar principles as demonstrated earlier, resulting in

var orbitCalculation = function(radius) {
    return {x: (Math.sin((Date.now()%60000)/60000 * Math.PI * 2) * radius),
            z: (Math.cos((Date.now()%60000)/60000 * Math.PI * 2) * radius)};
}

The current time displayed accurately can be cross-referenced with your system clock. See a working JSFiddle

Answer 2

Hopefully, my interpretation is accurate...

Consider a minute divided into 60 seconds and 60,000 milliseconds. The initial step involves obtaining values within this range.

var millisInMinute = Date.now() % 60000;

Next, we must standardize the value to a 0 to 1 scale:

var millisInMinuteNormalized = millisInMinute / 60000;

To create a full circular motion using sine and cosine functions with our variable ranging between 0 and 1, we multiply it by 2*PI see plot here

The remaining calculation involving the radius follows similar principles as demonstrated earlier, resulting in

var orbitCalculation = function(radius) {
    return {x: (Math.sin((Date.now()%60000)/60000 * Math.PI * 2) * radius),
            z: (Math.cos((Date.now()%60000)/60000 * Math.PI * 2) * radius)};
}

The current time displayed accurately can be cross-referenced with your system clock. See a working JSFiddle

Circular movement in ThreeJS within a specified duration

Answer №1

Similar questions

Executing certain test suites with defined capabilities in Protractor

Revamp the layout of the lower HTML video menu

Removing values when disabling a button using JavaScript

Angular ui router - Transitioning from one state to the same state, when no parameters are provided, results in

What are the steps to retrieve marker data from a MySQL database and showcase them dynamically on a Google Map using AJAX? Addressing time constraints

Ways to conceal the lower details in DataGrid Material-UI

What could be the reason for the malfunctioning of my React Native vector icons?

Fetching information with request query parameters in Node.js

The router is unable to direct when an item is clicked

Encountering a 500 server error while trying to send an email using SendGrid in conjunction

What is the process of converting an Array that is nested within an Object?

Differentiating Typescript will discard attributes that do not adhere to an Interface

jquery accordion failing to display content

Issues with routing in NodeJS Express causing routes to not be called

"Enhance your website with a dynamic Jssor slider featuring nested slides and vertical

The dispatch function in redux-thunk is not functioning as expected

Troubleshooting problems with Three.js at tiled texture edges when using MeshFaceMaterial

Store text in a table format in your local storage

"Including Span icons, glyphs, or graphs within a table cell in AngularJS based on a specified condition or numerical

Can the color of text be adjusted (to either white or black) based on the background color (in any color and format)?