Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/visual-studio-2012/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 简单3.js动画_Javascript_Three.js - Fatal编程技术网

Javascript 简单3.js动画

Javascript 简单3.js动画,javascript,three.js,Javascript,Three.js,我正在尝试用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.

我正在尝试用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秒的彩色动画,我做错了什么?

所有组件都必须单独指定,并且值的范围是[0,1],而不是0x00-0xFF

这项工作:

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