更改鼠標位置

我正在使用鼠標繪製一個框，我正在使用raycast來獲取場景中鼠標的位置。所以，當mouseDown事件觸發時，我以起始點爲起點，在mouseMove發生的同時，我以終點爲結束點，然後在兩點之間繪製一個框。我在一個空白頁面開始試圖繪圖，當一切都很好時，我將繪圖代碼移到了包含許多組件的主頁面，當然還有一個繪圖畫布的容器。將我的代碼移動到主頁面後，鼠標位置出現問題。該框位置被移動了x和y上的畫布容器的距離。更改鼠標位置

下圖說明了問題：

紅色標記顯示在我按下鼠標開始繪製盒和藍色的表示我停止了鼠標，這裏的shiffting是Y軸，因爲我在頁面頂部有兩行組件。

這是一個簡化代碼：

<body> 

<div> 
    <button class="btn btn-info" onclick="rotate_x()"><b>X</b></button> 
    <button class="btn btn-info" onclick="rotate_y()"><b>Y</b></button> 
    <button class="btn btn-info" onclick="rotate_z()"><b>Z</b></button> 
    <button class="btn btn-info" onclick="reset_rotation()"><b>Reset</b></button> 
    <input type="checkbox" name="selection" onchange="selection_mode_change()" checked><b>Selection mode</b> 
</div> 


<div> 
    <button class="btn btn-info" onclick="rotate_x()"><b>X</b></button> 
    <button class="btn btn-info" onclick="rotate_y()"><b>Y</b></button> 
    <button class="btn btn-info" onclick="rotate_z()"><b>Z</b></button> 
    <button class="btn btn-info" onclick="reset_rotation()"><b>Reset</b></button> 
    <input type="checkbox" name="selection" onchange="selection_mode_change()" checked><b>Selection mode</b> 
</div> 
<script> 

    var container; 
    var camera, scene, renderer, dirLight; 
    var raycaster; 
    var mouse; 
    var is_mouse_down = false; 
    var area; 
    var start, end; 
    var objects = []; 

    init(); 
    animate(); 

    function init() { 

     container = document.createElement('div'); 
     document.body.appendChild(container); 

     camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000000); 
     camera.position.set(0, 0, 1000); 

     scene = new THREE.Scene();   


     // Box 
     var area_geometry = new THREE.BoxGeometry(1, 1, 1); 
     area = new THREE.Mesh(area_geometry, new THREE.MeshBasicMaterial({ 
      color: 0x00ff00, 
      opacity: 0.2, 
      visible: true 
     })); 
     area.position.x = 0; 
     area.position.y = 0; 
     area.position.z = 0; 
     area.scale.x = 1; 
     area.scale.y = 1; 
     area.scale.z = 1; 

     scene.add(area); 

     // plane for the raycast intersection 

     var geometry = new THREE.BoxGeometry(100, 100, 100); 
     var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ 
      color: Math.random() * 0xffffff, 
      opacity: 0.1, 
      visible: false 
     })); 
     object.position.x = 0; 
     object.position.y = 0; 
     object.position.z = -1000; 
     object.scale.x = 100; 
     object.scale.y = 100; 
     object.scale.z = 1; 
     scene.add(object); 
     objects.push(object); 



     raycaster = new THREE.Raycaster(); 
     mouse = new THREE.Vector2(); 


     // Light 
     dirLight = new THREE.DirectionalLight(0xffffff, 1); 
     dirLight.position.set(camera.position.x, camera.position.y, camera.position.z); 
     scene.add(dirLight); 

     renderer = new THREE.CanvasRenderer(); 
     renderer.setClearColor(0xffffff); 
     renderer.setPixelRatio(window.devicePixelRatio); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     container.appendChild(renderer.domElement); 

     document.addEventListener('mousedown', onDocumentMouseDown, false); 
     document.addEventListener('mouseup', onDocumentMouseUp, false); 
     document.addEventListener('mousemove', onDocumentMouseMove, false); 
     document.addEventListener('touchstart', onDocumentTouchStart, false); 

     window.addEventListener('resize', onWindowResize, false); 

    } 

    function onWindowResize() { 

     camera.aspect = window.innerWidth/window.innerHeight; 
     camera.updateProjectionMatrix(); 

     renderer.setSize(window.innerWidth, window.innerHeight); 

    } 

    function onDocumentTouchStart(event) { 

     event.preventDefault(); 

     event.clientX = event.touches[0].clientX; 
     event.clientY = event.touches[0].clientY; 
     onDocumentMouseDown(event); 

    } 

    function onDocumentMouseDown(event) { 

     event.preventDefault(); 
     start = get_intersection_point(event); 
     is_mouse_down = true; 
    } 

    function onDocumentMouseUp(event) { 

     event.preventDefault(); 
     is_mouse_down = false; 
    } 

    function onDocumentMouseMove(event) { 

     if (is_mouse_down) { 

      end = intersection(event); 
      update_selection_area_view(start, end); 
     } 
    } 

    function animate() { 

     requestAnimationFrame(animate); 

     render(); 
    } 

    function render() { 

     camera.lookAt(scene.position); 

     renderer.render(scene, camera); 

    } 

    function get_intersection_point(event) { 
     mouse.x = (event.clientX/renderer.domElement.clientWidth) * 2 - 1; 
     mouse.y = -(event.clientY/renderer.domElement.clientHeight) * 2 + 1; 

     raycaster.setFromCamera(mouse, camera); 

     var intersects = raycaster.intersectObjects(objects); 

     if (intersects.length > 0) { 

      return intersects[0].point; 

     } 
     return null; 
    } 


    function update_selection_area_view(start, end) { 

     width = Math.abs(start.x - end.x); 
     height = Math.abs(start.y - end.y); 

     center = new THREE.Vector3(-(start.x + end.x)/2, -(start.y + end.y)/2, (start.z + end.z)/2); 

     area.position.x = center.x; 
     area.position.y = center.y; 
     area.position.z = center.z; 
     area.scale.x = width; 
     area.scale.y = height; 
     area.scale.z = 1; 
    } 

</script> 

</body>

我不知道爲什麼發生這種情況，如何解決這個問題。

謝謝

來源

2016-08-18 The Maestro

如果你在你的照片仔細一看，你會發現，點擊由Y值偏移量（以屏幕像素爲單位）。如果你看得更近，看起來這個轉變與你的標題（XYZ /選擇模式標題）是一樣的。這是因爲您創建了一個div，並將其大小設置爲innerWidth/innerHeight。它創建一個具有指定大小的div，但降低。所以如果你沒有這個頭文件，你的鼠標點擊將是正確的（因爲threejs在屏幕上註冊它們爲40px，它將把它翻譯成div上的40px）

如何修復：當我遇到這個問題時，我使用JQuery來獲得TOP，並將偏移添加到我的raycaster mouseclick，在您的情況下，我認爲您可以獲得renderer.domElement.top（我不太確定，console.log（renderer.domElement以查看是否有一個頂部的位置值）並將其減去鼠標Y（減去因爲您想要移動矩形）

來源

2016-08-18 17:54:10 Rush2112

謝謝，我知道問題的原因，我不知道如何表達我的需要。我在這裏找到了解決方案：https：//stackoverflow.com/questions/29518886/moved-coordinat es-of-the-scene-when-dom-element-with-renderer-is-the-top 其中容器的頂部是：container.getBoundingClientRect（）。top Thanks^_ ^ –

更改鼠標位置

回答

相關問題