Drag moving Object

Questions
1

Hi all,
in my scene i have a planet (spehre) that moves in a circle rotation like in orbit. What i want to achieve is that the user can grab (drag) that planet und increase/decrease its radius and therefore the circle its rotating on while dragging. I have already testet the DragControls module which is working fine when the planet is not moving. When i activate the rotation the DragControls dont work anymore…
So i think i need somethink like a Axes-lock for the drag events.
Any help very appriciated!

Greetz

2

@jukoor, also I am facing same problem if you got solution ping me. see my question

3

It’s better to show a working example of what you try to do. For example, on https://jsfiddle.net/

4

@prisoner849 . see here. I need to ,obj drag and move the obj, on right click its rotating and panning is not user frndly,

5

We’re in the thread of another question, so I expect an example of code from the topic starter, not from you (I’m sorry, if it sounds not very polite).
Your question is different from this one. The common thing is that you both use Three.js.

1 Like
6

Rather than dragging the obect (because how do you drag it and it keep moving at the same time? That doesn’t make sense), you can let the user drag the orbit ring (perhaps make sure the ring is highlighted when hovering), then dragging increases the radius of the ring (and the plent keeps moving around the ring. I have a feeling this approach will have a better UX.

As for implementation, I’m not sure. Maybe you can scale the size of the radius on drag. It looks like DragControls are for moving objects, not resizing them or changing a property like radius. So you probably need to use a raycaster and a regular mousemove event on the canvas. FOr each position (each event) you use the ray caster to see if the user clicked/pressed on the ring, if so you adjust the radius on further drag.

7

Yep, THREE.Raycaster() + mouse/touch events for checking the intersection with the planet. Then mouse/touch move will indrease/decrease the radius of orbit.
As the topic starter didn’t provide an example, I dare to suppose that it’s something like that:

https://jsfiddle.net/prisoner849/t3mowjcy/ (made it about a year ago)

Having this jsfiddle as a base, the only thing, which needs to be changed with “mousemove” is:

  earth_container.position.x = -Math.cos(time) * 10;
  earth_container.position.z = -Math.sin(time) * 10;

in the animate() function, where 10 is the radius of orbit :slight_smile:

AxialTilt

1 Like