CODEWITHSUNDEEP
htmlthree.js
nelsonwrong
nelsonwrong

Reputation: 241

three.js - How to rotate a object with mouse (but not using camera)

I want to create a lot of objects and rotate each of them separately using the mouse. So far, I can select one of the objects with the mouse, but I can't use the mouse for an object rotation.

  1. As the mouse only has mouse.x = event.clientX - windowHalfX; mouse.y = event.clientY - windowHalfY;, I only know how to use the mousemove and mousedown event handlers to change the SELECTED.rotation.y and SELECTED.rotation.x (where SELECTED is the selected object) – how can I control the SELECTED.rotation.z too?

  2. If the selected object is upside down, the x-rotation will also backwards which seems not very preferable. Is there any way to modify this?

Lots of the examples I found use camera rotation rather actually rotating the object. I'd like to find an solution that can rotate the object without a camera change.

Upvotes: 1

Views: 3067

Answers (1)

Sebastian Sachtleben
Sebastian Sachtleben

Reputation: 518

You should check out the given control examples from three.js. They are not comfortable and mostly you need to copy them and modify like you want. But they take an object which is the controller this could be the camera or object. Here is a small example:

yawLeft = -((event['pageX'] - fullWidth) - halfWidth) / halfWidth;
pitchDown = ((event['pageY'] - fullHeight) - halfHeight) / halfHeight;

rotationVector.x = (-pitchUp + pitchDown);
rotationVector.y = (-yawRight + yawLeft);
rotationVector.z = (-rollRight + rollLeft);

var tmpQuaternion = new THREE.Quaternion();
tmpQuaternion.set(rotationVector.x * rotMult, rotationVector.y * rotMult, rotationVector.z * rotMult, 1).normalize();
object.quaternion.multiplySelf(tmpQuaternion);

object could be camera or model. It does not matter because camera is an THREE.Object3D also.

Upvotes: 1

Related Questions