I have written a small animate function using three.js for 3D rendering(full test application below):
each time I click on the screen the cube rotates based on the animation descibed in the function call. But I was expecting that if the cube was already animating under one animation adding another would cause it to flicker about as the same properties are being animated by multiple animation calls. but this is not what happens the last animation is halted and the new one takes over, even though my callback function at the end shows that the old animation function was still running! So why does the cube not flicker about when multiple clicks are sent?
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<script src="three-mini.js"></script>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script>
var animate = function(obj, prop, targetValue, length, callback) {
var startTime = Date.now(), inverseLength = 1 / length, startValue = obj[prop];
if( typeof targetValue === "string") {
if(targetValue.substring(0, 2) === "+=") {
targetValue = obj[prop] + Number(targetValue.substring(2));
} else {
targetValue = obj[prop] - Number(targetValue.substring(2));
}
}
var animateProp = function() {
var elapsed = (Date.now() - startTime) * inverseLength;
if(elapsed >= 1) {
obj[prop] = targetValue;
if( callback instanceof Function) {
requestAnimationFrame(callback);
}
return;
} else {
obj[prop] = (startValue - targetValue) * (Math.cos(elapsed * Math.PI) + 1) * 0.5 + targetValue;
requestAnimationFrame(animateProp);
}
};
requestAnimationFrame(animateProp);
};
var camera, scene, renderer;
var geometry, material, mesh;
init();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({
color : 0xff0000,
wireframe : true
});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.domElement.addEventListener('click', function() {
animate(mesh.rotation, "x", "-=" + Math.PI * 2 * 10, 5000, function() {
alert("CALLED BACK!")
});
animate(mesh.rotation, "y", "-=" + Math.PI * 2 * 10, 15000, function() {
});
});
window.addEventListener('load', render);
window.addEventListener('resize', function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
}
function render() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame(render);
renderer.render(scene, camera);
}
</script>
</body>
</html>
UPDATE 1:
In an attempt to find out what’s going on I add more meshes and animated them all differently, the code is below, it animates each mesh for each subsequent click and it animates them first by rotation then it moves them forwards then backwards, then back to rotation. You can animate position without halting the animation on rotation and you can animate one mesh at the same time as another mesh without halting previous animations, so why doesn’t the animation flicker when multiple animations are running on the same mesh and on the same properties?
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<script src="three-mini.js"></script>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script>
var animate = function(obj, prop, targetValue, length, callback) {
var startTime = Date.now(), inverseLength = 1 / length, startValue = obj[prop];
if( typeof targetValue === "string") {
if(targetValue.substring(0, 2) === "+=") {
targetValue = obj[prop] + Number(targetValue.substring(2));
} else {
targetValue = obj[prop] - Number(targetValue.substring(2));
}
}
var animateProp = function() {
var elapsed = (Date.now() - startTime) * inverseLength;
if(elapsed >= 1) {
obj[prop] = targetValue;
if( callback instanceof Function) {
requestAnimationFrame(callback);
}
return;
} else {
obj[prop] = (startValue - targetValue) * (Math.cos(elapsed * Math.PI) + 1) * 0.5 + targetValue;
requestAnimationFrame(animateProp);
}
};
requestAnimationFrame(animateProp);
};
var camera, scene, renderer, geometry, material, mesh1, mesh2, mesh3, mesh4, mesh5, i = 0, j = 0;
init();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({
color : 0xff0000,
wireframe : true
});
mesh1 = new THREE.Mesh(geometry, material);
scene.add(mesh1);
mesh2 = new THREE.Mesh(geometry, material);
mesh2.position.x = mesh2.position.y = mesh2.position.z = 200;
scene.add(mesh2);
mesh3 = new THREE.Mesh(geometry, material);
mesh3.position.x = mesh3.position.z = 200;
mesh3.position.y = -200;
scene.add(mesh3);
mesh4 = new THREE.Mesh(geometry, material);
mesh4.position.y = mesh4.position.z = 200;
mesh4.position.x = -200;
scene.add(mesh4);
mesh5 = new THREE.Mesh(geometry, material);
mesh5.position.y = mesh5.position.x = -200;
mesh5.position.z = 200;
scene.add(mesh5);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.domElement.addEventListener('click', function() {
var mesh;
if(i === 5) {
i = 0;
j++;
if(j === 3) {
j = 0;
}
}
i++;
var mesh = window['mesh' + i];
if(j === 1) {
animate(mesh.position, "z", "+=" + 500, 2000, function() {
//alert("CALLED BACK!")
});
return;
}
if(j === 2) {
animate(mesh.position, "z", "-=" + 500, 3000, function() {
//alert("CALLED BACK!")
}); retunr;
}
animate(mesh.rotation, "x", "-=" + Math.PI * 2 * 5, 5000, function() {
//alert("CALLED BACK!")
});
animate(mesh.rotation, "y", "-=" + Math.PI * 2 * 6, 10000, function() {
});
});
window.addEventListener('load', render);
window.addEventListener('resize', function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
}
function render() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame(render);
renderer.render(scene, camera);
}
</script>
</body>
</html>
comment for WestLangley:
let me try and explain a bit more, I apologise for not being clear. lets say I click once and it starts an animation from position.x = 0 to targetValue: '+=200'. and then halfway through that animation I click again which this time animates in the negative x direction which will start with position.x = 100 (as it’s starting halfway through the first animation) and has targetValue: '-=200'. Now I expect that the first animation is still running so it is continuing to animate from x=100 to x=200, and the second animation is now also running from x=100 to x=-100, so as each animation function is called I would expect to see the cube jump left and right until the first animation comes to an end and then the second animation can continue unhindered. This is what I was expecting to happen, thus I was expecting it to flicker. But apparently multiple animation functions are running at the same time but only the latest one is having any effect updating the mesh properties. :S at least as far as I can tell.
My main worry about this is that I can tell from the experimenting that the “hidden” animation calls are still being processed and so throwing away precious processor cycles, it also leads to problems with adding animation calls in the callback function. To this end my main concern is how can I stop these “hidden” animation calls?
I’m still not entirely certain on what is happening, but what I do know is that multiple animations are running at the same time even though the earlier ones are not being shown. My main concern about this is that it’s using up processing power that is not necessary. So I have added in a suffix notation and I now add the animating functions to the animated property owning object itself, so if I am animating
position.xi create my animation function and assign it toposition.x_animateandposition.x_animate_altalternatively. this is so I can cancel the previous, still running animation so I’m not wasting processor cycles. full snippet just for animate function below: