Getting started with Tween JS on a three-dimensional cube in Three JS

Question

Getting started with Tween JS on a three-dimensional cube in Three JS

I'm venturing into the world of Tween JS and attempting to create a basic animation that moves objects to the right using Tween.

Here is the code snippet from my init function (utilizing Three JS):

var geometry = new THREE.CylinderGeometry(200, 200, 200, 4, 0);
var material = new THREE.MeshPhongMaterial({ambient: 0xf0f0f0, color: 0x006699, specular: 0x006699, shininess: 60, shading: THREE.FlatShading});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
scene.add(mesh);

var tween = new TWEEN.Tween({ x: 0, y: 0 })
.to({ x: 400 }, 2000)
.easing(TWEEN.Easing.Elastic.InOut)
.onUpdate(function() {
mesh.position.x = Math.round(this.x);
}).start();

Below is my animate function:

requestAnimationFrame(animate);        
renderer.render(scene, camera);
TWEEN.update();
update();

The cube renders but the tween effect doesn't seem to be functioning. Could there be something I've overlooked?

javascript animation three.js tween

Answer 1

Answer №1

Here are the steps I took to enhance my scene:

Develop a separate render() function
Organize the TWEEN code into a function that can be easily called. Remember to clear all previous TWEENS within this function. This practice was adopted from tutorial examples, although the exact reason behind it is not crystal clear.
Within the TWEEN function, invoke the render function during updates.
Integrate TWEEN.update into your ongoing animation loop. It's essential to note that the render() function will be triggered each time a TWEEN is updated.

Below is a snippet of skeleton code that might align with your project:

//TWEEN function
function moveObject( ) {
    TWEEN.removeAll();
    new TWEEN.Tween( { x: 0, y: 0 } )
    .to( { x: 400 }, 2000 )
    .easing( TWEEN.Easing.Elastic.InOut )
    .onUpdate( render )
    .start();   
};
//NON-STOP animation loop
function animation(){
    requestAnimationFrame(animate);  
    TWEEN.update();
}
//Render function
function render(){
    renderer.render(scene, camera);
}

This guide proves beneficial in refining your setup.

Answer 2

Here are the steps I took to enhance my scene:

Develop a separate render() function
Organize the TWEEN code into a function that can be easily called. Remember to clear all previous TWEENS within this function. This practice was adopted from tutorial examples, although the exact reason behind it is not crystal clear.
Within the TWEEN function, invoke the render function during updates.
Integrate TWEEN.update into your ongoing animation loop. It's essential to note that the render() function will be triggered each time a TWEEN is updated.

Below is a snippet of skeleton code that might align with your project:

//TWEEN function
function moveObject( ) {
    TWEEN.removeAll();
    new TWEEN.Tween( { x: 0, y: 0 } )
    .to( { x: 400 }, 2000 )
    .easing( TWEEN.Easing.Elastic.InOut )
    .onUpdate( render )
    .start();   
};
//NON-STOP animation loop
function animation(){
    requestAnimationFrame(animate);  
    TWEEN.update();
}
//Render function
function render(){
    renderer.render(scene, camera);
}

This guide proves beneficial in refining your setup.

Getting started with Tween JS on a three-dimensional cube in Three JS

Answer №1

Similar questions

Can dates in the form of a String array be transmitted from the server to the client?

Expression fragment in Thymeleaf

How can I trigger an event to append a UL element using

Using urllib.urlopen in place of javascript

Sorting complex strings in Typescript based on the dates contained within them

Learn how to achieve a sleek animation similar to the famous "Ken Burns effect" by utilizing the CSS property "transform" instead of "object-position". Check out the demo to see it in action!

Manage SPA forms using Dataform Javascript - Safeguarding form information by avoiding inclusion in the URL

What is the process of retrieving a property value from a database using selected values from cascaded drop-down lists?

Assign Texture to Plane with Clarity

What is the best method for effectively eliminating duplicate objects with the same value from an array?

What method is the most effective for preloading images and stylesheets?

Cross-site communication with Ajax using both POST and GET requests

Express server unable to process Fetch POST request body

Accessing and parsing an XML file in Webstorm IDE with the use of node.js and ajax

Use Vuejs to add the details of the selected item to an array and then dynamically update the array when items are checked or unchecked

Is it possible for a webgl shader to operate within a three.js environment?

Automatically launch a popup window specified in JavaScript

Error handling in Realm-js can result in exceptions being thrown

Top recommendations for implementing private/authentication routes in NextJS 13

Reviewing user input for any inappropriate characters using jQuery's functionality