Tips on adding additional features to Tween.js library (https://github.com/sole/tween.js/)

Currently, I am in the process of tweening between two values, unsure if they will involve position or scale. To handle this uncertainty, I have set up a Tween with an if statement within the update loop.

if( params.type == 'position' ){

  initial = {
    x: params.object.position.x,    
    y: params.object.position.y,
    z: params.object.position.z
  }

  target = {
    x: params.target.x,
    y: params.target.y,
    z: params.target.z,
  }

}else if( params.type == 'scale' ){

  intial = {
    x: params.object.scale.x,    
    y: params.object.scale.y,
    z: params.object.scale.z
  }

  target = {
    x: params.target.x,
    y: params.target.y,
    z: params.target.z,
  }


}

var tween = new TWEEN.Tween( initial ).to( target , params.time * 1000 );
tween.easing( params.easing );


// Necessity to define these for the update loop
tween.object    = params.object;
tween.type      = params.type;
tween.tweener   = this;
tween.initial   = initial;
tween.target    = target;
tween.callback  = params.callback;

tween.onUpdate(function( tween ){

  if( this.type == 'position' ){
    this.object.position.x = this.initial.x;
    this.object.position.y = this.initial.y;
    this.object.position.z = this.initial.z;
  }else if( this.type == 'scale' ){
    this.object.scale.x = this.initial.x;
    this.object.scale.y = this.initial.y;
    this.object.scale.z = this.initial.z;
  }

  if( this.initial.x == this.target.x ){

    var i = this.tweener.tweens.indexOf( this );
    this.tweener.tweens.splice( i , 1 );

    this.callback();

  }

});

The issue here lies in the onUpdate loop where

this

points to

tween.intial

instead of simply

tween

Is there a way to reference the entire tween object instead of what is being currently tweented?

I appreciate any assistance provided! Isaac

Answer №1

After some trial and error, I eventually included a bind at the end (I realized my skills in JavaScript are not as strong as I thought...)

tween.onUpdate(function( tween ){

If( this.type == 'position' ){ this.object.position.x = this.initial.x; this.object.position.y = this.initial.y; this.object.position.z = this.initial.z; }else if( this.type == 'scale' ){ this.object.scale.x = this.initial.x; this.object.scale.y = this.initial.y; this.object.scale.z = this.initial.z; }

If( this.initial.x == this.target.x ){

var i = this.tweener.tweens.indexOf( this );
this.tweener.tweens.splice( i , 1 );

this.callback();

}

}.bind( tween ));

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

`NodeJS Compared to Static HTML`

I need to create a browser client for my Java Rest API and I'm considering the best approach with the least trade-offs. Should I use static HTML files with backbone to connect to the REST API and populate the data fields? Or should I opt for a NodeJ ...

What causes Node's crypto module to generate varying outputs for identical strings?

I'm currently attempting to execute the following program: var crypto = require('crypto'); var a = crypto.createHash('md5').update('89Zr-J591').digest('hex'); var name = '89Zr−J591'; var b = crypto. ...

What are the best ways to prepare an Excel document for exportation?

I am looking for a way to control the layout of a file before exporting it. For example, I need to fix the width of columns, set the title color, add borders to tables, highlight specific rows, or enable word wrapping programmatically before exporting. My ...

Vue.js component communication issue causing rendering problems

When it comes to the Parent component, I have this snippet of code: <todo-item v-for="(todo, index) in todos" :key="todo.id" :todo="todo" :index="index"> </todo-item> This piece simply loops through the todos array, retrieves each todo obj ...

Choose a random element from an array and then modify the array

Can someone please assist me with this task? I am creating an array that corresponds to specific question numbers. var arrayCharge = []; for (var i = 2; i <= 45; i++) { arrayCharge.push(i); } I then utilize these numbers to display the respective quest ...

Everlasting Dropdown in AngularJS Always Open Mode

I am currently working on my first AngularJS App and I am facing some issues with creating a Dropdown menu. Here is the HTML code I have: <div class="btn-group" dropdown> <button type="button" class="btn btn-danger">Action</button> & ...

Verify the presence of installed software on the client's machine through ASP.Net

Does anyone have any recommendations on how to verify if an application is installed on the client side in an ASP.Net application? Since ASP.Net operates on the server side, I think it would need to be accomplished using some sort of client-side scripting ...

Tips for transferring values from one array to another array using JavaScript

I am attempting to incorporate values from the array below into another array [ {"criteriaName": "CRITERIA 1"}, {"criteriaType": "Dependent"}, {"table": "Table1"}, {"column": "Column1"}, {"joinType": "OR"}, {"o ...

Is there a way to change the color of a specific tab without affecting the content within it

I am attempting to change the color of an individual tab using jQuery. However, when I set the background attribute in CSS, it colors the entire background instead. What specific property should I be setting to only change the color of the tab itself? ...

I am interested in retrieving all users along with the places they have created using virtual population

const fetchAllUsers = async (request, response) => { try { await User.find({}).populate('place').exec(function(err, data) { console.log(data.places) console.log(data) res.json(&quo ...

What are the steps to utilize the feature of "nprogress"?

After successfully installing npm install nprogress in my project, I encountered an issue when trying to refresh the page - the console displayed the following message: hot-dev-client.js:182 [Fast Refresh] done hot-dev-client.js:196 [Fast Refresh] rebuildi ...

Sending an array to another file upon button click event in a React application

Hey everyone, I'm currently getting started with React. I have this interesting situation where I need to handle an array of IDs that are obtained from selected checkboxes. My goal is to pass this array to another file called Employee.js when a button ...

The request made by XMLHttpRequest has been blocked as it is trying to access an invalid origin, which is why access is not allowed

While attempting to log in and connect through a service layer to a Linux server with sap b1, I encountered the following error message: XMLHttpRequest cannot load https://hanab1:50000/b1s/v1/Login. A wildcard '*' cannot be used in the 'Ac ...

What is the process for starting a game with a 'Start' button on the website?

Looking to create an engaging online game experience? Want to add a 'Launch' button on your game site to kickstart the client side game? Check out examples from popular online games, such as this one. How can you implement this feature seamlessly ...

What would be the best way to handle a file path provided to a module in Node.js?

As I embark on my journey to develop my first Node.js module, one dilemma that has surfaced is how to handle user-input paths efficiently. What approach is highly recommended for accepting file paths from users as input? Furthermore, once the paths are rec ...

The input field is not displaying the characters I type, despite having a predefined state value in the value attribute

When I input text, it doesn't appear as I type even though I have set the value attribute and it is a controlled input. I've tested this on Stackblitz. My showText useState is set to an empty string. If I change it to just black, I can see the in ...

What is the best way to ensure a footer works on both a PWA and browser on a page?

Developing a Progressive Web App (PWA) has presented numerous challenges, particularly in ensuring responsiveness. In an attempt to create a footer for the page, I defined the following classes: #root { height:100vh; } .provider-container { padding ...

Using an array as a route parameter triggers a "Expected to not repeat" warning

Every time I attempt to set up a router-link with an array as the parameter, the link functions properly but triggers the following warning : "Missing param for named route "start-run": Expected "files" to not repeat, but received ["aaa"] router.js .. ...

JavaScript - creating mathematical expressions without the need for operator overloading

In my JavaScript project, I am utilizing three.js and attempting to determine if a vector remains within a designated area as shown below: var THRESHOLD = 10; if (!is_in_rect(camera.position - forward * THRESHOLD)) // do something where camera.positi ...

Guide to creating animations with javascript/react js

My attempt at altering the opacity of an element every 100 milliseconds following a click event has not been successful. The function change is triggered by a click, yet the code does not work as intended. Here's what I have so far: function change (i ...