Merge pull request #11841 from jamesgk/anim-property-binding-fix

Actually animate nested mesh properties with ".prop1.prop2"

examples/misc_animation_keys.html

@@ -70,7 +70,7 @@
 				//
 
 				var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
+				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, transparent: true } );
 				var mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
@@ -97,9 +97,12 @@
 				// COLOR
 				var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
 
+				// OPACITY
+				var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
+
 				// 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', 3, [ scaleKF, positionKF, quaternionKF, colorKF ] );
+				var clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );
 
 				// setup the AnimationMixer
 				mixer = new THREE.AnimationMixer( mesh );

src/animation/PropertyBinding.js

@@ -333,20 +333,20 @@ Object.assign( PropertyBinding.prototype, { // prototype, continued
 
 			function setValue_direct( buffer, offset ) {
 
-				this.node[ this.propertyName ] = buffer[ offset ];
+				this.targetObject[ this.propertyName ] = buffer[ offset ];
 
 			},
 
 			function setValue_direct_setNeedsUpdate( buffer, offset ) {
 
-				this.node[ this.propertyName ] = buffer[ offset ];
+				this.targetObject[ this.propertyName ] = buffer[ offset ];
 				this.targetObject.needsUpdate = true;
 
 			},
 
 			function setValue_direct_setMatrixWorldNeedsUpdate( buffer, offset ) {
 
-				this.node[ this.propertyName ] = buffer[ offset ];
+				this.targetObject[ this.propertyName ] = buffer[ offset ];
 				this.targetObject.matrixWorldNeedsUpdate = true;
 
 			}

test/unit/src/animation/PropertyBinding.js

@@ -220,3 +220,40 @@ QUnit.test( 'sanitizeNodeName' , function( assert ) {
 	);
 
 } );
+
+QUnit.test( 'setValue', function( assert ) {
+
+	var paths = [
+		'.material.opacity',
+		'.material[opacity]'
+	];
+
+	paths.forEach( function ( path, i ) {
+
+		var originalValue = 0;
+		var expectedValue = 1;
+
+		var geometry = new THREE.BoxGeometry();
+		var material = new THREE.MeshBasicMaterial();
+		material.opacity = originalValue;
+		var mesh = new THREE.Mesh( geometry, material );
+
+		var binding = new THREE.PropertyBinding( mesh, path, null );
+		binding.bind();
+
+		assert.equal(
+			material.opacity,
+			originalValue,
+			'Sets property of material with "' + path + '" (pre-setValue)'
+		);
+
+		binding.setValue( [ expectedValue ], 0 );
+		assert.equal(
+			material.opacity,
+			expectedValue,
+			'Sets property of material with "' + path + '" (post-setValue)'
+		);
+
+	} );
+
+} );