javascript - Jquery stop rotation on hover -

$(function(){	      var camera, renderer;      var mpi=math.pi /180;      var circleradius = 1000;      var startangle = 0;      var centerx = 0;      var centerz = 0;      var startradians = startangle + mpi;      var totalspheres = 4;      var incrementangle = 360/totalspheres;      var incrementradians = incrementangle * mpi;  	var element = function ( id, dat, position, rotation ) {  						var html = [  								'<div class="wrapper" >',  								'<ul class="stage clearfix">',  								'<li class="scene" >',  						         '<div class="movie i1" id="' + id + '" >',  							     								  						         '</div>',  					             '</li>',  								  								   					                                                '</ul>',  								 '</div>'  							].join('\n');  						var div = document.createelement('div');  						$(div).html(html);                               						  						var object = new three.css3dobject( div );  						object.position.x = position.x;  						object.position.y = position.y;  						object.position.z = position.z;  						object.rotation.x = rotation.x;  						object.rotation.y = rotation.y;  						object.rotation.z = rotation.z;  						  						return object;  					  						}	       			init();  				animate();                		    function init() {  				scene = new three.scene();  				var container = document.getelementbyid( 'container' );  				renderer = new three.css3drenderer();  				renderer.setsize(window.innerwidth, window.innerheight*.85);  				container.appendchild( renderer.domelement );  				camera = new three.perspectivecamera( 50, window.innerwidth / window.innerheight, 1, 10 );  				camera.position.set(-100,60,4000);                  camera.updatematrix(); // make sure camera's local matrix updated                  camera.updatematrixworld(); // make sure camera's world matrix updated                  camera.matrixworldinverse.getinverse( camera.matrixworld );  				var group = new three.group();  			                                   var str = {  					"attacker":$.ajax({          datatype: "text",          url: "http://localhost/liberate/threeee/pages/information/content.html",          success: function (data) {		  					console.log(data);              $("#attacker").append(data)   }}),  					"defender":$.ajax({          datatype: "text",          url: "http://localhost/liberate/threeee/pages/information/defender.html",          success: function (data) {		  					console.log(data);              $("#defender").append(data)   }}),                                           "goalkeeper" : $.ajax({          datatype: "text",          url: "http://localhost/liberate/threeee/pages/information/content.html",          success: function (data) {		  					console.log(data);              $("#goalkeeper").append(data)   }}),                        "midfielder":$.ajax({          datatype: "text",          url: "http://localhost/liberate/threeee/pages/information/midfielder.html",          success: function (data) {		  					console.log(data);              $("#midfielder").append(data)   }})                       				                   }                    			var allkeys = object.keys(str);                    				for ( var = 0; < totalspheres; ++ ) {                      var xp = centerx + math.sin(startradians) * circleradius;  					var zp = centerz + math.cos(startradians) * circleradius;                                          group.add( new element( allkeys[i], str[i], new three.vector3(xp, 0, zp), new three.vector3(0, i*incrementangle * (math.pi/180.0), 0) ) );  					startradians += incrementradians;   					                        				  }  				    scene.add(group);                  				controls = new three.orbitcontrols(camera, renderer.domelement);  					  			  //controls.enabled = false;  controls.center =  new three.vector3(      scene.position.x,      scene.position.y,      scene.position.z  );        //  controls.addmousehandler(renderer.domelement, drag, zoomin, zoomout);  				   controls.update();  			  				  			}  			  		$(document).on('mouseover', ".scene",function() {      $(this).rotation.y = 0;       // or try once scene.rotation.y = false;      // or try once scene.rotation.y = 0;     });  			  			      			function animate() {  				requestanimationframe( animate );  				controls.update();  				scene.rotation.y-=0.001;  				                  renderer.render( scene, camera );  				  				  			}               });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>  			<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/trackballcontrols.js"></script>  			<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/renderers/css3drenderer.js"></script>

i have dynamically created html structure.

var html = [             '<div class="wrapper" >',             '<ul class="stage clearfix">',             '<li class="scene" >',             '<div class="movie i1" id="' + id + '" >',             '</div>',             '</li>',             '</ul>',             '</div>'             ].join('\n'); 

i populating of ajax , adding divs sphere. @ last, wrote animate function rotates sphere on y axis.

function animate() {             requestanimationframe( animate );             controls.update();             scene.rotation.y-=0.001;             renderer.render( scene, camera );           } 

what wanted stop rotation upon hovering on div did:

   $( ".scene" ).mouseover(function() {     scene.rotation.y = false;    }); 

but isn't working reason.