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
Post a Comment