Simple 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

所有組件必須單獨指定，值的範圍是[0,1]，而不是0x00-0xFF。

這工作：

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