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])