onMouseDownの代わりにonMouseMove関数

Question

私はこの3つの.jsスクリプトを使用して、シーンの回転onMouseDownを停止しましたが、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>

私はレイキャスティングしようとしたが、その本で動作していない私はonmouseover属性上、私が現場にマウスオーバーで回転を停止する必要はありませんuse.Alsoことができますが、任意のonmouseover属性機能がcase.Is dom要素

Answer 1

これらの変数を宣言します。var isMouseDown = true; var mouseover;

は、この機能を追加します。

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

isMouseDown= false; 
}); 

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

は現在、init関数にこのコードを追加します。

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

は最終的に機能をアニメーション化するためにこれを追加します。

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