Fonction onMouseMove au lieu de onMouseDown

Question

J'ai ce script three.js qui arrête la rotation de scène onMouseDown mais je veux arrêter la rotation sur mouse hover au lieu de onMouseDown.

$(function(){ \t 
 
    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; 
 

 
    } \t 
 

 
    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) { \t \t 
 
      console.log(data); 
 
      $("#attacker").append(data) 
 
     }}), 
 
     "defender":$.ajax({ 
 
     dataType: "text", 
 
      url: "http://localhost/liberate/threeee/PAGES/Information/defender.html", 
 
      success: function (data) { \t \t 
 
      console.log(data); 
 
      $("#defender").append(data) 
 
     }}), 
 

 
     "goalkeeper" : $.ajax({ 
 
     dataType: "text", 
 
      url: "http://localhost/liberate/threeee/PAGES/Information/content.html", 
 
      success: function (data) { \t \t 
 
      console.log(data); 
 
      $("#goalkeeper").append(data) 
 
     }}), 
 
     "midfielder":$.ajax({ 
 
     dataType: "text", 
 
      url: "http://localhost/liberate/threeee/PAGES/Information/midfielder.html", 
 
      success: function (data) { \t \t 
 
      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, 
 

 
    ); 
 

 

 
    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> 
 
\t <script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script> 
 
\t \t \t <script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script> 
 
\t \t \t <script src="https://rawgit.com/mrdoob/three.js/master/examples/js/renderers/CSS3DRenderer.js"></script> 
 
     
 
     <div id="container"></div>

J'ai essayé raycasting mais son travail pas dans ce case.Is il une fonction onmouseover que je peux use.Also Je ne veux pas arrêter la rotation sur scène, mais sur mouseover onmouseover sur l'élément dom

Answer 1

Déclarez ces variables var isMouseDown = true; var mouseover;

ajouter cette fonction:

$(".scene") 
.mouseover(function() { 

isMouseDown= false; 
}); 

$(".scene").mouseout(function() { 
isMouseDown = true; 
}); 

ajouter maintenant ce code à la fonction init:

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

enfin ajouter ceci à animer la fonction:

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