Drag objects along circular path (Raycaster)

Questions
1

Hi,
How could I drag an object along a circular path using raycaster?

1 Like
2

Looking for a solution to this too!

3

Hi,
Here’s a technique I use often…

Create an empty object at the center of your desired curricular path. Ie: 0,0,0.

Place your object at desired distance from the empty object.

Parent your object to the empty object.

Have whenever you drag on your object to move it, only rotate the parent empty object.

EDIT: I misread your post thinking you wanted to drag and MOVE along the circular path, but you said you want to drag and drop, having the dropped object placed on the circular path.

In that case, I’d try maybe following the same as above, but have an invisible (texture invisible but raycast visible) ring shape(or toroid) chopped into sections, say, 36.

If user clicks in space held by ring section 24, then an object is cloned via the first child object I described above an new Rotator Empty for it… then degToRad rotate that RotatorEmpty to 240deg (per the section 24 re the example)

Im Just brainstorming and maybe there’s an easier solution.

1 Like
4

Thank you, yes, I wanted only to move an object along the circular path. I think I formulated my question incorrectly, I will edit it. I will try to implement the first solution. How could I calculate that angle by which I need to rotate the empty object?

5

I’d use

> degtorad

6

There is a Sphere Class which you can use for calculations.
It has a function clampPoint, which will take an Vector3 as input and returns the closest point to that Vector on the edge of the sphere.
Unfortunately there is no “Circle” class to keep it 2D, but maybe if you set one of the input vectors values to the center of the Sphere. you should always stay in a circular range.

For example:

let mouse = new THREE.Vector2() // SET MOUSE POSITION
let target = new THREE.Vector3()

let sphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0), 2) // Center, Radius

sphere.clampPoint(new THREE.Vector3(mouse.x, 0, mouse.y), target) // Input, Output

obj.position.copy(target)
1 Like