如果发生碰撞，如何使用光线投射使“变形控制”不移动对象？

Question

So I'm using Three.js and I have some cubes inside of a box. I'm using the Transform Control to move the cubes around inside of the box with my mouse. I'd like to use raycasting in order to check for collisions. The question is how to I prevent the transform controller from moving the object if there is a collision? I'd like to stop it if it hits the wall. By the way, I'm on version r81 for Three.js.

UPDATE: I've used the size of the room to constrain the cubes from moving outside of the room. This seems to work well. Is there a way to use the cannon.js just for collisions? I don't want the momentum or gravity or any other feature. JUST the collision check and to stop it dead in its tracks when there is a collision.

Answer 1

You could create helper raycaster and place all colliders in separate container. After movement is applied to object move raycaster to its position and test if ray intersects any of other objects in container. If yes: reset previous position for that object. In case of cube colliders you could want to raycast from cube center in multiple directions with half of side length as ray length.

Answer 2

I know this post is from a long time ago, but hopefully a googler finds this helpful. I wasn't able to stop the user from moving my object, but I was able to move it back to its proper position immediately afterward by adding some logic to the render method.

For the original poster's problem with collisions, you could attach an event listener to the transform controls and request the object to be repositioned if it is in an illegal state.

transformControls.addEventListener('objectChange', (e) => {
  if (illegalPosition(this.obj.position)) {
    needsReset = true;
  }
  lastPosition = attachedObject.position.clone();
});

and then in your render function

if (needsReset) {
  attachedObject.position.set(lastPosition.x, lastPosition.y, lastPosition.z);
}

If this feels a little hacky, that's because it is. But for those of us who don't have the time or skill to read and modify TransformControls.js, I think it may prove helpful.

Answer 3

Ben S does have the best and most painless way to implement collision detection with transform controls. Within a event listener.

But I don't know if the time of writing his answer he knew about or if there even was a function called "requestAnimationFrame". All you would have to do for collision detection instead of simply resetting the models position is to set up your render call within a loop (60 fps) by adding "requestAnimationFrame" to your render (I call it animate since that is more descriptive) function.

Since it is in a loop and is called when the every frame the scene is drawn it will just not allow the object to move past the point of collision.

function animate() {

            // Called to draw onto screen every frame (60fps).
            requestAnimationFrame(animate);

            renderer.render(scene, camera);

}

And your event listener would just look like this.

control.addEventListener('objectChange', (e) => {

        // Collision detection code here. Set colliding model position here.
        // No need to set it in render

});