2016-02-08 67 views
0

我想爲我的three.js設置一個鼠標移動事件處理程序,但無法將其與鼠標關聯並使其成功,如果某人可以說我該如何操作,它可能會非常有幫助。我知道沒有我使用鼠標相關的座標,但我擔心會做一些事情影響我的計算部分。無法關聯和設置onmousemove事件?

root = document.getElementById("WebGL"); 

window.addEventListener('resize', onWindowResize(width, height), false); 
root.addEventListener('mousemove', MouseMoveGoogleMapsUpdate(), false); 


function MouseMoveGoogleMapsUpdate(){ 

    var angle = onMouseMove(); 

    line.setMap(null); //removing the old lines on circle 


      var newstartpoint = pointGoogleMaps(circle.getRadius() * Math.cos(-angle[0]), 
             circle.getRadius() * Math.sin(-angle[0]), origin); 

      var viewdir  = pointGoogleMaps(circle.getRadius() * Math.cos(-angle[1]), 
             circle.getRadius() * Math.sin(-angle[1]), origin); 

      var newendpoint = pointGoogleMaps(circle.getRadius() * Math.cos(angle[2]), 
             circle.getRadius() * Math.sin(angle[2]), origin); 

      line = new google.maps.Polyline({ 
      path: [newstartpoint, origin, newendpoint], 
      geodesic: true, //By setting it to true the distance is cal in meters 
      strokeColor: '#0000FF', 
      strokeOpacity: 0.8, 
      strokeWeight: 2,    
      map: map 
      }); 

} 


function onMouseMove(){ 

    var degrees = Math.PI/180.0; 
    var raycaster = new THREE.Raycaster(); 
    var viewingDir = camera.getWorldDirection(); 
    var Vectors = [0,0,0]; 
    var Angles = [0,0,0]; 

    for(i=0; i<3; i++) 
    { 
     Vectors[i] = new THREE.Vector3(i-1, 0, 0.5); 
     raycaster.setFromCamera(Vectors[i], camera); 
     Vectors[i].sub(camera.position); 
     Vectors[i].normalize(); 

    } 

    for(i=0; i<3; i+=2) 
    { 
     var dotp = Vectors[i].x * Vectors[1].x + Vectors[i].y * Vectors[1].y + Vectors[i].z * Vectors[1].z; 
     if (dotp >= 1) 
      Angles[i] = 0.0; 
     else if (dotp <= -1) 
      Angles[i] = Math.PI; 
     else 
      Angles[i] = Math.acos(dotp); 
    } 

    Angles[1] = Math.atan2(viewingDir.x, -viewingDir.z); 
    fov = Angles[0] + Angles[2]; 
    Angles[0] = Angles[1] - 0.5 * fov; //x-dir 
    Angles[2] = Angles[1] + 0.5 * fov; //y-dir 

    return Angles; 

} 

回答

0
canvas.addEventListener('mousemove', onDocumentMouseMove, false); 
function onDocumentMouseMove(event) { 
     event.preventDefault(); 
     mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
     mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 
} 

我沒有看到的事件在你的代碼...