シンプルなThree.jsアニメーション

Question

Three.jsでシンプルなカラーアニメーションを作成しようとしています。これは私のコードです：

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(); 

しかし、アニメーションが正しく動作しません、代わりに行い、この：私はちょうど5秒の色のアニメーションを作成しようとしています

、私が何をしています間違っている？

Answer 1

すべてのコンポーネントを別々に指定する必要があり、値の範囲は0x00-0xFFではなく[0、1]です。

これは動作します：

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