Animation Basics
Manual position/rotation/scale animation driven by Clock.delta - no keyframes needed.
Controls
Speed
0.1
3
import * as EASEL from "easel";
// EASEL: Clock.delta is a getter, not a method.
const clock = new EASEL.Clock();
let elapsed = 0;
function animate() {
requestAnimationFrame(animate);
const dt = clock.delta; // seconds since last call - getter, not getDelta()
elapsed += dt * speed;
box.rotation.y = elapsed * 1.2;
box.rotation.x = elapsed * 0.4;
box.position.y = Math.sin(elapsed * 2) * 1.5;
const bounce = Math.sin(elapsed * 2);
const scaleY = 0.8 + 0.4 * ((bounce + 1) / 2);
const scaleXZ = 1 / Math.sqrt(scaleY);
box.scale.set(scaleXZ, scaleY, scaleXZ);
renderer.render(scene, camera);
}
animate();