I'm currently experimenting with a basic color animation in Three.js. Below is the code I am using:
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
game.camera.position.y = 5;
game.camera.lookAt(new THREE.Vector3());
game.scene.add(cube);
const colorAnim = new THREE.ColorKeyframeTrack(
".material.color",
[0, 2, 3, 4, 5],
[0xff0000, 0xaa00aa, 0x0000ff, 0x00aaaa, 0x00ff00]);
const colorClip = new THREE.AnimationClip(null, 5, [colorAnim]);
const colorMixer = new THREE.AnimationMixer(cube);
const colorAction = colorMixer.clipAction(colorClip);
colorAction.play();
const clock = new THREE.Clock();
const animate = function ()
{
const delta = clock.getDelta();
requestAnimationFrame(animate);
cube.rotation.x += Math.PI * delta;
cube.rotation.y += Math.PI * delta;
colorMixer.update(delta * colorMixer.timeScale);
game.renderer.render(game.scene, game.camera);
};
animate();
Despite my efforts, the animation isn't functioning correctly and is displaying unexpectedly.
https://i.sstatic.net/Bcy0w.gif
My goal is to create a simple 5-second color animation. What could be causing this issue?