Jquery在悬停时停止旋转

Question

$(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 is updated
                camera.updateMatrixWorld(); // make sure camera's world matrix is 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 i = 0; i < totalSpheres; i ++ ) {
                    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>

我有这个动态创建的html结构。

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

我在ajax的帮助下填充这个，然后最终将div添加到球体中。 最后，我写了这个动画函数，它在y轴上旋转球体。

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


        }

我想要做的是在停留在div上时停止旋转，所以我做了：

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

但由于某种原因，它不起作用。