From 7fbd12b5f4fc8b6d4228589ba671b87616d90ff7 Mon Sep 17 00:00:00 2001 From: WestLangley Date: Sun, 28 May 2017 20:42:47 -0400 Subject: [PATCH] Add color keyframe and clean up --- examples/misc_animation_keys.html | 40 +++++++++++++++---------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/examples/misc_animation_keys.html b/examples/misc_animation_keys.html index b1001a3b8a..47fb68fe4e 100644 --- a/examples/misc_animation_keys.html +++ b/examples/misc_animation_keys.html @@ -70,36 +70,36 @@ // var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 ); - var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); + var material = new THREE.MeshBasicMaterial( { color: 0xffffff } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); // create a keyframe track (i.e. a timed sequence of keyframes) for each animated property - // Note: the keyframe track type should correspond to the type of the property being animated + // Note: the keyframe track type should correspond to the type of the property being animated // POSITION - var positionKF = new THREE.VectorKeyframeTrack('.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] ); + var positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] ); - // SCALE - var scaleKF = new THREE.VectorKeyframeTrack('.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] ); + // SCALE + var scaleKF = new THREE.VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] ); // ROTATION // Rotation should be performed using quaternions, using a QuaternionKeyframeTrack // Interpolating Euler angles (.rotation property) can be problematic and is currently not supported - - // set up rotation about x axis - var xAxis = new THREE.Vector3( 1, 0, 0 ); + + // set up rotation about x axis + var xAxis = new THREE.Vector3( 1, 0, 0 ); var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 ); var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI ); - var quaternionKF = new THREE.QuaternionKeyframeTrack('.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] ); + var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] ); - // COLOR - Not yet implemented! - // var colorKF = new THREE.ColorKeyframeTrack('.material.color', [0, 1, 2], [0xffff00, 0xffffff, 0xffff00]) + // COLOR + var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete ); // create an animation sequence with the tracks - // If a negative time value is passed, the duration will be calculated from the times of the passed tracks array - var clip = new THREE.AnimationClip( 'Action', -1, [ scaleKF, positionKF, quaternionKF ] ); + // If a negative time value is passed, the duration will be calculated from the times of the passed tracks array + var clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF ] ); // setup the AnimationMixer mixer = new THREE.AnimationMixer( mesh ); @@ -108,10 +108,10 @@ var clipAction = mixer.clipAction( clip ); clipAction.play(); - // + // renderer = new THREE.WebGLRenderer(); - renderer.setClearColor( 0x555555 ); + renderer.setClearColor( 0x000000, 0 ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); @@ -123,13 +123,13 @@ // - clock = new THREE.Clock() + clock = new THREE.Clock(); // window.addEventListener( 'resize', onWindowResize, false ); - }; + } function onWindowResize() { @@ -138,7 +138,7 @@ renderer.setSize( window.innerWidth, window.innerHeight ); - }; + } function animate() { @@ -146,7 +146,7 @@ render(); - }; + } function render() { @@ -162,7 +162,7 @@ stats.update(); - }; + } -- GitLab