Help to work DragControls

🌵 Needle Engine
61

If i may, creating the component from scratch will both help you understand typescript more and DragControls seem to be quite complex and thus not beginner friendly.

I would recommend these:
https://engine.needle.tools/docs/getting-started/typescript-essentials.html
https://engine.needle.tools/docs/getting-started/for-unity-developers.html
https://engine.needle.tools/docs/scripting.html

So basically what you want to do is handle the Pointer Down here, here’s snipped with PointerClick, so just change that to IPointerDownHandler.
https://engine.needle.tools/docs/scripting-examples.html#receive-clicks-on-objects

So when a user presses down on the object, you should set a boolean to true and save what pointer index it was. (that is important for mobile multi touch support)

Then in update, if the boolean is true get the mouse delta from context.input and move the object by that delta. Also check for PointerUp (again context.input) with the saved pointer index as the argument, if the pointer is up then set the isDragging to false. (that means the user left the finger and stopped dragging)

And you are basically there, i can’t really help you more then that. Please try it your self, read through the docs, it is a big topic, it might take time :slight_smile:

-----

if something wouldn’t be clear, don’t be afraid to ask, but create a new thread for that. Also you can’t expect to get a prefect or complete solution out of samples or support. You need to write it yourself.

62

Kipash, please help, but how to find out in the needle mouse delta?

by user 1101049107931480066

63

this.context.input.getPointerPositionDelta(0)

64

Great! Awesome

by user 1101049107931480066

65

please tell me what could be the problem?

update()
{
          if(this.context.input.getPointerPressed(0))
  {
    console.log("POINTER DOWN");   
  }
        if (this.context.input.getPointerPressed(0)) 
  {
  const pointerDelta = this.context.input.getPointerPositionDelta(0);
  if (pointerDelta?.x !== undefined && pointerDelta?.y !== undefined) 
    {                   this.tree?.position.set(pointerDelta?.x, pointerDelta?.y, 0);
    }
  }
        console.log(this.context.input.mousePosition);
    }

2023-07-08_22.21.15.mov

by user 1101049107931480066

66

could be:

  • OrbitControls being still active while you drag the object so youre effectivel rotating the camera at the same time?
  • you’re not adding the delta.
  • the position delta is in screenspace (x and y delta of the mouse cursor) but you want to move in worldspace !?
67

Yes, I want the object to move around the scene. Above in the code, I described how I change the data of my tree

by user 1101049107931480066

68

the camera itself does not move and is disabled Orbit Controls

by user 1101049107931480066

69

You are also not adding the movement delta to your dragged object (you just copy the last frame delta to the objects position so it always jumps back at it’s previous place / around 0)

70

Sir, how can I do it better?

by user 1101049107931480066

71

If you want to actually change the position you need to add it to the position. Im just on the phone right now so cannot really write code.

But even then the screenspace position wont be enough / what you want because x in screenspace can be any direction in 3d when you just set it to the object position.x (maybe it works in your case if you just have a 2d sprite).

72

But try doing something like position.x += delta x

73

And also take a look at the code in dragcontrols as a reference for 3d dragging

74

The part most interesting for you is in the draghelper in the bottom of the file

75

how to decrease the sensitivity?:sweat_smile:
2023-07-09_01.15.26.mov

by user 1101049107931480066

76

Just multiply by some factor (its good practice to also multiply by this.context.time.deltaTime to be framerate independent)

77

+= delta.x * this.context.time.deltaTime * 10; for example

78

wow! Awesome. Thanks

by user 1101049107931480066