# Increase efficiency of Collision

**URL:** <https://discourse.threejs.org/t/increase-efficiency-of-collision/68073>\
**Category:** Questions\
**Tags:** drag-controls, geometry\
**Created:** [July 12, 2024, 1:00pm UTC](https://discourse.threejs.org/t/increase-efficiency-of-collision/68073 "2024-07-12T13:00:22Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [July 12, 2024, 1:00pm UTC](https://discourse.threejs.org/t/increase-efficiency-of-collision/68073/1 "2024-07-12T13:00:22Z")

</div>

I have implemented collision with `DragControl` but I am confused with its unusual behaviour.

So if the geometry is being dragged slowly and then collides with the wall the precision of its collision is too good. But if the same geometry is being dragged way too fast it leaves a gap between the wall and the object itself. Here’s the sandbox for better visuals:

[https://codesandbox.io/p/sandbox/dragging-html-5g6nvk](https://codesandbox.io/p/sandbox/dragging-html-5g6nvk)

Also if anyone that is a professional in R3F and can guide me why the same code works with `DragControls` by `three.js` but not with `DragControls` provided by `drei` or `useDrag` I’ll be grateful, I have been trying to make this work with `useDrag` and `DragControls` but it doesnt seem to work hence I have to use `useEffect` for the drag to take effect.

If anyone needs I can also link the same collision made in vanilla `three.js`.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 12, 2024, 2:12pm UTC](https://discourse.threejs.org/t/increase-efficiency-of-collision/68073/2 "2024-07-12T14:12:03Z")

</div>

Break distance of dragging to parts to check all parts for collision.

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [July 12, 2024, 5:51pm UTC](https://discourse.threejs.org/t/increase-efficiency-of-collision/68073/3 "2024-07-12T17:51:09Z")

</div>

Hmm that’s a nice idea, can you give me an example regarding this I am kinda bad with this stuff. 😄

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 13, 2024, 6:43am UTC](https://discourse.threejs.org/t/increase-efficiency-of-collision/68073/4 "2024-07-13T06:43:44Z")

</div>

Change this code:

```javascript
dragged_position=new THREE.Vector(50,20,40);
direction=new THREE.Vector().subVectors(dragged_position,mesh.position).normalize();
dragged_distance=mesh.position.distanceTo(dragged_position);
small_distance=0.1;
while(dragged_distance>0){
mesh.position.add(direction.x*small_distance,direction.y*small_distance,direction.z*small_distance);
if(collision()){ break; }
dragged_distance-=small_distance;
}

```

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [July 13, 2024, 7:05am UTC](https://discourse.threejs.org/t/increase-efficiency-of-collision/68073/5 "2024-07-13T07:05:58Z")

</div>

Should I make this using `useDrag` since the variable `dragged_position` contains the position the object should drag to if I am not wrong.

Thanks for the help though you really helped me with that one.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 13, 2024, 8:21am UTC](https://discourse.threejs.org/t/increase-efficiency-of-collision/68073/6 "2024-07-13T08:21:38Z")

</div>

does this help? [https://codesandbox.io/p/sandbox/drag-n-drop-with-physics-and-collisions-9pjzm6](https://codesandbox.io/p/sandbox/drag-n-drop-with-physics-and-collisions-9pjzm6) it would leave collision to the physics engine.

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [July 13, 2024, 8:31am UTC](https://discourse.threejs.org/t/increase-efficiency-of-collision/68073/7 "2024-07-13T08:31:04Z")

</div>

Thanks for replying, I did check this example when I was starting to work on this example but you see that I need to move the objects using DragControls or using a div, I was unable to make it move using the div so instead I ended up using DragControls.

If this was working with DragControls this would have saved me soo much time.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 13, 2024, 12:20pm UTC](https://discourse.threejs.org/t/increase-efficiency-of-collision/68073/8 "2024-07-13T12:20:30Z")

</div>

I dont know english good and how work drag function. You need add code to drag code. And then move object in that place of code insert `dragged_position` which is mean drage position. But object move in “while” code with small steps