Three.js + Tween.js tweening vertices of multiple objects

I am using three.js to create multiple BoxGeometries and tween.js to animate all vertices of the geometry.

At first all cubes should randomly distort untill i call stopTweens(). Then all vertices should go back to their default posiiton.

My problem is, that only the last cube gets reseted visually. The others are also tweened, but it seems like verticesNeedUpdate is not set to true and so nothing is happening on the screen.

Here is my Code:

var scene_03_TweenArr = ;


Function to create Cubes:

function createCubes(){

for (i = 0; i < 10; i++) {
var CubeGeometry = new THREE.BoxGeometry( 4, 4, 4, 5, 5, 5 );
var CubeMaterial = new THREE.MeshPhongMaterial( {color: 0xffffff} );
var cube = new THREE.Mesh( CubeGeometry, CubeMaterial );
scene_03.add( cube );
cube.position.x = -40+5*i;
tt_animate_vertices(cube);
}

}


Function to animate Cubes randomly:

function tt_animate_vertices(object) {

for( j = 0; j < object.geometry.vertices.length; j++ ){

var previousX = object.geometry.vertices[j].x;
var previousY = object.geometry.vertices[j].y;
var previousZ = object.geometry.vertices[j].z;


var tween = new TWEEN.Tween(object.geometry.vertices[j]);
tween.to({ x: (0.25*Math.random()+1)*previousX, y: (0.25*Math.random()+1)*previousY, z: (0.25*Math.random()+1)*previousZ }, 5000 + Math.random()*5000);

var tween2 = new TWEEN.Tween(object.geometry.vertices[j]);
tween2.to({ x: previousX, y: previousY, z: previousZ }, 5000 + Math.random()*5000);

tween.onUpdate(function(){
object.geometry.verticesNeedUpdate = true;
});

tween2.onUpdate(function(){
object.geometry.verticesNeedUpdate = true;
});

tween.chain(tween2);
tween2.chain(tween);

tween.start();

var verticeTween = [object, tween, tween2, j, previousX, previousY, previousZ ];

scene_03_TweenArr.push(verticeTween);

}
}


Function to stop tweens and reset cubevertices to default:

function stopTweens(){

for (let k = 0; k < scene_03_TweenArr.length; k++) {
scene_03_TweenArr[k][1].stop();
scene_03_TweenArr[k][2].stop();

var object = scene_03_TweenArr[k][0];
var index = scene_03_TweenArr[k][3];
var prevX = scene_03_TweenArr[k][4];
var prevY = scene_03_TweenArr[k][5];
var prevZ = scene_03_TweenArr[k][6];

var tween = new TWEEN.Tween(object.geometry.vertices[index]);
tween.to({x: prevX, y: prevY, z: prevZ }, 300)

tween.onUpdate(function(){
object.geometry.verticesNeedUpdate = true;
});

tween.start();

object.geometry.verticesNeedUpdate = true;

}
}


Here I managed to make it run in JSFiddle with the same behaviour:

http://jsfiddle.net/gfhyvou3/25/

Could you provide a live code example?
– prisoner849
Jun 28 at 15:42

@prisoner849 I updated my Question...
– tinytree
2 days ago

In the stopTweens() function change all var keywords to let. jsfiddle.net/prisoner849/8xstqo6b
– prisoner849
2 days ago

stopTweens()

var

let

@prisoner849 thanks a lot, that worked perfectly. Can you post it as an answer, so I can mark it as answered?
– tinytree
2 days ago

1 Answer
1

From my experience, it's better to use let keyword inside loops, when you work with arrays.

let

function stopTweens(){

for (let k = 0; k < scene_03_TweenArr.length; k++) {
scene_03_TweenArr[k][1].stop();
scene_03_TweenArr[k][2].stop();

let object = scene_03_TweenArr[k][0];
let index = scene_03_TweenArr[k][3];
let prevX = scene_03_TweenArr[k][4];
let prevY = scene_03_TweenArr[k][5];
let prevZ = scene_03_TweenArr[k][6];

var tween = new TWEEN.Tween(object.geometry.vertices[index]);
tween.to({x: prevX, y: prevY, z: prevZ }, 300)

tween.onUpdate(function(){
object.geometry.verticesNeedUpdate = true;
});

tween.start();

object.geometry.verticesNeedUpdate = true;

}
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.