Question

我有这个three.js脚本停止场景旋转onMouseDown但我想停止鼠标悬停而不是onMouseDown旋转。

＆＃13;

$(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 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,

    );


    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 );
  }




});

＆＃13;

<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>

＆＃13;

我试过光线投射，但它不适用于这种情况。我有任何onmouseover功能，我可以使用。我也不想停止在场景上的鼠标悬停旋转，但onmouseover在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;

onMouseMove函数而不是onMouseDown

1 个答案: