I want to restrict the draggable rugGeometry inside the lGeometry.
How to fix this issue. Please help me out, I am beginner in Three.js
// L Shape Geometry Code
var points = [
// all of them are on the xz-plane
new THREE.Vector3(5, 0, 5),
new THREE.Vector3(65, 0, 5),
new THREE.Vector3(65, 0, 35),
new THREE.Vector3(35, 0, 35),
new THREE.Vector3(35, 0, 65),
new THREE.Vector3(5, 0, 65),
new THREE.Vector3(5, 0, 5),
];
// Create an array of Vector2 points by extracting x and z coordinates
var vertices = points.map(function (point) {
return new THREE.Vector2(point.x, point.z);
});
var geom = new THREE.Shape(vertices);
lGeometry = new THREE.ShapeGeometry(geom);
mesh = new THREE.Mesh(lGeometry, material);
//Main part for orbit controls
mesh.rotateX(-Math.PI / 2);
scene.add(mesh);
//Create Rug Geometry
createRugFn = () => {
console.log("inside createRugFn");
var rugTextureLoader = new THREE.TextureLoader().load(rugTexture);
rugGeometry = new THREE.PlaneGeometry(18, 25);
const rugMaterial = new THREE.MeshBasicMaterial({
map: rugTextureLoader,
depthTest: false,
needsUpdate: true,
});
rugMesh = new THREE.Mesh(rugGeometry, rugMaterial);
rugMesh.rotateX(-Math.PI / 2);
rugMesh.position.set(15, 0, -35);
scene.add(rugMesh);
addResizeDrag(rugMesh);
};
// ================ RUG CODE (Resizable and draggable planeGeometry) ================
function addResizeDrag(rugMesh) {
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
let planeOffset = new THREE.Vector3();
function onDocumentMouseDown(event) {
isDragging = true;
previousMousePosition = {
x: event.clientX,
y: event.clientY,
};
const intersects = getIntersects(event.layerX, event.layerY);
if (intersects.length > 0) {
planeOffset.copy(intersects[0].point).sub(rugMesh.position);
}
}
function onDocumentMouseMove(event) {
if (isDragging) {
const deltaMove = {
x: event.clientX - previousMousePosition.x,
y: event.clientY - previousMousePosition.y,
};
if (planeOffset.length() > 0) {
// const intersects = getIntersects(event.layerX, event.layerY);
// if (intersects.length > 0) {
// rugMesh.position.copy(intersects[0].point.sub(planeOffset));
// }
const intersects = getIntersects(event.layerX, event.layerY);
if (intersects.length > 0) {
const newPosition = intersects[0].point.sub(planeOffset);
// Get the dimensions of the lGeometry
const planeWidth = boundingBox.max.x - boundingBox.min.x;
const planeHeight = boundingBox.max.y - boundingBox.min.y;
// Get the dimensions of the rugGeometry
const rugWidth = rugMesh.geometry.parameters.width;
const rugHeight = rugMesh.geometry.parameters.height;
// console.log(mesh);
// Calculate the boundaries of the planeGeometry
const xMin = -(planeWidth / 2) + rugWidth / 2;
const xMax = planeWidth / 2 - rugWidth / 2;
const zMin = -(planeHeight / 2) + rugHeight / 2;
const zMax = planeHeight / 2 - rugHeight / 2;
// Clamp the newPosition within the planeGeometry boundaries
const clampedX = THREE.MathUtils.clamp(newPosition.x, xMin, xMax);
const clampedZ = THREE.MathUtils.clamp(newPosition.z, zMin, zMax);
newPosition.set(clampedX, newPosition.y, clampedZ);
rugMesh.position.copy(newPosition);
}
}
previousMousePosition = {
x: event.clientX,
y: event.clientY,
};
}
}
function onDocumentMouseMove(event) {
if (isDragging) {
var boundingBox = new THREE.Box3().setFromObject(mesh);
const deltaMove = {
x: event.clientX - previousMousePosition.x,
y: event.clientY - previousMousePosition.y,
};
if (planeOffset.length() > 0) {
const intersects = getIntersects(event.layerX, event.layerY);
if (intersects.length > 0) {
const newPosition = intersects[0].point.sub(planeOffset);
// Get the dimensions of the lGeometry
const planeWidth = boundingBox.max.x - boundingBox.min.x;
const planeDepth = boundingBox.max.z - boundingBox.min.z;
// Get the dimensions of the rugGeometry
const rugWidth = rugMesh.geometry.parameters.width;
const rugDepth = rugMesh.geometry.parameters.height;
// // Calculate the boundaries of the lGeometry
// const xMin = boundingBox.min.x + rugWidth / 2;
// const xMax = boundingBox.max.x/1.855 - rugWidth / 2;
// const zMin = boundingBox.min.z/1.855 + rugDepth / 2;
// const zMax = boundingBox.max.z - rugDepth / 2;
// Calculate the boundaries of the lGeometry
const xMin = boundingBox.min.x + rugWidth / 2;
const xMax = boundingBox.max.x / 1.855 - rugWidth / 2;
const zMin = boundingBox.min.z + rugDepth / 2;
const zMax = boundingBox.max.z - rugDepth / 2;
// Clamp the newPosition within the lGeometry boundaries
const clampedX = THREE.MathUtils.clamp(newPosition.x, xMin, xMax);
const clampedZ = THREE.MathUtils.clamp(newPosition.z, zMin, zMax);
newPosition.set(clampedX, newPosition.y, clampedZ);
rugMesh.position.copy(newPosition);
}
}
previousMousePosition = {
x: event.clientX,
y: event.clientY,
};
}
}
function onDocumentMouseUp(event) {
isDragging = false;
planeOffset.set(0, 0, 0);
}
function getIntersects(x, y) {
const mouseVector = new THREE.Vector3(
(x / window.innerWidth) * 0.9 * 2 - 1,
-(y / window.innerHeight) * 2 + 1,
0.5
);
// console.log("mouseVector:", mouseVector);
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouseVector, camera);
// console.log("ray:", raycaster.intersectObject(rugMesh));
return raycaster.intersectObject(rugMesh);
}
function onWindowResize() {
camera.aspect = ((window.innerWidth * 0.8) / window.innerHeight) * 0.8;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth * 0.8, window.innerHeight * 0.8);
}
window.addEventListener("resize", onWindowResize);
document.addEventListener("mousedown", onDocumentMouseDown);
document.addEventListener("mousemove", onDocumentMouseMove);
document.addEventListener("mouseup", onDocumentMouseUp);
}
// ================ RUG CODE (Resizable and draggable planeGeometry) ================