Merge pull request #11561 from sunag/86dev

fix transform in SpriteNodeMaterial and example

examples/js/nodes/materials/SpriteNode.js

@@ -50,7 +50,6 @@ THREE.SpriteNode.prototype.build = function ( builder ) {
 		}
 
 		output.push(
-
 			"#include <project_vertex>",
 			"#include <fog_vertex>",
 
@@ -66,9 +65,7 @@ THREE.SpriteNode.prototype.build = function ( builder ) {
 		if ( ! this.spherical ) {
 
 			output.push(
-
-			'modelMtx[1][1] = 1.0;'
-
+				'modelMtx[1][1] = 1.0;'
 			);
 
 		}
@@ -79,31 +76,27 @@ THREE.SpriteNode.prototype.build = function ( builder ) {
 			'modelViewMtx[0][0] = 1.0;',
 			'modelViewMtx[0][1] = 0.0;',
 			'modelViewMtx[0][2] = 0.0;'
-
 		);
 
 		if ( this.spherical ) {
 
 			output.push(
-
 				// Second colunm.
 				'modelViewMtx[1][0] = 0.0;',
 				'modelViewMtx[1][1] = 1.0;',
 				'modelViewMtx[1][2] = 0.0;'
-
 			);
 
 		}
 
 		output.push(
-
 			// Thrid colunm.
 			'modelViewMtx[2][0] = 0.0;',
 			'modelViewMtx[2][1] = 0.0;',
 			'modelViewMtx[2][2] = 1.0;',
 
 			// apply
-			'gl_Position = projectionMatrix * modelViewMtx * modelMtx * vec4( position, 1.0 );'
+			'gl_Position = projectionMatrix * modelViewMtx * modelMtx * vec4( transformed, 1.0 );'
 		);
 
 	} else {

examples/webgl_sprites_nodes.html

@@ -201,6 +201,16 @@
 			sprite2.material.color.coord = createHorizontalSpriteSheetNode( 8, 30 );
 			sprite2.material.color = new THREE.Math1Node( sprite2.material.color, THREE.Math1Node.INVERT );
 			sprite2.material.spherical = false; // look at camera horizontally only, very used to vegetation
+			// horizontal zigzag sprite
+			sprite2.material.transform = new THREE.OperatorNode(
+				new THREE.OperatorNode( 
+					new THREE.Math1Node( new THREE.TimerNode( 0, 3 ), THREE.Math1Node.SIN ), // 3 is speed (time scale)
+					new THREE.Vector2Node( .3, 0 ), // horizontal scale (position)
+					THREE.OperatorNode.MUL
+				),
+				new THREE.PositionNode(),
+				THREE.OperatorNode.ADD
+			);
 			sprite2.material.build();
 
 			var sineWaveFunction = new THREE.FunctionNode( [