Rotating THREE.Group object(s) on click and drag?

Questions
, , ,
1

Hey, at the moment, I was trying to implement functionality for a project I’m working on, where clicking and dragging in a direction causes multiple THREE.Group objects to rotate in that same direction about a set axis outside of the object itself – either locked to the x-, y-, or z- axis – without having a visible helper. I was wondering what the best approach would be to doing that.

At the moment, I’ve tried using TransformControls like this, but it didn’t work (nothing moved by clicking and dragging):

let control = new TransformControls(camera, renderer.domElement)
control.setMode('rotate')
control.addEventListener( 'change', animate )
control.addEventListener( 'dragging-changed', function ( event ) {
    orbitControls.enabled = ! event.value;
});

control.attach(<mesh group object>)

I also tried adding the helper to the scene with the following, but getHelper() had been undefined when I tried calling it:

const gizmo = control.getHelper();
scene.add(gizmo);

Another approach I tried was setting up a function to activate on drag using .on() like in this post, but I keep getting that .on() isn’t a function when I try calling it.

2

.on() is a method extended by three.ez/main package, to add events.

You should implement that logic manually to detect camera position change.

3

Thanks for mentioning three.ez package – I’ll give it a try for what I’m doing since I didn’t need to detect camera position change (just the cursor and the object in the scene themselves)!

1 Like