Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →sickn33/threejs-animation
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing.
Passed 22 of 22 test cases with the skill, and 17 of 22 without it.
and 2 more in the full report
5 fixed17 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
In Three.js r183, which interpolant class enables bezier curve interpolation with tangent control for keyframe tracks?
| Checked | Without skill | With skill |
|---|---|---|
| Specifies THREE.BezierInterpolant. | Missed | Passed |
The instructions your model reads when the skill loads.
import * as THREE from "three";
// Simple procedural animation with Timer (recommended in r183)
const timer = new THREE.Timer();
renderer.setAnimationLoop(() => {
timer.update();
const delta = timer.getDelta();
const elapsed = timer.getElapsed();
mesh.rotation.y += delta;
mesh.position.y = Math.sin(elapsed) * 0.5;
renderer.render(scene, camera);
});
Note: THREE.Timer is recommended over THREE.Clock as of r183. Timer pauses when the page is hidden and has a cleaner API. THREE.Clock still works but is considered legacy.
Three.js animation system has three main components:
Stores keyframe animation data.
test cases passed, vs 17 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.