Boost the animation smoothness for CreateJS's TweenJS to optimize its compatibility with three.js

Utilizing CreateJS's TweenJS in a 60fps three.js project is causing some jerkiness in the animation when moving objects. It seems like the objects are not being updated at the same frame rate.

Check out this example here: https://jsfiddle.net/sccottt/sbm9s6k5/1/

In the demonstration, the box (animated with TweenJS) appears to have less smooth movement compared to the rotating lines in the background (done using requestAnimationFrame()).

Is there a method to adjust the frame rate of TweenJS or any suggestions on how to enhance the overall performance for smoother animations?

javascriptthree.jscreatejstween

Answer â„–1

The latest version of CreateJS available on JSFiddle is a bit outdated, dating back to the end of 2013. Since then, RequestAnimationFrame support has been added, which is now used as the default timing mode.

I have updated your fiddle to utilize the most recent version (0.6.1, released on May 21) with RAF enabled, resulting in a smoother performance. Check it out here

createjs.Ticker.timingMode = createjs.Ticker.RAF;

Answer â„–2

It's worth mentioning that the tweenjs.min.js library included in your fiddle isn't actually being utilized as one might assume. Instead, the createjs version is being used.

I decided to work with the original tween.js located under three.js/examples/libs/tween.min.js and made some adjustments to your tween code, resulting in a much smoother outcome.

setInterval( function()
{
    var target = randomV3();

    new TWEEN.Tween( _someone.position )
        .to( { x: target.x, y: target.y, z: target.z }, 2000 )
        .easing( TWEEN.Easing.Quadratic.InOut )
        .onUpdate( function() {
            _someone.position.set( this.x, this.y, this.z );
        } )
        .start()
    ;
}, 2250 );

Check out the fiddle at https://jsfiddle.net/2v4tqaux/

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

What is the best way to display multiple VR scenes on a single webpage?

Currently, I am attempting to display several 360 photos utilizing the a-frame library through implementing a-scene. However, I am encountering an issue where only one scene is being rendered on my page. Are there any alternative approaches to address this ...

javascripthtmlvirtual-realityaframe

What is the method for designating the specific pages on which the stripejs script should be loaded?

The performance of the main-thread is being significantly impacted by Stripe's script, as illustrated in the image provided by Google Insights. https://i.stack.imgur.com/bmdJ2.png My concern is that the page currently experiencing issues does not ac ...

javascriptreactjsfrontendnext.js

Guide to creating a new element using jQuery

Question regarding JQuery and a Dropzone plugin. Here is the HTML code: <form action="/file-upload" class="dropzone"> <div class="fallback"> <input name="file" type="file" multiple /> </div> </form> Desired styling ...

javascriptjqueryhtmldropzone.js

Methods for verifying the device on which a web application is currently operating

After developing a web application using node.js, express, angular, and bootstrap, I noticed that the layout and forms were not displaying correctly on all devices. Specifically, when running the app on a different device, such as an iPad or laptop, the fo ...

javascripthtmlcssangularjsnode.js

Transforming a single object into multiple arrays using AngularJS

Just starting out with AngularJS and I've got some data that looks like this { day1: 0, day2: 0, day3: 0, day4: 2 } Is there a way to convert this data into arrays structured like below? [     ["day1": 0],     ["day2": 0],   ...

javascriptangularjsjson

The _.get function is not compatible with the module.exports object

After exporting an object from a node file, my code is not functioning as expected. (path './../../config/cloud.js): module.exports = { some: { property: 1 } } Even though I am using the following code: const config = require(&ap ...

javascriptnode.jslodash

Identifying a web application functioning as a homescreen app within the Android Stock Browser

We are in the process of developing a web application that needs to function as a standalone or homescreen app. While we can identify if it is being accessed from Chrome or Safari using window.navigator.standalone or window.matchMedia('(display-mode: ...

javascriptandroidandroid-browser

Querying Objects in JavaScript

Is there a way to filter a JavaScript collection using a query syntax similar to SQL? I've come across one library that attempts to achieve this, called json-query. While it works in some scenarios, it does have its limitations. For example, queryin ...

javascriptjqueryjsonjson-query

typescript unconventional syntax for object types

As I was going through the TypeScript handbook, I stumbled upon this example: interface Shape { color: string; } interface Square extends Shape { sideLength: number; } var square = <Square>{}; square.color = "blue"; square.sideLength = 10; ...

javascriptobjectsyntaxtypescript

Italian calendar conversion for the react-multi-date-picker library

I recently integrated the react-multi-date-picker into my project, utilizing the multiple mode feature. However, I encountered an issue when trying to display the Italian calendar based on the language setting. Despite using locale="it", the calendar was n ...

javascriptreactjsnpm

Return a string to the client from an express post route

I'm attempting to return a dynamically generated string back to the client from an Express post route. Within the backend, I've set up a post route: router.post('/', async (req, res) => { try { // Here, I perform computations on ...

javascriptexpressnodes

Alter text within a string situated between two distinct characters

I have the following sentence with embedded links that I want to format: text = "Lorem ipsum dolor sit amet, [Link 1|www.example1.com] sadipscing elitr, sed diam nonumy [Link 2|www.example2.com] tempor invidunt ut labore et [Link 3|www.example3.com] m ...

javascriptangulartypescript

What is the best way to send props from a child component to its parent in a React

I'm a beginner in React and I'm attempting to develop a "CV-Generator" similar to the one shown here. In this application, whenever a user inputs data in any of the input fields, it is automatically displayed in the render preview on the right si ...

javascriptreactjs

Adding a Library to Your Project

Being a newcomer to importing libraries into personal projects, I am attempting to import the mathjs library package for the first time. (). However, I am running into the issue on my website where it says "math is undefined" when I try to use it. You c ...

javascriptnpmmathjs

Using MomentJS along with Timezones to accurately display Datetime while accounting for offsets

I am utilizing moment.js along with timezones to generate a datetime linked to a specific timezone: var datetime = moment.tz("2016-08-16 21:51:28","Europe/London"); Due to the recognition of DST (daylight saving time) by this constructor, moment.js will ...

javascriptjquerymomentjs

How can I adjust the number of columns displayed per page on a Bootstrap Studio website?

Currently, I am utilizing Bootstrap studio to design a website featuring multiple cards on each page. Initially, I incorporated cards from the sb-admin-2 template and everything was proceeding smoothly. In my bootstrap studio interface, the three-column ca ...

javascripthtmlcssbootstrap-4bootstrap-studio

What are the steps to implement an audio stream in a JavaScript React application?

I have been working on integrating a web dialer system into my JavaScript NextUI React app. After making some progress, I can successfully dial and hear my voice through the phone. However, I am encountering an issue where I cannot hear the other person sp ...

javascriptreactjsnextui

Transforming 2D Fabric JS lines into stunning 3D perspectives

I am currently developing a script that allows clients to create custom bend angles for iron with detailed measurements. Everything is going well so far. Now, the client is requesting a 3D visualization of the bend. However, I'm not sure how to achie ...

three.jsfabricjs

Utilizing an event emitter to read from a text file

I have a text file with multiple lines containing data such as pepperoni pizza, pizza margherita, etc. I am trying to create an EventEmitter that will trigger specific events based on the content of the file. For example, if the word "pepperoni" is found ...

javascriptnode.js

Maximizing the potential of .delegate in combination with .closest

$('.inputRadio').parent().click(function (e) { //implement delegate method here }); Looking for assistance on how to integrate the delegate method in the provided function. Any suggestions? ...

javascriptjquery