更改鼠标位置
问题描述：
我正在使用鼠标绘制一个框，我正在使用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>
我不知道为什么发生这种情况，如何解决这个问题。
谢谢
答
如果你在你的照片仔细一看，你会发现，点击由Y值偏移量（以屏幕像素为单位）。如果你看得更近，看起来这个转变与你的标题（XYZ /选择模式标题）是一样的。这是因为您创建了一个div，并将其大小设置为innerWidth/innerHeight。它创建一个具有指定大小的div，但降低。所以如果你没有这个头文件，你的鼠标点击将是正确的（因为threejs在屏幕上注册它们为40px，它将把它翻译成div上的40px）
如何修复： 当我遇到这个问题时，我使用JQuery来获得TOP，并将偏移添加到我的raycaster mouseclick，在您的情况下，我认为您可以获得renderer.domElement.top（我不太确定，console.log（renderer.domElement以查看是否有一个顶部的位置值）并将其减去鼠标Y（减去因为您想要移动矩形）
谢谢，我知道问题的原因，我不知道如何表达我的需要。 我在这里找到了解决方案：https：//stackoverflow.com/questions/29518886/moved-coordinat es-of-the-scene-when-dom-element-with-renderer-is-the-top 其中容器的顶部是：container.getBoundingClientRect（）。top Thanks^_ ^ –