I am working on a Three.js project where
I need to resize a rectangle interactively using hover dots.
The rectangle has two hover dots, one on the left edge and one on the right edge. like this in the screenshot
Current behavior:
The rectangle’s width increases, when I drag the dots, but it expands in both directions instead of keeping one edge fixed.
The expected behavior is as follows:
Right Dot Dragged Right:
- The rectangle’s width increases.
- The rectangle’s left edge remains fixed.
- The right hover dot moves outward.
Right Dot Dragged Left:
- The rectangle’s width decreases.
- The rectangle’s left edge remains fixed.
- The right hover dot moves inwards
Left Dot Dragged Left:
- The rectangle’s width increases.
- The rectangle’s right edge remains fixed.
- The left hover dot moves outward.
Left Dot Dragged Right (Crossing the Center):
- The rectangle’s width decreases.
- The rectangle’s right edge remains fixed.
- The left hover dot moves inwards.
Here is the code for the handleDotDrag method:
handleDotDrag(mousePosition, camera) {
if (!this.isResizing || !this.activeDot) return;
// Convert mouse position to world coordinates
const vector = new THREE.Vector3(mousePosition.x, mousePosition.y, 0.5);
vector.unproject(camera);
const centerX = this.rectangle.position.x;
if (this.activeDot.name === "leftDot") {
// Calculate new width based on the left dot's position
const newWidth = Math.abs(centerX - vector.x) * 2;
if (newWidth > 0) {
this.resize(newWidth);
// Update the rectangle's position to keep the right edge fixed
const newCenterX = (this.rectangle.position.x + vector.x) / 2;
this.rectangle.position.x = newCenterX;
}
} else if (this.activeDot.name === "rightDot") {
// Calculate new width based on the right dot's position
const newWidth = Math.abs(vector.x - centerX) * 2;
if (newWidth > 0) {
this.resize(newWidth);
// Update the rectangle's position to keep the left edge fixed
const newCenterX = (this.rectangle.position.x + vector.x) / 2;
this.rectangle.position.x = newCenterX;
}
}
}
Questions:
- How can I ensure that the rectangle’s left or right edge remains fixed while resizing?
- Is there a better way to implement this functionality in Three.js?
Any help or suggestions would be greatly appreciated! Thank you!
