I am currently working on a project that involves determining the distance traveled by a mouse along a normal vector.
The goal is to adjust a group of vertices within an object by moving them along the normal vector of an intersecting face.
My current setup includes an event handler for when the mouse is pressed down, which identifies the intersecting face, adjacent faces with similar normals, and the associated vertices. Additionally, I have an event handler for when the mouse moves, which moves the vertices along the normal vector.
At the moment, the movement made by the vertices when the mouse moves is fixed at 1 unit along the face's normal vector. I would like for the vertices to move in accordance with the mouse's position.
I took inspiration from code found in the three.js editor. Any assistance provided would be greatly appreciated. Thank you!
var object; // Defined outside this code
var camera; // Defined outside this code
var viewport; // Defined outside this code
var raycaster = new THREE.Raycaster();
var point = new THREE.Vector2();
var mouse = new THREE.Vector2();
var _dragging = false;
var faces = [];
var vertices = [];
function onMouseDown(event) {
if (object === undefined || _dragging === true) {
return;
}
event.preventDefault();
event.stopPropagation();
var intersect = getIntersects(event, object)[0];
if (intersect && intersect.face) {
faces = getAdjacentNormalFaces(intersect.object.geometry, intersect.face);
vertices = getFaceVertices(intersect.object.geometry, self.faces);
}
_dragging = true;
}
function onMouseMove(event) {
if (object === undefined || vertices.length === 0 || _dragging === false) {
return;
}
event.preventDefault();
event.stopPropagation();
var normal = faces[0].normal;
/*
* Calculate the distance by which the vertices should be moved
*/
var distance = 1;
var i;
for (i = 0; i < self.vertices.length; i++) {
self.vertices[i].x += (normal.x * distance);
self.vertices[i].y += (normal.y * distance);
self.vertices[i].z += (normal.z * distance);
}
object.geometry.verticesNeedUpdate = true;
object.geometry.computeBoundingBox();
object.geometry.computeBoundingSphere();
}
var getIntersects = function (event, object) {
var rect = viewport.getBoundingClientRect();
point.fromArray([
(event.clientX - rect.left) / rect.width,
(event.clientY - rect.top) / rect.height
]);
mouse.set((point.x * 2) - 1, -(point.y * 2) + 1);
raycaster.setFromCamera(mouse, camera);
if (object instanceof Array) {
return raycaster.intersectObjects(object);
}
return raycaster.intersectObject(object);
};
var getAdjacentNormalFaces = function (geometry, face) {
// Returns an array of all faces that are adjacent and share the same normal vector
};
var getFaceVertices = function (geometry, faces) {
// Returns an array of vertices that belong to the array of faces
};
Update: In essence... I have the necessary event handlers, a set of vertices to be moved, and the normal vector along which they should be moved. What I require now is the offset distance by which the vertices should be adjusted based on the mouse's position.
My initial idea is to create a plane perpendicular to the normal vector and monitor the mouse's position on that plane. However, I am unsure about how to: 1. create the perpendicular plane with the largest side visible to the camera, and 2. translate the x/y coordinates of the mouse on the plane into the distance by which the vertices should be moved.