jquery - onMouseMove function instead of onMouseDown -


i have three.js script stops scene rotation onmousedown want stop rotation on mouse hover instead of onmousedown.

$(function(){	    var camera, renderer;    var ismousedown = true;    var mpi=math.pi /180;    var circleradius = 1400;    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);          ( 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,        );          window.addeventlistener('mousedown', onmousedown);      window.addeventlistener('mouseup', onmouseup);       }      function onmousedown(){      ismousedown = false;    }      function onmouseup(){      ismousedown = true;    }      function animate() {      requestanimationframe( animate );      controls.update();      scene.rotation.y-=0.001;      if(!ismousedown){        scene.rotation.y =false;        }          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>                <div id="container"></div>

i tried raycasting not working in case.is there onmouseover function can use.also don't want stop rotation on mouseover on scene onmouseover on dom element

declare these variables var ismousedown = true; var mouseover;

add function:

$( ".scene" ) .mouseover(function() {  ismousedown= false; });  $( ".scene" ).mouseout(function() { ismousedown = true; }); 

now add code init function:

window.addeventlistener('mouseout', onmouseout); window.addeventlistener('mouseover', mouseover); 

finally add animate function:

if(!ismousedown){ scene.rotation.y =false; 

Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -