Moving towards the target is a Three.js object

Question

Moving towards the target is a Three.js object

I'm struggling with an issue where the x position of my object moves quicker than the z position, or vice versa. How can I make my object slow down for the x position if the z position requires more time to move?

This is the code in my animation function:

var distanceX = objectX - targetX;
var distanceZ = objectZ - targetZ;

if( distanceX < 0) {
    visitor.translateX( 0.05 );
}else {
    if( distanceX > 0) {
        visitor.translateX( -0.05 );
    }
}

if( distanceZ < 0) {
    visitor.translateZ( 0.05 );
}else{
    if( distanceZ > 0) {
        visitor.translateZ( -0.05 );
    }
}

javascript three.js

Answer 1

Answer №1

My suggestion would be to calculate the current value as an absolute value rather than incrementally. The method you are currently using is similar to:

x = xLast + constantValue;

Instead, you can achieve the same result without relying on the previous value by using linear interpolation:

progress = Math.min((Date.now() - startTime) / duration, 1);
x = xStart + progress * (xEnd - xStart);

Here, the progress value ranges from 0 (start of animation) to 1 (end of animation).

By following this approach, you can set the duration for both parts to the same value. Utilizing three.js math utilities allows you to streamline the process:

var end = new THREE.Vector3(1, 0, 2);
var start = new THREE.Vector3(2, 0, -1);

// during animation-loop
var tmp = new THREE.Vector3();
var progress = Math.min((Date.now() - startTime) / duration, 1);

// tmp = progress * (end - start)
tmp.copy(end).sub(start).multiplyScalar(progress);        
object.position.copy(from).add(tmp);

This method ensures that all position components move at a constant speed, reaching the destination simultaneously.

You may also want to explore animation libraries like tween.js, which handle these tasks efficiently.

Answer 2

My suggestion would be to calculate the current value as an absolute value rather than incrementally. The method you are currently using is similar to:

x = xLast + constantValue;

Instead, you can achieve the same result without relying on the previous value by using linear interpolation:

progress = Math.min((Date.now() - startTime) / duration, 1);
x = xStart + progress * (xEnd - xStart);

Here, the progress value ranges from 0 (start of animation) to 1 (end of animation).

By following this approach, you can set the duration for both parts to the same value. Utilizing three.js math utilities allows you to streamline the process:

var end = new THREE.Vector3(1, 0, 2);
var start = new THREE.Vector3(2, 0, -1);

// during animation-loop
var tmp = new THREE.Vector3();
var progress = Math.min((Date.now() - startTime) / duration, 1);

// tmp = progress * (end - start)
tmp.copy(end).sub(start).multiplyScalar(progress);        
object.position.copy(from).add(tmp);

This method ensures that all position components move at a constant speed, reaching the destination simultaneously.

You may also want to explore animation libraries like tween.js, which handle these tasks efficiently.

Moving towards the target is a Three.js object

Answer №1

Similar questions

Morris.js is throwing an error message, stating "Uncaught TypeError: Unable to access the 'label' property as it

How can data be transferred from a parent component to a child component using MaterialUI's styling functionality?

Injecting dynamic content using JavaScript

Timer Tool: JavaScript Countdown Application

The option chosen from the ng-options does not remain attached to the drop-down menu

Modify the CSS using JavaScript after a brief delay

Combine two events in jQuery using the AND operator

Incorporate the variables specified in the parent PHP file into the PHP code being received through

Generate barcodes using Angular 2

Retrieving a specific attribute pair from a JSON object

Ways to insert a line break within a jQuery function using text()

Oops! You forgot to include the necessary getStaticPaths function for dynamic SSG pages on '/blogs/[post]'

How can I stop the li item from swiping right in JQuery mobile?

A bounding box aligned with the camera's perspective

Is it possible to selectively export certain interfaces within a .d.ts file?

Show a single item from the database sequentially and cycle through the rest in a timed loop

Understanding the Access-Control-Allow-Headers in preflight response for Wordpress and VueJS

Navigating with buttons in React JS

How can I use jQuery to reload the page only at certain intervals?

What is the best way to incorporate a popover into a fullcalendar event displayed on a resource timeline in Vue while utilizing BootstrapVue?