[英]Simple Three.js animation
I'm trying to create a simple color animation in Three.js. 我正在尝试在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? 我只是尝试创建一个5秒钟的彩色动画,我在做什么错?
All of the components must be specified separately, and the range of values is [0, 1], not 0x00-0xFF. 必须分别指定所有组件,并且值的范围为[0,1],而不是0x00-0xFF。
This works: 这有效:
var colorAnim = new THREE.ColorKeyframeTrack(
".material.color",
[0, 2],
[1, 0, 0, 0, 0, 1])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.