I’m trying for this to work but I cannot seem to find any solution. The closest solution I have found is disabling TransformControls when collision is detected but I’d like to move again if I need. Can someone help me?
When the object collides, just detach the transform controls:
transformControls.detach( );
When you are willing to continue dragging, reattach it:
transformControls.attach( object );
There are some details, that you need to pay attention to, but they are not related to the controls. For example, when there is collision, and the object is detached, it is still in a collision position, so when you reattach it it will flag immediately the collision and will detach. One way to avoid this is to move the object to its previous position before detachment.
A conceptually different approach is to restrict movement without detaching – when there is a collision, revert the coordinates to the one just before the collision. Here is how it looks like:
I have been trying to make the second video to function but it would not work. In a sense that when I checked for intersections: if (boundsMetalBox.intersectsBox(boundswoodBox) I added metalBox.position.x = metalBox.position.x + 0.3 and it kinda worked for the first time but TransformControls would detach by default if I tried for a second time.
Now I have this code:
function animateTheeBox() {
// Check for collision between metalBox and woodBox
let boundsMetalBox = new THREE.Box3().setFromObject(metalBox);
let boundswoodBox = new THREE.Box3().setFromObject(woodBox);
if (boundsMetalBox.intersectsBox(boundswoodBox)) {
console.log("metal")
// If there is a collision, move the metalBox to the right of the woodBox
metalBox.position.x = woodBox.position.x + boundswoodBox.getSize(woodBox).x + 0.1;
}
if (boundswoodBox.intersectsBox(boundsMetalBox)) {
console.log("wood")
// If there is a collision, move the woodBox to the left of the metalBox
woodBox.position.x = metalBox.position.x - boundswoodBox.getSize().x - 0.1;
}
transformControls.setSize(
(70 / transformControls.worldPosition.distanceTo(camera.position)) *
Math.min(
(1.9 *
Math.tan((Math.PI * camera.fov) / 360)) /
camera.zoom,
7
)
);
transformControlsMetal.setSize(
(70 / transformControlsMetal.worldPosition.distanceTo(camera.position)) *
Math.min(
(1.9 *
Math.tan((Math.PI * camera.fov) / 360)) /
camera.zoom,
7
)
);
renderer.setClearColor(0xffffff);
renderer.render(scene, camera);
}
But this will break. If I leave the getSize() empty it will throw an error “target is undefined” when I add woodBox it will throw “subVectors is not a function” error
Hmm… well I tried the code in codepen but it doesn’t work… you don’t have any other use for border yet it works. I have made a few modifications and it is not working here. I will try to setup a code pen.
Oh, my code only demonstrates the idea of restricting the dragging. There is no collision test at all, it is just like this – if the object is too far from the center, stop dragging it. For your case you have to use collision test.
I will see your second pen later on.
Edit: Looked at the pen. Got confused. Decided to make a new example with two cubes. Any of them can be dragged, but it will stop when collides with the other.
English is not my native language. I’m probably expressing myself incorrectly.
I mean that you can click on the heart symbol for good help here in the forum.
for good help here in the forum.