Guide on creating incremental movement for an object using three.js and tween.js

Question

Guide on creating incremental movement for an object using three.js and tween.js

I am trying to create a scenario where my cylindrical objects (referred to as pions in the code) move step by step towards a specified object on a board of my design. Here is the code snippet I have:

a: starting point
index: target object

attachEvent(_this, index,a) {
if(index>=a){

_this.domEvents.addEventListener(_this.cases[index], 'click',        
function(event) {
for ( var i = a; i <= index; i++) {
  _this.stepByStep(_this,i)
}
}, false)
}else{

_this.domEvents.addEventListener(_this.cases[index], 'click',        
function(event) {
//no action for now
}, false)
}

}

stepByStep(_this,i)
{
_this.tween = new TWEEN.Tween(this.pions.position)
        .to({
        x:  _this.cases[i].position.x,
        y: _this.cases[i].position.y,
        z: 5},1000)
        .start();
}

Despite implementing the code, when I test it out, the pions seem to move directly to the target object without moving step by step as intended.

javascript three.js tween

Answer 1

Answer №1

Although I'm not familiar with Tween.js (I prefer using TweenJS), I believe the usage is similar.

It seems like in your for loop, you are creating new tweens each iteration instead of adding new positions. This results in a bunch of separate tweens that affect the same object and run concurrently, with the last tween being applied.

UPDATE It appears that this is how Tween.js operates? Only one to() call can be made for a tween. My original solution is suitable for TweenJS but not for Tween.js, which your example utilizes:

ORIGINAL SOLUTION APplies TO CREATEJS/TWEENJS ONLY:

Create the Tween once and add the to() calls within the loop:

var tween = new createjs.Tween(this.pions.position);
for ( var i = a; i <= index; i++) {
  _this.stepByStep(tween, _this.cases[i].position); // Adjusted arguments!
}

function stepByStep(tween, position)
{
    tween.to({
        x: position.x,
        y: position.y,
        z: 5
    }, 1000);
}

This approach creates a single tween and includes to() calls for each position. I also simplified the arguments for cleaner code. Feel free to refactor as needed.

UPDATED APPROACH

In Tween.js, it seems necessary to create a new tween for each animation. However, rather than generating them all at once, you should chain them and commence with the first tween only.

Here's some pseudo-code:

var firstTween = new TWEEN.Tween(obj)
var earlierTween = firstTween;
(loop) {
  var tween = new TWEEN.Tween(obj);
  tween.to({params});
  earlierTween.chain(tween);
  earlierTween = tween;
}
firstTween.start();

Check out this quick fiddle I put together. The drawing layer utilizes EaselJS while the tweening utilizes Tween.js. https://jsfiddle.net/0mh6kj5y/8/

I also noticed that you used this.pions in your function, whereas everywhere else uses _this for scope.

I hope this information proves helpful!

Answer 2

Although I'm not familiar with Tween.js (I prefer using TweenJS), I believe the usage is similar.

It seems like in your for loop, you are creating new tweens each iteration instead of adding new positions. This results in a bunch of separate tweens that affect the same object and run concurrently, with the last tween being applied.

UPDATE It appears that this is how Tween.js operates? Only one to() call can be made for a tween. My original solution is suitable for TweenJS but not for Tween.js, which your example utilizes:

ORIGINAL SOLUTION APplies TO CREATEJS/TWEENJS ONLY:

Create the Tween once and add the to() calls within the loop:

var tween = new createjs.Tween(this.pions.position);
for ( var i = a; i <= index; i++) {
  _this.stepByStep(tween, _this.cases[i].position); // Adjusted arguments!
}

function stepByStep(tween, position)
{
    tween.to({
        x: position.x,
        y: position.y,
        z: 5
    }, 1000);
}

This approach creates a single tween and includes to() calls for each position. I also simplified the arguments for cleaner code. Feel free to refactor as needed.

UPDATED APPROACH

In Tween.js, it seems necessary to create a new tween for each animation. However, rather than generating them all at once, you should chain them and commence with the first tween only.

Here's some pseudo-code:

var firstTween = new TWEEN.Tween(obj)
var earlierTween = firstTween;
(loop) {
  var tween = new TWEEN.Tween(obj);
  tween.to({params});
  earlierTween.chain(tween);
  earlierTween = tween;
}
firstTween.start();

Check out this quick fiddle I put together. The drawing layer utilizes EaselJS while the tweening utilizes Tween.js. https://jsfiddle.net/0mh6kj5y/8/

I also noticed that you used this.pions in your function, whereas everywhere else uses _this for scope.

I hope this information proves helpful!

Guide on creating incremental movement for an object using three.js and tween.js

Answer №1

Similar questions

Ways to deactivate dates that come after today's date

Steps to sending a request with a custom user agent

Prevent event listeners from being triggered during the '$destroy' event. Error: $on function is undefined

What are the steps to launch a Next.js application on cPanel hosting?

Using ng-repeat in conjunction with the OpenWeatherMap API to search for and display cities

Retrieve the downloaded status of a blob within a specific function

The value is undefined until a new Resource object is pushed with the item

"Getting an 'Undefined index' error while accessing a JavaScript variable in PHP

nodemon is launching an endless number of .node-xmlhttprequest-sync files

Preventing users from selecting past dates in HTML input date field

Encountering difficulties while attempting to deploy NodeJS application on Heroku

Include a link to a JavaScript file within a dynamically created HTML page in a Delphi VCL application

Experiencing difficulties with a JavaScript loading issue where images are not loading properly

At times, the content in a JQuery dialog box may display outdated information

The function that was passed to readFileSync anonymously is failing to return any data

Extracting data on an AngularJS platform by using web scraping techniques

Displaying current location on Google maps with generated code and adding a new marker by clicking in PHP: Firefox

VueJS Element Library's date picker feature returns dateTime values with their corresponding time zones attached

ng-model based on various scenarios

Surprising Outcomes of Negative Margin in jQuery Animation