Simple Three.js animation

Question

I'm trying to create a simple color animation in Three.js. This is my code:

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
game.camera.position.y = 5;
game.camera.lookAt(new THREE.Vector3());
game.scene.add(cube);

var colorAnim = new THREE.ColorKeyframeTrack(
    ".material.color",
    [0, 2, 3, 4, 5],
    [0xff0000, 0xaa00aa, 0x0000ff, 0x00aaaa, 0x00ff00]);
var colorClip = new THREE.AnimationClip(null, 5, [colorAnim]);
var colorMixer = new THREE.AnimationMixer(cube);
var colorAction = colorMixer.clipAction(colorClip);
colorAction.play();

var clock = new THREE.Clock();

var render = function ()
{
    var delta = clock.getDelta();

    requestAnimationFrame(render);

    cube.rotation.x += Math.PI * delta;
    cube.rotation.y += Math.PI * delta;

    colorMixer.update(delta * colorMixer.timeScale);

    game.renderer.render(game.scene, game.camera);
};

render();

But the animation does not work properly, and instead does this:

I am just trying to create a 5-second color animation, what am I doing wrong?

laptou · Accepted Answer · 2017-05-25 00:10:52Z

1

All of the components must be specified separately, and the range of values is [0, 1], not 0x00-0xFF.

This works:

var colorAnim = new THREE.ColorKeyframeTrack(
        ".material.color",
        [0, 2],
        [1, 0, 0, 0, 0, 1])

answered May 25, 2017 at 0:10

laptou

7,1073 gold badges34 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Simple Three.js animation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related