How to reassign UV's? I have been having a tough time with this

Questions
,
1

I’m scratching my head and can’t figure out for the life of me why I’m not able to reassign UV’s. The following code is pretty simple and should create an animation where one of the UV’s are changing per frame. Any help will be much appreciated!

		<script>
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			var geometry = new THREE.PlaneGeometry( 1, 1, 1 );
			
			var texture = new THREE.TextureLoader().load( 'UnimExport/Magic1_sheet.png' );
			var material = new THREE.MeshBasicMaterial( { map: texture } );
			
			var cube = new THREE.Mesh( geometry, material );
			scene.add( cube );
			
			camera.position.z = 5;
		
				
			var animate = function () {
				requestAnimationFrame( animate );
				
				var sinX = Math.sin(Date.now()/100);

				setUV( cube,{x:sinX, y:1},{x:1, y:1},{x:0, y:0},{x:1, y:0} );

				renderer.render(scene, camera);
			};
			
			function setUV(obj, tl ,tr, bl, br){
				
				console.log(tl.x);
				
				obj.geometry.faceVertexUvs[0] = [];
			
				// TL , BL , TR
				obj.geometry.faceVertexUvs[0].push([
					new THREE.Vector2(tl.x, tl.y),
					new THREE.Vector2(bl.x, bl.y),
					new THREE.Vector2(tr.x, tr.y)
				]);
				
				// BL , BR , TR
				obj.geometry.faceVertexUvs[0].push([
					new THREE.Vector2(bl.x, bl.y),
					new THREE.Vector2(br.x, br.y),
					new THREE.Vector2(tr.x, tr.y),	
				]);
				
				//obj.material = new THREE.MeshBasicMaterial( { map: texture } );
				geometry.uvsNeedUpdate = true;
			}

			animate();
		</script>