更改鼠标位置

我正在使用鼠标绘制一个框，我正在使用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^_ ^ –

更改鼠标位置

回答

相关问题